/* ==========================================================================
   adamwayne.uk
   The metal follows the ground: silver only on navy, gold only on paper.
   ========================================================================== */

@font-face{font-family:'Prata';src:url('/assets/fonts/prata-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Red Hat Text';src:url('/assets/fonts/redhattext-var.woff2') format('woff2-variations');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Red Hat Display';src:url('/assets/fonts/redhatdisplay-var.woff2') format('woff2-variations');
  font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --navy:#141D2C; --navy-deep:#0D141F; --navy-raised:#1D2739; --navy-line:#2B3648;
  --paper:#FAF8F4; --paper-2:#F1EEE8;
  --ink:#141D2C; --ink-soft:#4A5567; --ink-rule:#D8D3C9;

  --silver:#A8AAAE;          /* navy only, 7.3:1 on navy, 2.2:1 on paper */
  --silver-bright:#D5D8DC;   /* navy accent, 11.8:1 */
  --gold:#8A6318;            /* paper accent, 5.1:1 */
  --gold-deep:#6E4B12;       /* paper accent, heavier, 7.4:1 */

  --display:'Prata','Times New Roman',serif;
  --body:'Red Hat Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:'Red Hat Display',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1160px;
  --pad:clamp(22px,4.2vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:400}
p{margin:0 0 1em}
a{color:var(--gold)}
.skip{position:absolute;left:-9999px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{left:12px;top:12px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px}

/* ---------------------------------------------------------------- bands */
.band{padding:clamp(38px,6vw,78px) var(--pad)}
.band-navy{background:var(--navy);color:var(--silver-bright)}
.band-paper{background:var(--paper);color:var(--ink)}
.band-paper-2{background:var(--paper-2);color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto}

/* ------------------------------------------------------------------ nav */
.nav{background:var(--navy);border-bottom:1px solid var(--navy-line);position:relative}
.nav-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:20px;
  padding:15px var(--pad)}
.brand{position:relative;display:flex;align-items:center;gap:12px;flex:none;text-decoration:none}
/* The stave should clear the mark and the wordmark by the same amount. It cannot be
   symmetric insets: the mark sits in a 247-unit viewBox with 25% empty space down its
   left side, so the glyph box already overhangs the visible clef by ~11px, while the
   wordmark ends almost flush. Hence -7 on the left and -16 on the right. */
.brand::before{content:"";position:absolute;left:-7px;right:-16px;top:50%;transform:translateY(-50%);
  height:25px;background:repeating-linear-gradient(to bottom,var(--silver) 0 1px,transparent 1px 6px);
  opacity:.26}
.brand .glyph{position:relative;display:grid;place-items:center;width:40px;height:40px}
.brand .glyph svg,.brand .glyph img{width:36px;height:36px;display:block}
.brand .wordmark{position:relative;font-family:var(--ui);font-weight:600;letter-spacing:.13em;
  font-size:12.5px;text-transform:uppercase;color:#fff}
/* The stave frames the mark. The admin brand is a word with no mark, so there is
   nothing to frame, and at narrow widths the lines ran into the first nav link. */
.nav-admin .brand::before{display:none}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{font-family:var(--ui);font-size:13.5px;color:var(--silver);text-decoration:none;
  letter-spacing:.02em;padding-bottom:3px;border-bottom:1px solid transparent;display:inline-block}
.nav ul a:hover,.nav ul a[aria-current]{color:#fff;border-bottom-color:var(--silver-bright)}
.drawer-foot{display:none}

.burger{display:none;position:relative;z-index:6;margin-left:auto;flex:none;background:none;
  border:0;cursor:pointer;width:42px;height:34px;padding:8px 7px;
  flex-direction:column;justify-content:space-between}
.burger span{display:block;height:1.5px;background:var(--silver-bright);border-radius:2px;
  transition:transform .26s ease,opacity .2s ease}
.burger span:nth-child(2){width:78%}
.nav[data-open="true"] .burger span:nth-child(1){transform:translateY(8.25px) rotate(45deg)}
.nav[data-open="true"] .burger span:nth-child(2){opacity:0}
.nav[data-open="true"] .burger span:nth-child(3){transform:translateY(-8.25px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(8,13,21,.62);opacity:0;pointer-events:none;
  transition:opacity .26s ease;z-index:40}
.nav[data-open="true"] ~ .scrim,.scrim[data-open="true"]{opacity:1;pointer-events:auto}

/* ----------------------------------------------------------------- hero */
.hero,.work-hero{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,56px);align-items:center}
.hero h1{font-family:var(--display);color:#fff;line-height:1.04;
  font-size:clamp(36px,6.2vw,64px)}
.hero .lede{font-size:clamp(15.5px,1.5vw,18px);color:var(--silver-bright);max-width:34ch;
  margin:20px 0 0;line-height:1.55}
.avail{display:inline-flex;align-items:center;margin-top:26px;font-family:var(--ui);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver-bright);
  font-weight:500}

/* ------------------------------------------------- YouTube click-to-load */
.player{position:relative;display:block;border:1px solid var(--navy-line);background:var(--navy-deep);
  text-decoration:none;overflow:hidden;width:100%;padding:0;cursor:pointer;color:inherit;
  font:inherit;text-align:left}
.player .shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:22% 40%;
  filter:grayscale(1) brightness(.62) contrast(1.15)}
.player .veil{position:absolute;inset:0;background:linear-gradient(to top,
  rgba(13,20,31,.94) 0%,rgba(13,20,31,.55) 46%,rgba(20,29,44,.3) 100%)}
.player .btn{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(213,216,220,.13);
  border:1.5px solid var(--silver-bright);display:grid;place-items:center;transition:background .2s}
.player:hover .btn{background:rgba(213,216,220,.26)}
.player .btn::after{content:"";border-left:15px solid #fff;border-top:9.5px solid transparent;
  border-bottom:9.5px solid transparent;margin-left:5px}
.player .meta{position:absolute;left:0;right:0;bottom:0;padding:18px 20px}
.player .meta .k{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--silver-bright);font-weight:600;margin-bottom:5px}
.player .meta .t{display:block;font-family:var(--display);font-size:clamp(19px,2.3vw,26px);
  color:#fff;line-height:1.2}
.player .meta .d{display:block;font-family:var(--ui);font-size:12.5px;color:var(--silver);
  margin-top:6px;font-variant-numeric:tabular-nums}
.player-bare .veil{background:linear-gradient(to top,
  rgba(13,20,31,.58) 0%,rgba(20,29,44,.3) 100%)}
.player-bare .btn{top:50%}
.player-frame{position:relative;aspect-ratio:16/9;background:#000}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ------------------------------------------------------- section header */
.sec-head{display:flex;align-items:center;gap:15px;margin-bottom:30px}
.sec-head .glyph-sm{flex:none;display:block}
.sec-head .glyph-sm svg,.sec-head .glyph-sm img{width:44px;display:block}
.sec-head h2{font-family:var(--display);font-size:clamp(22px,2.7vw,30px);color:var(--ink);
  line-height:1.1}
.band-navy .sec-head h2{color:#fff}

/* ------------------------------------------------------------- services */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-rule)}
.svc{background:var(--paper);padding:26px 24px 28px;display:flex;flex-direction:column;gap:11px}
.svc h3{font-family:var(--display);font-size:20px;color:var(--ink)}
.svc p{margin:0;color:var(--ink-soft);font-size:15px}
.svc .arrives{font-family:var(--ui);font-size:12px;color:var(--ink-soft);
  border-top:1px solid var(--ink-rule);padding-top:11px;margin-top:auto}
.svc .arrives b{color:var(--ink);font-weight:600;display:block;margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.11em;font-size:10.5px}
.svc a{font-family:var(--ui);font-size:13.5px;color:var(--gold);text-decoration:none;
  font-weight:600;border-bottom:1px solid rgba(138,99,24,.38);align-self:flex-start;padding-bottom:1px}
.svc a:hover{border-bottom-color:var(--gold)}

/* -------------------------------------------------------------- process */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.step .n{font-family:var(--display);font-size:15px;color:var(--silver-bright);line-height:1;
  padding-bottom:9px;border-bottom:1px solid var(--navy-line);margin-bottom:10px}
.step h3{font-family:var(--ui);font-size:15px;color:#fff;font-weight:600;margin-bottom:6px}
.step p{margin:0;font-size:14px;color:var(--silver);line-height:1.55}

/* ------------------------------------------------------------ work page */
.crumb{font-family:var(--ui);font-size:12.5px;color:var(--silver)}
.crumb a{color:var(--silver);text-decoration:none;border-bottom:1px solid var(--navy-line)}
.crumb a:hover{color:#fff}
.work-title{font-family:var(--display);font-size:clamp(30px,4.8vw,50px);color:#fff;
  line-height:1.07;margin:14px 0 10px}
.work-sub{font-family:var(--ui);font-size:14.5px;color:var(--silver-bright)}
.work-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(26px,3.6vw,48px);
  align-items:start}
dl.spec{margin:0;display:grid;grid-template-columns:auto 1fr}
dl.spec dt{font-family:var(--ui);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;padding:12px 24px 12px 0;
  border-top:1px solid var(--ink-rule);white-space:nowrap}
dl.spec dd{margin:0;font-size:15px;color:var(--ink);padding:12px 0;
  border-top:1px solid var(--ink-rule)}
dl.spec dt:first-of-type,dl.spec dt:first-of-type+dd{border-top:none}
.pill{display:inline-flex;align-items:center;font-family:var(--ui);font-size:11.5px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);
  background:rgba(138,99,24,.10);border:1px solid rgba(138,99,24,.30);padding:3px 9px}
.excerpt figure{margin:32px 0 0}
.excerpt img{display:block;width:100%;border:1px solid var(--ink-rule);background:#fff}
.excerpt figcaption{font-family:var(--ui);font-size:11.5px;color:var(--ink-soft);margin-top:9px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.excerpt figcaption a{color:var(--gold);font-weight:600;text-decoration:none}
/* ---------------------------------------------------- score lightbox */
/* A score page is portrait and detailed, so the dialog fills the viewport and the
   image is contained inside it rather than scaled to a column width. */
.lightbox{border:0;padding:0;background:transparent;overflow:hidden;
  width:100%;height:100%;max-width:100%;max-height:100%}
.lightbox::backdrop{background:rgba(8,13,21,.965)}
/* minmax(0,1fr), not 1fr: a 1fr track floors at min-content, so a tall image sizes the
   track to itself and overflows the dialog instead of being contained by it. */
.lb-in{width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:14px clamp(14px,3vw,34px) clamp(14px,3vw,28px);gap:12px}
.lb-close{justify-self:end;background:none;border:1px solid rgba(213,216,220,.34);
  color:var(--silver-bright);font-family:var(--ui);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;cursor:pointer}
.lb-close:hover{border-color:var(--silver-bright);background:rgba(213,216,220,.09)}
/* The image is absolutely positioned rather than centred with grid, because its
   `max-height:100%` has to resolve against something definite. A stretched grid item's
   computed height stays `auto`, so the percentage was ignored and a tall score ran off
   the bottom of the dialog; an abspos containing block gives it a real height to clamp
   against. inset:0 + margin:auto then centres it on both axes. */
.lb-fig{margin:0;min-height:0;position:relative}
.lb-fig img{position:absolute;inset:0;margin:auto;width:auto;height:auto;
  max-width:100%;max-height:100%;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.lb-cap{font-family:var(--ui);font-size:12.5px;color:var(--silver);text-align:center;
  margin:0;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.lb-cap a{color:var(--silver-bright)}
.lightbox :focus-visible{outline-color:var(--silver-bright)}

.note{margin-top:34px}
.note h2{font-family:var(--display);font-size:21px;color:var(--ink);margin-bottom:12px}
.note p{color:var(--ink-soft);font-size:16px;line-height:1.68;max-width:64ch}
/* Sticky so a long work page does not scroll past a blank column. .work-grid uses
   align-items:start, so this keeps its own height and can travel the length of the grid.
   The max-height is a safety valve: a sidebar taller than the window would otherwise
   have its foot permanently out of reach. */
.side{display:flex;flex-direction:column;gap:22px;position:sticky;top:24px;
  max-height:calc(100vh - 48px);overflow-y:auto}
.side .box{border:1px solid var(--ink-rule);padding:18px}
.side .box h2{font-family:var(--ui);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin-bottom:11px}
.side .box p{margin:0 0 12px;font-size:14px;color:var(--ink-soft);line-height:1.55}
.movs{list-style:none;margin:0 0 0 -13px;padding:0;display:flex;flex-direction:column}
.movs li{border-top:1px solid var(--ink-rule);border-left:3px solid transparent;padding-left:10px}
.movs li:first-child{border-top:none}
.movs li.cur{border-left-color:var(--gold)}
.movs a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;text-decoration:none;
  font-size:14px;color:var(--ink-soft);align-items:baseline}
.movs a span{font-variant-numeric:tabular-nums;font-family:var(--ui);font-size:12.5px;color:#9AA3AF}
.movs a:hover{color:var(--gold)}
.side-works{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.side-works li{border-top:1px solid var(--ink-rule)}
.side-works li:first-child{border-top:none}
.side-works a{display:block;padding:11px 0;text-decoration:none}
.side-works .t{display:block;font-family:var(--display);font-size:16.5px;color:var(--ink);
  line-height:1.25}
.side-works .m{display:block;font-family:var(--ui);font-size:12px;color:var(--ink-soft);
  margin-top:4px;font-variant-numeric:tabular-nums}
.side-works a:hover .t{color:var(--gold)}
.box-link{display:inline-block;margin-top:14px;font-family:var(--ui);font-size:13px;
  font-weight:600;color:var(--gold);text-decoration:none}
.box-link:hover{text-decoration:underline}
.movs li.cur a{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------- works index */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filters a{font-family:var(--ui);font-size:13px;font-weight:500;text-decoration:none;
  color:var(--ink-soft);border:1px solid var(--ink-rule);padding:7px 14px}
.filters a:hover{border-color:var(--gold);color:var(--gold)}
.filters a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(22px,3vw,34px)}
.card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.card .thumb{aspect-ratio:16/10;background:var(--navy);border:1px solid var(--ink-rule);
  position:relative;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.66) contrast(1.12)}
.card h3{font-family:var(--display);font-size:20px;color:var(--ink);line-height:1.2}
.card .m{font-family:var(--ui);font-size:12.5px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.card p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.card:hover h3{color:var(--gold)}
.card .tags{display:flex;gap:7px;flex-wrap:wrap}
.tag-buy{display:inline-flex;align-items:center;font-family:var(--ui);font-size:10.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  background:rgba(138,99,24,.10);border:1px solid rgba(138,99,24,.30);padding:2px 8px}

/* ---------------------------------------------------------------- forms */
.form{max-width:620px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.field label{font-family:var(--ui);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600}
.field .hint{font-family:var(--ui);font-size:12.5px;color:var(--ink-soft);text-transform:none;
  letter-spacing:0;font-weight:400}
.field input,.field select,.field textarea{font-family:var(--body);font-size:16px;
  color:var(--ink);background:#fff;border:1px solid var(--ink-rule);padding:11px 13px;
  border-radius:0;width:100%}
.field textarea{min-height:150px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);
  outline-offset:1px;border-color:var(--gold)}
.field .err{font-family:var(--ui);font-size:13px;color:#9B2C2C;font-weight:500}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#9B2C2C}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.errors{border-left:3px solid #9B2C2C;padding:12px 16px;margin-bottom:26px;background:#FCF6F6}
.errors p{margin:0 0 6px;font-size:14.5px;color:#7B2222}
.errors p:last-child{margin:0}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-block;font-family:var(--ui);font-size:14px;font-weight:600;
  text-decoration:none;padding:12px 22px;border:1px solid transparent;cursor:pointer;
  letter-spacing:.02em}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-deep)}
.btn-silver{background:var(--silver-bright);color:var(--navy)}
.btn-silver:hover{background:#fff}
.btn-ghost{color:var(--silver-bright);border-color:rgba(213,216,220,.34);background:none}
.btn-ghost:hover{border-color:var(--silver-bright);background:rgba(213,216,220,.09)}
.btn-ghost-ink{color:var(--gold);border-color:rgba(138,99,24,.38);background:none}
.btn-ghost-ink:hover{border-color:var(--gold);background:rgba(138,99,24,.06)}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* ------------------------------------------------------------ instagram */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ig-grid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--navy-raised)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.ig-grid a:hover img{opacity:.8}

/* -------------------------------------------------------------- contact */
.contact-band{display:grid;grid-template-columns:1fr auto;gap:clamp(22px,3vw,46px);
  align-items:center}
.contact-band h2{font-family:var(--display);font-size:clamp(22px,2.8vw,30px);color:#fff;
  line-height:1.2}
.contact-band p{margin:9px 0 0;color:var(--silver);font-size:15px;max-width:44ch}

/* --------------------------------------------------------------- footer */
.foot{background:var(--navy);border-top:1px solid var(--navy-line);color:#7D8798}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:16px var(--pad);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--ui);font-size:12px}
.foot a{color:#7D8798;text-decoration:none}
.foot a:hover{color:#fff}
.foot-links{display:flex;align-items:center;gap:9px}
.foot-links .ig{display:inline-flex;margin-left:3px}
.foot-links .ig svg{width:17px;height:17px;display:block}

/* --------------------------------------------------------------- prose */
.prose{max-width:65ch}
.prose h2{font-family:var(--display);font-size:clamp(21px,2.4vw,27px);margin:36px 0 12px}
.prose h3{font-family:var(--ui);font-weight:600;font-size:17px;margin:28px 0 8px}
/* The heading margins space headings from what precedes them. Nothing precedes the
   first one, and the margin knocks the prose column out of line with the sidebar. */
.prose h2:first-child,.prose h3:first-child,.prose p:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-soft);font-size:16px;line-height:1.68}
.prose ul,.prose ol{padding-left:20px}
.prose li{margin-bottom:7px}
/* Buttons carry their own colour. Without :not(.btn) this selector (0,1,1) outranks
   .btn-gold (0,1,0) and paints gold text onto a gold fill. */
.prose a:not(.btn){color:var(--gold)}
.prose table{width:100%;border-collapse:collapse;margin:20px 0}
.prose th,.prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--ink-rule);
  font-size:15px;vertical-align:top}
.prose th{font-family:var(--ui);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600}
.table-scroll{overflow-x:auto}

.lead{font-size:clamp(17px,1.8vw,20px);line-height:1.5;color:var(--ink);max-width:52ch}
.band-navy .lead{color:var(--silver-bright)}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.band-navy :focus-visible,.player:focus-visible,.nav :focus-visible{outline-color:var(--silver-bright)}

/* ---------------------------------------------------------- responsive */
@media (max-width:860px){
  .nav-in{flex-wrap:nowrap}
  .burger{display:flex}
  .nav ul{position:fixed;top:0;right:0;bottom:0;z-index:50;margin:0;
    width:min(82%,300px);padding:74px 26px 26px;gap:0;
    flex-direction:column;align-items:stretch;overflow-y:auto;
    background:var(--navy-deep);border-left:1px solid var(--navy-line);
    transform:translateX(101%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:-18px 0 40px rgba(8,13,21,.45)}
  .nav[data-open="true"] ul{transform:translateX(0)}
  .nav ul li{border-top:1px solid var(--navy-line)}
  .nav ul li:first-child{border-top:none}
  .nav ul a{display:block;padding:15px 0;font-size:15.5px;border-bottom:0}
  .nav ul a:hover,.nav ul a[aria-current]{border-bottom:0;color:#fff}
  .drawer-foot{display:flex;flex-direction:column;align-items:flex-start;gap:15px;
    margin-top:auto;padding-top:22px;border-top:1px solid var(--navy-line)}
  .drawer-foot a{padding:0;display:inline-flex;align-items:center;color:var(--silver-bright);
    text-decoration:none;border-bottom:0}
  .drawer-foot .df-mail{font-family:var(--ui);font-size:14.5px;
    border-bottom:1px solid rgba(213,216,220,.32);padding-bottom:2px}
  .drawer-foot .df-ig{color:var(--silver)}
  .drawer-foot .df-ig svg{width:21px;height:21px;display:block}
  .hero,.work-hero,.work-grid,.contact-band{grid-template-columns:1fr}
  .side{position:static;max-height:none;overflow:visible}
  .svcs,.how{grid-template-columns:1fr}

  /* The admin nav carries no burger: it is four links behind a login, and a drawer that
     needs a button to open is a worse trade there than links that simply wrap. These
     must follow the drawer rules above, which they match on specificity. */
  .nav-admin .nav-in{flex-wrap:wrap;row-gap:10px}
  .nav-admin ul{position:static;width:auto;margin:0;padding:0;gap:18px;
    flex-direction:row;flex-wrap:wrap;overflow:visible;background:none;border-left:0;
    transform:none;box-shadow:none}
  .nav-admin ul li{border-top:0}
  .nav-admin ul a{display:inline-block;padding:0 0 3px;font-size:13.5px;
    border-bottom:1px solid transparent}
  .nav-admin ul a:hover,.nav-admin ul a[aria-current]{border-bottom-color:var(--silver-bright)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}