/* =========================================================================
   VERSION C: THE CITY PLATE

   A standalone design system. This file does NOT extend styles.css and must
   not be loaded alongside it. Different structure, different typography,
   different layout logic. It shares only the content and main.js.

   Reference points, all City of London rather than creative-agency London:
   Portland stone facades and inscriptional Roman capitals (Cinzel), the
   engraved guilloche rosette from banknotes and share certificates, the
   ruled ledger of double-entry bookkeeping, numbered clauses from a deed,
   and the brass plaque beside a Square Mile doorway.

   Where Version B is left-aligned, asymmetric and electric, this is
   centred, symmetrical and engraved. Prestige by grandeur, not brightness.
   ========================================================================= */

:root{
  /* ---- palette: Portland stone, printing ink, oxblood, brass ---- */
  --stone:       #EFEAE1;
  --stone-deep:  #E3DCCF;
  --ink:         #14120F;   /* warm printing black, not screen black */
  --ink-soft:    #211D18;
  --oxblood:     #8A1223;
  --brass:       #B4913C;   /* rules and ornament only: 2.5:1 on stone */
  --brass-light: #D6B569;   /* small text on oxblood */
  --brass-deep:  #6E5518;   /* small text on stone */
  --grey:        #55504A;

  /* ---- type ---- */
  --inscribe: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --display:  'Bodoni Moda', 'Didot', 'Times New Roman', Georgia, serif;
  --text:     'Spectral', Georgia, 'Times New Roman', serif;

  --gut:  clamp(20px, 5vw, 80px);
  --maxw: 1320px;
  --head-h: 68px;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--head-h);
}

body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(16.5px, 1.02vw, 18.5px);
  font-weight:400;
  line-height:1.66;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
svg{ display:block; max-width:100%; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--oxblood); color:var(--stone);
  padding:14px 22px;
  font:600 13px/1 var(--inscribe); letter-spacing:0.16em; text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--oxblood); outline-offset:4px; }
.on-ink :focus-visible, .on-blood :focus-visible{ outline-color:var(--brass-light); }

.wrap{
  width:100%; max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gut);
}

/* =========================================================================
   SHARED TYPOGRAPHIC DEVICES
   ========================================================================= */

.legend{
  margin:0 0 clamp(26px,3.4vw,44px);
  font-family:var(--inscribe);
  font-weight:700;
  font-size:clamp(10px,0.76vw,12px);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--brass-deep);
}
.on-ink .legend,
.on-blood .legend{ color:var(--brass-light); }

/* Typographic ornament between sections. */
.fleuron{
  display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  margin:clamp(52px,6vw,96px) 0;
  color:var(--brass);
}
.fleuron::before,
.fleuron::after{
  content:""; flex:1 1 auto; height:1px; background:currentColor; opacity:.5;
}
.fleuron span{
  font-size:13px; letter-spacing:0.5em; flex:0 0 auto;
}

/* =========================================================================
   HEADER
   ========================================================================= */

.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--head-h);
  display:flex; align-items:center; gap:clamp(14px,2.6vw,40px);
  padding:0 var(--gut);
  transition:color .3s ease, background-color .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-head[data-mode="dark"]{ color:var(--stone); }
.site-head[data-mode="light"]{ color:var(--ink); }

.site-head.is-stuck[data-mode="dark"]{
  background:rgba(20,18,15,.88);
  border-bottom-color:rgba(180,145,60,.5);
}
.site-head.is-stuck[data-mode="light"]{
  background:rgba(239,234,225,.94);
  border-bottom-color:rgba(20,18,15,.22);
}

.wordmark{
  flex:0 0 auto;
  text-decoration:none;
  font-family:var(--inscribe);
  font-weight:700;
  font-size:clamp(13px,1.12vw,16px);
  letter-spacing:0.2em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:11px 2px;   /* 13px text alone is not a tappable home link */
}
.wordmark__amp{ color:var(--brass); padding:0 .16em; }
/* Brass is only 2.48:1 on stone. Over light sections the ampersand has to
   drop to the deep brass to clear AA at the wordmark's small size. */
.site-head[data-mode="light"] .wordmark__amp{ color:var(--brass-deep); }

.site-nav{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,38px);
  margin-left:auto;
}
.site-nav a{
  position:relative;
  text-decoration:none;
  font-family:var(--inscribe);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:0.13em;   /* eased from 0.19em: "Brand & Digital" is a long run of caps */
  text-transform:uppercase;
  padding:10px 0;
  white-space:nowrap;
}
.site-nav a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:4px;
  height:1px; background:var(--brass);
  transition:left .32s ease, right .32s ease;
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after{ left:0; right:0; }

.head-cta{
  flex:0 0 auto;
  text-decoration:none;
  font-family:var(--inscribe);
  font-weight:700; font-size:11px;
  letter-spacing:0.19em; text-transform:uppercase;
  padding:12px 20px;
  border:1px solid currentColor;
  transition:background-color .24s ease, color .24s ease, border-color .24s ease;
}
.head-cta:hover{ background:var(--oxblood); color:var(--stone); border-color:var(--oxblood); }

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  background:none; border:1px solid currentColor; color:inherit; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.burger span{ display:block; width:18px; height:1px; background:currentColor; transition:transform .25s ease; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-nav[hidden]{ display:none; }
.mobile-nav{
  position:fixed; inset:var(--head-h) 0 0 0; z-index:99;
  background:var(--ink); color:var(--stone);
  padding:clamp(28px,7vw,52px) var(--gut);
  display:flex; flex-direction:column; justify-content:space-between;
  /* Five items plus the address exceed the panel height on a phone held in
     landscape, where it would otherwise clip with no way to reach Contact. */
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mobile-nav nav{ display:flex; flex-direction:column; }
.mobile-nav a{
  display:flex; align-items:baseline; gap:16px;
  text-decoration:none;
  padding:18px 0;
  border-bottom:1px solid rgba(180,145,60,.4);
  font-family:var(--inscribe); font-weight:600;
  font-size:clamp(17px,4.6vw,25px);
  letter-spacing:0.16em; text-transform:uppercase;
}
.mobile-nav a em{
  font-family:var(--display); font-style:normal; font-weight:400;
  font-size:0.8em; color:var(--brass-light);
  letter-spacing:0;
}
.mobile-nav__foot{
  margin:26px 0 0;
  font-size:13.5px; line-height:1.7;
  color:rgba(239,234,225,.7);
}

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

.masthead{
  position:relative;
  background:var(--ink);
  color:var(--stone);
  padding:calc(var(--head-h) + clamp(44px,7vw,96px)) 0 clamp(48px,6vw,88px);
  overflow:hidden;
  text-align:center;
}

/* The engraved rosette, sitting behind the masthead type.

   The two rotating rings are separate HTML layers rather than <g> elements
   inside one SVG. Rotating a div is a composited transform the GPU can
   reuse; rotating a <g> containing a hundred stroked ellipses forces the
   whole group to re-rasterise every frame. Same picture, a fraction of the
   cost. Keep them as layers. */
.guilloche{
  position:absolute;
  top:50%; left:50%;
  width:min(148vh, 132vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  opacity:.5;
  pointer-events:none;
}
.guilloche__layer{
  position:absolute; inset:0;
  will-change:transform;
  animation:revolve 300s linear infinite;
}
.guilloche__layer--in{
  animation-duration:210s;
  animation-direction:reverse;
}
.guilloche__layer svg{ width:100%; height:100%; }
@keyframes revolve{ to{ transform:rotate(360deg); } }

.masthead__inner{ position:relative; z-index:2; }

.masthead__dateline{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(10px,1.6vw,24px);
  margin:0 0 clamp(22px,3vw,36px);
  font-family:var(--inscribe); font-weight:600;
  font-size:clamp(9.5px,0.72vw,11.5px);
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--brass-light);
}
.masthead__dateline i{ font-style:normal; opacity:.55; }

.masthead__name{
  margin:0;
  font-family:var(--inscribe);
  font-weight:700;
  font-size:clamp(34px, 7.6vw, 116px);
  line-height:1.02;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.masthead__name .amp{
  display:block;
  font-family:var(--display);
  font-weight:400; font-style:italic;
  font-size:0.52em;
  letter-spacing:0;
  color:var(--brass);
  margin:0.04em 0;
  text-transform:none;
}

.masthead__rules{
  display:flex; flex-direction:column; gap:4px;
  margin:clamp(24px,3vw,40px) auto clamp(26px,3.2vw,42px);
  max-width:min(100%, 940px);
  color:var(--brass);
}
.masthead__rules span:nth-child(1){ height:2px; background:currentColor; }
.masthead__rules span:nth-child(2){ height:1px; background:currentColor; opacity:.6; }

.masthead__standfirst{
  max-width:60ch; margin:0 auto;
  font-size:clamp(17px,1.36vw,21px);
  line-height:1.62;
  color:rgba(239,234,225,.9);
}

.masthead__actions{
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px;
  margin-top:clamp(30px,3.6vw,46px);
}

.btn{
  text-decoration:none;
  font-family:var(--inscribe); font-weight:700;
  font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase;
  padding:18px 30px;
  border:1px solid transparent;
  transition:background-color .24s ease, color .24s ease, border-color .24s ease;
}
.btn--brass{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.btn--brass:hover{ background:var(--stone); border-color:var(--stone); }
.btn--outline{ color:var(--stone); border-color:rgba(239,234,225,.5); }
.btn--outline:hover{ background:var(--stone); color:var(--ink); border-color:var(--stone); }

/* =========================================================================
   SECTIONS
   ========================================================================= */

.sect{ padding:clamp(64px,8vw,140px) 0; }
.on-stone{ background:var(--stone); color:var(--ink); }
.on-ink{   background:var(--ink);   color:var(--stone); }
.on-blood{ background:var(--oxblood); color:var(--stone); }

.sect__head{ text-align:center; margin-bottom:clamp(38px,4.6vw,72px); }
.sect__title{
  margin:0;
  font-family:var(--inscribe); font-weight:700;
  font-size:clamp(22px,3.1vw,44px);
  letter-spacing:0.14em; text-transform:uppercase;
  line-height:1.16;
}
.on-stone .sect__title{ color:var(--oxblood); }
.sect__sub{
  max-width:56ch; margin:clamp(16px,2vw,26px) auto 0;
  font-size:clamp(16.5px,1.2vw,19px);
  line-height:1.6;
}
.on-ink .sect__sub{ color:rgba(239,234,225,.82); }
.on-blood .sect__sub{ color:rgba(239,234,225,.88); }

/* ---- the broadsheet standfirst, with drop cap ---- */

.leader{ text-align:center; }
.leader__statement{
  margin:0 auto clamp(34px,4.4vw,60px);
  max-width:24ch;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(30px,5.1vw,76px);
  line-height:1.04;
  letter-spacing:-0.02em;
  color:var(--oxblood);
}
.leader__statement em{ font-style:italic; font-weight:400; }

.columns{
  columns:2;
  column-gap:clamp(28px,4vw,64px);
  column-rule:1px solid rgba(20,18,15,.2);
  text-align:left;
  max-width:1000px; margin:0 auto;
}
.columns p{ margin:0 0 1.1em; }
.columns p:first-child::first-letter{
  float:left;
  font-family:var(--display);
  font-weight:700;
  font-size:3.9em;
  line-height:0.82;
  padding:0.04em 0.09em 0 0;
  color:var(--oxblood);
}

.stance{
  max-width:74ch; margin:clamp(44px,5vw,76px) auto 0;
  padding:clamp(24px,3vw,38px);
  border:1px solid rgba(180,145,60,.6);
  outline:1px solid rgba(180,145,60,.34);
  outline-offset:5px;
  text-align:left;
}
.stance__label{
  margin:0 0 12px;
  font-family:var(--inscribe); font-weight:700;
  font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--brass-deep);
}
.stance p:last-child{ font-size:0.95rem; color:var(--grey); margin:0; }

/* =========================================================================
   THE LEDGER: advisory as ruled entries, not cards
   ========================================================================= */

.ledger{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }

.entry{
  display:grid;
  grid-template-columns:clamp(58px,7vw,110px) minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(16px,3vw,48px);
  align-items:start;
  padding:clamp(22px,2.8vw,38px) 0;
  border-bottom:1px solid rgba(20,18,15,.28);
  transition:background-color .3s ease;
}
.entry:hover{ background:var(--stone-deep); }

.entry__num{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(19px,1.9vw,28px);
  line-height:1;
  color:var(--brass-deep);
  letter-spacing:0.04em;
}
/* Sentence case in the Didone, not letterspaced capitals. Cinzel was doing
   two jobs (display AND entry names), which overworked it and slowed the
   page down to read. Now: Cinzel = display only, Bodoni = named things,
   Spectral = prose. One job each. */
.entry__name{
  margin:0;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(19px,1.72vw,26px);
  letter-spacing:-0.012em;
  line-height:1.18;
  color:var(--oxblood);
}
.entry__desc{ margin:0; font-size:0.985rem; line-height:1.62; color:var(--grey); }

/* Dark variant for the studio section */
.on-ink .ledger{ border-top-color:var(--brass); }
.on-ink .entry{ border-bottom-color:rgba(180,145,60,.34); }
.on-ink .entry:hover{ background:var(--ink-soft); }
.on-ink .entry__num{ color:var(--brass); }
.on-ink .entry__name{ color:var(--stone); }
.on-ink .entry__desc{ color:rgba(239,234,225,.76); }

.footnote{
  max-width:70ch; margin:clamp(28px,3.2vw,44px) auto 0;
  text-align:center;
  font-size:0.92rem; font-style:italic;
}
.on-ink .footnote{ color:rgba(239,234,225,.68); }

/* =========================================================================
   SPECIMEN: the studio section

   Brand and digital gets a different, richer treatment from the advisory
   ledger, on the theory that a creative capability should be shown and not
   merely listed. Big Didone names, brass hairline frame, an engraved
   numeral behind each block.
   ========================================================================= */

.specimen{
  list-style:none; margin:0; padding:0;
  display:grid;
  /* min() guard: a bare minmax(310px,…) forces a 310px track and overflows
     the page on phones narrower than about 350px. */
  grid-template-columns:repeat(auto-fit, minmax(min(310px,100%),1fr));
  gap:1px;
  background:rgba(180,145,60,.42);
  border:1px solid rgba(180,145,60,.42);
}

.spec{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  padding:clamp(28px,3.6vw,54px) clamp(24px,3vw,44px) clamp(32px,4vw,58px);
  transition:background-color .35s ease;
}
.spec:hover{ background:var(--ink-soft); }

/* Engraved numeral, decorative: the list order carries the meaning. */
.spec__num{
  position:absolute;
  top:clamp(-6px,-0.5vw,-2px); right:clamp(14px,1.6vw,26px);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(64px,7.4vw,124px);
  line-height:1;
  color:var(--brass);
  opacity:.24;
  pointer-events:none;
  user-select:none;
}

.spec__name{
  position:relative;
  margin:0 0 clamp(16px,1.8vw,24px);
  padding-bottom:clamp(14px,1.6vw,20px);
  max-width:22ch;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(24px,2.7vw,42px);
  line-height:1.04;
  letter-spacing:-0.018em;
  color:var(--stone);
  border-bottom:1px solid rgba(180,145,60,.5);
}

.spec__desc{
  position:relative;
  margin:0;
  max-width:38ch;
  font-size:0.985rem;
  line-height:1.64;
  color:rgba(239,234,225,.78);
}

/* =========================================================================
   TERMS: method as numbered clauses from a deed
   ========================================================================= */

.clauses{
  list-style:none; margin:0 auto; padding:0;
  max-width:940px;
  counter-reset:clause;
}
.clause{
  display:grid;
  grid-template-columns:clamp(52px,6vw,86px) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px);
  padding:clamp(20px,2.4vw,32px) 0;
  border-bottom:1px solid rgba(20,18,15,.22);
}
.clause:first-child{ border-top:1px solid rgba(20,18,15,.22); }
.clause__num{
  font-family:var(--inscribe); font-weight:700;
  font-size:clamp(13px,1.16vw,17px);
  letter-spacing:0.1em;
  color:var(--brass-deep);
  padding-top:.18em;
}
.clause h3{
  margin:0 0 8px;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(20px,1.78vw,27px);
  letter-spacing:-0.012em;
  line-height:1.15;
  color:var(--oxblood);
}
.clause p{ margin:0; font-size:0.985rem; color:var(--grey); max-width:62ch; }

/* =========================================================================
   THE PLATE: the firm, as a brass plaque
   ========================================================================= */

.plate-sect{ text-align:center; }

.plate{
  max-width:760px; margin:0 auto;
  padding:clamp(30px,4.4vw,64px) clamp(22px,3.6vw,56px);
  background:linear-gradient(158deg, rgba(214,181,105,.22), rgba(214,181,105,.06) 46%, rgba(214,181,105,.18));
  border:1px solid rgba(214,181,105,.72);
  outline:1px solid rgba(214,181,105,.34);
  outline-offset:7px;
}
.plate__crest{
  margin:0 auto clamp(18px,2.4vw,28px);
  width:clamp(38px,4.4vw,58px); height:auto;
  color:var(--brass-light);
}
.plate__name{
  margin:0 0 6px;
  font-family:var(--inscribe); font-weight:700;
  font-size:clamp(15px,2.05vw,29px);
  letter-spacing:0.19em; text-transform:uppercase;
  line-height:1.28;
}
.plate__sub{
  margin:0 0 clamp(24px,3vw,38px);
  font-family:var(--inscribe); font-weight:600;
  font-size:clamp(9.5px,0.78vw,11.5px);
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--brass-light);
}
.plate__body{
  max-width:62ch; margin:0 auto clamp(26px,3.2vw,42px);
  font-size:1rem; line-height:1.66;
  color:rgba(239,234,225,.88);
  text-align:left;
}

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

.contact{ text-align:center; }
.contact__h2{
  margin:0 auto clamp(18px,2.2vw,30px);
  max-width:20ch;
  font-family:var(--display); font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(32px,5.4vw,80px);
  line-height:1.02; letter-spacing:-0.02em;
  color:var(--oxblood);
}
.contact__lede{
  max-width:52ch; margin:0 auto clamp(34px,4.2vw,56px);
  font-size:clamp(16.5px,1.24vw,19.5px);
  color:var(--grey);
}

.mailto{
  display:inline-block;
  text-decoration:none;
  font-family:var(--display); font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(21px,3.5vw,52px);
  line-height:1.1;
  letter-spacing:-0.01em;
  word-break:break-word;
  padding:10px clamp(8px,2vw,26px) 14px;   /* top padding: comfortable tap target */
  border-bottom:2px solid var(--brass);
  transition:color .24s ease, border-color .24s ease;
}
.mailto:hover{ color:var(--oxblood); border-color:var(--oxblood); }

.contact__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(230px,100%),1fr));
  gap:clamp(26px,3.4vw,54px);
  max-width:840px;
  margin:clamp(46px,5.4vw,84px) auto 0;
  text-align:left;
}
.contact__label{
  margin:0 0 12px;
  font-family:var(--inscribe); font-weight:700;
  font-size:9.5px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--brass-deep);
}
.contact__grid p:not(.contact__label){ font-size:0.96rem; line-height:1.68; }

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

.site-foot{
  background:var(--ink); color:var(--stone);
  padding:clamp(48px,5.6vw,86px) 0 clamp(28px,3vw,42px);
  text-align:center;
}
.site-foot__mark{
  display:inline-block; text-decoration:none;
  font-family:var(--inscribe); font-weight:700;
  font-size:clamp(14px,1.5vw,21px);
  letter-spacing:0.22em; text-transform:uppercase;
}
.site-foot__mark .wordmark__amp{ color:var(--brass); }

.site-foot__nav{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(14px,2.2vw,34px);
  margin:clamp(24px,3vw,38px) 0;
  padding:clamp(20px,2.4vw,30px) 0;
  border-top:1px solid rgba(180,145,60,.36);
  border-bottom:1px solid rgba(180,145,60,.36);
}
.site-foot__nav a{
  text-decoration:none;
  font-family:var(--inscribe); font-weight:600;
  font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(239,234,225,.82);
  padding:10px 4px;        /* tap target: 10.5px text alone is far too small to hit */
  transition:color .2s ease;
}
.site-foot__nav a:hover{ color:var(--brass-light); }

.site-foot__scope{
  max-width:80ch; margin:0 auto;
  font-size:0.86rem; line-height:1.7;
  color:rgba(239,234,225,.62);
}
.site-foot__legal{
  max-width:88ch; margin:clamp(22px,2.6vw,32px) auto 0;
  font-size:0.79rem; line-height:1.74;
  color:rgba(239,234,225,.55);
}
.site-foot__legal a{
  color:var(--brass-light); text-decoration:none;
  margin-left:10px;
  display:inline-block; padding:8px 4px;   /* tap target */
}
.site-foot__legal a:hover{ text-decoration:underline; }

/* =========================================================================
   REVEAL
   ========================================================================= */

.reveal{
  opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-in{ opacity:1; transform:none; }

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

@media (max-width:980px){
  .columns{ columns:1; column-rule:none; }
  .entry{
    grid-template-columns:clamp(48px,9vw,72px) minmax(0,1fr);
    row-gap:10px;
  }
  .entry__desc{ grid-column:2; }
}

@media (max-width:860px){
  :root{ --head-h:60px; }
  .site-nav, .head-cta{ display:none; }
  .burger{ display:flex; }
  .guilloche{ width:190vw; opacity:.42; }
  .plate__body, .contact__grid{ text-align:left; }
}

/* ---- phones ---- */
@media (max-width:700px){
  /* Two 700px-square animated layers is a lot of compositing for a phone,
     and it runs the battery for a background ornament. The rosette stays,
     it just stops turning. */
  .guilloche__layer{ animation:none; will-change:auto; }
}

@media (max-width:600px){
  .btn{ width:100%; text-align:center; }
  .masthead__name{ letter-spacing:0.04em; }
  .columns p:first-child::first-letter{ font-size:3.2em; }
  .clause{ grid-template-columns:1fr; gap:8px; }

  /* Outlines are drawn outside the border box, so a 5px to 7px offset sits
     within a couple of pixels of the viewport edge at this width. */
  .stance{ outline-offset:3px; }
  .plate{ outline-offset:4px; }

  /* The oversized engraved numeral is a watermark on desktop, where there is
     room for it beside the heading. At this width it would sit underneath the
     heading and eat its legibility, so it comes into the flow as a small
     legible brass numeral instead: 6.28:1 on ink, and it reads as a numbered
     specimen rather than as decoration. */
  .spec__num{
    position:static;
    display:block;
    font-size:34px;
    line-height:1;
    opacity:1;
    margin:0 0 10px;
  }
  .spec__name{ font-size:clamp(23px,6.4vw,30px); max-width:none; }

  /* Push the small chrome links up to a 44px touch target. On desktop these
     are mouse targets and the tighter padding is correct there. */
  .wordmark{ padding:14px 2px; }
  .site-foot__nav a{ padding:16px 8px; }
  .site-foot__legal a{ padding:14px 8px; }
}

/* ---- very narrow phones ---- */
@media (max-width:360px){
  :root{ --gut:16px; }
  .masthead__dateline{ font-size:9px; letter-spacing:0.2em; }
  .plate__name{ letter-spacing:0.14em; }
  .spec__num{ font-size:30px; }
}

/* =========================================================================
   MOTION AND PRINT
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .guilloche__layer{ animation:none; will-change:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .entry, .spec, .mailto, .btn, .site-nav a::after{ transition:none; }
}

@media print{
  .site-head, .mobile-nav, .guilloche{ display:none; }
  body{ background:#fff; color:#000; }
  .sect, .masthead{ padding:20px 0; background:#fff !important; color:#000 !important; }
  .reveal{ opacity:1; transform:none; }
}