/* ============================================================
   CLEAVE — "Manuscript" edition (v2.0.0)
   Typeface : EB Garamond (display + text), Jost for micro-labels
   Principle: one continuous ivory page. Navy is reserved for the
   hero, the heritage plate, the enquiry and the closing band.
   Sections are separated by fine gold rules, not colour blocks.
   ============================================================ */

:root{
  --ink:#14162c; --ink2:#0c0d1f;
  --bone:#f6f2e8; --bone2:#efe9db; --paper:#f6f2e8;
  --gold:#a9863f; --gold2:#c9a85f;
  --gold-text:#7a5f26;   /* gold for small text on ivory (AA) */
  --gold-deep:#8a6c2f;   /* gold for filled buttons (AA with white) */
  --blue:#26396a; --crimson:#7c2a33;
  --line:rgba(169,134,63,.32); --line2:rgba(169,134,63,.18);
  --muted:#5f5c4d;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,Segoe UI,sans-serif;
  --measure:64ch;
  --pad:clamp(22px,5vw,54px);
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  background:var(--paper);
  color:var(--ink);
  font-size:18.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;cursor:pointer}

/* ---------- typographic atoms ---------- */
.serif{font-family:var(--serif)}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:.002em}
em{font-style:italic;color:var(--gold)}
strong,b{font-weight:600}

.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text);
}
/* on dark grounds the lighter gold is the legible one */
.mhero .eyebrow, .phero .t .eyebrow, .her .eyebrow, .enq .eyebrow, .ctaband .eyebrow{color:var(--gold2)}

.col-link{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);border-bottom:1px solid transparent;transition:.2s;
  display:inline-block;
  /* padding at the top only, so the target clears 24px without moving the
     underline away from the text */
  padding:5px 0 3px
}
.col-link:hover{border-color:var(--gold)}

.btn{
  display:inline-block;font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;padding:15px 34px;
  border:1px solid var(--btn-bg,var(--gold-deep));background:var(--btn-bg,var(--gold-deep));
  color:var(--btn-text,#fff);transition:.28s
}
.btn:hover{background:transparent;color:var(--btn-bg,var(--gold-text))}
.btn.ghost{background:rgba(169,134,63,.14);color:var(--gold-text);border-color:var(--gold-deep);font-weight:500}
.btn.ghost:hover{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
.btn.lightghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.58)}
.btn.lightghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* reveal */
/* The revealed state used to be the class 'in', which is also the layout
   wrapper class used inside .htl, .film, .bench and others. A row that
   scrolled into view therefore started matching '.htl .in' and lost its
   vertical padding, which is why the heritage entries looked squashed. */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.inview{opacity:1;transform:none}
/* cards inside a horizontal track never intersect until scrolled sideways, so they must not depend on the reveal observer */

/* hairline rule between stacked light sections */
.manifesto, .disc, .proc, .jour, .pintro{position:relative}
.manifesto:before, .disc:before, .proc:before, .jour:before, .pintro:before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(var(--maxw),calc(100% - 2*var(--pad)));height:1px;background:var(--line)
}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:14px var(--pad);transition:.35s;color:#fff;gap:clamp(14px,2vw,34px)
}
header:not(.scrolled){background:linear-gradient(180deg,rgba(12,13,31,.8) 8%,rgba(12,13,31,.34) 62%,transparent)}
header .logo{display:flex;align-items:center;flex-shrink:0}
.logo-img{height:68px;width:auto;display:block;flex-shrink:0}
/* the letterspaced wordmark is now a fallback: it appears only if the logo
   files cannot be loaded, so the header is never left empty */
.logo-word{display:none;font-family:var(--serif);font-weight:500;letter-spacing:.42em;font-size:22px;padding-left:.42em;white-space:nowrap}
.logo.nomark .logo-img{display:none!important}
.logo.nomark .logo-word{display:block}
header nav{display:flex;gap:clamp(13px,1.7vw,26px);flex-shrink:1;min-width:0}
header nav a{
  font-family:var(--sans);font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  opacity:1;transition:.2s
}
header nav a:hover{color:var(--gold2)}
header .right{display:flex;align-items:center;gap:20px;flex-shrink:0}
header .reserve{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.62);padding:10px 20px;transition:.25s
}
header .reserve:hover{background:#fff;color:var(--ink)}
header.scrolled{background:var(--paper);color:var(--ink);padding:10px var(--pad);box-shadow:0 1px 0 var(--line)}
header.scrolled .reserve{border-color:var(--gold-deep);color:var(--gold-text)}
header.scrolled .reserve:hover{background:var(--gold);color:#fff}
body:not(.template-index) header{position:sticky;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line)}
body:not(.template-index) header .reserve{border-color:var(--gold-deep);color:var(--gold-text)}
body:not(.template-index) header .reserve:hover{background:var(--gold);color:#fff}
.logo-dark{display:none}
header.scrolled .logo-light{display:none}
header.scrolled .logo-dark{display:block}
body:not(.template-index) .logo-light{display:none}
body:not(.template-index) .logo-dark{display:block}
.navtoggle{display:none;background:none;border:0;color:inherit;font-size:22px;cursor:pointer;padding:4px 8px;min-width:32px;min-height:32px}
/* The pieces below belong to the phone bar. On a wide screen the delivered
   lockup does the whole job on its own, so they stay out of the way. */
.logo-mob,.warrant,.nav-reserve,.mob-only{display:none}

/* ============================================================
   HEADER, VERSION C  —  WIDE SCREENS ONLY
   ------------------------------------------------------------
   The warrant alone at the far left, the six sections split either
   side of a centred wordmark, Reserve as the one action, and a
   quiet strip above for the two things that are not part of the
   range. Chosen 29 September.

   EVERY RULE HERE IS INSIDE @media(min-width:1101px). The phone bar
   was signed off on 28 September and nothing below that width is
   touched: the hc- block is display:none there, and the delivered
   header is display:none above it. Changing one cannot affect the
   other, which is the whole reason there are two of them.
   ============================================================ */
.hc-util,.hc-bar{display:none}

@media(min-width:1101px){
  /* the delivered bar steps aside */
  header .navtoggle,header .logo,header nav,header .right{display:none}
  /* and the header stops being a row, so the strip can sit above the bar */
  header{display:block;padding:0}
  header.scrolled{padding:0}

  /* ---- the strip ---- */
  .hc-util{display:flex;align-items:center;justify-content:space-between;
    padding:0 var(--pad);height:34px;font-family:var(--sans);font-size:11.5px;
    letter-spacing:.16em;text-transform:uppercase;
    background:rgba(8,9,22,.92);color:rgba(255,255,255,.74);
    border-bottom:1px solid rgba(255,255,255,.1)}
  .hc-util a{transition:.2s}
  .hc-util a:hover{color:#fff}
  .hc-sep{margin:0 14px;opacity:.4}
  .hc-say{color:var(--gold2)}
  /* The left of the strip holds one link. It is deliberately roomy: this is
     where the language switcher goes when the site gains more than English. */
  .hc-nav{display:flex;align-items:center;gap:14px}
  header.scrolled .hc-util{background:var(--ink)}
  body:not(.template-index) .hc-util{background:var(--ink)}

  /* ---- the bar ---- */
  .hc-bar{display:flex;align-items:center;padding:14px var(--pad);transition:.35s}
  /* The warrant and Reserve sit INSIDE these two halves, not beside them.
     Outside, the halves are still equal but their contents are not, and the
     mark settles about 25px left of centre — measured, and the one thing a
     centred mark cannot get away with. */
  .hc-grp{display:flex;align-items:center;gap:clamp(11px,1.5vw,24px);flex:1 1 0;min-width:0}
  .hc-grp.l{justify-content:flex-start}
  .hc-grp.r{justify-content:flex-end}
  .hc-grp a{font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:.15em;
    text-transform:uppercase;white-space:nowrap;transition:.2s}
  .hc-grp a:hover{color:var(--gold2)}
  .hc-arms{height:clamp(52px,5.2vw,72px);width:auto;flex:0 0 auto;
    margin-right:clamp(14px,2vw,30px)}
  .hc-mark{flex:0 0 auto;padding:0 clamp(18px,2.4vw,44px);text-align:center}
  .hc-mark img{height:clamp(26px,2.5vw,36px);width:auto;margin:0 auto}
  .hc-place{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.34em;
    text-transform:uppercase;padding-left:.34em;margin-top:5px;color:var(--gold2)}
  .hc-act{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;
    text-transform:uppercase;border:1px solid rgba(255,255,255,.62);padding:9px 18px;
    white-space:nowrap;margin-left:clamp(12px,1.6vw,26px);transition:.25s;flex:0 0 auto}
  .hc-act:hover{background:#fff;color:var(--ink)}

  /* Light mark over the film, dark mark once the bar turns to paper. These
     four rules are the only place display is set on a mark: the sizing rules
     above are more specific, so a display:block in one of them beat the
     toggle and both colourways rendered, one under the other. */
  .hc-light{display:block}
  .hc-dark{display:none}
  header.scrolled .hc-light,body:not(.template-index) .hc-light{display:none}
  header.scrolled .hc-dark,body:not(.template-index) .hc-dark{display:block}

  header.scrolled .hc-act,body:not(.template-index) .hc-act{
    border-color:var(--gold-deep);color:var(--gold-text)}
  header.scrolled .hc-act:hover,body:not(.template-index) .hc-act:hover{
    background:var(--gold);color:#fff}
  header.scrolled .hc-place,body:not(.template-index) .hc-place{color:var(--gold-text)}
  header.scrolled .hc-bar{padding-top:8px;padding-bottom:8px}
  header.scrolled .hc-arms{height:44px}
  header.scrolled .hc-mark img{height:24px}
  header.scrolled .hc-place{display:none}
}

/* Between the phone breakpoint and about 1280 there is not enough room:
   measured at 1180 the right half was five pixels short, because it carries
   Reserve as well as three sections. Everything tightens a notch. */
@media(min-width:1101px) and (max-width:1280px){
  .hc-mark{padding:0 15px}
  .hc-mark img{height:25px}
  .hc-arms{height:56px;margin-right:13px}
  .hc-grp{gap:15px}
  .hc-grp a{font-size:13px;letter-spacing:.11em}
  .hc-act{padding:8px 13px;letter-spacing:.13em;margin-left:13px}
  .hc-util{font-size:10.5px;letter-spacing:.12em}
  .hc-sep{margin:0 9px}
}

/* hero film control: deliberately quiet, a gold hairline and nothing else */
.mhero-toggle{
  position:absolute;right:var(--pad);bottom:clamp(20px,3vw,34px);z-index:3;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(8,9,22,.34);border:1px solid rgba(201,168,95,.5);
  cursor:pointer;padding:0;transition:.28s;backdrop-filter:blur(2px)
}
.mhero-toggle:hover{border-color:var(--gold2);background:rgba(8,9,22,.6)}
.mhero-toggle:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.mhero-toggle .ico{position:relative;display:block;width:11px;height:13px}
/* pause: two bars. This is the state while the film is running. */
.mhero-toggle .ico:before,.mhero-toggle .ico:after{
  content:"";position:absolute;top:0;width:3px;height:13px;background:var(--gold2);transition:.2s
}
.mhero-toggle .ico:before{left:1px}
.mhero-toggle .ico:after{right:1px}
/* play: one triangle, once the film has been stopped */
.mhero-toggle[aria-pressed="true"] .ico:before{
  left:2px;width:0;height:0;background:none;
  border-left:11px solid var(--gold2);border-top:6.5px solid transparent;border-bottom:6.5px solid transparent
}
.mhero-toggle[aria-pressed="true"] .ico:after{display:none}
/* The enquiry form carries one field that no person ever sees: it is off
   screen, out of the tab order and hidden from screen readers. A script
   filling in every input it finds fills this one too, and that is the
   signal. Never use display:none here - some bots skip those. */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   MEDIA HERO (video / image)
   ============================================================ */
.mhero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;color:#fff;
  /* The header is fixed over this and the text is centred in the hero, so on a
     short screen the two meet: on a laptop the eyebrow was landing across the
     wordmark. This is the header cleared, and on a tall screen it only moves
     the text down by half of it. */
  padding-top:clamp(116px,12vh,150px)}
.mhero video,.mhero .mhero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mhero .mhero-ov{position:absolute;inset:0;z-index:1;background:var(--sec-ov,linear-gradient(180deg,rgba(10,11,28,.4),rgba(10,11,28,.74)))}
/* a flat overlay cannot guarantee contrast over moving footage, so the text
   side carries its own scrim. Worst case (a white frame) still clears AA. */
.mhero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,9,22,.74) 0%,rgba(8,9,22,.46) 46%,rgba(8,9,22,.14) 76%,rgba(8,9,22,0) 100%)}
.mhero .mhero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.mhero .eyebrow{color:var(--gold2)}
.mhero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(46px,7vw,104px);line-height:1.02;letter-spacing:-.005em;
  margin:18px 0 20px;max-width:15ch;color:var(--sec-text,#fff)
}
.mhero h1 em{font-style:italic;color:var(--gold2)}
.mhero p{
  font-family:var(--serif);font-style:normal;font-weight:400;
  font-size:clamp(18px,1.85vw,23px);line-height:1.6;
  max-width:46ch;margin-bottom:32px;color:var(--sec-text-2,#e6e2d6)
}
.mhero .cta{display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   HERO (split) — retained for any template still using it
   ============================================================ */
.hero{display:grid;grid-template-columns:46% 54%;min-height:100vh}

/* ============================================================
   MANIFESTO — opening statement, set as a manuscript page
   ============================================================ */
.manifesto{
  max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);
  background:var(--sec-bg,transparent)
}
.manifesto .eyebrow{margin-bottom:26px;display:block}
.manifesto > .serif{
  color:var(--sec-text,var(--ink));
  max-width:46ch!important;
  line-height:1.4!important;
  font-weight:400!important;
}
.manifesto > .serif p{margin-bottom:.6em}
.manifesto > .serif p:last-child{margin-bottom:0}
.manifesto > .serif p:first-of-type:first-letter{
  float:left;font-family:var(--serif);font-size:4.1em;line-height:.8;
  padding:.06em .12em 0 0;color:var(--gold);font-weight:400
}
.manifesto > .serif em{font-style:italic;color:var(--gold)}

/* ============================================================
   DISCIPLINES — an index on ivory, not a dark block
   ============================================================ */
.disc{background:var(--sec-bg,transparent);color:var(--ink);padding:clamp(62px,8vw,110px) 0}
.disc .head{
  max-width:var(--maxw);margin:0 auto 40px;padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap
}
.disc h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.7vw,52px);line-height:1.08;color:var(--sec-text,var(--ink));max-width:20ch}
.disc .panel{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,4.5vw,64px);align-items:start
}
.disc .tabs{display:flex;flex-direction:column}
.disc .tab{
  border-top:1px solid var(--line);padding:22px 0 22px 18px;display:flex;align-items:baseline;gap:16px;
  cursor:pointer;transition:background .25s,box-shadow .25s
}
.disc .tab:last-child{border-bottom:1px solid var(--line)}
.disc .tab .n{font-family:var(--serif);font-size:14px;color:var(--gold-text);width:30px;letter-spacing:.14em}
.disc .tab .t{font-family:var(--serif);font-size:clamp(22px,2.4vw,31px);color:#8b8878;transition:.25s;line-height:1.2}
.disc .tab .d{font-size:16px;color:var(--muted);max-width:46ch;margin-top:7px;display:none;line-height:1.66}
.disc .tab.on{background:var(--sec-tab-on,rgba(169,134,63,.07));box-shadow:inset 2px 0 0 var(--gold)}
.disc .tab.on .t{color:var(--sec-text,var(--ink))}
.disc .tab.on .d{display:block}
.disc .tab:hover .t{color:var(--ink)}
.disc .stage{position:relative;height:clamp(360px,44vw,540px);overflow:hidden;border:1px solid var(--line);background:var(--bone2)}
.disc .stage img,.disc .stage .stageimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s,transform 6s ease}
.disc .stage img.on,.disc .stage .stageimg.on{opacity:1;transform:scale(1.05)}
.disc .stage .cap{
  position:absolute;left:0;bottom:0;width:100%;padding:46px 26px 22px;
  background:linear-gradient(transparent,rgba(12,13,31,.86));
  font-family:var(--serif);font-size:21px;color:#fff
}

/* ============================================================
   COMMISSIONS — plates on a rule, carousel retained
   ============================================================ */
/* ============================================================
   THE RECORD — one plate, and the ten commissions as a ledger.
   Deliberately not another row of image cards: the Journal lower
   down the page is already that, and the two were reading as the
   same section twice.
   ============================================================ */
.rec{padding:clamp(62px,8vw,110px) 0;background:var(--sec-bg,transparent)}

@media(max-width:900px){
  /* the plate would be half the screen tall on its own, so it is capped and
     cropped to the top of the star rather than shown whole */
  .rec-plate img{max-height:46vh;object-fit:cover;object-position:50% 12%}
}
@media(max-width:620px){
}

/* THE HOUSE on the homepage. The page said what Cleave makes and how to
   commission, and never what the house is or where it works. The film is the
   one on The House page; this is the first place most people land. */
.hintro{padding:clamp(62px,8vw,110px) 0;background:var(--sec-bg,transparent)}
.hintro .inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(30px,5vw,68px);align-items:center}
.hintro-film{margin:0}
.hintro-film video{display:block;width:100%;height:auto;background:var(--ink2);
  border:1px solid var(--line)}
.hintro-film figcaption{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:14px}
.hintro-text .eyebrow{display:block;margin-bottom:14px}
.hintro h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,46px);
  line-height:1.1;max-width:16ch;color:var(--sec-text,var(--ink));margin-bottom:clamp(18px,2.4vw,26px)}
.hintro p{color:var(--muted);max-width:46ch}
.hintro p + p{margin-top:16px}
.hintro .col-link{margin-top:clamp(18px,2.4vw,26px)}
@media(max-width:900px){
  .hintro .inner{grid-template-columns:1fr}
  .hintro h2{max-width:22ch}
}

/* ============================================================
   THE COMMISSION — journey + timeline, ruled ledger
   ============================================================ */
.proc{background:var(--sec-bg,transparent);padding:clamp(62px,8vw,110px) 0;scroll-margin-top:80px}
.proc .inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.proc .eyebrow{margin-bottom:14px;display:block}
.proc h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.7vw,52px);
  margin-bottom:clamp(38px,5vw,60px);max-width:22ch;line-height:1.08;color:var(--sec-text,var(--ink))
}
/* journey (home page) */
.commission .journey{position:relative}
.commission .jstep{
  display:block;padding:clamp(24px,3.2vw,40px) 0;border-bottom:1px solid var(--line)
}
.commission .jstep:first-child{border-top:1px solid var(--line)}
.commission .jstep .txt{
  display:grid;grid-template-columns:104px 1fr;column-gap:clamp(20px,3vw,44px);
  align-items:baseline
}
.commission .jstep .k{
  grid-column:1;grid-row:1 / span 2;
  font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);color:var(--gold);
  line-height:1;letter-spacing:.04em;text-transform:none;margin:0
}
.commission .jstep h3{grid-column:2;grid-row:1;font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.5vw,31px);margin-bottom:9px;line-height:1.14;color:var(--sec-text,var(--ink))}
.commission .jstep p{grid-column:2;grid-row:2;font-size:17px;color:var(--muted);max-width:58ch;line-height:1.74}
.commission .jstep .num{display:none}
/* timeline (category pages) */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,34px);border-top:1px solid var(--line);padding-top:30px}
.tstep{position:relative}
.tstep .n{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);color:var(--gold-text);letter-spacing:.06em;line-height:1;display:block;margin-bottom:10px}
.tstep h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 8px;color:var(--sec-text,var(--ink));line-height:1.2}
.tstep p{font-size:18px;color:var(--muted);line-height:1.7}

/* The steps were reading as more of the same ivory page, so on the category
   pages they now sit on the navy that the hero and the heritage plate use.
   Because the closing band directly beneath is also navy, that band goes to
   the second ivory on these pages only, so two dark blocks never touch. */
.proc--navy{padding:clamp(56px,7vw,96px) 0}
.navyplate{background:var(--ink2);color:#fff;padding:clamp(40px,5.4vw,76px) clamp(26px,4.4vw,64px)}
.navyplate .ph{margin-bottom:clamp(32px,4vw,50px)}
.navyplate .ph .eyebrow{color:var(--gold2);display:block;margin-bottom:12px}
.navyplate .ph h2{font-size:clamp(27px,3.3vw,44px);line-height:1.1;max-width:26ch;margin:0;color:#fff}
.navyplate .timeline{border-top:1px solid rgba(201,168,95,.42);padding-top:0;gap:0}
.navyplate .tstep{padding:clamp(26px,3.2vw,40px) clamp(16px,2.2vw,30px) 0;
  border-left:1px solid rgba(201,168,95,.2)}
.navyplate .tstep:first-child{border-left:0;padding-left:0}
.navyplate .tstep .n{font-size:clamp(27px,3vw,38px);color:var(--gold2);margin-bottom:14px}
.navyplate .tstep h3{color:#fff;font-size:21.5px}
.navyplate .tstep p{color:rgba(255,255,255,.72);font-size:16.5px}

/* ============================================================
   HERITAGE
   ============================================================ */
.her{position:relative;color:#fff;overflow:hidden}
.her img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.her .ov{position:absolute;inset:0;background:linear-gradient(104deg,rgba(10,11,28,.94) 32%,rgba(10,11,28,.62));z-index:1}
.her .inner{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:clamp(74px,10vw,140px) var(--pad);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,64px);align-items:center
}
.her h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.9vw,54px);line-height:1.14;color:var(--sec-text,#fff);max-width:22ch}
.her h2 em{font-style:italic;color:var(--gold2)}
.her .nums{display:flex;flex-direction:column;gap:26px;border-left:1px solid rgba(201,168,95,.45);padding-left:30px}
.her .nums .n{font-family:var(--serif);font-size:clamp(24px,2.7vw,36px);color:var(--gold2);line-height:1.14}
.her .nums .l{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#b6b3c2;margin-top:6px}

/* ============================================================
   JOURNAL — ruled ledger of stories
   ============================================================ */
.jour{padding:clamp(62px,8vw,110px) 0;background:var(--sec-bg,transparent)}
.jour .inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.jour .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;flex-wrap:wrap;gap:18px}
.jour h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.7vw,50px);color:var(--sec-text,var(--ink))}
.jgrid{display:grid;grid-template-columns:1fr;gap:0}
.jcard{
  display:grid;grid-template-columns:170px 1fr;column-gap:clamp(20px,3vw,38px);
  grid-template-rows:auto auto;align-content:center;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line)
}
.jcard:first-child{border-top:1px solid var(--line)}
.jcard .ph{grid-column:1;grid-row:1 / span 2;height:118px;overflow:hidden;margin:0;background:var(--bone2);align-self:center}
.jcard .cat{grid-column:2;grid-row:1;align-self:end}
.jcard h3{grid-column:2;grid-row:2;align-self:start}
.jcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.jcard:hover .ph img{transform:scale(1.05)}
.jcard .cat{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.jcard h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.2vw,27px);line-height:1.22;margin-top:7px;color:var(--sec-text,var(--ink))}
.jcard:hover h3{color:var(--gold)}

/* ============================================================
   ENQUIRY
   ============================================================ */
.enq{background:var(--sec-bg,var(--ink));color:#fff}
.enq .inner{
  max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,84px);padding:clamp(64px,8.5vw,116px) var(--pad);align-items:center
}
.enq h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,56px);line-height:1.08;margin:16px 0 20px;color:var(--sec-text,#fff)}
.enq h2 em{font-style:italic;color:var(--gold2)}
.enq p.lead{font-style:normal;color:#c9c5b8;max-width:44ch;margin-bottom:28px;font-family:var(--serif);font-size:19px;line-height:1.66}
.enq .channels{display:flex;flex-direction:column;gap:12px;font-size:16.5px}
.enq .channels a{color:#c9c5b8;display:flex;gap:14px;align-items:baseline}
.enq .channels a:hover{color:var(--gold2)}
.enq .channels .k{font-family:var(--sans);color:var(--gold2);width:96px;text-transform:uppercase;font-size:11px;letter-spacing:.18em;flex:none}
.form .f{margin-bottom:15px}
.form label{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#b3b0c2;margin-bottom:7px}
.form input,.form select,.form textarea{
  width:100%;padding:13px 15px;background:rgba(255,255,255,.05);
  border:1px solid rgba(169,134,63,.42);color:#fff;font-family:var(--serif);font-size:17px
}
.form input::placeholder,.form textarea::placeholder{color:#807e92}
.form .btn{width:100%;text-align:center;margin-top:4px}
/* form errors: named in words beside the field, never colour alone */
.form .err{font-family:var(--sans);font-size:12.5px;color:#f0b3b3;margin-top:6px;line-height:1.5}
.form .err[hidden]{display:none}
.form input[aria-invalid="true"],.form select[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:#e08d8d}
.form .form-note{font-family:var(--sans);font-size:13px;color:var(--gold2);margin-bottom:16px;line-height:1.55;
  border-left:2px solid var(--gold2);padding-left:12px}
.form .form-note[hidden]{display:none}
/* The note says three different things now - sending, sent, and could not be
   sent - so it stops being one colour. The words carry the meaning; the
   colour only agrees with them, for anyone who cannot tell these two apart. */
.form .form-note.ok{color:#9ec4a8;border-left-color:#9ec4a8}
.form .form-note.bad{color:#e8a89a;border-left-color:#e8a89a}
.enq--light .form .form-note.ok{color:#3f6b4c;border-left-color:#3f6b4c}
.enq--light .form .form-note.bad{color:#8c3a2e;border-left-color:#8c3a2e}

/* ============================================================
   PAGE HERO (category masthead)
   ============================================================ */
.phero{display:grid;grid-template-columns:calc(100% - var(--phero-img,50%)) var(--phero-img,50%);min-height:var(--phero-h,64vh)}
.phero .t{
  background:var(--sec-bg,var(--ink));color:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(72px,8vw,110px) clamp(28px,5vw,70px)
}
.phero .t h1{font-family:var(--serif);font-weight:400;font-size:var(--phero-h1,clamp(40px,5.4vw,80px));line-height:1.04;margin:16px 0;color:var(--sec-text,#fff)}
.phero .t h1 em{font-style:italic;color:var(--gold2)}
.phero .t p{font-family:var(--serif);font-style:normal;font-size:clamp(18px,1.8vw,22px);color:#dcd8ca;max-width:42ch;margin-bottom:26px;line-height:1.6}
.phero .t .btn{align-self:flex-start}
.phero .im{position:relative;overflow:hidden;background:var(--ink2)}
/* absolute so the photograph never contributes to the row height —
   a portrait file would otherwise stretch the hero past --phero-h */
.phero .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--phero-pos,50% 50%)}

/* ============================================================
   PAGE INTRO — "On honours" / "On jewellery" / "On writing"
   ============================================================ */
.pintro{background:var(--sec-bg,transparent);padding:clamp(58px,7.5vw,100px) 0}
.pintro .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.pintro .eyebrow{margin-bottom:22px;display:block}
.pintro p{
  font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.5vw,32px);
  line-height:1.44;color:var(--sec-text,#3b3829);max-width:46ch
}
.pintro p:first-of-type:first-letter{
  float:left;font-family:var(--serif);font-size:4em;line-height:.8;
  padding:.06em .12em 0 0;color:var(--gold);font-weight:400
}
.pintro p em{font-style:italic;color:var(--gold)}

/* ============================================================
   GENERIC SECTION + RANGE GRID
   ============================================================ */
.sec{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,8vw,110px) var(--pad);background:var(--sec-bg,transparent)}
.sec .eyebrow{margin-bottom:14px;display:block}
.sec h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.7vw,50px);line-height:1.08;margin-bottom:34px;max-width:22ch;color:var(--sec-text,var(--ink))}

/* ============================================================
   FEATURED COMMISSION — the signature highlight, kept strong
   ============================================================ */
.feat{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  max-width:var(--maxw);margin:0 auto;border:1px solid var(--line);background:var(--bone2)
}

/* ============================================================
   CTA BAND
   ============================================================ */
.ctaband{background:var(--sec-bg,var(--ink));color:#fff;text-align:center;padding:clamp(66px,8.5vw,112px) var(--pad)}
.ctaband .eyebrow{display:block;margin-bottom:14px}
.ctaband h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,54px);margin:0 auto 24px;max-width:20ch;line-height:1.1;color:var(--sec-text,#fff)}
.ctaband h2 em{font-style:italic;color:var(--gold2)}
/* paired with .proc--navy above: on the pages whose commission band is navy,
   the closing band carries the second ivory instead. */
.ctaband--light{background:var(--bone2);color:var(--ink);border-top:1px solid var(--line)}
.ctaband--light .eyebrow{color:var(--gold-text)}
.ctaband--light h2{color:var(--ink)}
.ctaband--light h2 em{color:var(--gold-text)}

/* ============================================================
   FAQ
   ============================================================ */
.faqp{max-width:820px;margin:0 auto}
.fq{border-top:1px solid var(--line)}
.fq:last-child{border-bottom:1px solid var(--line)}
/* .sec h2 caps headings at 22ch and adds a bottom margin; the question is an h2, so undo both */
.faqp .fq-q{margin:0;max-width:none}
/* the question is a button so it can be reached and used from the keyboard.
   Everything here exists to make a button look like the heading it replaced. */
.fq-q button{
  font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.3;
  color:var(--sec-text,var(--ink));background:none;border:0;width:100%;
  padding:22px 0;display:flex;justify-content:space-between;gap:20px;
  text-align:left;cursor:pointer;letter-spacing:inherit;text-transform:none
}
.fq-q button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.fq .pl{color:var(--gold);flex:0 0 auto}
.fq .a{font-size:17px;color:var(--muted);padding-bottom:22px;line-height:1.72}
.fq .a[hidden]{display:none}

/* ============================================================
   MEDIA GALLERY
   ============================================================ */
.gallery-wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,7vw,96px) var(--pad);background:var(--sec-bg,transparent)}

/* ============================================================
   THE HOUSE: the film, and the heritage register
   ============================================================ */
.film{padding:clamp(50px,6.5vw,88px) 0;border-top:1px solid var(--line)}
.film .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,58px);align-items:center}
.film .ftxt h2{font-size:clamp(26px,3.1vw,42px);margin:12px 0 14px;max-width:20ch}
.film .ftxt p{font-size:18.5px;color:var(--muted);max-width:44ch;line-height:1.68;margin-bottom:12px}
/* the plate frames the film the way the exemplar plates frame a photograph */
.film .fplate{background:var(--ink2);border:1px solid var(--line);padding:10px;margin:0}
.film .fplate video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#000}
.film .fplate figcaption{font-family:var(--sans);font-size:12.5px;color:#9a97a8;
  line-height:1.55;padding:12px 4px 2px;max-width:64ch}
@media(max-width:900px){.film .in{grid-template-columns:1fr}}

.htl{padding:clamp(50px,6.5vw,88px) 0 clamp(56px,7vw,96px);border-top:1px solid var(--line);background:var(--bone2)}
.htl .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.htl .hhead{margin-bottom:clamp(26px,3.4vw,44px)}
.htl .hhead h2{font-size:clamp(26px,3.1vw,42px);margin:12px 0 12px;max-width:24ch}
.htl .hhead p{font-size:18.5px;color:var(--muted);max-width:54ch;line-height:1.68}
.hlist{list-style:none;margin:0;padding:0}
/* the rows were reading as a squashed table. They now get roughly half again
   the vertical room, and the date column sits away from the text rather than
   beside it, so each entry reads as its own record. */
.hrow{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(24px,4vw,64px);
  padding:clamp(42px,5.2vw,68px) 0;border-top:1px solid var(--line)}
.hrow:last-child{border-bottom:1px solid var(--line)}
.hrow .when{font-family:var(--sans);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text);padding-top:10px;line-height:1.5}
.hrow .when .undated{color:var(--muted);opacity:.7;letter-spacing:.14em}
.hrow .what h3{font-size:clamp(22px,2.4vw,29px);line-height:1.2;margin-bottom:12px}
.hrow .what p{font-size:17.5px;color:var(--muted);max-width:60ch;line-height:1.74}
@media(max-width:760px){
  .hrow{grid-template-columns:1fr;gap:0;padding:clamp(26px,5vw,34px) 0}
  .hrow .when{padding-top:0;margin-bottom:12px}
  .hrow .what h3{margin-bottom:9px}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{padding:0;text-align:left;background:var(--footer-bg,var(--ink2));color:var(--footer-text,#b4b1c0)}
.footer-main{max-width:var(--maxw);margin:0 auto;padding:60px var(--pad) 38px;display:flex;justify-content:space-between;align-items:center;gap:46px;flex-wrap:wrap}
.footer-brand{display:flex;flex-direction:column;gap:15px}
/* The mark and LONDON in their own box, only as wide as the mark, so
   LONDON centres under CLEAVE. Centring on .footer-brand would not do
   it: that column is as wide as the email and telephone line below,
   which is wider than the mark, and LONDON would sit adrift right. */
.footer-mark{display:flex;flex-direction:column;align-items:center;width:fit-content;gap:13px}
.footer-mark > a{display:flex;flex-direction:column;align-items:center;gap:13px}
.fm-arms{height:84px;width:auto;display:block}
.fm-word{height:36px;width:auto;display:block}
.footer-brand.nomark .fm-arms,.footer-brand.nomark .fm-word{display:none!important}
.footer-logo{width:auto;display:block;height:90px}
.footer-brand .big{display:none;font-family:var(--serif);font-weight:400;letter-spacing:.26em;font-size:40px;color:inherit;padding-left:.26em;line-height:1;margin:0}
.footer-brand.nomark .footer-logo{display:none!important}
.footer-brand.nomark .big{display:block}
/* LONDON, set under the wordmark the way the house lockup sets it. The
   By Appointment wording used to sit here, which repeated what is already
   printed inside the mark above. */
.footer-warrant{text-align:center;font-family:var(--sans);font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold2);padding-left:.34em;margin-top:-4px}
.footer-nav{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:flex-end;align-items:center}
/* padding rather than type size, so the target clears 24px without the
   footer looking any different */
.footer-nav a{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:inherit;transition:.2s;padding:6px 0;display:inline-block}
.footer-nav a:hover{color:var(--gold2)}

/* ============================================================
   FOOTER NAVIGATION: headed columns on a wide screen,
                      accordion on a phone
   ------------------------------------------------------------
   One set of groups in the markup, two arrangements. The wide
   screen used to dissolve them with display:contents and pour
   twelve links into a single centred row; that is a wall, not a
   structure, and it is what this replaces.

   The legal links used to appear twice in the markup on purpose -
   in .bar up here, in the fourth group on a phone - because CSS
   cannot move a node between two parents. Now that there is a
   column for them, .bar's copies are hidden at both widths and
   each link is shown exactly once.
   ============================================================ */
@media(min-width:1101px){
  .footer-main{align-items:flex-start;gap:38px 54px}
  .footer-nav{
    display:flex;flex-wrap:wrap;gap:30px 44px;
    justify-content:flex-end;align-items:flex-start
  }
  .fgroup{display:flex;flex-direction:column;min-width:0}
  .fgroup--legal{display:flex}
  .fgh{display:block;margin:0 0 14px}
  /* the heading is a button because a phone needs it to be one; up here
     there is nothing to open, so it is stripped back to a heading and
     cannot be pressed. initFooterNav already pins the panels open and
     sets aria-expanded above 1100px. */
  .fgh button{
    background:none;border:0;padding:0;margin:0;cursor:default;
    pointer-events:none;text-align:left;line-height:1;
    font-family:var(--sans);font-size:11px;font-weight:400;
    letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)
  }
  .fgh .fgc{display:none}
  .footer-nav .fglinks,
  .footer-nav .fglinks[hidden]{display:flex;flex-direction:column}
  /* sentence case at normal tracking. Uppercase at .16em reads along a
     row and runs together in a column - the same thing the phone footer
     taught in September. */
  .footer-nav .fglinks a{
    display:block;padding:5px 0;font-size:13px;letter-spacing:.01em;
    text-transform:none;color:#cfccd8
  }
  .footer-nav .fglinks a:hover{color:var(--gold2)}
  /* the legal column carries these now */
  .site-footer .bar-left a{display:none}
}

@media(max-width:1100px){
  .footer-nav{display:block;width:100%;margin-top:10px}
  .fgroup{display:block;border-top:1px solid rgba(255,255,255,.13)}
  .fgroup--legal{display:block}
  .fgroup:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
  .fgh{display:block;margin:0}
  .fgh button{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    width:100%;background:none;border:0;padding:16px 0;cursor:pointer;
    font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.01em;
    text-transform:none;color:#fff;text-align:left;line-height:1.25
  }
  .fgh button:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
  .fgc{flex:0 0 auto;transition:transform .25s;opacity:.7}
  .fgh button[aria-expanded="true"] .fgc{transform:rotate(180deg)}
  .footer-nav .fglinks{display:block;padding:0 0 14px}
  .footer-nav .fglinks[hidden]{display:none}
  /* sentence case, normal spacing. The uppercase and .16em tracking that the
     wide footer uses is unreadable stacked - the words run into each other. */
  .footer-nav .fglinks a{
    display:block;padding:8px 0;font-size:13px;letter-spacing:.01em;
    text-transform:none;color:#cfccd8
  }
  .footer-nav .fglinks a:hover{color:var(--gold2)}
  .site-footer .bar-left a{display:none}
}
.site-footer .bar{max-width:var(--maxw);margin:0 auto;padding:18px var(--pad);border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8f8d9e;flex-wrap:wrap;gap:10px}
footer .big{font-family:var(--serif);font-weight:400;letter-spacing:.3em;color:#fff;line-height:1}

/* ============================================================
   CONTENT SHELLS (pages, blog, product, cart, customers)
   ============================================================ */
.shell{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vw,90px) var(--pad)}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.skip-to-content{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:1000}
.skip-to-content:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:11px 18px;background:var(--ink);color:#fff;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .disc .panel{grid-template-columns:1fr;gap:30px}
  /* each discipline is its own card here: picture, name, a line, the way in */
  .disc .stage{display:none}
  .disc .tab{padding:0 0 34px;border-bottom:0}
  .disc .tab:last-child{border-bottom:0}
  .disc .tab .n{display:none}
  .disc .tab .d{display:block;max-width:none}
  .disc .tab.on{background:none;box-shadow:none}
  .disc .tab .t{color:var(--sec-text,var(--ink));margin-top:2px}
  .disc .discimg{
    display:block;width:100%;height:clamp(200px,52vw,280px);object-fit:cover;
    margin-bottom:15px;border:1px solid var(--line);opacity:1
  }
  .timeline{grid-template-columns:1fr 1fr;gap:32px 26px}
  .navyplate .timeline{gap:0}
  .navyplate .tstep:nth-child(odd){border-left:0;padding-left:0}
  .navyplate .tstep:nth-child(n+3){border-top:1px solid rgba(201,168,95,.2)}
}
@media(max-width:1100px){
  /* the lockup is centred absolutely here, so the bar needs its own height */
  header{padding:10px 16px;min-height:80px}
  .navtoggle{display:block;order:0;font-size:23px}
  /* centre the link itself, not the image inside it, or the two offsets stack */
  header .logo{order:1;position:absolute;left:50%;transform:translateX(-50%)}
  /* !important because the Shopify header writes its logo height inline */
  /* THE PHONE BAR. The delivered lockup packs the arms, five lines of
     By Appointment and the wordmark into one image; at 30px the first two
     are specks. Split apart here: the wordmark in the middle, the warrant
     with its legend standing in the right-hand corner. */
  .logo-img{display:none!important}
  .logo-mob{display:block;height:24px;width:auto}
  .logo-mob-dark{display:none}
  header.scrolled .logo-mob-light{display:none}
  header.scrolled .logo-mob-dark{display:block}
  body:not(.template-index) .logo-mob-light{display:none}
  body:not(.template-index) .logo-mob-dark{display:block}

  .warrant{display:block;height:58px;width:auto}
  .warrant-dark{display:none}
  header.scrolled .warrant-light{display:none}
  header.scrolled .warrant-dark{display:block}
  body:not(.template-index) .warrant-light{display:none}
  body:not(.template-index) .warrant-dark{display:block}

  .nav-reserve{
    display:block;align-self:stretch;margin-top:34px;padding-top:26px;
    font-size:clamp(14px,3.9vw,17px);letter-spacing:.14em;
    border-top:1px solid rgba(201,168,95,.34);color:var(--gold2)!important
  }
  .footer-logo{height:62px!important}
  header .right{order:2;display:block}
  /* Reserve lives in the menu on a phone; the warrant has this corner. */
  header .right .reserve{display:none}
  /* THE MENU is a sheet over the whole screen, not a panel hanging off the
     bar. The bar stays on top of it and the burger becomes a cross, so there
     is never a question of how to get out. Always navy, whichever page it
     was opened from. */
  header nav{
    display:none;position:fixed;inset:0;width:100%;height:100dvh;z-index:1;
    background:var(--ink);flex-direction:column;align-items:flex-start;
    padding:calc(96px + env(safe-area-inset-top,0px)) 24px 48px;
    gap:0;overflow-y:auto;overscroll-behavior:contain
  }
  header.open nav{display:flex}
  .mob-only{display:block}
  header.open{background:var(--ink);box-shadow:none;color:#fff}
  header.open .navtoggle,header.open .right{position:relative;z-index:2}
  header.open .logo{z-index:2}
  /* the sheet is navy, so the bar wears its light pair over it */
  header.open .logo-mob-dark,header.open .warrant-dark{display:none}
  header.open .logo-mob-light,header.open .warrant-light{display:block}

  header nav a{
    font-family:var(--sans);font-weight:300;color:#fff;
    font-size:clamp(23px,6.6vw,31px);letter-spacing:.05em;
    padding:9px 0;line-height:1.14
  }
  header nav a:active{color:var(--gold2)}
  header nav .ngap{margin-top:30px}

  .mhero{min-height:64vh}
  .phero{grid-template-columns:1fr;min-height:auto}
  .phero .im{min-height:46vh;order:-1}
  .her .inner, .enq .inner{grid-template-columns:1fr}
  .her .nums{flex-direction:row;border-left:0;border-top:1px solid rgba(201,168,95,.45);padding:22px 0 0;flex-wrap:wrap;gap:22px}
  .commission .jstep .txt{grid-template-columns:1fr;row-gap:4px}
  .commission .jstep .k{grid-column:1;grid-row:1;margin-bottom:6px}
  .commission .jstep h3{grid-column:1;grid-row:2}
  .commission .jstep p{grid-column:1;grid-row:3}
  .jcard{grid-template-columns:120px 1fr;column-gap:20px}
  .jcard .ph{height:86px}
}
@media(max-width:560px){
  body{font-size:17.5px}
  .jcard{grid-template-columns:1fr}
  .jcard .ph{grid-column:1;grid-row:1;height:190px}
  .jcard .cat{grid-column:1;grid-row:2;margin-top:12px}
  .jcard h3{grid-column:1;grid-row:3}
  .manifesto > .serif p:first-of-type:first-letter,.pintro p:first-of-type:first-letter{font-size:3.2em}
}

/* ============================================================
   v2.1 — THE REGISTER (category pages) + piece modal
   ============================================================ */
body.lb-open{overflow:hidden}
/* ============ THE REGISTER ============ */
/* no border-top here: the exemplar band that opens the register carries
   its own top rule, and two rules a few pixels apart read as an error */
/* the register is three sections in sequence, so the outer spacing sits on the
   first and last of them rather than on one wrapper around all three */
.cat-open{padding-top:clamp(28px,3.5vw,48px)}
.cat-close{padding-bottom:clamp(56px,7vw,96px)}

/* exemplar — set apart as its own framed band */
.exemplar-band{background:var(--bone2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
               padding:clamp(38px,5vw,62px) 0;margin-bottom:clamp(50px,6.5vw,86px)}
.exemplar-band .ex-lead{max-width:var(--maxw);margin:0 auto clamp(20px,2.6vw,30px);padding:0 var(--pad)}
.exemplar-band .ex-lead .eyebrow{margin-bottom:12px}
.exemplar-band .ex-lead h2{font-size:clamp(26px,3.1vw,42px);line-height:1.1;max-width:22ch}
.exemplar{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.exemplar .plate{background:var(--ink2);border:1px solid var(--line);padding:10px}
.exemplar .plate img{width:100%;aspect-ratio:var(--ex-ratio,2.32)/1;object-fit:cover;object-position:var(--ex-pos,50% 50%)}
.exemplar--split{display:grid;grid-template-columns:minmax(0,1fr) 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.exemplar.exemplar--split .meta{grid-template-columns:1fr;padding-top:0;gap:20px}
.exemplar.exemplar--split dl{border-top:1px solid var(--line);padding-top:16px}
@media(max-width:860px){.exemplar--split{grid-template-columns:1fr}}
.exemplar .meta{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(22px,4vw,54px);padding-top:22px;align-items:start}
.exemplar h3{font-size:clamp(25px,2.9vw,38px);margin:8px 0 12px}
.exemplar p{font-size:19px;color:var(--muted);max-width:46ch;line-height:1.7;margin-bottom:22px}
.exemplar dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;border-top:1px solid var(--line);padding-top:16px;font-size:17px}
.exemplar dt{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6b6656;padding-top:5px}
.exemplar dd{color:var(--ink)}
@media(max-width:860px){.exemplar .meta{grid-template-columns:1fr}}

/* selection banner — opens the second block */
.selnote{max-width:var(--maxw);margin:0 auto clamp(14px,2vw,22px);padding:0 var(--pad)}
.selnote .in{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.selnote h2{font-size:clamp(24px,2.7vw,34px);margin-top:12px}
.selnote p{font-size:18.5px;color:var(--muted);max-width:54ch;margin-top:10px;line-height:1.68}

/* quiet call to action closing the register */
.rows-cta{max-width:var(--maxw);margin:0 auto;padding:26px var(--pad) 0;display:flex;justify-content:space-between;
          align-items:center;gap:24px;flex-wrap:wrap}
.rows-cta p{font-size:18px;color:var(--muted);max-width:52ch;line-height:1.66}

/* register rows */
.rows{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.row{display:grid;grid-template-columns:52px 200px 1fr 210px;gap:clamp(18px,3vw,40px);align-items:start;
     padding:26px 0;border-top:1px solid var(--line)}
.row:last-of-type{border-bottom:1px solid var(--line)}
.row .num{font-size:19px;color:var(--gold);padding-top:2px}
.row .pl{background:var(--bone2);border:1px solid var(--line2);padding:8px}
.row .pl img{width:100%;aspect-ratio:1.3/1;object-fit:contain;background:#fff}
.row h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:9px}
.row p{font-size:18.5px;color:var(--muted);line-height:1.68;max-width:48ch}
.row .spec{font-family:var(--sans);font-size:13px;letter-spacing:.03em;color:#615d4e;line-height:1.85;border-left:1px solid var(--line);padding-left:18px}
.row .spec b{font-family:var(--serif);font-size:17.5px;font-weight:500;color:var(--ink);letter-spacing:0}
@media(max-width:1000px){.row{grid-template-columns:44px 160px 1fr}.row .spec{grid-column:2 / -1;border-left:0;padding-left:0;border-top:1px solid var(--line2);padding-top:12px;margin-top:4px}}
@media(max-width:1000px){.row .rtxt{grid-column:3}}
@media(max-width:620px){
  .row{grid-template-columns:34px 1fr;gap:14px 16px}
  .row .pl{grid-column:2;max-width:190px}
  .row .rtxt{grid-column:2}
  .row .spec{grid-column:2}
  .row p{font-size:17.5px}
}

/* ============ AT THE BENCH — mosaic gallery ============ */
.bench{padding:clamp(50px,6.5vw,86px) 0 clamp(56px,7vw,96px);border-top:1px solid var(--line);margin-top:clamp(44px,5vw,68px)}
.bench .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.bench .bh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.bench .bh h2{font-size:clamp(26px,3.1vw,42px);margin-top:12px;max-width:20ch}
.bench .bh p{font-size:18.5px;color:var(--muted);max-width:46ch;margin-top:12px;line-height:1.68}
.bench .hint{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);white-space:nowrap}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;grid-auto-flow:row dense;gap:16px}
.tile{position:relative;overflow:hidden;background:var(--ink2);border:1px solid var(--line2);cursor:pointer;font:inherit;color:inherit;
      grid-column:span var(--c,1);grid-row:span var(--r,1);padding:0;display:block;width:100%;text-align:left}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.045)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;color:#fff;
           background:linear-gradient(transparent,rgba(10,11,28,.86));opacity:0;transition:opacity .3s}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1}
.tile .cap .ce{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.tile .cap .tt{font-size:19px;margin-top:4px}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:900px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}}
@media(max-width:560px){.mosaic{grid-template-columns:1fr}.tile{grid-column:span 1!important;grid-row:span 1!important}}

/* ============ MODAL — contained panel, page still visible behind ============ */
.lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
    padding:clamp(14px,5vh,54px) clamp(14px,4vw,34px);
    background:rgba(10,11,28,.68);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s,visibility 0s linear .32s}
.lb.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .32s,visibility 0s linear 0s}
.lb-box{position:relative;width:min(1040px,100%);max-height:min(88vh,760px);display:grid;
        grid-template-columns:1.05fr .95fr;grid-template-rows:minmax(0,1fr);
        background:var(--paper);border:1px solid var(--line);
        box-shadow:0 40px 110px rgba(8,9,22,.55);overflow:hidden;
        transform:translateY(16px) scale(.99);transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.lb.open .lb-box{transform:none}
.lb-img{position:relative;background:var(--ink2);min-height:300px;min-width:0}
.lb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(14px,2vw,26px)}
.lb-copy{padding:clamp(24px,3.2vw,42px);overflow-y:auto;-webkit-overflow-scrolling:touch;
         min-height:0;min-width:0;display:flex;flex-direction:column}
.lb-kicker{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text)}
.lb-copy h3{font-size:clamp(23px,2.6vw,34px);margin-top:10px;line-height:1.12}
.lb-rule{width:46px;height:1px;background:var(--gold);margin:16px 0 18px}
.lb-copy p.why{font-size:17.5px;line-height:1.72;color:var(--muted);margin-bottom:20px}
.lb-copy p.why:empty{display:none}
.lb-copy dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;border-top:1px solid var(--line);padding-top:15px;font-size:16.5px;margin-bottom:22px}
.lb-copy dt{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6b6656;padding-top:5px}
.lb-copy dd{color:var(--ink)}
.lb-cta{align-self:flex-start;margin-bottom:20px}
.lb-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
         border-top:1px solid var(--line2);padding-top:14px}
.lb-count{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lb-nav{display:flex;gap:8px}
.lb-nav button{background:transparent;border:1px solid var(--line);color:var(--ink);width:44px;height:44px;
               font-size:16px;line-height:1;cursor:pointer;transition:.22s}
.lb-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.lb-close{position:absolute;top:12px;right:12px;z-index:5;width:40px;height:40px;border-radius:50%;
          border:1px solid var(--line);background:rgba(246,242,232,.9);color:var(--ink);
          font-size:19px;line-height:1;cursor:pointer;transition:.22s}
.lb-close:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:820px){
  .lb-box{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:92vh}
  .lb-img{min-height:0;height:min(34vh,280px)}
  .lb-copy{padding:22px 20px 20px}
  .lb-copy p.why{font-size:16.5px}
}
@media(max-height:560px){
  .lb-box{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);max-height:94vh}
  .lb-img{min-height:0;height:auto}
}

@media(max-width:620px){
  .navyplate{padding:clamp(30px,7vw,44px) clamp(20px,5vw,30px)}
  .navyplate .timeline{grid-template-columns:1fr}
  .navyplate .tstep{border-left:0;padding-left:0;padding-right:0;
    border-top:1px solid rgba(201,168,95,.2)}
  .navyplate .tstep:first-child{border-top:0}
}

/* ============================================================
   STORIES — one piece, told at length. Built from the page hero,
   the register rows and the workshop mosaic, so the only new
   thing here is the pull quote rule.
   ============================================================ */
.story-hero{background:var(--ink2);color:#fff;padding:clamp(46px,6vw,86px) var(--pad) clamp(40px,5vw,70px)}
.story-hero .in{max-width:var(--maxw);margin:0 auto}
.story-hero .crumb{margin-bottom:26px}
.story-hero .crumb a{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);border-bottom:1px solid transparent;padding-bottom:2px}
.story-hero .crumb a:hover{border-color:var(--gold2);color:#fff}
.story-hero .crumb a+a:before{content:"\00b7";margin:0 12px;color:rgba(255,255,255,.3)}
.story-hero .eyebrow{color:var(--gold2);display:block;margin-bottom:14px}
.story-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,60px);
  line-height:1.04;max-width:17ch;margin-bottom:22px;color:#fff}
.story-hero .dek{color:rgba(255,255,255,.78);max-width:56ch;font-size:19px}

/* the photographs run from 480px to 3508px wide and are portrait as often as
   landscape, so the plate is a bounded frame rather than a full-width image.
   Nothing is upscaled and nothing is cropped. */
.story-plate{max-width:var(--maxw);margin:clamp(34px,4.6vw,64px) auto 0;padding:0 var(--pad)}
.story-plate .frame{background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,3vw,36px)}
.story-plate img{max-width:100%;max-height:min(66vh,620px);width:auto;height:auto}
.story-plate figcaption{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-top:14px;text-align:center}
/* a licence credit sits with the caption but reads as secondary to it */
.story-plate figcaption .credit{opacity:.72;letter-spacing:.12em}

.story-read{max-width:var(--maxw);margin:0 auto;padding:clamp(38px,5vw,70px) var(--pad) 0;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4.6vw,70px);align-items:start}
.story-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.9vw,34px);
  line-height:1.14;margin-bottom:16px}
.story-text p{color:var(--muted);margin-bottom:20px;max-width:62ch}
.story-text .sep{border:0;border-top:1px solid var(--line);margin:clamp(28px,3.6vw,44px) 0}

.story-pull{border-left:2px solid var(--gold);padding-left:24px;margin:clamp(28px,3.6vw,44px) 0}
.story-pull p{font-size:clamp(21px,2.4vw,28px);line-height:1.34;font-style:italic;
  color:var(--ink);max-width:36ch;margin:0}
.story-pull figcaption{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);margin-top:16px}

.story-spec{border-top:1px solid var(--gold);padding-top:22px;position:sticky;top:96px}
.story-spec .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text);display:block;margin-bottom:8px}
.story-spec .r{padding:13px 0;border-bottom:1px solid var(--line2)}
.story-spec dt{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:5px}
.story-spec dd{font-size:16.5px;line-height:1.5}

/* The gallery is the register mosaic, so a story reads like the rest of the
   site rather than like a separate template. Each tile's span is chosen from
   the real aspect of its photograph, and where no cell comes close enough the
   image keeps its whole frame on white instead of losing a crown or a ribbon
   to a cover crop. The mount is white because these were shot on white. */
.story-gal{max-width:var(--maxw);margin:clamp(34px,4.6vw,64px) auto 0;padding:0 var(--pad)}
.story-gal .tile{background:#fff;border:1px solid var(--line)}
.story-gal .tile--fit{background:var(--mount,#fff)}
.story-gal .tile--fit img{object-fit:contain}
.story-gal .tile .cap{padding:38px 14px 12px}

/* Coronation Pen lead: the footage runs once, without sound, and comes to
   rest on the still. Clicking the frame stops and starts it. */
.story-plate--film .frame{padding:0;background:#000;display:block;position:relative;overflow:hidden}
.story-plate--film video{display:block;width:100%;height:auto;max-height:none;cursor:pointer}
.story-plate--film .still{position:absolute;inset:0;width:100%;height:100%;max-height:none;
  object-fit:cover;opacity:0;transition:opacity .7s ease;pointer-events:none}
.story-plate--film .frame.ended .still{opacity:1}
.story-plate--film .mhero-toggle{right:16px;bottom:16px}
@media(prefers-reduced-motion:reduce){.story-plate--film .still{transition:none}}

/* Two columns: the rows follow the column width so a tall photograph keeps the
   same shape it has on a wide screen instead of losing its top to the crop. */
@media(max-width:900px){.story-gal.mosaic{grid-auto-rows:38vw}}
/* One column: the tiles take the height of their photographs, so nothing is
   cropped at all on a phone. */
@media(max-width:560px){
  .story-gal.mosaic{grid-auto-rows:auto;gap:14px}
  .story-gal .tile img{height:auto;object-fit:contain}
}

/* When the entry film finishes, the viewer is offered the reading rather than
   the booking form at the foot of the page. The panel covers the frame, which
   includes the native controls, so it carries its own replay. */
.fwrap{position:relative;display:block;line-height:0}
.fend{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:10px;line-height:1.5;
  padding:clamp(24px,4vw,54px);background:rgba(10,11,28,.88);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .5s}
.fend[hidden]{display:none}
.fend.on{opacity:1}
.fend .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold2)}
.fend-title{font-family:var(--serif);font-size:clamp(23px,2.6vw,34px);line-height:1.14;
  color:#fff;max-width:18ch}
.fend-dek{font-size:17px;color:rgba(255,255,255,.76);max-width:40ch;margin-top:2px}
/* two controls, because the headline alone did not read as a link */
.fend-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.fend-cta .btn{font-size:11px;padding:12px 20px}
@media(max-width:560px){.fend-cta{width:100%}.fend-cta .btn{flex:1 1 100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.fend{transition:none}}

/* the modal offers the story when the tile has one */
.lb-story{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);border-bottom:1px solid var(--line);padding-bottom:3px;
  align-self:flex-start;margin:-8px 0 20px;transition:border-color .2s}
.lb-story:hover{border-bottom-color:var(--gold)}
.lb-story[hidden]{display:none}

.story-next{background:var(--bone2);border-top:1px solid var(--line);margin-top:clamp(46px,6vw,86px);
  padding:clamp(36px,4.6vw,66px) var(--pad)}
.story-next .in{max-width:var(--maxw);margin:0 auto}
.story-next .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text);display:block;margin-bottom:22px}
/* .row is also the register row on a category page, and its top and bottom
   rules were bleeding into this one, which is what read as a double divider */
.story-next .row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);border:0}
/* the rule belongs to the cards, not to every link in the section: the
   All ten stories link was picking one up and reading as a second divider */
.story-next .row > a{display:block;border-top:1px solid var(--line)}
.story-next .yr{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);display:block;margin-top:16px}
.story-next h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;margin:8px 0 6px}
.story-next p{font-size:16.5px;color:var(--muted)}
.story-next a:hover h3{color:var(--gold-text)}

/* the stories band on a category page reuses the Read next component from the
   foot of a story, so the same thing looks the same wherever it appears */
.storyband{margin-top:0}
.storyband .sbhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(22px,3vw,34px)}
.storyband .sbhead .eyebrow{display:block;margin-bottom:10px}
.storyband .sbhead h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.1vw,42px);
  line-height:1.1;max-width:20ch;margin:0}
/* each card opens on its piece, so the hairline above it is one divider too many */
.storyband .row > a{border-top:0}
.storyband .ph{height:clamp(190px,17vw,236px);overflow:hidden;margin-bottom:16px;
  border:1px solid var(--line2);background:var(--mount,#fff);display:block}
.storyband .ph img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.storyband .row > a:hover .ph img{transform:scale(1.04)}
.storyband .yr{margin-top:0}

/* the index of all ten, as register rows */
.storylist{list-style:none;margin:0;padding:0}
.storyrow{border-top:1px solid var(--line)}
.storyrow:last-child{border-bottom:1px solid var(--line)}
.storyrow a{display:grid;grid-template-columns:150px 200px minmax(0,1fr);gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3.2vw,40px) 0;align-items:start}
.storyrow .when{font-family:var(--sans);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text);padding-top:9px}
.storyrow .when .undated{color:var(--muted);opacity:.7;letter-spacing:.14em}
.storyrow .th{border:1px solid var(--line);aspect-ratio:4/3;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}
.storyrow .th img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.storyrow h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,29px);
  line-height:1.2;margin-bottom:10px}
.storyrow p{font-size:17.5px;color:var(--muted);max-width:60ch;line-height:1.7}
.storyrow .cat{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:12px}
.storyrow a:hover h3{color:var(--gold-text)}

/* a link out of a heritage register row, where the entry has a story */
.hrow .more,.row .more{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);border-bottom:1px solid var(--line);display:inline-block;
  margin-top:12px;padding-bottom:3px}
.hrow .more:hover,.row .more:hover{border-color:var(--gold)}

@media(max-width:900px){
  .story-read{grid-template-columns:1fr}
  .story-spec{position:static}
  .story-next .row{grid-template-columns:1fr;gap:26px}
  .storyrow a{grid-template-columns:130px minmax(0,1fr);gap:20px}
  .storyrow .th{grid-column:1 / -1;max-width:320px}
}
@media(max-width:560px){
  .storyrow a{grid-template-columns:1fr;gap:10px}
  .storyrow .when{padding-top:0}
  .storyrow .th{max-width:none}
}

/* ============================================================
   DRAFT EDITING — the toolbar and the editable state.
   None of this reaches a saved copy: the script strips the bar
   and the editing attributes before it writes the file.
   ============================================================ */
.ce-bar{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:900;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;
  max-width:min(560px,calc(100vw - 28px));
  background:rgba(246,242,232,.97);backdrop-filter:blur(8px);
  border:1px solid var(--line);padding:9px 10px;
  box-shadow:0 6px 28px rgba(20,22,44,.13)
}
.ce-bar.on{border-color:var(--gold)}
.ce-b{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--line);background:transparent;color:var(--gold-text);
  cursor:pointer;transition:.18s;white-space:nowrap
}
.ce-b:hover{border-color:var(--gold-deep);background:rgba(169,134,63,.1)}
.ce-toggle{border-color:var(--gold-deep);background:var(--gold-deep);color:#fff}
.ce-toggle:hover{background:transparent;color:var(--gold-text)}
.ce-count{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:0 4px
}
.ce-count.ce-unsaved{color:var(--crimson)}
/* which copy of the page this is, shown only when it is not the working site */
.ce-where{
  font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:6px 10px;white-space:nowrap
}
.ce-save{border-color:var(--gold-deep);color:var(--gold-text);font-weight:500}
.ce-more{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* what you can type into */
.ce-editing [data-ce-key]{
  outline:1px dashed rgba(169,134,63,.5);outline-offset:6px;border-radius:1px;
  transition:outline-color .15s,background .15s
}
.ce-editing [data-ce-key]:hover{outline-color:var(--gold)}
.ce-editing [data-ce-key]:focus{
  outline:1px solid var(--gold);outline-offset:6px;
  background:rgba(169,134,63,.06)
}
/* on the dark bands the dashed rule has to lighten to stay visible */
.ce-editing .story-hero [data-ce-key],
.ce-editing .navyplate [data-ce-key],
.ce-editing .ctaband:not(.ctaband--light) [data-ce-key]{outline-color:rgba(201,168,95,.55)}
.ce-editing .story-hero [data-ce-key]:focus,
.ce-editing .navyplate [data-ce-key]:focus,
.ce-editing .ctaband:not(.ctaband--light) [data-ce-key]:focus{
  outline-color:var(--gold2);background:rgba(201,168,95,.1)
}
/* links must not look clickable while their text is being edited */
.ce-editing .storyrow a,.ce-editing .story-next a{cursor:text}

.ce-toast{
  position:fixed;left:50%;bottom:clamp(104px,12vw,128px);transform:translateX(-50%) translateY(10px);
  z-index:910;background:var(--ink);color:#fff;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
  padding:13px 20px;max-width:min(520px,calc(100vw - 32px));text-align:center;
  opacity:0;pointer-events:none;transition:.25s
}
.ce-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media print{.ce-bar,.ce-toast{display:none}}

/* ============================================================
   ENQUIRY, LIGHT (contact page)
   The contact page sat ink hero, ink enquiry, ink footer. On ivory
   it follows the rhythm of every other page: one dark masthead,
   light body, dark footer.
   ============================================================ */
.enq--light{background:var(--bone);color:var(--ink)}
.enq--light .inner{align-items:start}
.enq--light .eyebrow{color:var(--gold-text);display:block}
.enq--light h2{color:var(--ink)}
.enq--light h2 em{color:var(--gold-text)}
.enq--light p.lead{color:var(--muted)}
.enq--light .channels{gap:0;border-bottom:1px solid var(--line)}
.enq--light .channels a{color:var(--ink);border-top:1px solid var(--line);padding:15px 0}
.enq--light .channels a:hover{color:var(--gold-text)}
.enq--light .channels .k{color:var(--gold-text)}
.enq--light .form{background:#fff;border:1px solid var(--line);padding:clamp(26px,3.4vw,44px)}
.enq--light .form label{color:var(--gold-text)}
.enq--light .form input,.enq--light .form select,.enq--light .form textarea{
  background:var(--bone);border-color:var(--line);color:var(--ink)}
.enq--light .form input:focus,.enq--light .form select:focus,.enq--light .form textarea:focus{border-color:var(--gold)}
.enq--light .form input::placeholder,.enq--light .form textarea::placeholder{color:#8f8a78}
.enq--light .form .err{color:var(--crimson)}
.enq--light .form input[aria-invalid="true"],.enq--light .form select[aria-invalid="true"],
.enq--light .form textarea[aria-invalid="true"]{border-color:var(--crimson)}
.enq--light .form .form-note{color:var(--gold-text);border-left-color:var(--gold)}

/* visit: the house block, on the deeper ivory with a hairline above */
.visit{background:var(--bone2);border-top:1px solid var(--line)}
.visit-ph{margin:0}
.visit-ph img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.visit-addr{font-style:normal;font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink);
  margin-top:clamp(20px,2.6vw,28px);padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line);max-width:46ch}
.visit .col-link{display:inline-block}

/* the enquiry that used to sit under the gallery now closes its introduction */
.bench .bh .btn{margin-top:22px}

/* ============================================================
   FOOTER: contact line, legal links and company details
   The company's registered name, number, place of registration and
   registered office must be shown on its website (Trading Disclosures
   Regulations 2015).
   ============================================================ */
.footer-contact{display:flex;flex-wrap:wrap;gap:6px 22px;margin:4px 0 0;font-family:var(--sans);font-size:13px;letter-spacing:.04em}
.footer-contact a{color:inherit;transition:.2s}
.footer-contact a:hover{color:var(--gold2)}
/* Instagram, LinkedIn, Facebook. Quiet marks rather than brand-coloured
   badges: the footer is already carrying the Arms, and three logos in three
   other companies' colours would be the loudest thing on the page. */
.footer-social{display:flex;gap:20px;margin-top:16px}
.footer-social a{color:#9d9aab;transition:.2s;display:inline-flex;padding:2px}
.footer-social a:hover{color:var(--gold2)}
.footer-social a:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.site-footer .bar-left{display:flex;flex-wrap:wrap;gap:10px 28px}
.site-footer .bar a{color:inherit;border-bottom:1px solid rgba(255,255,255,.18);transition:.2s}
.site-footer .bar a:hover{color:var(--gold2);border-color:var(--gold2)}
.footer-legal{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 26px;font-family:var(--sans);
  font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:#8f8d9e}

/* the privacy line under the enquiry forms */
.form .form-privacy{font-family:var(--sans);font-size:12.5px;line-height:1.55;margin-top:14px;color:#9d9aae}
.form .form-privacy a{color:inherit;border-bottom:1px solid currentColor}
.enq--light .form .form-privacy{color:var(--muted)}
.enq--light .form .form-privacy a{color:var(--gold-text)}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal{max-width:calc(760px + 2 * var(--pad));margin:0 auto;padding:clamp(60px,8vw,110px) var(--pad) clamp(70px,9vw,120px)}
.legal-head{padding-bottom:clamp(26px,3.4vw,40px);margin-bottom:clamp(8px,1vw,14px);border-bottom:1px solid var(--line)}
.legal-head .eyebrow{display:block;margin-bottom:16px}
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,58px);line-height:1.08;color:var(--ink);margin-bottom:20px}
.legal .lead{font-family:var(--serif);font-size:clamp(19px,1.8vw,22px);line-height:1.6;color:var(--muted)}
.legal .legal-date{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);margin-top:18px}
.legal section{padding:clamp(26px,3.2vw,38px) 0;border-bottom:1px solid var(--line2)}
.legal section:last-child{border-bottom:0}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.2;color:var(--ink);margin-bottom:14px}
.legal p,.legal li,.legal dd{font-size:17.5px;line-height:1.72;color:var(--muted)}
.legal p + p{margin-top:12px}
.legal ul{margin:0;padding-left:1.1em}
.legal li{margin-bottom:10px}
.legal li::marker{color:var(--gold)}
.legal a{color:var(--gold-text);border-bottom:1px solid var(--line)}
.legal a:hover{border-color:var(--gold)}
.legal-basis{margin:0 0 16px}
.legal-basis dt{font-family:var(--serif);font-size:19px;color:var(--ink);margin-top:16px}
.legal-basis dt:first-child{margin-top:0}
.legal-basis dd{margin:4px 0 0}
.legal strong{font-weight:500;color:var(--ink)}
.legal ul{margin-top:14px}
/* the cookies page needs a level below h2, and a face for cookie names */
.legal h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.9vw,22px);color:var(--ink);margin:28px 0 10px}
.legal section > h3:first-of-type{margin-top:20px}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84em;
  color:var(--ink);background:rgba(169,134,63,.11);padding:1px 6px;border-radius:2px}
.legal-basis dt code{background:none;padding:0;font-size:.8em;letter-spacing:.01em}
.legal-head .legal-date{margin:0 0 22px}

/* ------------------------------------------------------------------
   FILMS INSIDE THE PAGE
   The same quiet control as the hero, but sitting on a film set into a
   section rather than one filling the screen. The hero has no button at
   all now: it simply runs.
   ------------------------------------------------------------------ */
.fwrap{position:relative}
.mhero-toggle.film-toggle{right:14px;bottom:14px;width:40px;height:40px}

/* ------------------------------------------------------------------
   SOUND ON THE HERO FILM
   The film runs muted, because no browser will autoplay it otherwise.
   This is the way to hear it. Same quiet hairline as the old pause
   control, in the corner where that used to sit.
   ------------------------------------------------------------------ */
.mhero-sound .ico-snd{display:block;width:20px;height:16px;line-height:0}
.mhero-sound svg{display:block;overflow:visible}
.mhero-sound svg path{fill:none;stroke:var(--gold2);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:opacity .18s}
.mhero-sound svg .spk{fill:var(--gold2);stroke-width:1.2}
/* muted: the speaker with a cross. Pressed: the speaker with its waves. */
.mhero-sound .on1,.mhero-sound .on2{opacity:0}
.mhero-sound[aria-pressed="true"] .off{opacity:0}
.mhero-sound[aria-pressed="true"] .on1,.mhero-sound[aria-pressed="true"] .on2{opacity:1}

/* ============================================================
   HEADER C: HERO CLEARANCE
   ------------------------------------------------------------
   Last in the file on purpose. This lived up in the header block
   and did nothing at all, because the original .mhero rule comes
   further down and has exactly the same specificity, so it simply
   won. The symptom was a padding-top of 116px where 176 had been
   asked for, and the eyebrow sitting 17px inside the header.
   ============================================================ */
@media(min-width:1101px){
  /* The hero text is centred in 88vh with the header fixed over it, so a
     taller header needs clearance or the eyebrow lands across the wordmark.
     Version C's bar is 154px against the delivered header's 96.

     Padding alone does NOT do it, which is the trap. align-items:center
     centres the text in the box; when the text plus this padding is taller
     than 88vh the overflow is split equally top and bottom, so the padding
     is simply eaten. Measured on a 1366x620 laptop the eyebrow finished
     17px ABOVE the bottom of the header — overlapping it — with a 176px
     padding-top supposedly protecting it.

     "safe" is what fixes it: it centres while there is room and falls back
     to the top the moment centring would push content out of the box, so
     the padding is always honoured. */
  .mhero{padding-top:clamp(176px,16vh,206px);align-items:safe center}
}

/* ============================================================
   FOOTER, CENTRED ON A PHONE
   ------------------------------------------------------------
   Last in the file on purpose. Written up in the footer block
   this did nothing to .bar: the base rule for it appears further
   down with the same specificity, so justify-content:space-between
   kept winning and the copyright line sat 56px off the axis.
   ============================================================ */
@media(max-width:1100px){
  /* The brand block centres on a phone: the mark, CLEAVE, LONDON, the
     contact line and the social marks all on one axis down the middle.
     .footer-mark is width:fit-content, so it needs the parent to centre it
     rather than text-align, which would not move a flex item. */
  .footer-brand{align-items:center;text-align:center;width:100%}
  .footer-main{justify-content:center}
  .footer-contact{justify-content:center}
  .footer-social{justify-content:center}
  /* the copyright and address sit under it, on the same axis */
  .site-footer .bar{justify-content:center;text-align:center;gap:6px 18px}
  .site-footer .bar-left{justify-content:center}
  .footer-legal{text-align:center}
}

/* ============================================================
   COOKIE CONSENT
   ------------------------------------------------------------
   Last in the file, like the two blocks above it, because it has
   to sit over everything and nothing should out-specify it by
   accident.

   The two buttons are the same element with the same class. That
   is not a style choice: a banner where refusing is smaller,
   greyer or one level further in is the commonest way these fail
   a look from the ICO, and the fix is to make them literally the
   same button.
   ============================================================ */
.ck{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  background:var(--ink);color:#f4f1e8;
  border-top:1px solid rgba(169,134,63,.45);
  box-shadow:0 -10px 40px rgba(0,0,0,.28)
}
.ck[hidden]{display:none}
.ck-in{
  max-width:var(--maxw);margin:0 auto;padding:20px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 34px
}
.ck-t{flex:1 1 430px;min-width:0}
.ck-t h2{font-size:21px;line-height:1.2;margin-bottom:5px}
.ck-t p{font-size:14.5px;line-height:1.6;color:rgba(244,241,232,.82);max-width:66ch}
.ck-t a{color:var(--gold2);border-bottom:1px solid rgba(201,168,95,.5)}
.ck-t a:hover{border-bottom-color:var(--gold2)}
.ck-b{display:flex;gap:12px;flex:0 0 auto}
.ck-b .btn{min-width:134px;text-align:center;cursor:pointer}
/* the one on the footer that reopens this; it is a button, not a link,
   so it needs the surrounding links' type reset onto it */
.ck-reopen{
  font:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-align:inherit
}
@media(max-width:700px){
  .ck-in{padding:17px 20px 19px;gap:13px}
  .ck-t{flex:1 1 100%}
  .ck-t h2{font-size:19px}
  .ck-t p{font-size:13.5px}
  .ck-b{width:100%}
  /* equal halves, so neither answer is the bigger target */
  .ck-b .btn{flex:1 1 0;min-width:0;padding:14px 8px;letter-spacing:.14em}
}

/* ============================================================
   THE ROYAL ARMS OPEN THE ROYAL WARRANT PAGE
   ------------------------------------------------------------
   Last in the file with the others, because the header rules it
   has to sit inside live in a media query further up.

   The arms were flex items of their rows. Wrapping them in a link
   makes the LINK the flex item, so it has to take on what the
   image had - otherwise the crest shifts and the row re-spaces.
   Nothing about the arrangement changes; only what happens when
   you press it.
   ============================================================ */
.crest-link{
  display:flex;align-items:center;flex:0 0 auto;
  padding:0;margin:0;border:0;line-height:0;color:inherit
}
/* the row's nav-link styling would otherwise land on a link that
   holds nothing but a picture */
.hc-grp .crest-link{font-size:0;letter-spacing:normal}

/* The bar is two equal halves either side of a centred wordmark, the left
   packed left and the right packed right. The right half's content fills it
   exactly, so Gifting sits flush against the wordmark. The left half used to
   as well, because the Shop button made up the difference.

   With the shop off the live site that button is gone, and all 167px of the
   left half's slack fell between Pens and the wordmark - measured at 1440px -
   while the right stayed flush. The wordmark is still dead centre; it is the
   links either side of it that stopped matching.

   So with no Shop button the crest takes the slack: pinned left exactly as
   Reserve is pinned right, and the links close up against the wordmark to
   mirror the other side. :has() scopes it to the button's absence, so
   bringing the shop back restores the designed layout with no second edit. */
.hc-grp.l:not(:has(.hc-shop)) .crest-link{margin-right:auto}
.crest-link:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}
/* the footer lockup: the arms are their own link now, CLEAVE and LONDON
   are still the way home. .footer-mark already puts 13px between its
   children, which is the gap the single link used to carry. */
.footer-mark > .crest-link{flex-direction:column}

/* ============================================================
   THE WARRANT PAGE'S BENCH BAND
   ------------------------------------------------------------
   Last in the file, with the others, and for the same reason.
   These were first written directly under .phero .t h1 - which
   put them ABOVE .phero .t p and .phero .im img, both of equal
   specificity, so both base rules went on winning and nothing
   changed. Third time this file has caught me that way.
   ============================================================ */
.phero .t h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,46px);
  line-height:1.1;margin:14px 0 18px;color:var(--sec-text,#fff)}
.phero .t h2 em{font-style:italic;color:var(--gold2)}
.phero--band .t p + p{margin-top:14px}
/* 42ch is right for one line of hero intro and turns two paragraphs of body
   copy into a tall narrow column */
.phero--band .t p{max-width:56ch;font-size:clamp(17px,1.4vw,19px);line-height:1.68}
/* This band held the Royal Arms for a day, and carried object-fit:contain so
   the supporters were not cropped off the sides. It holds photographs now,
   and a letterboxed photograph in a padded box looks like a mistake, so the
   rule is gone and the base cover applies. --phero-pos on each section is
   what keeps a head in frame. */

/* ------------------------------------------------------------
   CAPTIONS ON A BAND PICTURE, AND THE MIRRORED BAND
   The caption is not decoration: it is what stops a photograph
   taken somewhere else reading as if it were taken here.
   ------------------------------------------------------------ */
.phero .im{position:relative}
.imcap{
  position:absolute;left:0;right:0;bottom:0;margin:0;z-index:2;
  padding:34px clamp(18px,2.4vw,30px) 15px;
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.88);text-align:center;
  background:linear-gradient(to top,rgba(8,9,22,.78),rgba(8,9,22,0))
}
/* Picture on the left, words on the right - the opposite way round from the
   band above it, so two bands on one page do not read as a repeat.
   ------------------------------------------------------------
   INSIDE min-width:1101px, and that is the whole point. Written without a
   media query it sat at the end of the file and beat
   .phero{grid-template-columns:1fr} in the max-width:1100px block, so the
   band stayed two columns on a phone and the photograph grew to 1193px
   tall. The fix for one ordering trap caused another; the breakpoint here
   is the 1100px the rest of the footer and header already use. */
@media(min-width:1101px){
  .phero--flip{grid-template-columns:var(--phero-img,50%) calc(100% - var(--phero-img,50%))}
  .phero--flip .im{order:0}
}

/* ============================================================
   THE FOOTER BRAND BLOCK ON A WIDE SCREEN
   ------------------------------------------------------------
   Last in the file, with the others.

   The email and the telephone number come out of the footer,
   because the header's utility bar already carries both three
   inches above. SCOPED, NOT DELETED: .hc-util is itself
   min-width:1101px, so below that the footer line is the only
   place either appears on the whole page. Taking it out of the
   markup would have left a phone with no way to reach anybody.

   The social marks then centre under the mark instead of hanging
   off the left edge. With the contact line gone the column is as
   wide as the mark, so centring the column puts them under it.
   ============================================================ */
@media(min-width:1101px){
  .footer-contact{display:none}
  .footer-brand{align-items:center}
}

/* ============================================================
   A BAND WITH THE WORDS ON IVORY INSTEAD OF NAVY
   ------------------------------------------------------------
   End of the file, like the rest. .phero .t hard-codes color:#fff
   and .phero .t p hard-codes #dcd8ca, both of which have to be
   undone rather than overridden by a variable.

   The eyebrow and the italic use --gold-text, not --gold2. The
   lighter gold is for gold on navy; on ivory it fails contrast,
   which is why this file already keeps two of them.
   ============================================================ */
.phero--light .t{background:var(--bone);color:var(--ink)}
.phero--light .t h1,
.phero--light .t h2{color:var(--ink)}
.phero--light .t h1 em,
.phero--light .t h2 em{color:var(--gold-text)}
.phero--light .t p{color:var(--muted)}
.phero--light .t .eyebrow{color:var(--gold-text)}
/* the one short line that carries the weight of the paragraph above it */
.phero--light .t p.lede{color:var(--ink);font-size:clamp(18px,1.55vw,21px)}

/* ============================================================
   THE MANIFESTO ON NAVY
   ------------------------------------------------------------
   End of the file, like the rest.

   .manifesto is max-width:var(--maxw) with margin:0 auto, so a
   background on it paints a strip down the middle of the page
   with ivory either side. The colour belongs on a full-bleed
   wrapper; .manifesto sits inside it and keeps its measure.
   ============================================================ */
.manifesto-band{background:var(--ink);color:#e8e5da}
.manifesto-band .manifesto{background:transparent}
/* the hairline at the top of the section is drawn for ivory */
.manifesto-band .manifesto:before{background:rgba(201,168,95,.34)}
.manifesto-band .eyebrow{color:var(--gold2)}
.manifesto-band .manifesto > .serif{color:#f4f1e8}
.manifesto-band .manifesto > .serif p:first-of-type:first-letter{color:var(--gold2)}
.manifesto-band .manifesto > .serif em{color:var(--gold2)}
/* the figures, as a note under the statement rather than a second one */
.mf-note{
  max-width:64ch;margin-top:clamp(26px,3vw,36px);
  font-family:var(--serif);font-size:clamp(16.5px,1.4vw,19px);
  line-height:1.72;color:#bdbab1
}

/* ============================================================
   THE WARRANT PAGE: A LIGHTER BAND, AND LESS AIR
   ------------------------------------------------------------
   End of the file, like the rest.

   .her sits directly under .manifesto-band now, and two navy
   blocks in a row read as one long block - the join disappears
   and the page loses its rhythm. Lifting the overlay lets the
   photograph through, which separates them without introducing
   a third colour.
   ============================================================ */
.her--light .ov{background:linear-gradient(180deg,rgba(10,11,28,.52),rgba(10,11,28,.66))}
.her--light .bg{filter:none}

/* the caption under the portrait, as a name and a line beneath it */
.imcap strong{display:block;font-weight:400;letter-spacing:.16em}
.imcap span{
  display:block;margin-top:5px;font-size:10px;letter-spacing:.1em;
  text-transform:none;color:rgba(255,255,255,.72)
}

/* Sanay: "reduce the spacing between the sections a bit". Only on this
   page - the rest of the site keeps the taller rhythm it was drawn with. */
.template-warrant .manifesto{
  padding-top:clamp(58px,6.6vw,84px)!important;
  padding-bottom:clamp(58px,6.6vw,84px)!important
}
.template-warrant .her .inner{padding-top:clamp(58px,6.6vw,86px);padding-bottom:clamp(58px,6.6vw,86px)}
.template-warrant .htl .in{padding-top:clamp(56px,6.4vw,84px);padding-bottom:clamp(56px,6.4vw,84px)}
.template-warrant .phero--band{--phero-h:52vh}

/* ============================================================
   A SUBTITLE ON A STORY CARD, AND AIR UNDER SELECTED WORK
   ------------------------------------------------------------
   End of the file, like the rest.
   ============================================================ */
.storyband .row a .story-sub{
  display:block;margin:-2px 0 9px;
  font-family:var(--sans);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-text)
}
/* Sanay: more space under the line below the box. The two lines and the
   button were sitting almost on the section edge. */
.cat-entries .rows-cta{padding-bottom:clamp(44px,5.4vw,78px)}
.cat-entries .rows-cta p + p{margin-top:6px}
/* the closing lines are two sentences now, not one */
.cat-entries .rows-cta p{margin-bottom:0}

/* ============================================================
   STORY CARDS: TITLES, SUBTITLES AND BODIES ON SHARED LINES
   ------------------------------------------------------------
   End of the file, like the rest.

   The cards were display:block inside a three-column grid, so
   each one stacked on its own. A title that wrapped to two
   lines - "The King's and Queen's Messenger badges" - pushed
   that card's subtitle and body down while its neighbours
   stayed put, and the three read as three separate things
   rather than one row.

   Subgrid puts every card on the SAME five rows, so the years
   align, the titles align, the subtitles align and the bodies
   start together whatever the titles do. Row gap goes to zero
   because with subgrid the gaps come from the parent, and the
   parent's 20-40px would land between every line inside a card;
   the spacing inside stays where it was, on the elements.

   Above 900px only - below that the cards are full width and
   stacked, and there is nothing to align them with.
   ============================================================ */
@media(min-width:901px){
  .story-next .row{
    grid-template-rows:auto auto auto auto auto;
    gap:0 clamp(20px,3vw,40px)
  }
  .story-next .row > a{
    display:grid;
    grid-row:span 5;
    grid-template-rows:subgrid
  }
}

/* ============================================================
   A LINE OF TEXT IN THE CLOSING BAND
   ------------------------------------------------------------
   End of the file, like the rest.

   .ctaband h2 carries margin-bottom:24px, so a paragraph added
   after it gets air above and none below - the button ends up
   almost touching the last line. This gives it a measure of its
   own and room before the button.
   ============================================================ */
.ctaband p{
  max-width:54ch;
  margin:0 auto clamp(34px,4vw,52px);
  font-family:var(--serif);
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.65;
  color:var(--sec-text-2,#dcd8ca)
}
.ctaband--light p{color:var(--muted)}

/* ============================================================
   THE HERO BUTTON NEEDS THE SAME AIR AS THE CLOSING ONE
   ------------------------------------------------------------
   End of the file, like the rest.

   .phero .t p carries margin-bottom:26px, which is the gap
   between the last line of a hero and its button on all twelve
   pages that have one. The closing band was just taken to 34-52px
   for the same relationship, and 26px against it looks cramped -
   it is the same button after the same sentence.

   Set on the button rather than on the paragraph, so a hero with
   two paragraphs (insignia) keeps 26px BETWEEN them and gains the
   air only where it is wanted, before the button.
   ============================================================ */
.phero .t .btn{margin-top:clamp(10px,1.3vw,18px)}

/* ============================================================
   THE SHOP: A PRICE ON A ROW
   ------------------------------------------------------------
   End of the file, like the rest. The rows were built to
   describe work, not to sell it, so a price is new furniture.
   Set in the serif at the size of the heading above it, because
   a price that has to be hunted for reads as something being
   hidden.
   ============================================================ */
.rtxt .price{
  font-family:var(--serif);font-size:clamp(21px,2vw,26px);
  color:var(--ink);margin-top:14px;line-height:1
}
.rtxt .price span{
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-left:9px
}

/* the model cancellation form, set apart from the prose around it */
.legal .cancelform{
  margin:18px 0 0;padding:22px clamp(18px,2.4vw,30px);
  background:rgba(169,134,63,.07);border-left:2px solid var(--gold)
}
.legal .cancelform p{font-size:16px;line-height:1.9;margin:0}
.legal .cancelform p + p{margin-top:2px}


/* ---------------------------------------------------------------------------
   THE HEADER: A BUTTON AT EACH OUTSIDE EDGE, LINKS DRAWN IN TO THE WORDMARK.

   Sanay, 9 October, over three messages. First: "The 3 titles on the right
   come closer to the centre logo; and the same for the 3 titles on the
   left." Then, when a Shop button beside Reserve would not fit: "we dont
   want to remove anything; move the RESERVE next to the Warrant sign, move
   the SHOP to where RESERVE is currently." Then the two buttons swapped
   over, so Shop has the warrant corner and Reserve the right-hand one.

       crest SHOP   insignia jewellery pens  |MARK|  gifting 1of1 house  RESERVE

   That is the answer. The problem was never the shop, it was two buttons in
   one half: three links and two buttons do not fit below about 1440px, and
   the only fixes I could see all meant taking a page out of the navigation.
   One button in each half fits everywhere, and nothing is removed.

   Both halves are flex:1 1 0 with the mark fixed between them, so the mark
   cannot move whatever these rules do. What moves is where each half's
   contents sit within it, and one auto margin per side does it: the button
   takes the slack, so it and anything before it stay at the outside edge
   while the links are pushed in toward the mark.

   LAST IN THE FILE ON PURPOSE. .hc-act sets margin-left itself, in the base
   block and again in the 1101-1280 block, and being last is what makes this
   reliable rather than a specificity argument nobody wants to re-derive.
   --------------------------------------------------------------------------- */
@media(min-width:1101px){
  /* Left: Reserve takes the slack, so crest and Reserve sit together at the
     edge. It also has to shed the margin-left it carries by default, which
     was there to separate a button from the links it followed. */
  .hc-grp.l .hc-act{margin-left:0;margin-right:auto}
  /* Right: Shop takes it, and the links are pushed back toward the mark. */
  .hc-grp.r .hc-act{margin-left:auto}
}


/* ---------------------------------------------------------------------------
   THE SHOP'S TILES.

   Sanay: "The options need to be a square E-Com style".

   Built from .storyband, which is the card this site already uses, so a
   thing that is a card looks like the other cards: same bordered mount,
   same contain-fit, same slow hover. Two differences only - the mount is
   square, because that is what he asked for and what a shop looks like,
   and there are four across instead of three.

   contain, not cover. These are objects photographed against a backdrop,
   and cover would crop a badge's edge off to fill a square. The mount
   carries the background instead.

   ph--none is a tile with no photograph yet. It is drawn deliberately -
   ruled, labelled, the same square as its neighbours - because a shop with
   two empty squares reads as a shop waiting for photographs, while a shop
   with two broken images reads as a broken shop.
   --------------------------------------------------------------------------- */
.shopgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(30px,4vw,54px)}
.shopgrid .stile{display:block}
.shopgrid .ph{aspect-ratio:1;overflow:hidden;margin-bottom:16px;display:block;
  border:1px solid var(--line2);background:var(--mount,#fff)}
.shopgrid .ph img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.shopgrid .stile:hover .ph img{transform:scale(1.04)}
.shopgrid .ph--none{display:grid;place-items:center;background:var(--bone2)}
.shopgrid .ph--none span{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.shopgrid h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,23px);
  line-height:1.2;margin:0 0 6px}
.shopgrid .stile:hover h3{color:var(--gold-text)}
.shopgrid .stile-sub{display:block;font-size:15.5px;line-height:1.45;color:var(--muted)}
.shopgrid .stile-price{display:block;margin-top:10px;font-family:var(--sans);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.shopgrid .stile-price span{letter-spacing:.1em;color:var(--muted)}

/* Two across on a tablet and on a phone. Squares pair well, and one square
   per screen on a phone would make four tiles into four screenfuls. */
@media(max-width:1100px){
  .shopgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .shopgrid{gap:16px}
  .shopgrid h3{font-size:17px}
  .shopgrid .stile-sub{font-size:14px}
}


/* ---------------------------------------------------------------------------
   THREE STANDFIRSTS THE PENS REDRAFT NEEDED.

   The draft puts a line between a heading and its body in three places the
   page had no slot for: under the exemplar heading, under each commission's
   title, and as a closing line beneath the commission timeline.

   All three borrow .selnote p, which is the standfirst this site already
   uses - larger than body, muted, generous line height - so a new line in a
   new place still looks like the same publication.

   LAST IN THE FILE, like the rest.
   --------------------------------------------------------------------------- */
.exemplar-band .ex-lead .ex-sub{font-size:18.5px;color:var(--muted);
  max-width:54ch;margin-top:10px;line-height:1.68}
.cat-entries .rtxt .rsub{font-size:17px;color:var(--gold-text);
  margin:0 0 8px;line-height:1.5}
.storyband .sbhead .sb-sub{font-size:17px;color:var(--muted);
  max-width:60ch;margin-top:12px;line-height:1.6}
.proc--navy .proc-close{font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);
  text-align:center;margin-top:clamp(28px,3.4vw,46px);color:var(--gold2)}

/* The draft leads on "Every pen we make is commissioned for one signature",
   and p.lede only had a size on the LIGHT hero variant, so on a dark one the
   line sat at body weight among two others. Same size, both variants. */
.phero .t p.lede{font-size:clamp(20px,2.1vw,26px)}
/* The two closing lines under a set of rows stack; .rows-cta is a flex
   row and without this each paragraph became its own column. */
.rows-cta .rc-lines{max-width:52ch}

/* ---- the hero crop, which is two different problems ---------------------
   The hero band is nearly square on a phone (360x374) and a 2.10:1 letterbox
   from 600px to 1100px, where it has gone full width but is still only 46vh
   tall. A portrait photograph shows 86% of its height in the first and 39%
   in the second, measured, so no single object-position serves both: the
   offsets that keep the Turkmen horses and The King's head in frame on a
   tablet are the very same offsets that cut the plinth off on a phone.

   So the tuned value holds wherever the band is wide, and the phone - the
   only width where the box is square enough for centring to be safe - gets
   centre. Sanay asked for centred; this is centred everywhere it does not
   cost the subject.

   The durable fix is landscape hero photographs. A portrait picture in a
   2.10:1 slot is throwing away three fifths of it however it is positioned. */
@media(max-width:640px){
  .phero .im img{object-position:50% 50%}
}