/* =========================================================
   Fewer Words — mockup 2, "The Press"
   Two inks on press stock: graphite and sapphire.
   The blue stroke is the only instrument: it strikes words,
   underlines links, offsets every block, and rings focus.
   ========================================================= */

:root{
  /* press stock — a warm grey sheet, not white, not cream */
  --stock:    #e9e6df;
  --stock-2:  #ddd9cf;   /* deeper sheet, for bands and fields */
  --stock-3:  #f4f2ec;   /* the fresh galley, brightest surface */

  /* graphite ink */
  --ink:      #1c1a17;
  --ink-2:    #46413a;
  --ink-3:    #6b6459;

  /* the pencil — sapphire, with a royal blue for dark grounds */
  --mark:        #0f52ba;   /* sapphire: the stroke, on stock */
  --mark-bright: #4a7fe8;   /* royal blue: the same stroke on ink */
  --mark-deep:   #0b3a8f;   /* deep royal: as a ground, and for marked errors */

  --rule:     #c4bfb3;

  --display: "Archivo", "Arial Narrow", Helvetica, Arial, sans-serif;
  --body:    "Literata", Georgia, "Times New Roman", serif;
  --typed:   "Courier Prime", "Courier New", ui-monospace, monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 52px);
  --ease: cubic-bezier(.2,.7,.3,1);

  /* how far the sapphire plate sits off register */
  --off: 5px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* large-print baseline: every rem below scales from here.
     Raise 19px for bigger type across the whole page. */
  font-size:clamp(17px, .3vw + 15.7px, 19px);
}

body{
  margin:0;
  background:var(--stock);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.18rem;
  line-height:1.74;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* halftone dot screen over the whole sheet */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9998;
  opacity:.055;
  background-image:radial-gradient(circle at 1px 1px, rgba(28,26,23,.9) 1px, transparent 0);
  background-size:4px 4px;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--stock);
  padding:12px 20px; z-index:10000;
  font-family:var(--display); font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{
  outline:3px solid var(--mark);
  outline-offset:3px;
}

/* ---------- shared type ---------- */

.h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 76, "wght" 800;
  font-weight:800;
  font-size:clamp(2.1rem, 5vw, 3.5rem);
  line-height:.96;
  letter-spacing:-.005em;
  margin:.1em 0 .5em;
  max-width:16ch;
}
.h2 em{ font-style:normal; color:var(--mark); }

.label{
  font-family:var(--display);
  font-variation-settings:"wdth" 118, "wght" 700;
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 .2em;
  display:flex; align-items:center; gap:.7em;
}
.label::before{
  content:"";
  width:26px; height:4px;
  background:var(--mark);
  flex:none;
}

.kicker{
  font-family:var(--typed);
  font-size:.86rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 1.4rem;
}

.lead{ font-size:1.36rem; line-height:1.6; }
.sub{ font-size:1.2rem; color:var(--ink-2); max-width:44ch; }
.sub--wide{ max-width:56ch; }

strong, b{ font-weight:700; }
em{ font-style:italic; }

/* ---------- the misregistered plate ---------- */

.dbl{
  position:relative;
  display:inline-block;
}
.dbl__off{
  position:absolute;
  inset:0;
  color:var(--mark);
  mix-blend-mode:multiply;
  transform:translate(calc(var(--off) * -1), var(--off));
  transition:transform .7s var(--ease);
  z-index:0;
  pointer-events:none;
}
.dbl__on{ position:relative; z-index:1; }

.dbl--mark .dbl__off{ color:var(--ink); }
.dbl--mark .dbl__on{ color:var(--mark); }

/* plates drift into register as the block reveals */
.js .reveal .dbl__off,
.js .reveal.dbl .dbl__off{ transform:translate(-16px, 16px); }
.js .reveal.is-in .dbl__off,
.js .is-in .dbl__off{ transform:translate(calc(var(--off) * -1), var(--off)); }

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:var(--display);
  font-variation-settings:"wdth" 108, "wght" 700;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--stock);
  background:var(--ink);
  border:3px solid var(--ink);
  padding:.85em 1.5em;
  box-shadow:6px 6px 0 var(--mark);
  cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--mark); }
.btn:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--mark); }

.btn--plain{
  background:transparent;
  color:var(--ink);
  box-shadow:none;
}
.btn--plain:hover{
  transform:none;
  background:var(--ink);
  color:var(--stock);
  box-shadow:none;
}

.btn--mark{
  background:var(--mark);
  border-color:var(--mark);
  color:#fff;
  box-shadow:6px 6px 0 var(--ink);
}
.btn--mark:hover{ box-shadow:3px 3px 0 var(--ink); }
.btn--mark:active{ box-shadow:0 0 0 var(--ink); }
.btn--mark[disabled]{ opacity:.45; cursor:default; transform:none; box-shadow:6px 6px 0 var(--ink); }

.btn--full{ width:100%; text-align:center; }

/* =========================================================
   MASTHEAD
   ========================================================= */

.mast{
  position:sticky; top:0; z-index:100;
  background:var(--stock);
  border-bottom:3px solid var(--ink);
  transition:box-shadow .2s var(--ease);
}
.mast.is-stuck{ box-shadow:0 6px 0 rgba(28,26,23,.09); }

.mast__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:.7rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.brand{
  text-decoration:none;
  color:var(--ink);
  display:inline-block;
  line-height:.82;
}
.brand__name{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 74, "wght" 900;
  font-weight:900;
  font-size:1.5rem;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.brand__mark{
  display:block;
  height:5px;
  margin-top:5px;
  background:var(--mark);
  transform:skewX(-18deg);
}

.mast__links{ display:flex; align-items:center; gap:1.9rem; }
.mast__links a{
  font-family:var(--display);
  font-variation-settings:"wdth" 112, "wght" 600;
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.3em 0;
  background-image:linear-gradient(var(--mark), var(--mark));
  background-size:0 3px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .22s var(--ease);
}
.mast__links a:hover{ background-size:100% 3px; }

.mast__links a.mast__cta{
  background-image:none;
  background-color:var(--ink);
  color:var(--stock);
  padding:.7em 1.1em;
  box-shadow:4px 4px 0 var(--mark);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.mast__links a.mast__cta:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--mark); }

.mast__toggle{
  display:none;
  width:46px; height:40px;
  background:transparent;
  border:3px solid var(--ink);
  cursor:pointer;
  padding:9px 8px;
  flex-direction:column; justify-content:space-between;
}
.mast__toggle span{ display:block; height:3px; background:var(--ink); }

/* =========================================================
   HERO
   ========================================================= */

.hero{ padding:clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem); }

.hero__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 66, "wght" 900;
  font-weight:900;
  font-size:clamp(3.4rem, 11.5vw, 7.4rem);
  line-height:.84;
  letter-spacing:-.012em;
  text-transform:uppercase;
  margin:0 0 1.3rem;
}
.hero__title .dbl{ display:block; }

.hero__lede{
  font-size:clamp(1.3rem, 2.1vw, 1.6rem);
  line-height:1.5;
  max-width:34ch;
  margin:0 0 2.6rem;
  border-left:5px solid var(--mark);
  padding-left:1.1rem;
}

/* ---------- the galley ---------- */

.galley{
  background:var(--stock-3);
  border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
  max-width:860px;
}

.galley__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1.2rem;
  border-bottom:3px solid var(--ink);
  background:var(--stock-2);
}

.stages{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1.4rem;
  font-family:var(--typed);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.stages li{ position:relative; padding-bottom:3px; }
.stages li::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:3px; background:var(--mark);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.stages li.is-on{ color:var(--ink); font-weight:700; }
.stages li.is-on::after{ transform:scaleX(1); }

.galley__meter{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"wdth" 82, "wght" 800;
  font-weight:800;
  font-size:1.7rem;
  line-height:1;
  display:flex; align-items:baseline; gap:.4rem;
}
.galley__unit{
  font-family:var(--typed);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.galley__body{
  font-family:var(--typed);
  font-size:1.06rem;
  line-height:2.05;
  margin:0;
  padding:1.6rem 1.2rem;
  color:var(--ink);
}

.galley__body .w,
.galley__body .cut{
  display:inline-block;
  white-space:pre;
  vertical-align:bottom;
}

.galley__body .cut{
  position:relative;
  max-width:20ch;
  overflow:hidden;
  color:var(--ink-3);
  transition:max-width .4s var(--ease), opacity .3s linear;
}
.galley__body .cut::after{
  content:"";
  position:absolute; left:0; right:.25em; top:52%;
  height:3px;
  background:var(--mark);
  transform:scaleX(0) rotate(-.5deg);
  transform-origin:left center;
  transition:transform .22s var(--ease);
  transition-delay:var(--d, 0s);
}

.galley.is-proof .cut::after{ transform:scaleX(1) rotate(-.5deg); }

/* The proof pass strikes words one at a time so you can watch it happen.
   Dropping them is a single motion — a long stagger here just leaves the
   sentence unreadable for a second while it half-collapses. */
.galley.is-set .cut{
  max-width:0;
  opacity:0;
  transition:max-width .34s var(--ease) calc(var(--d, 0s) * .28),
             opacity .16s linear calc(var(--d, 0s) * .28);
}
.galley.is-set .galley__body{
  font-family:var(--body);
  font-size:1.34rem;
  line-height:1.66;
}

.galley__foot{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:1.1rem 1.2rem;
  border-top:3px solid var(--ink);
  background:var(--stock-2);
}
.galley__hint{
  font-family:var(--typed);
  font-size:.86rem;
  color:var(--ink-2);
}

.hero__cta{
  display:flex; flex-wrap:wrap; gap:1.6rem;
  margin:2.8rem 0 1.4rem;
}

.hero__note{
  font-family:var(--typed);
  font-size:.86rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}

/* =========================================================
   PROOF BAND
   ========================================================= */

.band{
  background:var(--ink);
  color:var(--stock);
  padding:clamp(2.6rem, 6vw, 4.2rem) 0;
  position:relative;
}
.band::before{
  content:"";
  position:absolute; inset:0;
  opacity:.14;
  background-image:radial-gradient(circle at 1px 1px, rgba(233,230,223,.7) 1px, transparent 0);
  background-size:5px 5px;
  pointer-events:none;
}
.band__grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.fig{ border-left:4px solid var(--mark-bright); padding-left:1.2rem; }
.fig__num{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 72, "wght" 900;
  font-weight:900;
  font-size:clamp(3rem, 7vw, 5rem);
  line-height:.9;
  /* sapphire goes muddy against the ink band — the royal blue holds */
  color:var(--mark-bright);
}
.fig__num--word{
  color:var(--stock);
  font-variation-settings:"wdth" 80, "wght" 800;
  font-size:clamp(2.4rem, 4.6vw, 3.6rem);
  white-space:nowrap;
}
.fig__label{
  display:block;
  margin-top:.5rem;
  font-family:var(--typed);
  font-size:.9rem;
  line-height:1.5;
  color:#cec9be;
  max-width:22ch;
}

/* =========================================================
   STORY
   ========================================================= */

.story{ padding:clamp(3.4rem, 8vw, 6rem) 0; }
.story__inner{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}

.portrait{
  margin:0;
  position:sticky; top:110px;
}
/* The photograph is printed on the black plate only — a blue duotone bleached
   the face. The blue comes back as the offset, the same one the cards and
   buttons carry. Frame and offset sit on the wrapper, not the image: a CSS
   filter applies to the element's own border and shadow, and would grey them
   out along with the photo. */
.portrait__plate{
  display:block;
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--mark);
}
.portrait__plate img{
  filter:grayscale(1) contrast(1.18) brightness(1.02);
}
.portrait figcaption{
  font-family:var(--typed);
  font-size:.84rem;
  line-height:1.6;
  color:var(--ink-2);
  margin-top:.9rem;
  border-top:3px solid var(--ink);
  padding-top:.7rem;
}
.portrait figcaption b{ color:var(--ink); }

.story__body p{ max-width:56ch; }
.story__body p + p{ margin-top:1.1em; }
.story__body strong{ box-shadow:inset 0 -.42em 0 rgba(15,82,186,.20); }

/* =========================================================
   SERVICES
   ========================================================= */

.services{ padding:clamp(3.4rem, 8vw, 6rem) 0; border-top:3px solid var(--ink); }

.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.6rem, 3vw, 2.4rem);
  margin-top:2.6rem;
}
.card{
  background:var(--stock-3);
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  padding:1.7rem 1.5rem 1.5rem;
  display:flex; flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card:hover{ transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--mark); }
.card h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 88, "wght" 800;
  font-weight:800;
  font-size:1.55rem;
  line-height:1.05;
  margin:0 0 .7rem;
}
.card p{ margin:0 0 1.1rem; font-size:1.08rem; }
.card ul{
  list-style:none; margin:0 0 1.4rem; padding:0;
  border-top:2px solid var(--rule);
}
.card li{
  font-family:var(--typed);
  font-size:.86rem;
  line-height:1.5;
  padding:.6rem 0 .6rem 1.5rem;
  border-bottom:2px solid var(--rule);
  position:relative;
}
.card li::before{
  content:"";
  position:absolute; left:0; top:1.15em;
  width:14px; height:3px;
  background:var(--mark);
  transform:skewX(-20deg);
}
.card__link{
  margin-top:auto;
  align-self:flex-start;
  font-family:var(--display);
  font-variation-settings:"wdth" 110, "wght" 700;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  padding-bottom:4px;
  background-image:linear-gradient(var(--mark), var(--mark));
  background-size:100% 3px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .22s var(--ease);
}
.card__link::after{ content:" \2192"; }
.card__link:hover{ background-size:0 3px; }

/* =========================================================
   PULL QUOTE
   ========================================================= */

.pull{
  background:var(--mark-deep);
  color:var(--stock);
  padding:clamp(3.6rem, 9vw, 6.5rem) 0;
  position:relative;
}
.pull::before{
  content:"";
  position:absolute; inset:0;
  opacity:.13;
  background-image:radial-gradient(circle at 1px 1px, rgba(0,0,0,.9) 1px, transparent 0);
  background-size:5px 5px;
  pointer-events:none;
}
.pull .wrap{ position:relative; }
.pull blockquote{ margin:0; }
.pull blockquote p{
  font-family:var(--display);
  font-variation-settings:"wdth" 70, "wght" 900;
  font-weight:900;
  font-size:clamp(2.6rem, 8.5vw, 6rem);
  line-height:.88;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 1.2rem;
  max-width:14ch;
}
.pull .dbl__on{ color:var(--stock); }
.pull .dbl__off{ color:var(--ink); }
.pull cite{
  font-family:var(--typed);
  font-style:normal;
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#cbd9f4;
}

/* =========================================================
   WHO IT IS FOR
   ========================================================= */

.who{ padding:clamp(3.4rem, 8vw, 6rem) 0; }
.who__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.who__list{ list-style:none; margin:0; padding:0; }
.who__list li{
  position:relative;
  padding:1.05rem 0 1.05rem 2.6rem;
  border-bottom:2px solid var(--rule);
  font-size:1.1rem;
  line-height:1.6;
}
.who__list li:first-child{ border-top:2px solid var(--rule); }
.who__list li::before{
  content:"";
  position:absolute; left:0; top:1.6em;
  width:20px; height:4px;
  background:var(--mark);
  transform:skewX(-20deg);
}
.who__list b{
  font-family:var(--display);
  font-variation-settings:"wdth" 96, "wght" 700;
  font-weight:700;
}

/* =========================================================
   PROCESS
   ========================================================= */

.process{ padding:clamp(3.4rem, 8vw, 6rem) 0; border-top:3px solid var(--ink); }
.steps{
  list-style:none; margin:2.8rem 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.6rem, 3vw, 2.6rem);
}
.step{ border-top:6px solid var(--ink); padding-top:1.1rem; }
.step__stage{
  display:inline-block;
  font-family:var(--typed);
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  background:var(--mark);
  padding:.28em .8em;
  margin-bottom:.9rem;
}
.step h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 86, "wght" 800;
  font-weight:800;
  font-size:1.42rem;
  line-height:1.1;
  margin:0 0 .5rem;
}
.step p{ margin:0; font-size:1.06rem; color:var(--ink-2); }

/* =========================================================
   CONTACT
   ========================================================= */

.contact{
  padding:clamp(3.4rem, 8vw, 6rem) 0;
  background:var(--stock-2);
  border-top:3px solid var(--ink);
}
.contact__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.contact__alt{
  font-family:var(--typed);
  font-size:.95rem;
  margin-top:1.6rem;
}
.contact__alt a{
  background-image:linear-gradient(var(--mark), var(--mark));
  background-size:100% 3px;
  background-position:0 100%;
  background-repeat:no-repeat;
  text-decoration:none;
  padding-bottom:2px;
}
.contact__alt a:hover{ background-size:100% 100%; color:#fff; }

.form{
  background:var(--stock-3);
  border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
  padding:1.7rem 1.5rem;
}
.field{ margin-bottom:1.3rem; position:relative; }
.field label{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 112, "wght" 700;
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:.45rem;
}
.field .opt{
  font-variation-settings:"wdth" 112, "wght" 400;
  font-weight:400;
  color:var(--ink-3);
  letter-spacing:.1em;
}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--typed);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--stock);
  border:3px solid var(--ink);
  padding:.7em .8em;
  border-radius:0;
  appearance:none;
}
.field select{
  background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                   linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:calc(100% - 20px) 1.15em, calc(100% - 13px) 1.15em;
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
  padding-right:2.6em;
}
.field textarea{ resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--mark);
  box-shadow:4px 4px 0 var(--mark);
}

/* a mistake gets marked, like anything else on this page */
.field.is-bad input,
.field.is-bad textarea{
  border-color:var(--mark-deep);
  background:#dfe7f8;
}
.err{
  display:block;
  font-family:var(--typed);
  font-size:.82rem;
  line-height:1.4;
  color:var(--mark-deep);
  margin-top:.35rem;
  min-height:0;
}
.err:not(:empty)::before{ content:"\2715\00a0\00a0"; font-weight:700; }

.counter{
  position:absolute; right:0; bottom:-1.4rem;
  font-family:var(--typed);
  font-size:.78rem;
  color:var(--ink-3);
}
/* the last field carries the word counter under it — leave it room */
.form .field:last-of-type{ margin-bottom:2.2rem; }

.form__note{
  font-family:var(--typed);
  font-size:.82rem;
  color:var(--ink-3);
  text-align:center;
  margin:1rem 0 0;
}
.form__ok{
  margin-top:1.2rem;
  border:3px solid var(--ink);
  border-left-width:10px;
  border-left-color:var(--mark);
  background:var(--stock);
  padding:.9rem 1rem;
  font-size:1rem;
}
.form__ok a{ color:var(--mark-deep); }

/* =========================================================
   FOOTER
   ========================================================= */

.foot{
  background:var(--ink);
  color:var(--stock);
  padding:clamp(2.4rem, 5vw, 3.4rem) 0 1.6rem;
}
.foot__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.6rem; flex-wrap:wrap;
}
.brand--foot{ color:var(--stock); }
.foot__tag{
  font-family:var(--typed);
  font-size:.9rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0;
  color:#cec9be;
}
.foot__links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.foot__links a{
  font-family:var(--display);
  font-variation-settings:"wdth" 112, "wght" 600;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding-bottom:3px;
  background-image:linear-gradient(var(--mark-bright), var(--mark-bright));
  background-size:0 3px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .22s var(--ease);
}
.foot__links a:hover{ background-size:100% 3px; }
.foot__legal{
  max-width:var(--wrap);
  margin:2.4rem auto 0;
  padding:1.2rem var(--pad) 0;
  border-top:2px solid #3a352e;
  font-family:var(--typed);
  font-size:.78rem;
  color:#8d867a;
}

/* =========================================================
   REVEALS
   ========================================================= */

.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal[data-delay="1"]{ transition-delay:.09s; }
.js .reveal[data-delay="2"]{ transition-delay:.18s; }
.js .reveal[data-delay="3"]{ transition-delay:.27s; }
.js .reveal[data-delay="4"]{ transition-delay:.36s; }
.js .reveal[data-delay="5"]{ transition-delay:.45s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px){
  .story__inner,
  .who__grid,
  .contact__inner{ grid-template-columns:1fr; }
  .portrait{ position:static; max-width:420px; }
  .cards,
  .steps{ grid-template-columns:1fr 1fr; }
  .band__grid{ grid-template-columns:1fr 1fr; }
  .fig:last-child{ grid-column:1 / -1; }
}

@media (max-width: 760px){
  :root{ --off:4px; }

  .mast__toggle{ display:flex; }
  .mast__links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--stock);
    border-bottom:3px solid var(--ink);
    padding:.4rem var(--pad) 1.2rem;
  }
  .mast__links.is-open{ display:flex; }
  .mast__links a{
    padding:.9rem 0;
    border-bottom:2px solid var(--rule);
    background-size:0 3px;
  }
  .mast__links a.mast__cta{
    margin-top:1rem;
    text-align:center;
    border-bottom:none;
  }

  .cards,
  .steps,
  .band__grid{ grid-template-columns:1fr; }
  .fig:last-child{ grid-column:auto; }

  .galley__head{ flex-wrap:wrap; }
  .galley__body{ font-size:1rem; line-height:1.95; }
  .hero__cta .btn{ width:100%; text-align:center; }
  .hero__lede{ margin-bottom:2rem; }
  .form{ box-shadow:6px 6px 0 var(--ink); }
  .galley{ box-shadow:6px 6px 0 var(--ink); }
}

@media (max-width: 480px){
  .stages{ gap:1rem; font-size:.72rem; }
  .galley__meter{ font-size:1.4rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .dbl__off{ transform:translate(calc(var(--off) * -1), var(--off)) !important; }
}