.i.gold{color:var(--gold)}
.subhead{font:400 20px/1.3 var(--serif);color:var(--ink);margin:0;text-wrap:balance}
.kicker{font:400 24px/1.3 var(--hand);color:var(--accent);margin:0}
.caption{font:400 20px/1.3 var(--hand);color:var(--kraft-dark)}
h1.headline{font-style:italic;margin:24px 0 8px}
.kicker + h1.headline{margin-top:4px}
.prose h2.headline{font-style:italic;margin:32px 0 8px}
.prose .body+.body{margin-top:12px}
.polaroid-hero{position:relative;background:var(--card);border:1px solid var(--sand);border-radius:14px;padding:12px 12px 46px;box-shadow:0 10px 26px rgba(30,25,15,.30);margin:24px 0 32px}
.polaroid-hero .photo{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background-color:var(--sand)}
.polaroid-hero .photo svg{position:absolute;left:0;top:34%;width:100%;height:auto}
.polaroid-hero .caption{position:absolute;left:16px;bottom:10px}
.contact-row{margin-top:24px}
.contact-row .label{display:block}
.contact-row a{display:inline-block;padding:11px 0;font:400 16px/1.75 var(--serif);color:var(--ink)}
.contact-row .hand{display:inline-block;padding:4px 0;font:400 24px/1.3 var(--hand);color:var(--accent);text-decoration:none}
.notice{position:relative;background:var(--parchment);border:1px solid var(--sand);border-radius:14px;padding:32px 24px;box-shadow:var(--sh-relief);text-align:center;margin-top:40px}
.notice::before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:28px;margin-left:-55px;background:var(--paper-deep);opacity:.8;transform:rotate(2deg)}
.notice .headline{font-style:italic;margin:8px 0 12px}
.notice .btn-primary{margin-top:20px}
.notice .body{text-align:left}
.legal h2.subhead{margin:28px 0 8px}
.legal .body+.body{margin-top:8px}
.legal .version{margin-top:4px}
.legal a{color:var(--ink)}
.legal ol{margin:8px 0 0;padding-left:20px;font:400 16px/1.75 var(--serif);color:var(--ink-soft)}
.notfound{padding-top:24px}
.notfound .links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:16px}
main a.hand{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:400px){.notice{padding:32px 16px}.btn-primary{padding:10px 16px}}
/* --- desktop : colonne de lecture 820 px (DESIGN.md › Layout) --- */
@media (min-width:768px){
  main.prose,main.legal,main.notfound,main:has(> .contact-row){max-width:868px}
  .polaroid-hero{max-width:520px;margin:32px auto 40px}
  h1.headline{font-size:29px}
  .notice{padding:40px 44px}
  .notice .btn-primary{width:auto;display:inline-flex;padding:10px 26px}
}
/* L'atelier en desktop : photo d'un côté, récit de l'autre (DESIGN.md › Layout, récit de l'atelier) */
@media (min-width:768px){
  main.prose{max-width:1180px}
  main.prose .polaroid-hero{float:left;width:min(45%,520px);margin:8px 48px 24px 0}
  main.prose::after{content:"";display:block;clear:both}
}