/* ==========================================================================
   Clova Chan — portfolio stylesheet
   Design system: Blue Bottle Coffee Japan (DESIGN.md, measured 2026-05-08)

   Applied faithfully: sky blue brand, warm beige secondary surface, ghost CTAs
   with square corners, weight 400 throughout, line-height 2.0, flat surfaces
   with no shadows, generous 8px-grid spacing.

   Two deliberate deviations, both documented at the token:
   1. Type scale stepped up for Latin text (see --fs-body).
   2. Blue, gold and secondary grey darkened to clear WCAG AA. The measured
      values fail contrast; hue and character are preserved.

   Change colours and fonts in :root only.
   ========================================================================== */

html{color-scheme:light}

:root{
  /* ---- brand ------------------------------------------------------------
     Blue Bottle Coffee Japan storefront (DESIGN.md, measured 2026-05-08).    */
  --blue-brand:#00a9e0;     /* brand blue, all uses */
  --blue:#00a9e0;           /* brand blue, all uses: text, CTA borders, links */
  --gold:#7C5E39;           /* link gold, warm accent    5.97:1 on white */

  /* Cerulean from the Blue Bottle global brand record. Retained for the
     footer only: link hover and the motto line. */
  --cerulean:#01A1DD;

  /* ---- neutral (measured values, unchanged where they pass) ---- */
  --text:#454545;           /* body + headings           9.59:1 */
  --header-text:#333333;    /* header, nav              12.63:1 */
  --text-2:#666666;         /* secondary text, darkened from #7e7e7e */
  --border:#e3e3e3;         /* input borders */
  --header-border:#e0e0e0;  /* header + footer rules */
  --beige:#f1e4d8;          /* warm beige secondary surface */
  --white:#ffffff;

  /* ---- type ------------------------------------------------------------
     AXIS Font is an Adobe Fonts domain licence and cannot render here.
     DESIGN.md nominates Zen Kaku Gothic New as the substitute. Figtree
     carries headings and CTAs, exactly as the spec's CSS variables do.     */
  --font-text:'Zen Kaku Gothic New','Helvetica Neue',sans-serif;
  --font-head:'Figtree',sans-serif;

  /* ---- type scale ------------------------------------------------------
     Spec measures body at 14px. That is sized for Japanese, which renders
     optically larger than Latin at the same px. Stepped to 16px for an
     English page; every line-height ratio from the spec is preserved.      */
  --fs-body:16px;           /* spec 14px, see note above */
  --lh-body:2.0;            /* spec ratio, unchanged */
  --ls-head:.04em;          /* spec: headings, nav, labels */
  --ls-cta:.2em;            /* spec: CTA labels, Figtree */

  /* ---- spacing: 8px grid from the spec ---- */
  --xs:4px; --s:8px; --m:16px; --l:24px; --xl:48px; --xxl:80px;

  --gut:clamp(16px,3vw,32px);   /* spec: mobile 16, desktop 32 */
  --safe-l:max(var(--gut),env(safe-area-inset-left));
  --safe-r:max(var(--gut),env(safe-area-inset-right));
  --max:1200px;                 /* spec container */

  --ease:cubic-bezier(.22,1,.36,1);
  --z-dropdown:10; --z-header:20; --z-overlay:30; --z-skip:40;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--font-text);
  font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:400;letter-spacing:normal;      /* spec: body has no tracking */
  -webkit-font-smoothing:antialiased;
}

/* Spec: weight 700 is used only in extremely limited places. Nothing on this
   page qualifies, so bold is neutralised globally. */
b,strong,h1,h2,h3,h4,th{font-weight:400}

img{max-width:100%;display:block}
a{color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,114,155,.12)}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--safe-l);padding-right:var(--safe-r)}
#top,#work,#about,#contact,#timeline,#voices{scroll-margin-top:96px}

/* Spec: all headings weight 400, tracked 0.04em, generous leading. */
h1,h2,h3{
  font-family:var(--font-head);font-weight:400;
  letter-spacing:var(--ls-head);color:var(--text);
  margin:0;text-wrap:balance;
}

/* --- header + navigation ------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--white);border-bottom:1px solid var(--header-border);
}
.nav-in{
  max-width:var(--max);margin:0 auto;
  padding-block:var(--m);padding-left:var(--safe-l);padding-right:var(--safe-r);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--m);
}
.nav-left{display:flex;align-items:center;gap:clamp(16px,3vw,40px);min-width:0}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:var(--m)}

.nav-name{
  font-family:var(--font-head);font-weight:400;font-size:18px;
  letter-spacing:var(--ls-head);color:var(--header-text);
  text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:10px;
}
.nav-logo{height:30px;width:30px;flex:none;display:block}
@media(max-width:749px){.nav-logo{height:26px;width:26px}}
.nav-name b{color:var(--blue)}

.nav-link,.dd-btn{
  font-family:var(--font-text);font-weight:400;font-size:15px;
  letter-spacing:var(--ls-head);color:var(--header-text);
  text-decoration:none;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s);
  min-height:44px;padding:0 2px;line-height:2;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.nav-link:hover,.dd-btn:hover{color:var(--blue);border-bottom-color:var(--blue)}
.nav-link[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}

.nav-mid{display:flex;justify-content:center}
.dd{position:relative;z-index:var(--z-dropdown)}
.caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .2s var(--ease);
}
.dd-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

/* Spec: flat by default. Level-2 shadow is the spec's own recommendation
   for dropdowns, at a deliberately low opacity. Square corners. */
.dd-menu{
  position:absolute;top:100%;left:-8px;transform:translateY(-4px);
  min-width:200px;background:var(--white);border:1px solid var(--header-border);
  border-radius:0;box-shadow:0 4px 16px rgba(0,0,0,.08);
  display:flex;flex-direction:column;padding:var(--s) 0;
  opacity:0;visibility:hidden;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd-btn[aria-expanded="true"]+.dd-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.dd:hover .dd-btn,.dd-btn[aria-expanded="true"]{color:var(--blue)}
.dd-menu a{
  font-family:var(--font-text);font-size:14px;font-weight:400;
  letter-spacing:var(--ls-head);color:var(--text);text-decoration:none;
  padding:var(--s) var(--l);min-height:44px;display:flex;align-items:center;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.dd-menu a:hover{background:var(--beige);color:var(--blue)}
.dd-menu a[aria-current="page"]{color:var(--blue)}

/* --- CTAs: the spec's signature ghost button ---------------------------- */
/* Figtree 12px, tracking 0.2em, uppercase, square, transparent, blue border. */
.nav-cta,.btn,.m-cta{
  font-family:var(--font-head);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-cta);text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:14px 28px;min-height:44px;line-height:1;border-radius:0;
  text-decoration:none;white-space:nowrap;background:transparent;
  border:1px solid var(--blue);color:var(--blue);
  transition:background .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
}
.nav-cta:hover,.btn:hover,.m-cta:hover{background:var(--blue);color:var(--white)}
.btn-solid{background:var(--blue);color:var(--white)}
.btn-solid:hover{opacity:.85;background:var(--blue);color:var(--white)}
.btn-ghost{background:transparent;color:var(--blue)}

.burger{
  display:none;background:none;border:1px solid var(--header-border);border-radius:0;
  cursor:pointer;width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;
}
.burger span{display:block;width:19px;height:1px;background:var(--header-text);
  transition:transform .2s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- mobile panel ------------------------------------------------------- */
.mobile-nav{
  position:fixed;inset:0;z-index:var(--z-overlay);background:var(--white);
  padding-top:96px;padding-left:var(--safe-l);padding-right:var(--safe-r);
  padding-bottom:max(var(--xl),env(safe-area-inset-bottom));
  overflow-y:auto;display:flex;
}
.mobile-nav[hidden]{display:none}
.mobile-in{display:flex;flex-direction:column;width:100%}
.m-top{
  font-family:var(--font-head);font-weight:400;font-size:24px;
  letter-spacing:var(--ls-head);line-height:2;
  text-decoration:none;color:var(--text);padding:var(--s) 0;
}
.m-label{
  font-family:var(--font-text);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-head);color:var(--text-2);
  margin:var(--l) 0 var(--xs);line-height:2;
}
.m-sub{display:flex;flex-direction:column;padding-left:var(--m)}
.m-sub a{
  font-family:var(--font-head);font-weight:400;font-size:20px;
  letter-spacing:var(--ls-head);line-height:2;
  text-decoration:none;color:var(--text);padding:var(--xs) 0;
  transition:color .2s var(--ease);
}
.m-sub a:hover,.m-sub a[aria-current="page"]{color:var(--blue)}
.m-cta{margin-top:var(--xl);width:100%}

@media(max-width:989px){
  .nav-in{grid-template-columns:1fr auto}
  .nav-left .nav-link,.nav-mid,.nav-cta{display:none}
  .burger{display:flex}
}
@media(min-width:990px){.mobile-nav{display:none !important}}

/* --- hero --------------------------------------------------------------
   Photograph behind a translucent white panel. The image is anchored to its
   upper band so the panel sits over sky rather than dark bush: same scrim
   opacity, roughly 60% more contrast for the text on top of it.

   --hero-scrim is the single knob: the white opacity of the panel. At .70
   (30% transparent) the text measures 7.5:1 over the average sky and 5.9:1
   over the darkest cloud shadows, so it clears AA everywhere on the panel.
   ---------------------------------------------------------------------- */
:root{ --hero-scrim:.70; }

.hero{
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  min-height:clamp(440px,62vh,660px);
  padding-block:var(--xl);
  background:#cfe0ea;              /* holds the space while the photo loads */
  overflow:hidden;
}
.hero-img{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 22%;         /* favour sky, keep the rainbow in frame */
}
@media(max-width:749px){
  .hero{min-height:clamp(400px,72vh,560px)}
  .hero-img{object-position:58% 26%}
}
.hero-inner{width:100%}

.hero-panel{
  max-width:660px;
  padding:var(--l);
  background:rgba(255,255,255,var(--hero-scrim));
  backdrop-filter:blur(3px);       /* softens photo detail under the text */
  border-radius:0;                 /* spec: square, like every other surface */
}
@media(min-width:750px){.hero-panel{padding:var(--xl)}}

.hero h1{
  font-size:clamp(28px,5vw,48px);line-height:1.5;
  letter-spacing:var(--ls-head);max-width:20ch;margin-bottom:var(--l);
}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-sub{
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);
  max-width:52ch;margin:0 0 var(--l);text-wrap:pretty;
}
.btns{display:flex;flex-wrap:wrap;gap:var(--m);margin:0}

/* CTAs sit on the photo, so they carry a solid ground of their own. */
.hero .btn{background:var(--white)}
.hero .btn-solid{background:var(--blue);color:var(--white)}
.hero .btn:hover{background:var(--blue);color:var(--white)}

.hero-meta-wrap{padding-top:var(--l);padding-bottom:var(--xl)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--s) var(--l);
  font-family:var(--font-text);font-size:13px;font-weight:400;
  letter-spacing:var(--ls-head);line-height:1.5;color:var(--text-2);
  padding-top:0;margin-top:0;border-top:0;
}
.eyebrow{
  font-family:var(--font-head);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-cta);text-transform:uppercase;
  color:var(--blue);margin:0 0 var(--l);
}

/* --- logo strip --------------------------------------------------------- */
.logos{
  border-top:1px solid var(--header-border);border-bottom:1px solid var(--header-border);
  margin-top:var(--l);padding-block:var(--l);
}
.logos-label{
  font-family:var(--font-text);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-head);color:var(--text-2);margin:0 0 var(--m);line-height:2;
}
.logos-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--m) var(--xl);margin:0;padding:0}
.logos-row li{list-style:none}
.logos-row .mark{
  font-family:var(--font-head);font-weight:400;font-size:15px;
  letter-spacing:var(--ls-head);color:var(--text);line-height:2;
  display:inline-flex;align-items:center;gap:var(--s);
  transition:opacity .2s var(--ease);
}
.logos-row .mark::before{
  content:"";width:4px;height:4px;background:var(--blue-brand);flex:none;
}
.logos-row li:hover .mark{opacity:.6}
.logos-row img{height:22px;width:auto;filter:grayscale(1);opacity:.75}

/* --- sections ----------------------------------------------------------- */
.section{padding-block:var(--xl)}
.section-lead{padding-block:var(--xxl) var(--xl)}
.section-head{margin-bottom:var(--l)}
.section-head h2{
  font-size:clamp(20px,2.6vw,24px);line-height:2;   /* spec: section h2 at 2.0 */
  letter-spacing:var(--ls-head);
}
.section-head .count{
  font-family:var(--font-head);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-cta);text-transform:uppercase;
  color:var(--text-2);margin-left:var(--m);
}
.section-head p{color:var(--text);max-width:64ch;margin:var(--s) 0 0;text-wrap:pretty}

/* --- category page header: warm beige secondary surface ----------------- */
.on-ink{
  background:var(--beige);
  border-bottom:1px solid var(--header-border);
}
.page-head{padding-block:var(--xl)}
.page-head h1{
  font-size:clamp(28px,4.4vw,40px);line-height:1.5;
  letter-spacing:var(--ls-head);max-width:20ch;margin-bottom:var(--l);
}
.page-head h1 em{font-style:normal;color:var(--blue)}
.page-head p.lede{
  color:var(--text);max-width:64ch;font-size:var(--fs-body);
  line-height:var(--lh-body);margin:0;text-wrap:pretty;
}

/* --- metric grid -------------------------------------------------------- */
.stat-grid{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--header-border);margin-top:var(--l);
}
@media(min-width:750px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:990px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{padding:var(--l) var(--l) var(--l) 0;border-bottom:1px solid var(--header-border)}
@media(min-width:750px){
  .stat{border-right:1px solid var(--header-border);padding-left:var(--l)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(2n+1){padding-left:0}
}
@media(min-width:990px){
  .stat{border-right:1px solid var(--header-border);padding-left:var(--l)}
  .stat:nth-child(2n){border-right:1px solid var(--header-border)}
  .stat:nth-child(4n){border-right:0}
  .stat:nth-child(2n+1){padding-left:var(--l)}
  .stat:nth-child(4n+1){padding-left:0}
}
.stat-n{
  display:block;font-family:var(--font-head);font-weight:400;
  font-variant-numeric:tabular-nums;font-size:clamp(24px,3vw,32px);
  line-height:1.5;letter-spacing:var(--ls-head);color:var(--blue);
}
.stat-l{
  display:block;font-family:var(--font-text);font-size:13px;font-weight:400;
  line-height:1.8;color:var(--text-2);margin-top:var(--s);max-width:30ch;text-wrap:pretty;
}

/* --- project entries ---------------------------------------------------- */
.projects{display:grid;gap:0}
.project{padding-block:var(--xl);border-top:1px solid var(--header-border)}
.project:first-child{border-top:0;padding-top:0}
.project h3{
  font-size:clamp(18px,2.2vw,22px);line-height:1.5;
  letter-spacing:var(--ls-head);margin-bottom:var(--s);max-width:32ch;
}
.project .org{
  font-family:var(--font-text);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-head);line-height:2;color:var(--text-2);margin:0 0 var(--m);
}
.project p.desc{
  margin:0 0 var(--l);max-width:64ch;color:var(--text);
  line-height:var(--lh-body);text-wrap:pretty;
}
.results{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--l);padding-top:var(--l);border-top:1px solid var(--header-border);max-width:900px;
}
.result-n{
  display:block;font-family:var(--font-head);font-weight:400;
  font-variant-numeric:tabular-nums;font-size:20px;line-height:1.5;
  letter-spacing:var(--ls-head);color:var(--blue);
}
.result-l{
  display:block;font-family:var(--font-text);font-size:12px;font-weight:400;
  line-height:1.8;color:var(--text-2);margin-top:var(--xs);text-wrap:pretty;
}

/* --- category cards: flat, borderless, square --------------------------- */
.cats{display:grid;gap:var(--l)}
@media(min-width:750px){.cats{grid-template-columns:1fr 1fr}}
.cat{
  display:block;text-decoration:none;background:var(--beige);
  border:0;border-radius:0;padding:var(--l);
  transition:opacity .2s var(--ease);
}
.cat:hover{opacity:.78}
.cat h3{font-size:18px;line-height:1.5;letter-spacing:var(--ls-head);margin-bottom:var(--s)}
.cat p{margin:0 0 var(--m);color:var(--text);font-size:14px;line-height:1.9;max-width:44ch;text-wrap:pretty}
.cat .go{
  font-family:var(--font-head);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-cta);text-transform:uppercase;color:var(--blue);
}

/* --- timeline ----------------------------------------------------------- */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--header-border)}
.tl li{
  display:flex;flex-wrap:wrap;gap:0 var(--l);align-items:baseline;
  padding:var(--m) 0;border-bottom:1px solid var(--header-border);
}
.tl .when{
  font-family:var(--font-text);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-head);line-height:2;color:var(--text-2);min-width:120px;
}
.tl .role{font-family:var(--font-head);font-weight:400;font-size:15px;
  letter-spacing:var(--ls-head);line-height:2;min-width:240px;color:var(--text)}
.tl .where{color:var(--text-2);font-size:14px;line-height:2;flex:1;min-width:220px}

/* --- quotes: warm beige, flat, square ----------------------------------- */
.quotes{display:grid;gap:var(--l)}
@media(min-width:990px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{margin:0;padding:var(--l);background:var(--beige);border:0;border-radius:0}
.quote p{margin:0;font-size:14px;line-height:1.9;color:var(--text);text-wrap:pretty}
.quote footer{
  font-family:var(--font-text);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-head);line-height:1.8;color:var(--text-2);margin-top:var(--m);
}

/* --- about -------------------------------------------------------------- */
.about-grid{display:grid;gap:var(--xl)}
@media(min-width:990px){.about-grid{grid-template-columns:1.5fr 1fr;gap:var(--xl) var(--xxl)}}
.about-body p{max-width:64ch;color:var(--text);line-height:var(--lh-body);text-wrap:pretty}
.greeting{
  font-family:var(--font-head);font-weight:400;font-size:clamp(18px,2.4vw,22px);
  letter-spacing:var(--ls-head);line-height:1.5;color:var(--blue);margin:0 0 var(--m);
}
.about-side{display:flex;flex-direction:column;gap:var(--l);align-items:flex-start}

/* Circular thumbnail. The one deliberate exception to the spec's
   radius-0 rule — see the note in chat. The hairline ring keeps the
   photo's near-white studio background from dissolving into the page. */
.portrait{
  width:96px;height:96px;flex:none;
  object-fit:cover;object-position:50% 40%;
  border-radius:50%;
  border:1px solid var(--header-border);
}
@media(max-width:989px){.portrait{width:84px;height:84px}}

.facts{border-top:1px solid var(--header-border);padding-top:var(--l)}
.facts dt{
  font-family:var(--font-text);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-head);line-height:2;color:var(--text-2);margin-top:var(--l);
}
.facts dt:first-child{margin-top:0}
.facts dd{margin:0;color:var(--text);font-size:14px;line-height:1.9}

/* --- contact: warm beige surface ---------------------------------------- */
.contact{
  background:var(--beige);border-top:1px solid var(--header-border);
  padding-block:var(--xxl);
}
.contact h2{
  font-size:clamp(22px,3.4vw,32px);line-height:1.5;
  letter-spacing:var(--ls-head);margin-bottom:var(--l);max-width:20ch;
}
.contact p{color:var(--text);max-width:56ch;margin:0 0 var(--xl);line-height:var(--lh-body)}
.contact-links{display:flex;flex-wrap:wrap;gap:var(--m) var(--xl)}
.contact-links a{
  font-family:var(--font-text);font-size:14px;font-weight:400;
  letter-spacing:var(--ls-head);color:var(--gold);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;line-height:2;
  border-bottom:1px solid var(--gold);
  transition:opacity .2s var(--ease);
}
.contact-links a:hover{opacity:.7}

/* --- footer ------------------------------------------------------------- */
.site-foot{background:var(--white);border-top:1px solid var(--header-border);padding-block:var(--xl)}
.foot-cols{display:grid;gap:var(--xl)}
@media(min-width:750px){.foot-cols{grid-template-columns:1.6fr 1fr 1.2fr;gap:var(--xl)}}
.foot-col p{color:var(--text-2);font-size:13px;line-height:1.9;margin:0 0 var(--s);max-width:42ch;text-wrap:pretty}
.foot-name{
  font-family:var(--font-head);font-weight:400;font-size:18px;
  letter-spacing:var(--ls-head);color:var(--text) !important;margin-bottom:var(--m) !important;
}
.foot-name b{color:var(--blue)}
.foot-h{
  font-family:var(--font-head);font-size:12px;font-weight:400;
  letter-spacing:var(--ls-cta);text-transform:uppercase;
  color:var(--text) !important;margin-bottom:var(--m) !important;
}
.foot-motto{color:var(--cerulean) !important;font-size:14px !important;line-height:1.9}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li a{
  font-family:var(--font-text);font-size:13px;font-weight:400;
  letter-spacing:var(--ls-head);color:var(--text-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:36px;line-height:2;
  transition:color .2s var(--ease);
}
.foot-col li a:hover{color:var(--cerulean)}
.foot-rule{border:0;border-top:1px solid var(--header-border);margin:var(--xl) 0 var(--l)}
.foot-copy{
  font-family:var(--font-text);font-size:11px;font-weight:400;
  letter-spacing:normal;line-height:2;color:var(--text-2);margin:0;text-align:center;
}

/* --- accessibility + motion --------------------------------------------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:0}
.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--blue);color:var(--white);padding:14px 28px;border-radius:0;
  font-family:var(--font-head);font-size:12px;letter-spacing:var(--ls-cta);text-transform:uppercase;
}
.skip:focus{left:0}

/* Spec: no flashy hover animation. Opacity-level interaction only. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}