/* South West Websites shared shell: type, header and footer for every studio page.
   One family, Archivo, does all the lettering. Its width axis carries the signwriter's
   contrast: narrow and heavy for names, extended for trade lines, normal for reading. */
@font-face{font-family:"Archivo";src:url('/assets/studio-fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url('/assets/studio-fonts/archivo-italic-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}

/* Stand-ins sized to Archivo while it loads, so lines break in the same places and the page
   doesn't jump when the real face arrives. One per width the site letters at: reading text,
   narrow lettering (62-72%) and extended trade lines (110-125%). Ascent and descent are
   Archivo's own (878/210 per 1000) divided by the size adjustment. */
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Liberation Sans"),local("Roboto");font-weight:100 549;size-adjust:98%;ascent-override:89.6%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Liberation Sans Bold"),local("Roboto Bold");font-weight:550 900;size-adjust:97%;ascent-override:90.5%;descent-override:21.6%;line-gap-override:0%}
@font-face{font-family:"Archivo Lettering Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Liberation Sans Bold"),local("Roboto Bold");font-weight:100 900;size-adjust:71%;ascent-override:123.7%;descent-override:29.6%;line-gap-override:0%}
@font-face{font-family:"Archivo Trade Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Liberation Sans Bold"),local("Roboto Bold");font-weight:100 900;size-adjust:122%;ascent-override:72%;descent-override:17.2%;line-gap-override:0%}

:root{
  --sans:"Archivo","Archivo Fallback",Arial,sans-serif;
  --lettering:"Archivo","Archivo Lettering Fallback",Arial,sans-serif;
  --trade:"Archivo","Archivo Trade Fallback",Arial,sans-serif;
  /* Older stylesheets (studio.css, case-study.css) still ask for a serif, display or body
     face. There is only one family now, so all three point at Archivo. */
  --serif:var(--sans);
  --display:var(--sans);
  --body:var(--sans);
  --gorse-fixed:#E2B340;
  --hh:74px; /* the header's real height, so main.js rarely has to set it (setting it restyles the whole page) */
  --lining-gorse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M11 1H49A10 10 0 0 0 59 11V49A10 10 0 0 0 49 59H11A10 10 0 0 0 1 49V11A10 10 0 0 0 11 1Z' fill='none' stroke='%23E2B340' stroke-width='2'/%3E%3C/svg%3E");
}
body{font-stretch:100%}
::selection{background:var(--gorse-fixed);color:#17232B}

/* Headings on every studio page take the lettering voice. */
:is(.studio-case,.studio-about,.studio-page) :is(h1,h2){font-family:var(--lettering);font-stretch:72%;font-weight:800;letter-spacing:-.012em;line-height:.98}
:is(.studio-case,.studio-about) :is(h1,h2) em,
.studio-case em,.studio-about em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--estuary,#1F6B63)}
.studio-about .about-serif-title{font-weight:800;letter-spacing:-.012em}
.person-name{font-family:var(--lettering);font-style:normal;font-weight:800;font-stretch:74%;letter-spacing:-.012em}

/* Header */
.studio-header{position:sticky;top:0;z-index:30;background:var(--paper,#F4F6F4);color:var(--ink,#17232B);border:0;transition:box-shadow .25s}
.studio-nav-wrap{max-width:1360px;margin:auto;padding:0 clamp(20px,2.6vw,36px)}
.studio-header .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;height:auto;max-width:none;margin:0}
.studio-header .brand,.studio-footer .brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--sans);line-height:1;color:inherit}
.studio-header .mark,.studio-footer .mark{width:44px;height:44px;flex:none}
.studio-header .wordmark,.studio-footer .wordmark{display:flex;flex-direction:column;gap:2px}
.studio-header .wordmark b,.studio-footer .wordmark b{font-family:var(--lettering);font-size:1.32rem;font-weight:800;font-stretch:66%;letter-spacing:-.005em;word-spacing:.06em;line-height:.95}
.studio-header .wordmark span,.studio-footer .wordmark span{font-family:var(--trade);font-size:.8rem;font-weight:600;font-stretch:125%;letter-spacing:0;line-height:1}
.studio-header .wordmark span{color:var(--estuary,#1F6B63)}
.studio-header .nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);font:550 1rem/1.4 var(--sans)}
.studio-header .nav-links a,.studio-header .nav-links a:not(.nav-cta){display:inline-flex;align-items:center;min-height:44px;padding:0;text-decoration:none;color:inherit;background:none;border-radius:0;font-family:var(--sans)}
.studio-header .nav-links a:not(.nav-cta){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:transparent;transition:text-decoration-color .2s,text-underline-offset .2s,color .2s}
.studio-header .nav-links a:not(.nav-cta):hover,.studio-header .nav-links a[aria-current]{color:var(--estuary,#1F6B63);text-decoration-color:currentColor;text-underline-offset:5px}
.studio-header .nav-links .nav-cta{min-height:46px;padding:0 20px;border:0;border-radius:4px;background:var(--slate,#17313A);color:#F4F6F4;font-weight:650;letter-spacing:.005em;position:relative;transition:transform .2s}
.studio-header .nav-links .nav-cta::after{content:"";position:absolute;inset:4px;border:2px solid var(--gorse-fixed);border-radius:2px;opacity:0;transition:opacity .25s;pointer-events:none}
.studio-header .nav-links .nav-cta:hover::after{opacity:1}
.studio-header .nav-links .nav-cta:active{transform:translateY(1px)}
.studio-header .nav-quick,.studio-header .nav-toggle{display:none}
.studio-header .nav-toggle{min-height:44px;padding:10px 14px;border:2px solid var(--slate,#17313A);border-radius:4px;color:inherit;background:transparent;font:650 .95rem var(--sans);align-items:center;gap:10px;cursor:pointer}
.studio-header .nav-toggle-lines{display:grid;gap:5px;width:18px}
.studio-header .nav-toggle-lines:before,.studio-header .nav-toggle-lines:after{content:"";height:2px;background:currentColor;transition:transform .25s}
.studio-header .nav-toggle[aria-expanded="true"] .nav-toggle-lines:before{transform:translateY(3.5px) rotate(45deg)}
.studio-header .nav-toggle[aria-expanded="true"] .nav-toggle-lines:after{transform:translateY(-3.5px) rotate(-45deg)}
.studio-header.scrolled{box-shadow:0 1px 0 var(--line,#CBD6D1)}

/* Footer: the studio's own fascia */
.studio-footer{position:relative;background:#17313A;color:#EEF4F1;padding:clamp(56px,7vw,96px) 0 0;font:400 1rem/1.65 var(--sans);overflow:hidden;isolation:isolate}
.studio-footer::before{content:"";position:absolute;inset:clamp(8px,1vw,14px);border:20px solid transparent;border-image:var(--lining-gorse) 20 / 20px stretch;pointer-events:none;z-index:-1}
.studio-footer-wrap{max-width:1360px;margin:auto;padding:0 clamp(28px,4.4vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px}
.studio-footer .wordmark b{color:#F4F6F4}
.studio-footer .wordmark span{color:var(--gorse-fixed)}
.studio-footer .footer-person p{max-width:34ch;color:#C5D5D0;margin:24px 0 12px}
.studio-footer a{color:inherit;overflow-wrap:anywhere}
.studio-footer-links{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.studio-footer-links h2{font:800 1.5rem/1 var(--lettering);font-stretch:66%;margin:0 0 14px;letter-spacing:0;color:var(--gorse-fixed)}
.studio-footer-links a{display:flex;align-items:center;min-height:44px;width:fit-content;text-decoration:none;color:#C5D5D0}
.studio-footer a:hover{text-decoration:underline;text-decoration-color:var(--gorse-fixed);text-underline-offset:5px;color:#fff}
.studio-footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #45606A;padding-top:20px;color:#C5D5D0;font:400 .88rem/1.5 var(--sans)}
.studio-footer-bottom nav{display:flex;flex-wrap:wrap;gap:24px}
.studio-footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
.footer-fascia{grid-column:1/-1;margin:clamp(8px,2vw,24px) 0 0;padding-bottom:clamp(28px,3.6vw,52px);font:800 calc((min(100vw,1360px) - 2 * clamp(28px,4.4vw,72px)) / 8)/.86 var(--lettering);font-stretch:74%;letter-spacing:-.012em;white-space:nowrap;color:#F4F6F4;user-select:none}
.footer-fascia span{color:var(--gorse-fixed)}
.studio-header :focus-visible,.studio-footer :focus-visible{outline:3px solid var(--gorse-fixed);outline-offset:5px}
.studio-header :focus-visible{outline-color:var(--estuary,#1F6B63)}

@media(max-width:900px){
  :root{--hh:68px}
  .studio-header .nav{flex-wrap:wrap;gap:16px;padding:12px 0}
  .studio-header .nav-links{width:100%;flex-wrap:wrap;gap:12px 24px}
  .studio-header.nav-ready .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper,#F4F6F4);padding:8px clamp(20px,2.6vw,36px) 24px;border-bottom:2px solid var(--slate,#17313A)}
  .studio-header.nav-ready .nav-links.open{display:grid;grid-template-columns:1fr;gap:0}
  .studio-header.nav-ready .nav-links.open a:not(.nav-cta){font-family:var(--lettering);font-size:2rem;font-weight:800;font-stretch:66%;min-height:56px;border-bottom:1px solid var(--line,#CBD6D1);text-decoration:none}
  .studio-header.nav-ready .nav-links.open .nav-cta{margin-top:20px;justify-content:center;min-height:52px}
  .studio-header.nav-ready .nav-toggle{display:flex;margin-left:auto}
  .studio-header .nav-links .nav-cta{width:fit-content}
  .studio-footer-wrap{grid-template-columns:1fr;gap:36px}
  .studio-footer-bottom{display:block}
  .studio-footer-bottom nav{margin-top:8px}
}
@media(max-width:600px){
  .studio-header .mark{width:40px;height:40px}
  .studio-header .wordmark b{font-size:1.2rem}
  .studio-footer-links{gap:20px}
  .studio-footer-bottom nav{gap:4px 20px}
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .studio-header .nav-links .nav-cta{background:#E8BE55;color:#17232B}
  :root:not([data-theme="light"]) .studio-header .nav-links .nav-cta::after{border-color:#17232B}
  :root:not([data-theme="light"]) .studio-header .nav-toggle{border-color:var(--control,#839C9D)}
  :root:not([data-theme="light"]) .studio-header.nav-ready .nav-links{border-bottom-color:var(--line,#3B5059)}
  :root:not([data-theme="light"]) .studio-footer{background:#0B1519}
}
:root[data-theme="dark"] .studio-header .nav-links .nav-cta{background:#E8BE55;color:#17232B}
:root[data-theme="dark"] .studio-header .nav-links .nav-cta::after{border-color:#17232B}
:root[data-theme="dark"] .studio-header .nav-toggle{border-color:var(--control,#839C9D)}
:root[data-theme="dark"] .studio-header.nav-ready .nav-links{border-bottom-color:var(--line,#3B5059)}
:root[data-theme="dark"] .studio-footer{background:#0B1519}
@media(prefers-reduced-motion:reduce){
  .studio-header,.studio-header *{transition:none!important}
}

.studio-header.nav-ready .nav-quick{display:none!important}
/* When scripts can run, start with the phone menu folded so the page doesn't jump when
   main.js arrives. The .nav-ready rules above cover browsers without the scripting query. */
@media(max-width:900px) and (scripting:enabled){
  .studio-header .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper,#F4F6F4);padding:8px clamp(20px,2.6vw,36px) 24px;border-bottom:2px solid var(--slate,#17313A)}
  .studio-header .nav-toggle{display:flex;margin-left:auto}
}
.skip{position:absolute;left:-9999px;top:16px}
.skip:focus{left:16px;background:var(--surface,#fff);color:var(--ink,#17232B);padding:12px 20px;z-index:50;outline:3px solid var(--focus,#1F6B63);outline-offset:3px}