/* Secondary (ghost) controls read almost as an unbordered blur at 10% -- easy to miss.
   Derived from --ink so it follows the palette rather than being a hard-coded rgba. */
/* ---- micro-label ------------------------------------------------------------
   Every small uppercase label on the site -- section eyebrows, field keys, captions,
   stat labels, meta rows -- draws its size, tracking and colour from these three
   tokens, so the family can never drift again. Page styles load after this file but
   set none of these names, so the tokens hold everywhere. */
/* ===== TYPE SCALE =================================================================
   One ladder, every value a 0.25rem step, and nothing below 14px anywhere.

   The root is set in percentages, not pixels: 100% is whatever the reader's browser
   is set to (16px by default) and 87.5% keeps the same relationship on phones. Hard
   pixels here would override a reader who has raised their default, which is the
   thing WCAG asks us not to do.

   Fluid sizes keep clamp(), but both ends land on the scale.
   ------------------------------------------------------------------------------- */
:root{
  --fs-label   : .875rem;                        /* tracked caps -- 14px, the floor  */
  --fs-body    : 1rem;
  --fs-lead    : clamp(1rem, 1.25vw, 1.25rem);
  --fs-title-sm: clamp(1.25rem, 1.75vw, 1.5rem);
  --fs-title   : clamp(1.5rem, 2.25vw, 1.75rem);
  --fs-h3      : clamp(1.5rem, 2.5vw, 2rem);
  --fs-h2      : clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h1      : clamp(2.25rem, 4.5vw, 4rem);
  --fs-display : clamp(2.5rem, 7vw, 6rem);
  --fs-mega    : clamp(3.5rem, 9vw, 8rem);
}
/* the gutter is reserved at all times so hiding overflow to lock the page behind the
   open menu cannot shift the layout sideways. No effect where the OS draws overlay
   scrollbars, which is most Macs. */
/* -webkit-text-size-adjust: without it iOS Safari inflates text by its own
   reckoning, so a size set here is not the size that arrives on a phone. Pinned
   at 100% so the sizes below are the ones people actually get. */
html{font-size:100%;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:560px){
  html{font-size:87.5%}                          /* 1rem = 14px on phones */
  /* .875rem would be 12.25px against a 14px root, under the floor. The label is the
     one size allowed to sit at 14px, so on phones that is a full 1rem. Both ends of
     the site therefore render it at exactly 14px. */
  :root{--fs-label:1rem}
}

/* One accent, one rule: a label that introduces a title (a section eyebrow) takes
   the gold; a label that stands on its own -- a field key, a stat caption, a meta row
   -- is white. Size and tracking are the same either way.

   There is no orange left on the site. The accent is a single gold, #D4A94F, a step
   darker than the logo's own #E8C173 and still 8.46:1 on the dark ground, which is
   AAA at any size with headroom. --auburn and --auburn-text both resolve to it; the
   names are kept because every page's palette block and a lot of rules refer to them,
   and renaming them buys nothing. */
:root{--lbl-size:var(--fs-label);--lbl-size-sm:var(--fs-label);--lbl-track:.16em;
  --auburn-text:#D4A94F;
  --lbl-color:var(--auburn-text);  /* eyebrow: sits above an h1/h2 */
  --lbl-plain:var(--ink)}          /* standalone: keys, captions, meta */
:root{--btn-brd:color-mix(in srgb,var(--ink) 30%,transparent)}

/* ===== button fill ==============================================================
   The pill is #C1954E, the disc behind the arrow is white, and the label and the glyph
   are both the site's own brown -- #2B2018, the value the light palette uses for ink,
   so this is a colour the site already owns rather than a new one.

   Measured: the label is 5.80:1 on the pill and the arrow 15.88:1 inside the white
   disc. 7:1 is not reachable on this fill at all -- even near-black tops out at 6.78:1
   -- so the label is AA rather than the AAA the body copy holds.

   Hover darkens. With a white disc that is the right direction: the disc gains
   separation from the pill (3.00:1, up from 2.74:1) where brightening would have
   washed it out to 1.94:1, and the brown label still reads at 5.30:1. */
:root{
  --btn-fill:#C1954E;
  --btn-fill-hover:#B88E4A;
  --btn-dot:#FFFFFF;
  --btn-on:#2B2018;
}

/* ===== shared: menu button + overlay (identical on every page) =====
   Menu and Close are built as one component so the pill, the icon and the label
   sit in exactly the same place in both states. Buttons don't inherit font-family,
   hence the explicit var(--sans). */
.menu-btn,.close-btn{display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:var(--fs-label);font-weight:600;
  letter-spacing:var(--lbl-track);text-transform:uppercase;color:var(--ink);
  background:var(--glass);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--glass-brd);padding:12px 24px;border-radius:100px;cursor:pointer;
  box-shadow:0 10px 30px -20px var(--shadow);
  /* colour-only hover — never transform, or the label and icon shift */
  transition:border-color .3s,background .3s}
.menu-btn:hover,.close-btn:hover{border-color:var(--ink-soft)}
/* Equal-width label box + flex-start packing: the icon lands at exactly padding-left
   and the pill ends at exactly padding-right in BOTH states, so nothing moves on toggle.
   MENU is tracked to .403em so its 4 letters ink out to the same 4.18em as CLOSE's 5
   at .2em -- that equality is what lets one box serve both.

   The box is sized in em, not pixels: 4.25em clears that 4.18em of ink at whatever
   size --fs-label resolves to. It was 55px, which is only 3.93em, so the word spilled
   out of its own box, and the spill all landed on the right because of the text-indent
   below -- invisible against the 24px desktop padding, plain against the 16px mobile one.

   No text-indent. Letter-spacing adds a trailing gap after the last glyph, so centring
   leaves the ink half that gap left of centre -- which is what we want here, because the
   icon's left edge is a hard stroke while a letter carries its own side bearing. Measured
   in the browser it comes out 18px after the word against 17px before the bars. The rule
   used to indent by a FULL tracking, which both over-corrects that half and adds the
   other half back, walking the word 2.9px into the right padding. */
.menu-btn .lbl,.close-btn .lbl{display:inline-block;width:4.25em;text-align:center;white-space:nowrap}
.close-btn .lbl{letter-spacing:.2em}
.menu-btn .lbl{letter-spacing:.403em}
/* menu: three bars, in the same 15x10.5 box the close cross uses */
.menu-btn .bars{display:flex;flex-direction:column;justify-content:space-between;
  width:15px;height:10.5px;flex:none}
.menu-btn .bars i{display:block;width:15px;height:1.5px;background:var(--ink)}

/* blur bar behind the fixed header once scrolled (toggled by site.js) */
header.nav.scrolled::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 var(--glass-brd),0 10px 30px -24px var(--shadow)}

/* The frosted panel is the look, and it is the same on every page -- but the *reveal*
   is a plain opacity fade, not the clip-path circle this used to grow. A circle wiping
   across a 26px backdrop-filter forces the browser to re-blur the page behind a moving
   mask on every frame, which is what stuttered on laptops. Fading a composited layer
   costs the same on any machine, and the blur itself is rasterised once. */
.overlay{position:fixed;inset:0;z-index:70;background:var(--glass);
  backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
/* the paper layer under the blur -- together they read ~86% opaque, so the page behind
   stays a suggestion rather than a distraction */
.overlay::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.72;z-index:-1}
.overlay.open{opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s}
/* overlay top bar mirrors header.nav exactly, so nothing shifts when the menu opens */
.overlay-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px var(--pad)}
.overlay-top .brand{display:flex;align-items:center;gap:13px;justify-self:start}
.overlay-top .brand b{font-family:var(--serif);font-weight:400;font-size:inherit;line-height:1;white-space:nowrap}

/* shared brand lockup — logo art is white-on-transparent, which suits the dark-only site */
.brand .mark{height:32px;width:auto;flex:none;display:block}
/* The name is the whole lockup now that the discipline line is gone, so it can run
   larger. Size and leading both sit on the wrapper span: that makes the span's box
   exactly the name's line box, which is what lets .brand's align-items:center put the
   name on the mark's centre line. (A line box is struck by its containing block, not
   by the inline child — setting this on the <b> alone does nothing.) The mark stays
   32px, so the two no longer match in height, which is fine.
   Listed for the header and the overlay together so they can never drift; each page's
   own `.brand b` (0,1,1) is outranked by `.brand span b` (0,1,2) whatever the order. */
.brand span,.overlay-top .brand span{display:block;font-size:1.25rem;line-height:1}
.brand span b,.overlay-top .brand b{font-size:inherit;letter-spacing:.01em}
.brand span b br{display:none}   /* one line on desktop; re-enabled on mobile */
/* identical pill width so Menu → Close doesn't resize */

.overlay-top .nav-right{justify-self:end;display:flex;align-items:center;gap:14px}
/* Baseline button styling so the injected overlay CTA works on pages with no .btn rules
   (project.html). Deliberately single-class specificity: every page's own .btn rules load
   after this and win, so the header and the overlay CTA always render identically. */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-body);font-weight:600;
  padding:8px 8px 8px 22px;border-radius:100px;border:1px solid transparent;cursor:pointer;
  transition:background .35s,border-color .35s,color .35s}
.btn .ico{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.btn .ico svg{width:14px;height:14px;transition:transform .4s}
.btn:hover .ico svg{transform:rotate(45deg)}
/* The arrow is drawn pointing up-right and rotated to the right on hover. A touch
   device has no hover, so it only ever saw the half-turned state. Where there is
   no pointer to hover with, the turned position is simply the resting one.

   :root carries the weight. Every page restates `.btn .ico svg` in its own <style>
   to set a 15px icon, and that block loads after this file -- so a rule written here
   at the same specificity loses, and the arrows stayed put. The careers link on the
   contact page is the one arrow that is not a .btn. */
@media(hover:none){
  :root .btn .ico svg,
  :root .c-details a.careers .ico svg{transform:rotate(45deg)}
}
.btn.solid{background:var(--btn-fill);color:var(--btn-on)}
.btn.solid .ico{background:var(--btn-dot)}
.btn.solid:hover{background:var(--btn-fill-hover)}

/* ===== secondary button =========================================================
   The gold is one control's colour -- "Let's talk" -- and nothing else wears it.
   Every other button is the glass pill the homepage's "All projects" already used:
   the page showing through a blur, a hairline, and the ink inverted into the disc.

   It lived in index.html's own style block, so it only worked on the pages that had
   copied it -- about and projects carried the .ico half and no fill at all. It is
   defined here now, once, for every page. */
.btn.ghost{background:var(--glass);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-color:var(--btn-brd);color:var(--ink);box-shadow:0 10px 30px -20px var(--shadow)}
.btn.ghost .ico{background:var(--ink);color:var(--paper)}
.btn.ghost:hover{border-color:var(--ink-soft)}
/* The "Let's talk" CTA is pinned to one size everywhere it appears: the header row on
   every page, the open menu, and the fixed chrome on a project page. Pages set their own
   .btn metrics for body buttons; these two-class selectors outrank them for this button
   only, so all three render identically -- .84rem, mixed case, 34px icon, 52px tall. */
.nav-right .btn,.overlay-top .talk,.btn.proj-talk{gap:14px;font-size:var(--fs-body);letter-spacing:.005em;padding:8px 8px 8px 24px}
.nav-right .btn .ico,.overlay-top .talk .ico,.btn.proj-talk .ico{width:34px;height:34px}
.nav-right .btn .ico svg,.overlay-top .talk .ico svg,.btn.proj-talk .ico svg{width:15px;height:15px}
/* close inherits every pill style from the shared rule above; only placement differs */
.close-btn{grid-column:2;justify-self:center}
/* close: the two bars cross into an X (same 15x10.5 box as the menu's three bars) */
.close-btn .bars{position:relative;display:block;width:15px;height:10.5px}
.close-btn .bars i{position:absolute;top:50%;left:0;display:block;width:15px;height:1.5px;
  background:var(--ink);margin-top:-.75px}
.close-btn .bars i:first-child{transform:rotate(45deg)}
.close-btn .bars i:last-child{transform:rotate(-45deg)}
/* one centred column: the side panel of contact details is gone, so there is no
   second column to balance and the list owns the middle of the screen */
.overlay-body{flex:1;display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;
  padding:0 var(--pad) 6vh;max-width:var(--maxw,1440px);margin:0 auto;width:100%}
/* foot-of-menu CTA: mobile only. `.overlay .o-cta` (0,2,0) is needed because each
   page's own `.btn{display:inline-flex}` (0,1,0) loads after this file. */
.overlay .o-cta{display:none}
/* Centring each row as a whole would leave the numbers on a ragged edge -- 26px of
   wander across five items, because the names differ in width. The numbers are gone
   now, so the names simply centre on the middle of the screen. */
.o-nav{display:flex;flex-direction:column;gap:2px;text-align:center}
.o-nav>*{font-family:var(--serif);font-weight:400;font-size:var(--fs-display);line-height:1.02;
  letter-spacing:-.02em;color:var(--ink);display:flex;align-items:baseline;justify-content:center;padding:6px 0;
  opacity:0;transform:translateY(24px);transition:color .3s;position:relative}
.overlay.open .o-nav>*{animation:riseIn .42s cubic-bezier(.22,1,.36,1) forwards}
.overlay.open .o-nav>*:nth-child(1){animation-delay:.06s}
.overlay.open .o-nav>*:nth-child(2){animation-delay:.11s}
.overlay.open .o-nav>*:nth-child(3){animation-delay:.16s}
.overlay.open .o-nav>*:nth-child(4){animation-delay:.21s}
.overlay.open .o-nav>*:nth-child(5){animation-delay:.26s}
@keyframes riseIn{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .overlay{transition:opacity .01s linear,visibility 0s}
  .o-nav>*{opacity:1;transform:none}
  .overlay.open .o-nav>*{animation:none}
}
.o-nav a:hover{color:var(--auburn)}
/* Portrait tablets only (561-900px): the nav list has plenty of room here, so the
   links go up a step. Bounded at both ends so phones and desktop are unaffected. */
@media(min-width:561px) and (max-width:900px){
  .o-nav>*{font-size:clamp(3rem,9vw,5rem);padding:8px 0}
}
@media(max-width:900px){
  /* Mobile lockup: mark + the name stacked on two lines, no tagline.
     The name is sized off the viewport so it always clears the menu pill.
     The header and the overlay are both listed because `.overlay-top .brand …`
     (0,2,1) outranks `.brand span …` (0,1,2) — class count wins over element count. */
  .brand span b br{display:inline}
  /* tight leading pulls the two words together; 1.05 x 2 lines = 2.1em tall.
     The leading must also be set on the wrapper span: line boxes are struck by the
     containing block, so leaving it to inherit body's 1.55 keeps the block tall. */
  .brand span,.overlay-top .brand span{line-height:1.05;font-size:clamp(.875rem,2.9vw,1rem)}
  .brand span b,.overlay-top .brand b{white-space:normal;line-height:1.05;letter-spacing:0;
    font-size:inherit}
  /* mark height == the two-line name block: same clamp x the 2.1em the text occupies,
     so the two stay matched at every viewport width.
     img.mark (0,2,1) outranks each page's own .brand .mark (0,2,0). */
  .brand img.mark{height:calc(2.1 * clamp(.875rem,2.9vw,1rem))}
  .brand{gap:10px}
}
@media(max-width:820px){
  }
@media(max-width:560px){
  /* one 16px gutter for the header, the menu and the page content alike.
     `:root:root` (0,2,0) outranks each page's own `:root{--pad:…}` (0,1,0). */
  :root:root{--pad:16px}
  /* mirror the header's mobile collapse: brand left, close right, no CTA in the bar */
  .overlay-top{grid-template-columns:auto auto;justify-content:space-between;gap:10px;padding:16px}
  .close-btn{grid-column:auto;justify-self:end}
  .overlay-top .nav-right{display:none}
  /* header must stay identical to the overlay bar; `body header.nav` (0,1,2)
     outranks each page's own `header.nav` (0,1,1) */
  body header.nav{padding:16px}
  /* tighter pill on mobile — applied to both so Menu/Close stay identical */
  .menu-btn,.close-btn{padding:10px 16px;gap:9px}
  /* the list was pinned to the top to leave room for the side panel under it; with
     that gone it is the only thing here, so it centres in the space between the bar
     and the CTA rather than stranding a screen of emptiness beneath it */
  .overlay-body{align-content:center;padding:24px 16px 0;gap:24px}
  .o-nav{gap:0}
  .o-nav>*{font-size:clamp(2.25rem,12vw,3rem);padding:6px 0}
      /* open menu fills the viewport; dvh tracks the mobile browser chrome as it hides */
  .overlay{height:100vh;height:100dvh}
  /* Sits under Contact as the list's own last line, not pinned across the foot of
     the screen. Full width it read as a banner rather than a link, and 170px of
     empty menu separated it from the thing it follows. align-self:start closes that
     gap; the width now comes from the label. */
  .overlay .o-cta{display:inline-flex;justify-content:center;align-items:center;gap:12px;flex:none;
    width:auto;max-width:calc(100% - 32px);margin:10px 0 0;padding:11px 11px 11px 22px}
}
.overlay .o-nav a.on{color:var(--auburn)}

/* ===== global custom cursor: orange dot only; the ring is reserved for the
   "See project" badge over project tiles (fine pointer) ===== */
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor .btn,html.has-cursor .menu-btn,html.has-cursor .card,html.has-cursor .cover,html.has-cursor label{cursor:none}
html.has-cursor input,html.has-cursor textarea{cursor:text}
/* Above the intro plate (9999), not below it. The dot used to sit underneath, and
   since has-cursor hides the real pointer the loading screen had no cursor at all. */
.cur-dot{position:fixed;top:0;left:0;z-index:10001;pointer-events:none;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--auburn);will-change:transform;
  transition:opacity .25s ease,width .32s cubic-bezier(.22,1,.36,1),height .32s cubic-bezier(.22,1,.36,1),
             margin .32s cubic-bezier(.22,1,.36,1),background .32s ease}
/* over a link or button the dot itself swells into a soft disc -- one circle only, no
   concentric ring; the ring stays reserved for the "See project" badge */
/* The pointer's position is unknown until it moves, so the dot starts hidden rather
   than parked in the top-left corner. The first move places it and fades it in --
   during the intro as readily as after it. */
html.has-cursor .cur-dot{opacity:0}
html.cur-live .cur-dot{opacity:1}
html.cur-hover .cur-dot{width:38px;height:38px;margin:-19px 0 0 -19px;
  background:color-mix(in srgb,var(--auburn) 32%,transparent)}
/* hidden by default and on ordinary link hover — it only exists for "See project" */
.cur-ring{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;width:0;height:0;margin:0;border-radius:50%;
  border:0 solid transparent;background:transparent;opacity:0;display:grid;place-items:center;text-align:center;will-change:transform,width,height;
  transition:width .34s cubic-bezier(.22,1,.36,1),height .34s cubic-bezier(.22,1,.36,1),margin .34s cubic-bezier(.22,1,.36,1),opacity .28s}
/* 12px, which is the one place on the site under the 14px floor. The floor is there
   so nobody has to read small type; this is a cursor ornament that repeats what the
   tile it is sitting on already says, it exists only while the pointer is held still
   over that tile, and it reads at 11.49:1. */
.cur-ring .cl{opacity:0;color:#fff;font-size:.75rem;font-weight:600;letter-spacing:var(--lbl-track);text-transform:uppercase;line-height:1.25;transition:opacity .22s}
/* Brown and white. It was the gold, which put white on it at 2.19:1 -- the one place
   on the site where white sat on the accent; #4A3526 takes the same white to 10.5:1.
   No outline: the disc is flat brown. It can lose its edge against a dark frame,
   which the hairline it used to carry was there to stop. */
html.cur-see .cur-ring{width:88px;height:88px;margin:-44px 0 0 -44px;opacity:1;background:#4A3526}
html.cur-see .cur-ring .cl{opacity:1}
html.cur-see .cur-dot{opacity:0}

/* ===== "See project" badge for touch =====
   The cursor badge above only exists on a fine pointer, so phones and tablets get a
   static pill in the card's top-right instead. One component, used by the homepage
   marquee, the projects coverflow and the next-project tile. The card it sits in must
   be position:relative. */
.see-pill{position:absolute;top:12px;right:12px;z-index:3;display:none;align-items:center;
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:var(--lbl-track);text-transform:uppercase;
  color:#181210;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  padding:7px 13px;border-radius:100px;pointer-events:none;white-space:nowrap;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.55)}
/* same test as the cards' colour treatment: both tablet widths, plus any touch device */
@media(max-width:1199px),(hover:none){.see-pill{display:inline-flex}}

/* site is dark-only — the theme toggle and its controls were removed */

/* ---- shared footer -----------------------------------------------------------
   Every footer that has columns is this one definition -- index, about, studio and
   legal all carry the same CTA, Studio and Links blocks. Pages hold only their own
   <footer> padding; nothing may redefine .f-top / .f-col / .f-bot, or they drift
   apart again. Contact and 404 render the bottom bar alone: contact IS the contact
   page, and 404 already offers its two ways out in the body. */
.f-top{display:grid;grid-template-columns:1.5fr auto auto;gap:clamp(28px,5vw,90px);
  padding-bottom:clamp(38px,5.5vh,64px);border-bottom:1px solid var(--line)}
.f-cta .label{display:block;margin-bottom:18px}
.f-cta h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);
  line-height:1.04;letter-spacing:-.02em;margin-bottom:26px;max-width:14ch}
.f-cta h2 em{font-style:normal}
.f-col h4{font-size:var(--lbl-size);letter-spacing:var(--lbl-track);text-transform:uppercase;font-weight:600;color:var(--lbl-plain);margin-bottom:16px}
.f-col p,.f-col a{display:block;font-size:var(--fs-body);color:var(--ink-soft);margin-bottom:9px}
.f-col p{margin-bottom:14px}
.f-col a:hover{color:var(--ink)}
.f-bot{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding-top:20px}
.f-bot small{font-size:var(--fs-label);color:var(--ink-soft);letter-spacing:.02em}
.f-bot .f-credit a{color:var(--ink-soft)}
.f-bot .f-credit a:hover{color:var(--auburn-text)}

/* Instagram. site.js renders this from one constant, so the mark only ever exists
   where the account URL has been filled in. In the footer it is the mark alone and
   sits with the phone numbers; on the contact page it is named like every other
   field there. */
/* A second heading inside the Studio column, so Socials reads as its own group the
   way STUDIO and LINKS do. It needs the top margin that the first h4 gets from the
   column, which .f-col h4 does not provide for a heading that follows content. */
.f-col .f-sub{margin-top:26px}

/* A number with a mark in front of it is the same component as the Instagram row:
   an icon sized to the text's own line box, on one optical centre with it. Both are
   two-class selectors because .f-col a sets display:block above a single class. */
.f-col .tel,.tel{display:inline-flex;align-items:center;gap:9px;line-height:1}
/* The two studio numbers are one per line. inline-flex let them sit side by side
   wherever the column was wide enough, so the footer showed one layout at one width
   and another at the next; flex gives each its own line at every width, and
   max-content keeps the link no wider than the number it contains. */
.f-col .tel{display:flex;width:max-content;max-width:100%}
.f-col .tel+.tel{margin-top:9px}
.tel .pico{width:1.15em;height:1.15em;flex:none;transform:translateY(-.5px);opacity:.75}
.tel span{line-height:1}

/* .f-col a sets display:block at a higher specificity, which flattened the flex row
   and dropped the gap, so the mark sat against the word. Two classes outrank it.
   The mark is optically a touch larger than the cap height it sits beside, so it is
   sized to the text's own line box and nudged to sit on the same optical centre. */
.f-col .ig,.ig{display:inline-flex;align-items:center;gap:9px;color:var(--ink-soft);
  text-decoration:none;transition:color .25s;line-height:1}
.ig svg{width:1.15em;height:1.15em;flex:none;transform:translateY(-.5px)}
.ig span{line-height:1}
.ig:hover{color:var(--auburn-text)}
.f-col .ig{margin-bottom:9px}
@media(max-width:820px){
  /* the CTA takes the full row and the two link columns sit under it */
  .f-top{grid-template-columns:1fr 1fr;gap:30px}
  .f-top .f-cta{grid-column:1/-1}
}
@media(max-width:560px){
  .f-top{grid-template-columns:1fr;gap:26px}
  .f-bot{flex-direction:column;align-items:flex-start;gap:5px}
}

/* ---- gold logo ---------------------------------------------------------------
   The gold artwork is the logo the site ships with; data-logo="gold" is set on
   <html> in every page's markup. ?logo=white falls back to the white lockup and
   is remembered for that browser, so the old one can still be walked end to end.

   `content:url()` swaps what an <img> renders without touching any markup, so this
   reaches the header, the open menu (injected by site.js) and the post-loading
   lockup from one rule. The gold mark is 2.084:1 against the white one's 2.090:1,
   so nothing shifts.  */
/* The supplied artwork is a complete lockup -- mark plus a three-line wordmark, with
   its own texture -- so in gold mode it replaces the whole brand and the live text
   steps aside. The wordmark is three lines where this site's is one, so the lockup
   has to run taller than the 32px mark for those lines to be readable at all. */
:root[data-logo="gold"] .brand .mark{content:url("../img/logo-gold-full.png?v=196");height:40px}
:root[data-logo="gold"] .brand span{display:none}
:root[data-logo="gold"] .brand{gap:0}
/* On a phone the lockup had been shrunk twice over, to 35px and then 30px, on the
   assumption that it had to make way for the menu pill. Measured, it does not: at
   375px the pill leaves 112px of clear air beside a 30px mark. The header's own row
   is 48px tall whatever the mark does, so growing it to fill that row costs no
   height at all -- the bar stays exactly as deep as it is now.

   Sized off the viewport rather than stepped, because the one place this does run
   out of room is a 320px screen: 12.8vw puts the mark at 48px from 375px up, and
   eases it down to 41px at 320px, where the pill is still clear of it. */
@media(max-width:900px){
  :root[data-logo="gold"] .brand .mark{height:clamp(31px,10.9vw,41px)}  /* 0.85x */
}