/* ============================================================================
   ZERO11 FRAMEWORK — Portfolio & Packaging Transformation
   Static V1. No build step, no dependencies.

   The tokens and type roles below are carried over unchanged from the ZERO11
   website (04_Design/homepage) so the Framework reads as the same publication:
   same greyscale, same fluid scale, same eyebrow / editorial / statement roles,
   same underlined text-link CTA. Everything added here is a workbook component
   (rail, prompt, field, upload) built from those same parts.
   ========================================================================= */

/* --- Tokens --------------------------------------------------------------- */
:root{
  --bg:#F2F2F2;                 /* page background — never pure white */
  --fg:#000000;
  --dark:#000000;               /* black sections and footer */
  --on-dark:#F2F2F2;
  --muted:#595959;              /* secondary text on --bg  — 6.3:1 */
  --muted-dark:#9A9A9A;         /* secondary text on black — 7.4:1 */
  --hair:rgba(0,0,0,.18);       /* decorative rules */
  --hair-dark:rgba(242,242,242,.22);
  --field-line:#858585;         /* interactive boundaries — 3.3:1, WCAG 1.4.11 */
  --wash:rgba(0,0,0,.035);      /* the only fill used, for drag / hover states */
  --placeholder:#D8D8D8;

  /* Sofia Pro: everything structural. IvyPresto Display: large italic
     editorial statements only — the kit ships a single cut, 300 italic. */
  --sans:"sofia-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"ivypresto-display",Georgia,"Times New Roman",serif;

  /* Fluid scale — 380px → 1600px */
  --step--2:clamp(.66rem,.63rem + .14vw,.74rem);
  --step--1:clamp(.74rem,.71rem + .16vw,.83rem);
  --step-0: clamp(.9rem,.86rem + .22vw,1.03rem);
  --step-1: clamp(1.02rem,.95rem + .34vw,1.25rem);
  --step-2: clamp(1.5rem,1.1rem + 1.9vw,2.9rem);
  --step-3: clamp(1.9rem,1.2rem + 3.1vw,4.05rem);
  --display:clamp(3rem,.6rem + 10.4vw,10.2rem);
  --display-sm:clamp(2.4rem,1.2rem + 4.9vw,6.1rem);

  --gutter:clamp(1.25rem,5vw,5rem);
  --section-y:clamp(4.5rem,11vh,9.5rem);
  --maxw:1680px;
  --measure:56rem;              /* reading width for workbook content */

  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--fg);color:var(--bg)}
[hidden]{display:none!important}   /* holds against the display rules below */

/* --- Accessibility -------------------------------------------------------- */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:1px}
/* Headings are focused on arrival so screen readers announce the new screen.
   They cannot be reached by tab, so they carry no visible ring. */
[tabindex="-1"]:focus{outline:none}
.skip-link{
  position:absolute;top:0;left:0;z-index:200;
  transform:translateY(-120%);
  background:var(--fg);color:var(--bg);
  padding:.85rem 1.4rem;font-weight:700;letter-spacing:.02em;
}
.skip-link:focus{transform:translateY(0)}

/* --- Layout primitives ---------------------------------------------------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,2rem)}
.measure{max-width:var(--measure)}

/* --- Type roles ----------------------------------------------------------- */
.label{
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
}
.label--muted{color:var(--muted);font-weight:400}

.editorial{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:var(--display);
  line-height:.94;
  letter-spacing:-.015em;
  margin:0;
}
.editorial--sm{font-size:clamp(2.1rem,1.3rem + 3.6vw,4.8rem);line-height:.98}
.editorial--xs{font-size:clamp(1.7rem,1.1rem + 2.4vw,3.2rem);line-height:1.02}

.statement,.heading{
  font-family:var(--sans);
  font-weight:700;
  font-size:var(--step-3);
  line-height:1.06;
  letter-spacing:-.022em;
  text-transform:uppercase;
  margin:0;
}
.statement--lg{font-size:var(--display-sm);line-height:1}
.heading--sm{font-size:var(--step-2)}

.body{font-size:var(--step-1);line-height:1.5;letter-spacing:-.005em}
.body--muted{color:var(--muted)}
.body--sm{font-size:var(--step-0);line-height:1.6}
.note{font-size:var(--step--1);color:var(--muted);line-height:1.6}
.tm{font-size:.55em;vertical-align:.62em;letter-spacing:.02em}
.stack > * + *{margin-top:1rem}
.stack--wide > * + *{margin-top:clamp(1.4rem,3vh,2rem)}

/* Underlined text link with an arrow — the site's only CTA style */
.tlink{
  display:inline-flex;
  align-items:baseline;
  gap:.55em;
  position:relative;
  padding-bottom:.3em;
  border-bottom:1px solid currentColor;
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.tlink .arw{display:inline-block;transition:transform .5s var(--ease-out)}
.tlink:hover .arw,.tlink:focus-visible .arw{transform:translateY(3px)}
.tlink--back:hover .arw,.tlink--back:focus-visible .arw{transform:translateX(-3px)}
.tlink--soft{font-weight:400;letter-spacing:.06em;text-transform:none;font-size:var(--step-0)}
.tlink--quiet{color:var(--muted);font-weight:400;letter-spacing:.08em;font-size:var(--step--1)}

/* Small tracked tag in a hairline box — "Optional", file types, status */
.tag{
  display:inline-block;
  border:1px solid var(--hair);
  padding:.35em .7em .3em;
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1;
  white-space:nowrap;
}
.tag--solid{background:var(--fg);border-color:var(--fg);color:var(--bg)}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  border:1px solid var(--fg);
  background:var(--fg);
  color:var(--bg);
  padding:clamp(.95rem,1.4vw,1.15rem) clamp(1.7rem,2.8vw,2.6rem);
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-align:center;
  transition:background-color .45s var(--ease-out),color .45s var(--ease-out);
}
.btn:hover{background:transparent;color:var(--fg)}
.btn--ghost{background:transparent;color:var(--fg)}
.btn--ghost:hover{background:var(--fg);color:var(--bg)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn .arw{transition:transform .5s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}

/* --- Masked title lines --------------------------------------------------
   The site's hero reveal, reused on the cover. The mask needs headroom below
   the baseline or the tight display leading clips descenders (g, y, p). */
.beat{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.beat > span{
  display:block;
  transform:translate3d(0,104%,0);
  transition:transform 1.2s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.is-ready .beat > span{transform:none}

/* ==========================================================================
   [COMPONENT] Application bar
   The Framework has no site navigation — the bar carries the mark, the
   project it belongs to, and the autosave state. Nothing else.
   ========================================================================== */
.appbar{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:var(--bg);
  padding-block:clamp(1rem,1.7vw,1.6rem);
  transition:box-shadow .4s;
}
.appbar.is-solid{box-shadow:0 1px 0 rgba(0,0,0,.08)}
.appbar__inner{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}

.brand{display:flex;align-items:center;flex:0 0 auto;transition:opacity .4s var(--ease-out)}
/* The full ZERO11 logotype, as supplied. Sized so it sits with the header's
   small caps rather than dominating them; proportions are never touched. */
.brand__logo{display:block;width:clamp(76px,7.4vw,104px);height:auto;color:var(--fg)}
.brand__logo path{fill:currentColor}
.brand:hover{opacity:.6}

.appbar__project{
  margin-left:auto;
  display:flex;
  align-items:baseline;
  gap:.6em;
  font-size:var(--step--2);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:right;
}
.appbar__project b{font-weight:700;color:var(--fg)}
.appbar__project .sep{color:var(--hair)}
@media (max-width:539px){.appbar__project .opt{display:none}}

/* Autosave state — a word, not a widget */
.saved{
  flex:0 0 auto;
  font-size:var(--step--2);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:0;
  transition:opacity .5s var(--ease-out);
}
.saved.is-visible{opacity:1}

/* ==========================================================================
   Screens
   Every step of the journey is a section; one is active at a time.
   ========================================================================== */
.screen{display:none}
.screen.is-active{display:block}
.screen__pad{padding-block:clamp(6.5rem,15vh,10rem) clamp(3rem,8vh,6rem)}
.screen.is-active .screen__pad{animation:screen-in .75s var(--ease-out) both}
@keyframes screen-in{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}

/* ==========================================================================
   [COMPONENT] Title screen — Welcome
   Set like the cover of a document: eyebrow, statement, editorial line,
   standfirst, then the facts of the engagement on hairlines.
   ========================================================================== */
.cover__eyebrow{grid-column:1 / -1;margin-bottom:clamp(1.4rem,4vh,2.6rem)}
.cover__title{grid-column:1 / -1}
.cover__sub{grid-column:1 / -1;margin-top:.12em}
.cover__intro{grid-column:1 / -1;margin-top:clamp(1.8rem,4.5vh,3rem)}
.cover__intro p{max-width:52ch}
.cover__meta{grid-column:1 / -1;margin-top:clamp(2.5rem,7vh,4.5rem)}
.cover__actions{grid-column:1 / -1;margin-top:clamp(2.2rem,6vh,3.6rem)}
/* Every element of the cover starts on the same left-hand grid line — the
   alignment logic of the ZERO11 website. Only the measure varies. */
@media (min-width:900px){
  .cover__title{grid-column:1 / 11}
  .cover__sub{grid-column:1 / 11}
  .cover__intro{grid-column:1 / 7}
  .cover__meta{grid-column:1 / 10}
  .cover__actions{grid-column:1 / 9}
}
@media (min-width:1600px){
  /* On very wide screens the composition holds its measure instead of
     stretching away from the left edge */
  .cover__title,.cover__sub{grid-column:1 / 9}
  .cover__meta{grid-column:1 / 8}
}

.meta{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:760px){
  .meta{grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem)}
}
.meta__item{
  border-top:1px solid var(--hair);
  padding-block:clamp(.9rem,2vh,1.2rem);
}
.meta__key{font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.meta__val{margin-top:.35rem;font-size:var(--step-0);font-weight:700;letter-spacing:.02em}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.2rem,3vw,2.2rem)}
.actions--split{justify-content:space-between}
.cover__note{margin-top:clamp(1.2rem,3vh,1.8rem)}

/* ==========================================================================
   [COMPONENT] Document screens — Participant, Verify, Introduction, Thank You
   A single narrow column. No panels, no boxes.
   ========================================================================== */
.doc{grid-column:1 / -1}
@media (min-width:900px){.doc{grid-column:1 / 8}}
@media (min-width:1280px){.doc{grid-column:1 / 7}}
.doc__eyebrow{margin-bottom:clamp(1.2rem,3vh,2rem)}
.doc__intro{margin-top:clamp(1.4rem,3.5vh,2.2rem)}
.doc__intro p{max-width:56ch}
.doc__form{margin-top:clamp(2.5rem,6vh,4rem)}
.doc__actions{margin-top:clamp(2.5rem,6vh,4rem)}

/* --- Fields --------------------------------------------------------------- */
.field-set{display:grid;gap:clamp(1.8rem,4vh,2.6rem)}
.field-set--optional{
  margin-top:clamp(2.5rem,6vh,4rem);
  padding-top:clamp(2rem,5vh,3rem);
  border-top:1px solid var(--hair);
}
.field-set__note{margin-bottom:clamp(1.4rem,3vh,2rem);display:flex;align-items:center;gap:1rem}

.field{display:block}
.field__label{
  display:block;
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:.75rem;
}
.field__label .opt{
  font-weight:400;
  letter-spacing:.13em;
  color:var(--muted);
  margin-left:.6em;
}
.field__input,.field__textarea{
  width:100%;
  font-family:inherit;
  font-size:var(--step-1);
  line-height:1.55;
  color:var(--fg);
  background:transparent;
  border:1px solid var(--field-line);
  border-radius:0;
  padding:clamp(.85rem,1.6vw,1.1rem) clamp(.9rem,1.8vw,1.25rem);
  transition:border-color .3s var(--ease-out);
  -webkit-appearance:none;
  appearance:none;
}
.field__textarea{
  display:block;
  min-height:8.5rem;
  resize:vertical;
  overflow:hidden;              /* height is driven by the auto-grow script */
}
.field__input:hover,.field__textarea:hover{border-color:var(--fg)}
.field__input:focus,.field__textarea:focus{
  border-color:var(--fg);
  outline:1px solid var(--fg);  /* reads as a 2px rule — no shadows anywhere */
  outline-offset:0;
}
.field__input::placeholder,.field__textarea::placeholder{color:var(--muted);opacity:.75}
.field__hint{margin-top:.6rem;font-size:var(--step--1);color:var(--muted)}

/* Errors are carried by text, never by colour alone */
.field__error{
  display:none;
  margin-top:.7rem;
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.field__error::before{content:"— "}
.field.has-error .field__error{display:block}
.field.has-error .field__input,
.field.has-error .field__textarea{border-color:var(--fg);outline:1px solid var(--fg);outline-offset:0}

/* Verification code — one wide, widely tracked input */
.code-input{
  width:100%;
  max-width:22rem;
  font-family:inherit;
  font-size:clamp(1.6rem,1rem + 2.2vw,2.4rem);
  font-weight:700;
  letter-spacing:.42em;
  text-indent:.42em;            /* keeps the tracked run optically centred */
  text-align:center;
  color:var(--fg);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--field-line);
  border-radius:0;
  padding:.5em .2em .35em;
  transition:border-color .3s var(--ease-out);
  -webkit-appearance:none;
  appearance:none;
}
.code-input:focus{border-bottom-color:var(--fg);outline:none;border-bottom-width:2px;padding-bottom:calc(.35em - 1px)}
.code-input::placeholder{color:var(--hair);letter-spacing:.42em}
.verify__resend{margin-top:clamp(1.6rem,4vh,2.2rem)}

/* ==========================================================================
   [COMPONENT] Chapter — rail + body
   ========================================================================== */
.chapter__inner{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,5vh,3.6rem)}
@media (min-width:1080px){
  .chapter__inner{
    grid-template-columns:minmax(0,3fr) minmax(0,9fr);
    gap:clamp(2rem,5vw,5rem);
    align-items:start;
  }
  /* The contents stay in view while the chapter is worked through */
  .rail{position:sticky;top:clamp(6.5rem,12vh,8.5rem);align-self:start}
}
.chapter__body{max-width:var(--measure)}

/* --- Contents rail -------------------------------------------------------- */
.rail__title{margin-bottom:clamp(1.2rem,3vh,1.8rem)}
.rail__item{
  display:grid;
  grid-template-columns:2.6em 1fr auto;
  align-items:baseline;
  gap:.2em;
  padding-block:.62rem;
  color:var(--muted);
  transition:color .35s var(--ease-out);
}
.rail__num{
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.rail__name{
  font-size:var(--step--1);
  letter-spacing:.06em;
}
/* Completed chapters: full black plus a short rule at the measure's edge */
.rail__mark{
  width:18px;height:1px;
  background:currentColor;
  align-self:center;
  opacity:0;
  transition:opacity .4s var(--ease-out);
}
.rail__item.is-done{color:var(--fg)}
.rail__item.is-done .rail__mark{opacity:1}
.rail__item.is-current{color:var(--fg)}
.rail__item.is-current .rail__name,
.rail__item.is-current .rail__num{font-weight:700}
.rail__item:hover{color:var(--fg)}

.rail__count,.rail__bar{display:none}

@media (max-width:1079px){
  /* On small screens the contents collapse to position + a progress rule,
     and that rule is the only divider the head needs */
  .rail{padding-bottom:clamp(.4rem,1.5vh,.8rem)}
  .rail__title{display:none}
  .rail__list{display:flex}
  .rail__item{display:none;padding-block:0}
  .rail__item.is-current{display:grid;grid-template-columns:auto 1fr}
  .rail__item .rail__mark{display:none}
  .rail__count{
    display:block;
    font-size:var(--step--2);
    letter-spacing:.14em;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
    margin-bottom:.5rem;
  }
  .rail__bar{display:block;height:1px;background:var(--hair);margin-top:.9rem}
  .rail__bar span{display:block;height:1px;background:var(--fg);width:var(--p,0%);transition:width .6s var(--ease-out)}
}

/* --- Chapter head --------------------------------------------------------- */
.chapter__num{color:var(--muted);margin-bottom:clamp(.8rem,2vh,1.2rem)}
.chapter__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:1rem}
.chapter__intro{
  margin-top:clamp(1.4rem,3.5vh,2.2rem);
  max-width:54ch;
}

/* --- Prompts -------------------------------------------------------------- */
.prompts{
  margin-top:clamp(2.8rem,7vh,4.5rem);
  max-width:46rem;              /* generous to write in, still a readable line */
  display:grid;
  gap:clamp(2.6rem,6vh,4rem);
}
.prompt{display:grid;grid-template-columns:1fr;gap:0}
.prompt__num{
  display:block;
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  margin-bottom:.7rem;
}
.prompt__q{
  display:block;
  font-size:var(--step-1);
  line-height:1.35;
  letter-spacing:-.005em;
  margin-bottom:.9rem;
  max-width:46ch;
}
.prompt__help{
  margin-top:-.4rem;
  margin-bottom:.9rem;
  font-size:var(--step--1);
  color:var(--muted);
  max-width:52ch;
}
.prompt--optional{
  margin-top:clamp(.6rem,2vh,1.2rem);
  padding-top:clamp(2.2rem,5vh,3.2rem);
  border-top:1px solid var(--hair);
}
.prompt__opt{
  font-size:var(--step--2);
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-left:.8em;
}
.field__input--short{max-width:22rem}

/* --- Submission status ---------------------------------------------------- */
.submit-status:not(:empty){
  margin-top:clamp(2.5rem,6vh,4rem);
  padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid var(--hair);
  max-width:52ch;
}
.submit-status__detail{margin-top:.6rem}
.submit-status__action{margin-top:clamp(1rem,2.5vh,1.4rem)}

/* --- Chapter navigation --------------------------------------------------- */
.chapnav{
  margin-top:clamp(3rem,8vh,5rem);
  padding-top:clamp(1.6rem,4vh,2.4rem);
  border-top:1px solid var(--hair);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.5rem;
}

/* ==========================================================================
   [COMPONENT] Supporting materials
   ========================================================================== */
.drop{
  margin-top:clamp(2.2rem,5vh,3.2rem);
  border:1px solid var(--field-line);
  padding:clamp(2.6rem,7vw,4.5rem) clamp(1.4rem,4vw,3rem);
  text-align:center;
  transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out);
}
.drop.is-over{border-color:var(--fg);background:var(--wash)}
.drop__title{font-size:var(--step-1)}
.drop__hint{margin-top:.7rem;font-size:var(--step--1);color:var(--muted)}
.drop__browse{margin-top:clamp(1.4rem,3vh,2rem)}
.drop input[type="file"]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* The label is the button; the input inside it stays reachable by keyboard */
.drop__label{display:inline-flex;position:relative}
.drop__label:focus-within{outline:2px solid currentColor;outline-offset:4px}

/* Files refused before they are sent — over the upload limit */
.upload-notice:not(:empty){margin-top:clamp(1.4rem,3vh,2rem)}
.upload-notice__item{max-width:60ch}
.upload-notice__item + .upload-notice__item{margin-top:.6rem}

.filelist{margin-top:clamp(1.8rem,4vh,2.6rem)}
.filelist__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.8rem;
}
.file{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem,2.5vw,1.6rem);
  padding-block:clamp(.9rem,2vh,1.15rem);
  border-top:1px solid var(--hair);
}
.file:last-child{border-bottom:1px solid var(--hair)}
/* Visual placeholder for the file type — PDF, PPT, DOC, XLS, IMG, ZIP */
.file__type{
  width:46px;height:46px;
  border:1px solid var(--hair);
  display:grid;place-items:center;
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
}
.file__name{display:block;font-size:var(--step-0);word-break:break-word}
.file__meta{display:block;margin-top:.25rem;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.file__actions{display:flex;gap:clamp(.8rem,2vw,1.2rem);align-items:baseline}
.file__action{
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease-out),border-color .3s var(--ease-out);
}
.file__action:hover{color:var(--fg);border-bottom-color:currentColor}
/* A file still in flight reads as provisional until the backend confirms it */
.file.is-uploading{opacity:.6}

.suggest{
  margin-top:clamp(2.6rem,6vh,4rem);
  padding-top:clamp(1.6rem,4vh,2.4rem);
  border-top:1px solid var(--hair);
}
.suggest__list{
  margin-top:clamp(1.2rem,3vh,1.8rem);
  display:grid;
  grid-template-columns:1fr;
  gap:0 clamp(1.5rem,4vw,3rem);
}
@media (min-width:640px){.suggest__list{grid-template-columns:repeat(2,1fr)}}
.suggest__list li{
  padding-block:.7rem;
  border-top:1px solid var(--hair);
  font-size:var(--step-0);
  color:var(--muted);
}

/* ==========================================================================
   [COMPONENT] Thank you
   ========================================================================== */
.deliverables{
  margin-top:clamp(2rem,5vh,3rem);
  counter-reset:deliverable;
}
.deliverables li{
  counter-increment:deliverable;
  display:grid;
  grid-template-columns:3.2em 1fr;
  align-items:baseline;
  padding-block:clamp(.85rem,2vh,1.1rem);
  border-top:1px solid var(--hair);
  font-size:var(--step-0);
}
.deliverables li:last-child{border-bottom:1px solid var(--hair)}
.deliverables li::before{
  content:"0" counter(deliverable);
  font-size:var(--step--2);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--muted);
}
.closing{
  margin-top:clamp(3.5rem,9vh,6rem);
  max-width:18ch;
}


/* ==========================================================================
   [COMPONENT] Footer
   ========================================================================== */
.appfoot{
  border-top:1px solid var(--hair);
  padding-block:clamp(1.6rem,4vh,2.4rem);
  margin-top:clamp(2rem,5vh,4rem);
}
.appfoot__inner{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:var(--step--2);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.appfoot__inner p{margin:0}
.appfoot__link{
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease-out),color .3s var(--ease-out);
}
.appfoot__link:hover{color:var(--fg);background-size:100% 1px}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1;transform:none}
  .screen.is-active .screen__pad{animation:none}
}