/* The pages outside the film: the forms, the notice and the 404. Every colour, size, gap and
   corner is a token from brand/system/tokens.css. */
:root{--inset:max(var(--space-5),calc((100% - var(--wide))/2 + var(--space-5)))}
/* A button and a hairline follow the nearest palette, not the nearest ancestor that names one. */
:root,[data-theme="light"]{--btn:var(--card);--btn-edge:transparent}
[data-theme="dark"]{--btn:transparent;--btn-edge:var(--accent)}
*{box-sizing:border-box}
body{display:flex;flex-direction:column;min-height:100dvh;margin:0;background:var(--page);color:var(--ink);font:var(--text-m)/var(--lh-body) var(--body);overflow-x:clip}
.foot{margin-top:auto}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);text-wrap:balance}
p,ul,ol{margin:0}
a{color:var(--accent)}
.skip-link{position:absolute;z-index:5;top:var(--space-2);left:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--accent-fill);color:var(--on-accent);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--space-5)}
.lede{max-width:var(--measure);font-size:var(--text-l);line-height:var(--lh-snug)}
.fine{font-size:var(--text-s);color:var(--muted)}

/* Filled is what hands something to spifix; an outline is still the visitor's.
   On a dark ground the filled button takes a light edge, to hold against it. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:var(--space-2) var(--space-5);border:1px solid var(--muted);border-radius:var(--radius-touch);background:var(--btn);color:var(--ink);font:inherit;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.main{border-color:var(--btn-edge);border-radius:var(--radius-pill);background:var(--accent-fill);color:var(--on-accent)}
.btn.main:hover{filter:brightness(1.1)}
.btn:active{filter:brightness(.95)}

/* The notice and the 404: one reading column. */
.prose{display:grid;gap:var(--space-4);padding-block:var(--space-7) var(--space-8)}
.prose>*{max-width:var(--measure-wide)}
.prose h1{font-size:clamp(var(--text-2xl),6vw,var(--text-3xl));margin-bottom:var(--space-2)}
.prose h2{font-size:var(--text-xl);margin-top:var(--space-5)}
.prose p{overflow-wrap:anywhere}
.ways{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3)}

/* The forms page. */
.contact{display:grid;gap:var(--space-6);padding-block:var(--space-7) var(--space-8)}
.contact h1{font-size:clamp(var(--text-2xl),6vw,var(--text-3xl))}
.contact h2{font-size:var(--text-xl)}
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--space-5);align-items:start}
.forms section{display:grid;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-box);background:var(--card)}
.forms section:target{border-color:var(--accent)}
form{display:grid;gap:var(--space-4);justify-items:start}
.field{display:grid;gap:var(--space-1);width:100%}
label,legend{font-size:var(--text-s);font-weight:600}
label span{font-weight:400;color:var(--muted)}
input[type="email"],input[type="text"],textarea{width:100%;min-height:var(--touch);padding:var(--space-2) var(--space-3);border:1px solid var(--muted);border-radius:var(--radius-touch);background:var(--page);color:var(--ink);font:inherit}
fieldset{display:flex;flex-wrap:wrap;gap:0 var(--space-5);margin:0;padding:0;border:0}
legend{padding:0}
fieldset label{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);font-size:var(--text-m);font-weight:400}
input[type="radio"]{width:var(--space-5);height:var(--space-5);margin:0;accent-color:var(--accent-fill)}

/* A refusal is the visitor's to fix, so it is ochre; a confirmed send is ours, so it is green. */
.consent{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--space-3)}
.consent label{font-weight:400;line-height:var(--lh-snug)}
.consent .msg{grid-column:1/-1}
input[type="checkbox"]{width:var(--space-5);height:var(--space-5);margin:0;accent-color:var(--accent-fill)}
.msg:empty,.status:empty{display:none}
.msg,.status{font-size:var(--text-s);line-height:var(--lh-snug);color:var(--ochre)}
.status{font-weight:600}
.status.sent{color:var(--accent)}
[aria-invalid="true"]{border-color:var(--ochre-fill)}
fieldset .msg{flex-basis:100%}
.btn:disabled,.btn.main:disabled{border-color:var(--muted);background:transparent;color:var(--muted);filter:none;cursor:default}