/* ═══════════════════════════════════════════════════════════════════
   Strad Tax & Accounting Group
   The page is an engraved instrument: one sheet of ledger stock, one
   ink, and line work cut into it. Nothing here is decoration for its
   own sake — the seal, the plate and the four marks all come off the
   same rose engine.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- the two voices ---------------------------------------------- */
@font-face{font-family:Gambarino;src:url(../fonts/Gambarino-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Sentient;src:url(../fonts/Sentient-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Sentient;src:url(../fonts/Sentient-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Sentient;src:url(../fonts/Sentient-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Both inks are lifted straight off the client's logo: navy #084068 and
     gold #b08028. The ink is that navy deepened for text weight, the paper
     is pale bond stock, and the gold appears only where it is the brand
     speaking. Every value below is measured against WCAG, not eyeballed. */
  --paper:#e2e7e9;        --paper-rgb:226 231 233;
  --paper-hi:#edf0f1;
  --ink:#06304e;          /* 10.9:1 on paper */
  --ink-70:#1b4c6e;       /*  7.3:1 */
  --ink-45:#3a5e78;       /*  5.4:1 */
  --ink-20:rgb(6 48 78 / .2);
  --ink-12:rgb(6 48 78 / .12);
  --floor:#062535;
  --engrave:#0a3c60;      /* the line work, a shade off the brand navy */
  --gold:#b08028;         /* the logo gold, exact: decorative only */
  --gold-deep:#9a6c22;    /*  3.7:1 on paper, so it can carry a focus ring */
  --gold-lt:#cc9c3e;      /*  4.6:1 on the floor */

  --display:Gambarino,Georgia,'Times New Roman',serif;
  --text:Sentient,Georgia,'Times New Roman',serif;

  --fr:clamp(13px,2vw,26px);              /* plate rule inset          */
  --gut:clamp(26px,5.4vw,78px);           /* content gutter            */
  --max:1360px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background-color:var(--paper);
  /* premium noise: a fine grain in the substrate, always behind content */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  font-size:clamp(1.06rem,1rem + .3vw,1.19rem);
  line-height:1.62;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
ol,ul,dl{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:1px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);
  padding:12px 20px;font-size:.9rem}
.skip:focus{left:12px;top:12px}

/* ════ the face ═══════════════════════════════════════════════════ */

.face{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:var(--gut);
  isolation:isolate;
  overflow:hidden;      /* the seal is struck inside the plate, never past it */
}

/* the ruled plate: four hairlines that stop short of four chamfered,
   registration-ticked corners. The geometry is the signature the whole
   page is cut from. */
.plate-rule{position:absolute;inset:var(--fr);pointer-events:none;color:var(--ink);z-index:0}
.plate-rule span{position:absolute;background:currentColor;opacity:.34}
.plate-rule__t,.plate-rule__b{height:1px;left:44px;right:44px}
.plate-rule__l,.plate-rule__r{width:1px;top:44px;bottom:44px}
.plate-rule__t{top:0}.plate-rule__b{bottom:0}
.plate-rule__l{left:0}.plate-rule__r{right:0}
.cnr{position:absolute;width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1;opacity:.34}
.cnr--tl{top:0;left:0}.cnr--tr{top:0;right:0}
.cnr--br{bottom:0;right:0}.cnr--bl{bottom:0;left:0}

/* the seal, struck through the sheet: enormous, faint, and slowly
   turning against itself the way a rose engine turns */
.seal-well{
  /* Sized off the row it sits in, not the whole plate, so the letterhead
     above and the counter line below always stay clear of it. */
  position:absolute;inset:0;margin:auto;
  height:100%;width:auto;aspect-ratio:1;
  max-width:min(100%,calc(100vw - 2 * var(--gut)));
  z-index:-1;pointer-events:none;
  color:var(--ink);
  /* the middle of the plate is left almost bare so the statement can be
     read straight off it, the way lettering sits in a cleared cartouche */
  mask-image:radial-gradient(closest-side,
    rgba(0,0,0,.09) 0%,rgba(0,0,0,.12) 24%,rgba(0,0,0,.32) 41%,
    rgba(0,0,0,.74) 53%,#000 63%,#000 100%);
}
.seal{width:100%;height:100%;opacity:.27}
/* Each band is a complete n-fold rosette, so its own bounding box is
   symmetric about the point it must turn on. fill-box + center resolves
   in the element's local space and is exact; a view-box origin is
   measured in the root user space and lands off-centre once the art has
   been translated, which flings the bands apart. */
.seal>g>g{transform-box:fill-box;transform-origin:center}
.seal__outer{animation:turn 420s linear infinite}
.seal__inner{animation:turn 300s linear infinite reverse}
.seal__core{animation:turn 190s linear infinite}
.seal__ring{animation:turn 900s linear infinite reverse}
@keyframes turn{to{rotate:360deg}}

/* ---- letterhead + nav -------------------------------------------- */
.head{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px 24px;flex-wrap:wrap;
}
/* the client's own lockup, at its own proportions, on nothing */
.wordmark{display:block;line-height:0}
.wordmark img{width:auto;height:clamp(52px,5.2vw,70px)}

.nav{display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.2vw,34px);align-items:center}
/* the padding/margin pair grows the tap target to ~40px without moving
   the link off the letterhead's baseline */
.nav a{font-size:1.06rem;color:var(--ink-70);position:relative;white-space:nowrap;
  padding-block:9px;margin-block:-9px;transition:color .22s var(--ease)}
/* A mark that grows in on hover is the underline-fill reflex wherever you
   put it. The state change here is the type itself, cleanly. */
.nav a:hover{color:var(--ink)}

/* ---- the small-screen menu ---------------------------------------
   Progressive enhancement only. The button is hidden and the nav is a
   plain visible row until the document is marked `.js`, so with
   scripting off nothing is ever collapsed behind a control that will
   not run. The label carries the state; there is no generic hamburger
   and no icon that could sit on any other product unchanged. */

.menu-btn{display:none}

@media (max-width:620px){
  html.js .menu-btn{
    display:inline-flex;align-items:center;gap:.6em;
    margin-left:auto;
    padding:.62em 1em;
    background:none;color:var(--ink);
    font-family:var(--text);font-size:1rem;font-weight:500;line-height:1;
    border:1px solid var(--ink-20);cursor:pointer;
    /* cut with the same chamfer as the plate corners and the buttons */
    clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),
      calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
    transition:background-color .2s var(--ease),color .2s var(--ease);
  }
  html.js .menu-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
  .menu-btn__mark{
    width:18px;height:12px;flex:none;fill:none;stroke:currentColor;
    stroke-width:1.6;stroke-linecap:round;
  }

  /* closed: out of the layout and out of the a11y tree, which is what
     aria-expanded="false" promises */
  html.js .nav{display:none}
  html.js .head[data-menu="open"] .nav{
    display:flex;flex-direction:column;gap:0;
    /* stretch, not center: otherwise each link shrinks to its own text and
       the dividing rules end up ragged instead of ruling the panel */
    align-items:stretch;
    position:absolute;top:calc(100% + 18px);left:0;right:0;z-index:6;
    background:var(--paper);
    border-block:1px solid var(--ink-20);
  }
  html.js .head[data-menu="open"] .nav a{
    font-family:var(--display);font-size:1.5rem;text-align:center;
    padding:.66em 0;margin:0;white-space:normal;
    border-bottom:1px solid var(--ink-12);
  }
  html.js .head[data-menu="open"] .nav a:last-child{border-bottom:0}
}

/* ---- the statement ----------------------------------------------- */
.hero{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(20px,2.4vw,30px);
  padding:clamp(30px,6vh,72px) 0;
}
.hero__line{
  font-size:clamp(2.4rem,1rem + 5.2vw,6rem);
  line-height:1;letter-spacing:-.018em;
  max-width:20ch;
}
.hero__sub{
  /* This line sits over the seal, and a 300 weight goes thin against line
     work however good its contrast number is. Regular weight and a darker
     navy (8.7:1 on paper) so it holds against the engraving. */
  max-width:48ch;font-weight:400;font-size:clamp(1.12rem,1rem + .5vw,1.38rem);
  line-height:1.55;color:#14405f;
}

/* ---- the one action ---------------------------------------------- */
.act{
  --pad:clamp(20px,2vw,30px);
  display:inline-flex;align-items:center;gap:.7em;
  padding:.86em var(--pad);
  background:var(--ink);color:var(--paper);
  font-family:var(--text);font-size:1rem;font-weight:500;line-height:1;
  border:0;cursor:pointer;
  /* cut with the same chamfer as the four plate corners */
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),
    calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  transition:background-color .26s var(--ease);
}
.act:hover{background:#0c4066}
.act__arw{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;
  transition:translate .34s var(--ease)}
.act:hover .act__arw{translate:3px -3px}

/* ---- the counter line -------------------------------------------- */
.legend{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:18px;
  font-size:.94rem;font-weight:300;color:var(--ink-45);line-height:1.45;
}
.legend>span:nth-child(2){text-align:center}
.legend>span:last-child{text-align:right}
.legend a{border-bottom:1px solid var(--ink-20);padding-bottom:1px;
  transition:color .22s var(--ease),border-color .22s var(--ease)}
.legend a:hover{color:var(--ink);border-color:var(--gold-deep)}

/* ════ approach: the Gulf plate ═══════════════════════════════════ */

.approach{
  position:relative;
  display:grid;
}
.approach>*{grid-area:1/1;min-width:0}

.plate{height:clamp(600px,86vh,940px);overflow:hidden;color:var(--engrave)}
.plate__art{width:100%;height:100%}

.approach__say{
  /* z-index here is load-bearing: it opens a stacking context so the
     cleared cartouche below sits above the plate instead of under it */
  position:relative;z-index:1;
  align-self:center;justify-self:start;
  width:min(46ch,100%);
  margin-inline:var(--gut);
  padding:clamp(20px,3vw,34px) 0;
}
/* The engraver clears the plate where the lettering goes. This is that
   clearing: bare paper at the centre, easing back to the engraving over
   most of its width, and fully transparent long before any section edge
   so it can never read as a band. */
.approach__say::before{
  content:"";position:absolute;inset:-44%;z-index:-1;pointer-events:none;
  /* closest-side inscribes the ellipse in this box, so it reaches zero
     exactly at every edge and can never be clipped into a hard line */
  background:radial-gradient(ellipse closest-side at 50% 50%,
    var(--paper) 0%,var(--paper) 54%,
    rgb(var(--paper-rgb) / .95) 62%,rgb(var(--paper-rgb) / .84) 70%,
    rgb(var(--paper-rgb) / .66) 78%,rgb(var(--paper-rgb) / .43) 86%,
    rgb(var(--paper-rgb) / .2) 93%,rgb(var(--paper-rgb) / .06) 97.5%,
    rgb(var(--paper-rgb) / 0) 100%);
}
.approach__say h2{
  font-size:clamp(2rem,1.15rem + 3.1vw,3.6rem);
  line-height:1.04;letter-spacing:-.014em;margin-bottom:clamp(18px,2vw,26px);
}
.approach__cols{display:grid;gap:1.1em}
.approach__cols p{color:var(--ink-70);font-weight:300;max-width:44ch}
/* the second call, on the plate. Same one action style as the hero, set a
   size down because it is a resting point in the page, not the opening. */
.approach__say .act{margin-top:clamp(26px,3.4vw,38px)}
.act--quiet{--pad:clamp(17px,1.7vw,25px);font-size:.97rem}

/* ════ the register ══════════════════════════════════════════════ */

.reg{
  max-width:var(--max);margin-inline:auto;
  padding:clamp(72px,11vh,132px) var(--gut) clamp(60px,8vh,96px);
}
.reg__say{
  font-size:clamp(1.75rem,1.1rem + 2.4vw,3rem);
  line-height:1.08;letter-spacing:-.012em;
  max-width:19ch;margin-bottom:clamp(44px,6vh,74px);
}

.reg__list{display:grid;grid-template-columns:repeat(2,1fr);
  grid-auto-rows:1fr;   /* every row as tall as its tallest entry */
  column-gap:clamp(32px,4.4vw,72px)}

.ent{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:clamp(20px,2.2vw,32px);
  align-content:start;
  padding:clamp(26px,3vw,38px) 0;
  border-top:1px solid var(--ink-12);
  transition:border-color .3s var(--ease);
}
.ent:hover{border-top-color:var(--ink-45)}
/* These marks are diagrams, not rosettes: turning an arch or a column of
   figures would read as broken. The hover deepens the ink instead, and
   the entry's rule comes with it. */
.ent__mark{grid-row:1/3;width:clamp(58px,6vw,78px);color:var(--ink-70);
  transition:color .3s var(--ease)}
.mark{width:100%;height:auto}
.ent:hover .ent__mark{color:var(--ink)}

.ent__folio{
  font-family:var(--display);font-size:1.02rem;color:var(--ink-45);
  display:block;margin-bottom:.35em;
}
.ent__name{font-size:clamp(1.35rem,1.05rem + 1vw,1.9rem);line-height:1.08;
  letter-spacing:-.008em}
.ent__note{
  grid-column:2;color:var(--ink-70);font-weight:300;
  font-size:clamp(1.02rem,.98rem + .22vw,1.13rem);line-height:1.6;
  margin-top:.6em;max-width:34ch;
  /* two lines are reserved in every entry so all four rows keep the
     same baselines however long the copy runs */
  min-height:calc(2 * 1.6em);
}

/* the second thing a rose engine cuts: a running band, ruled clear across
   the sheet where a security strip would sit, dissolving at both ends */
.ribbon{width:100%;height:clamp(56px,6.2vw,100px)}

/* ════ the schedule ══════════════════════════════════════════════
   Four columns on one rule, no marks and no folio numbers, so it reads
   as the schedule on the back of an instrument rather than a second
   copy of the register above it. */

.sched{
  max-width:var(--max);margin-inline:auto;
  padding:clamp(64px,9vh,110px) var(--gut) 0;
}
.sched__say{
  font-size:clamp(1.6rem,1.05rem + 2.1vw,2.7rem);
  line-height:1.1;letter-spacing:-.01em;
  max-width:24ch;margin-bottom:clamp(36px,5vh,58px);
}
.sched__list{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,44px);
  border-top:1px solid var(--ink-20);padding-top:clamp(24px,3vh,34px);
}
.sched__list>div{display:grid;align-content:start;gap:.55em}
.sched__list dt{
  font-family:var(--display);
  font-size:clamp(1.16rem,1rem + .58vw,1.5rem);line-height:1.14;
}
.sched__list dd{
  margin:0;color:var(--ink-70);font-weight:300;
  font-size:clamp(.98rem,.95rem + .18vw,1.06rem);line-height:1.55;
}
/* ════ the strip ═════════════════════════════════════════════════
   A security strip printed across the sheet: full bleed, ink ground,
   the engine-turned ribbon running through it. Its edges are crisp on
   purpose, the way a printed band's are, rather than dissolving like
   the plates do. */

.strip{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(58px,8vh,96px);
  background:var(--floor);color:var(--paper);
  padding:clamp(46px,7vh,78px) var(--gut);
}
.strip__ground{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  color:rgb(var(--paper-rgb));opacity:.14;
  mask-image:linear-gradient(to right,transparent 0%,rgb(0 0 0 / .5) 8%,
    #000 20%,#000 80%,rgb(0 0 0 / .5) 92%,transparent 100%);
}
.strip__ground .ribbon{width:100%;height:100%}
.strip p{
  max-width:60ch;margin-inline:auto;text-align:center;
  font-weight:300;line-height:1.5;
  font-size:clamp(1.14rem,1rem + .6vw,1.48rem);
}
.strip strong{font-weight:500;color:var(--gold-lt)}   /* 4.6:1 on the floor */

/* ════ the photographic plate ════════════════════════════════════ */

.shot{margin:0;padding:0}
.shot img{
  /* the plate is cut at 5:2, so the band holds that shape and nothing is
     cropped twice; the cap keeps it from swallowing a wide screen */
  display:block;width:100vw;margin-inline:calc(50% - 50vw);
  aspect-ratio:5/2;max-height:620px;height:auto;
  object-fit:cover;object-position:50% 50%;
  /* The image's OWN pixels are faded, over a long finely eased run at
     each end. A colour overlay would leave the photograph at full
     opacity underneath and the eye would catch the join. */
  mask-image:linear-gradient(to bottom,
    transparent 0%,
    rgb(0 0 0 / .04) 3%, rgb(0 0 0 / .12) 6%, rgb(0 0 0 / .25) 9%,
    rgb(0 0 0 / .42) 12%, rgb(0 0 0 / .6) 15%, rgb(0 0 0 / .76) 18%,
    rgb(0 0 0 / .89) 21%, rgb(0 0 0 / .96) 24%, #000 28%,
    #000 70%,
    rgb(0 0 0 / .96) 75%, rgb(0 0 0 / .89) 78%, rgb(0 0 0 / .76) 81%,
    rgb(0 0 0 / .6) 84%, rgb(0 0 0 / .42) 87%, rgb(0 0 0 / .25) 90%,
    rgb(0 0 0 / .12) 94%, rgb(0 0 0 / .04) 97%, transparent 100%);
}
.shot figcaption{
  max-width:var(--max);margin:clamp(14px,2vh,24px) auto 0;
  padding-inline:var(--gut);
  font-size:.96rem;font-weight:300;color:var(--ink-45);
}


/* ════ correspondence ════════════════════════════════════════════ */

.corr{
  position:relative;overflow:hidden;
  padding:clamp(48px,7vh,88px) var(--gut) clamp(84px,13vh,150px);
}
/* a pale underprint, the way security stock carries one beneath the ink */
.underprint{
  position:absolute;left:-2%;right:-2%;bottom:-4%;
  height:clamp(260px,32vw,440px);
  color:var(--ink);opacity:.085;pointer-events:none;z-index:0;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 26%,
    #000 52%,#000 74%,rgba(0,0,0,.45) 90%,transparent 100%);
}
.underprint .ribbon{height:100%}
.corr__inner{position:relative;z-index:1}
.corr__inner{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,104px);align-items:start;
}
.corr__say h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem);line-height:1.04;
  letter-spacing:-.014em}
.corr__say>p{margin-top:clamp(16px,2vw,22px);max-width:38ch;
  color:var(--ink-70);font-weight:300}

.parts{margin-top:clamp(30px,4vw,46px);display:grid;
  grid-template-columns:auto 1fr;gap:.62em 1.7em;align-items:baseline;
  font-size:1.04rem}
.parts dt{color:var(--ink-45);font-weight:300}
.parts dd{margin:0;color:var(--ink)}
.parts a{border-bottom:1px solid var(--ink-20);padding-bottom:1px;
  transition:color .22s var(--ease),border-color .22s var(--ease)}
.parts a:hover{color:var(--gold-deep);border-color:var(--gold-deep)}

/* the form is ruled like something you would sign, not a row of pills */
.form{display:grid;gap:clamp(20px,2.4vw,28px);max-width:34rem}
.fld{display:grid;gap:.5em}
.fld label{font-size:.96rem;font-weight:500;color:var(--ink-70)}
.fld input,.fld textarea{
  font-family:var(--text);font-size:1.08rem;font-weight:300;color:var(--ink);
  /* a line ruled on the sheet to write along, lifted only by tone and a
     faint lip of light: no drawn box, no shadow */
  background:linear-gradient(to bottom,rgb(255 255 255 / .3),rgb(255 255 255 / .1));
  border:0;border-radius:0;
  padding:.7em .1em .58em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1.5px 0 var(--ink-45);
  transition:box-shadow .2s var(--ease),background .2s var(--ease);
  width:100%;resize:vertical;
}
.fld textarea{line-height:1.6;padding-block:.6em .5em}
.fld input:hover,.fld textarea:hover{
  background:linear-gradient(to bottom,rgb(255 255 255 / .46),rgb(255 255 255 / .18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1.5px 0 var(--ink-70)}
.fld input:focus,.fld textarea:focus{
  outline:0;
  background:linear-gradient(to bottom,rgb(255 255 255 / .58),rgb(255 255 255 / .24));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 var(--gold-deep);
}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.fld [aria-invalid="true"]{box-shadow:inset 0 -2px 0 #8d3a2c}

.form .act{justify-self:start}
.form__note{font-size:.98rem;color:var(--ink-45);min-height:1.5em;font-weight:300}
.form__note[data-tone="ok"]{color:var(--ink-70)}
.form__note[data-tone="bad"]{color:#8d3a2c}

/* ════ the floor ═════════════════════════════════════════════════ */

.foot{
  position:relative;
  background-color:var(--floor);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  color:var(--paper);
  padding-block:clamp(52px,7.5vh,86px) clamp(40px,6vh,68px);
  overflow:hidden;
}
/* One deliberate break in the page: the sheet ends and the ink floor
   begins. A smeared ramp here would read as a botched gradient, so the
   edge is left clean and the tone does the work. */
.foot__top{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  padding-inline:var(--gut);
  display:grid;gap:clamp(14px,2vw,20px);justify-items:center;text-align:center;
}
.foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(20px,2.4vw,36px)}
.foot__nav a{font-size:1.06rem;color:rgb(var(--paper-rgb) / .72);white-space:nowrap;
  padding-block:9px;margin-block:-9px;transition:color .22s var(--ease)}
.foot__nav a:hover{color:var(--paper)}
.foot__meta{font-size:1rem;font-weight:300;color:rgb(var(--paper-rgb) / .6)}
.foot__meta a{border-bottom:1px solid rgb(var(--paper-rgb) / .28);padding-bottom:1px;
  transition:color .22s var(--ease),border-color .22s var(--ease)}
.foot__meta a:hover{color:var(--paper);border-color:var(--gold-deep)}
.foot__cop{font-size:.88rem;font-weight:300;color:rgb(var(--paper-rgb) / .55)}  /* 5.3:1 */

/* the signature: struck flush to the bottom edge, on top of the floor,
   with air above it and nothing beneath */
/* The firm's own lockup, reversed, heading the footer. The asset is
   trimmed to its own ink, so the margins below are true optical space. */
.foot__mark{display:flex;justify-content:center;margin-bottom:clamp(10px,1.6vh,20px)}
.foot__mark img{width:clamp(168px,20vw,244px);height:auto}

/* ════ motion ════════════════════════════════════════════════════
   Everything above is already on screen. Nothing here reveals content;
   these only offset things that are visible either way.            */

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .plate__art{
      animation:drift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes drift{from{translate:0 -3.4%}to{translate:0 3.4%}}
  }
}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .seal__outer,.seal__inner,.seal__core,.seal__ring{animation:none}
  .act:hover .act__arw{translate:none}
  .plate__art{animation:none}
  *{transition-duration:.01ms!important}
}

/* ════ narrower plates ═══════════════════════════════════════════ */

@media (max-width:1080px){
  .sched__list{grid-template-columns:repeat(2,1fr);row-gap:clamp(30px,4vh,44px)}
  .reg__list{grid-template-columns:1fr}
  .ent__note{min-height:0}
  .corr__inner{grid-template-columns:1fr;gap:clamp(38px,6vh,56px)}
  .corr__say>p{max-width:52ch}
}

@media (max-width:860px){
  .approach{margin-top:0}
  .approach>*{grid-area:auto}
  .approach{display:block}
  .plate{height:clamp(300px,44vh,440px)}
  .plate__art{object-fit:cover}
  .approach__say{
    width:auto;margin-inline:var(--gut);
    padding-top:clamp(26px,4vh,40px);padding-bottom:0;
  }
  .approach__say::before{display:none}
  .approach__cols p{max-width:none}
}

@media (max-width:680px){
  .face{padding:var(--gut) var(--gut) calc(var(--gut) + 4px)}
  .head{gap:14px}
  .wordmark{flex-direction:column;gap:.15em}
  .nav{gap:8px 15px}
  .hero{gap:22px;padding:clamp(40px,8vh,72px) 0}
  .hero__line{max-width:12ch}
  .legend{grid-template-columns:1fr;gap:6px;text-align:center}
  .legend>span:last-child,.legend>span:nth-child(2){text-align:center}
  .sched__list{grid-template-columns:1fr;row-gap:26px}
  .ent{grid-template-columns:1fr}
  .ent__mark{grid-row:auto;margin-bottom:18px}
  .ent__note{grid-column:1}
  .foot__nav{gap:20px}
}

@media (max-width:420px){
  .plate-rule__t,.plate-rule__b{left:34px;right:34px}
  .plate-rule__l,.plate-rule__r{top:34px;bottom:34px}
  .cnr{width:34px;height:34px}
}