/* matthewmcwilliam.com — sibling of mcwilliamphotography.com.
   Tokens are the same family on purpose: one hand, two sites.
   Light-only, like its sibling. Every colour is explicit. */

/* ==== FONTS (identical files to the photography site) ==== */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/Newsreader-normal-400.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/Newsreader-italic-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/HankenGrotesk-normal-400.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DMMono-normal-400.woff2) format("woff2")}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:104%;ascent-override:92%;descent-override:22%}
@font-face{font-family:"Hanken Fallback";src:local("Helvetica Neue"),local("Arial");size-adjust:98%}

:root{
  --paper:#F7F4EE;--paper-2:#EFEAE1;--paper-3:#E6E0D4;
  --ink:#17202B;--ink-2:#3B4552;--ink-3:#5C6572;
  --rule:#E1DCD2;--rule-strong:#B9B3A6;
  --accent:#9E5026;--accent-deep:#7F3F1D;--accent-tint:#F0E3D6;
  --violet:#5B4B8A;--danger:#A33A2A;--success:#3E6B4A;
  --night:#0F131A;--night-2:#161C25;--night-ink:#ECE7DD;--night-ink-2:#C9C3B8;--night-ink-3:#9A948A;
  --night-rule:#232A35;--night-accent:#D08A55;
  --bg:var(--paper);--bg-2:var(--paper-2);--bg-3:var(--paper-3);
  --fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);
  --line:var(--rule);--line-strong:var(--rule-strong);
  --link:var(--accent);--link-deep:var(--accent-deep);--tag:var(--violet);
  --font-display:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  --font-sans:"Hanken Grotesk","Hanken Fallback","Helvetica Neue",Arial,sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --step--2:clamp(.72rem,.7rem + .1vw,.78rem);--step--1:clamp(.8125rem,.792rem + .093vw,.875rem);
  --step-0:clamp(1rem,.958rem + .185vw,1.125rem);--step-1:clamp(1.125rem,1.042rem + .37vw,1.375rem);
  --step-2:clamp(1.375rem,1.208rem + .74vw,1.875rem);--step-3:clamp(1.75rem,1.458rem + 1.3vw,2.625rem);
  --step-4:clamp(2.25rem,1.75rem + 2.22vw,3.75rem);--step-5:clamp(2.75rem,1.833rem + 4.07vw,5.5rem);
  --lh-body:1.62;--section:clamp(4rem,2.5rem + 6vw,8rem);--gutter:clamp(1.25rem,4vw,3.5rem);
  --col-gap:clamp(1rem,2vw,2rem);--w-prose:66ch;--w-content:72rem;--w-wide:84rem;
  --header-h:4.5rem;--face:44px;--brand-size:1.375rem;--radius:2px;
  --ring:0 0 0 2px var(--bg),0 0 0 3px var(--line-strong);
  --ease:cubic-bezier(.2,.6,.2,1);--t-fast:180ms;--t-med:250ms;--t-slow:700ms;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg-2);font-family:var(--font-sans);font-size:var(--step-0);line-height:var(--lh-body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.14em;transition:color var(--t-fast)}
a:hover{color:var(--link-deep)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:var(--radius)}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--fg);margin:0;text-wrap:balance}
h1{font-size:var(--step-4);line-height:1.08;letter-spacing:-.015em}
h2{font-size:var(--step-3);line-height:1.15;letter-spacing:-.008em}
h3{font-size:var(--step-1);line-height:1.3}
p{margin:0 0 1em}
.wrap{width:min(100% - 2*var(--gutter),var(--w-content));margin-inline:auto}
.wide{width:min(100% - 2*var(--gutter),var(--w-wide));margin-inline:auto}
.prose{max-width:var(--w-prose)}
.prose p{text-wrap:pretty}
.eyebrow{font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 .6rem}
.lede{font-family:var(--font-display);font-size:var(--step-1);line-height:1.45;color:var(--fg);text-wrap:pretty}
.mono{font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--fg-3)}
.tag{color:var(--tag);font-weight:500}
.skip{position:absolute;left:-999px;top:.5rem;z-index:100;background:var(--fg);color:var(--bg);padding:.6rem 1rem;text-decoration:none;font-weight:500}
.skip:focus{left:.5rem}
.section{padding-block:var(--section)}
.section + .section{padding-top:0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ==== HEADER / BRAND ==== */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.header-inner{width:min(100% - 2*var(--gutter),var(--w-wide));margin-inline:auto;min-height:var(--header-h);display:flex;align-items:center;gap:1.5rem}
.brand{display:inline-flex;align-items:center;gap:.8rem;color:var(--fg);text-decoration:none}
.brand-face img{width:var(--face);height:var(--face);border-radius:50%;object-fit:cover;box-shadow:var(--ring);flex:none}
.brand-word{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--font-display);font-weight:500;font-size:var(--brand-size);letter-spacing:-.012em}
.brand-type{font-family:var(--font-sans);font-weight:500;font-size:.625rem;letter-spacing:.235em;text-transform:uppercase;color:var(--fg-3);margin-top:.35em;padding-left:.06em}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem}
.site-nav a{font-family:var(--font-sans);font-weight:500;font-size:var(--step--1);color:var(--fg-2);text-decoration:none;padding:.4rem 0;border-bottom:1.5px solid transparent;transition:border-color var(--t-fast),color var(--t-fast)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
.nav-toggle{display:none;margin-left:auto;align-items:center;gap:.5rem;min-height:44px;padding:0 .25rem;background:none;border:0;color:var(--fg);font:500 var(--step--1) var(--font-sans);cursor:pointer}
.nav-toggle .bars{width:20px;height:2px;background:currentColor;position:relative;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
@media (max-width:48em){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:1rem var(--gutter) 1.25rem}
  .site-nav ul{flex-direction:column;gap:.25rem}
  .site-nav a{display:block;padding:.7rem 0;font-size:var(--step-0)}
  html.nav-open .site-nav{display:block}
}

/* ==== COVER ==== */
.cover{position:relative;display:grid;align-items:end;isolation:isolate;color:var(--paper);overflow:hidden;min-height:clamp(560px,calc(100vh - var(--header-h)),1100px);min-height:clamp(560px,calc(100svh - var(--header-h)),1100px)}
.cover-media{position:absolute;inset:0;z-index:-1}
/* The image is absolutely filled against .cover-media, not sized by %-of-<picture>.
   A percentage height inside an auto-height <picture> computes to auto, which let the
   image render at its intrinsic ratio and spill ~300px past the cover. */
.cover-media picture{display:contents}
.cover-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,14,20,.86),rgba(11,14,20,.46) 45%,rgba(11,14,20,.08) 78%,transparent)}
.cover-inner{width:min(100% - 2*clamp(1.5rem,7vw,6rem),var(--w-wide));margin-inline:auto;padding-top:2.5rem;padding-bottom:clamp(3rem,8vw,6.5rem)}
.cover .eyebrow{color:var(--paper);opacity:.88;text-shadow:0 1px 2px rgba(11,14,20,.35)}
.cover-title{font-size:clamp(2.9rem,1.9rem + 5.2vw,6.6rem);line-height:1;letter-spacing:-.022em;color:var(--paper);max-width:13ch;margin:0 0 1rem}
.cover-lede{font-family:var(--font-display);font-size:var(--step-2);line-height:1.38;color:var(--night-ink);max-width:40ch;margin:0 0 1.8rem;text-wrap:pretty}
.cover-actions{display:flex;flex-wrap:wrap;gap:.75rem}
/* one orchestrated entrance; nothing else on the page animates on load */
.rise{opacity:0;transform:translateY(14px);animation:rise var(--t-slow) var(--ease) forwards}
.rise:nth-child(2){animation-delay:90ms}.rise:nth-child(3){animation-delay:180ms}.rise:nth-child(4){animation-delay:270ms}
@keyframes rise{to{opacity:1;transform:none}}

/* Phones: same switch the photography site makes — the cover becomes an
   in-flow 4:5 image and the headline sits below it in ink. No overlay, no
   white type on a tall crop. */
@media (max-width:40em){
  .cover{height:auto;min-height:0;display:block;color:var(--fg);overflow:visible}
  .cover::after{display:none}
  .cover-media{position:relative;inset:auto;z-index:auto;aspect-ratio:4/5}
  .cover-inner{padding-top:1.5rem;padding-bottom:1rem}
  .cover .eyebrow{color:var(--fg-3)}
  .cover-title{color:var(--fg);max-width:none}
  .cover-lede{color:var(--fg-2)}
  .cover .btn{border-color:var(--line-strong);color:var(--fg)}
  .cover .btn:hover{background:var(--bg-2);color:var(--fg)}
  .cover .btn-primary{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
  .cover .btn-primary:hover{background:#fff}
}

/* Short viewports (most laptops are ~720-800px tall): step the cover type
   down one notch so the headline, lede AND both buttons fit above the fold.
   Wider/taller screens are untouched. */
@media (min-width:40.01em) and (max-height:820px){
  .cover-title{font-size:clamp(2.5rem,1.5rem + 4.2vw,5rem);margin-bottom:.7rem}
  .cover-lede{font-size:var(--step-1);max-width:46ch;margin-bottom:1.3rem}
  .cover-inner{padding-top:1.5rem;padding-bottom:clamp(2rem,5vw,3.5rem)}
}

/* ==== BUTTONS ==== */
.btn{display:inline-flex;align-items:center;gap:.4rem;min-height:48px;padding:.7rem 1.35rem;font-family:var(--font-sans);font-weight:500;font-size:var(--step--1);letter-spacing:.01em;text-decoration:none;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--fg);background:transparent;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn:hover{background:var(--bg-2);color:var(--fg);transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:var(--night);color:#fff;border-color:var(--night)}
.cover .btn{border-color:rgba(236,231,221,.55);color:var(--paper)}
.cover .btn:hover{background:rgba(236,231,221,.12);color:var(--paper)}
.cover .btn-primary{background:var(--paper);color:var(--night);border-color:var(--paper)}
.cover .btn-primary:hover{background:#fff}

/* ==== FACTS TABLE (mirrors the sibling's "By day / Shoots with" block) ==== */
.facts{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:1.5rem;align-items:start}
.facts-lede{grid-column:1/8}
.facts-dl{grid-column:8/13;margin:0;border-top:1px solid var(--line)}
.facts-dl div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.facts-dl dt{font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);padding-top:.2em}
.facts-dl dd{margin:0;color:var(--fg)}
@media (max-width:56em){.facts-lede,.facts-dl{grid-column:1/-1}}

/* ==== THE LEDGER — the thing to remember. Years in mono down the left,
   each entry a checkable fact. Dates are information here, not decoration. ==== */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.ledger li{display:grid;grid-template-columns:minmax(6.5rem,10rem) 1fr;column-gap:var(--col-gap);padding:clamp(1.1rem,2.2vw,1.6rem) 0;border-bottom:1px solid var(--line)}
.ledger .year{font-family:var(--font-mono);font-size:var(--step-0);color:var(--accent);letter-spacing:.02em;font-variant-numeric:tabular-nums;padding-top:.3em}
.ledger .year small{display:block;font-size:var(--step--2);color:var(--fg-3);margin-top:.35em;letter-spacing:.04em}
.ledger h3{font-family:var(--font-display);font-size:var(--step-2);line-height:1.2;margin:0 0 .35rem;color:var(--fg)}
.ledger p{max-width:58ch;margin:0;text-wrap:pretty}
.ledger p + p{margin-top:.5em}
@media (max-width:40em){.ledger li{grid-template-columns:1fr;row-gap:.35rem}.ledger .year{padding-top:0}}

/* ==== SHIPPED (apps) ==== */
/* Every card takes its five rows (title, genre, dates, blurb, link) from the
   shared grid via subgrid, so a two-line title in one card cannot push its
   dates below its neighbours'. Rows line up across the whole row of cards. */
.shipped{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));grid-auto-rows:auto;gap:var(--col-gap)}
.app{display:grid;grid-template-columns:64px 1fr;grid-row:span 5;grid-template-rows:subgrid;column-gap:1rem;row-gap:.25rem;align-items:start;padding:1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);text-decoration:none;color:inherit;transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
@supports not (grid-template-rows:subgrid){
  .app h3{min-height:2.4em}   /* reserve two title lines so dates still line up */
}
.app:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(23,32,43,.35);color:inherit}
.app-icon{grid-row:1/4;grid-column:1;width:64px;height:64px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.app-icon img{width:100%;height:100%}
.app h3{font-family:var(--font-display);font-size:var(--step-1);line-height:1.2;margin:0}
/* card metadata as three fixed rows so Released / Updated / Version line up
   inside every card and across the grid; tabular figures keep the digits in columns */
.app .genre{grid-column:2;font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .app-meta{grid-column:2;display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;row-gap:.1rem;margin:.35rem 0 0;
  font-family:var(--font-mono);font-size:var(--step--2);font-variant-numeric:tabular-nums;color:var(--fg-3)}
.app .app-meta dt{color:var(--fg-3);opacity:.75}
.app .app-meta dd{margin:0;color:var(--fg-2)}
.app p{grid-column:2;grid-row:4;margin:.3rem 0 0;align-self:start;font-size:var(--step--1);color:var(--fg-2);text-wrap:pretty}
.app .go{grid-column:2;grid-row:5;align-self:end;font-family:var(--font-sans);font-size:var(--step--1);font-weight:500;color:var(--accent);margin-top:.5rem}
.app:hover .go{color:var(--link-deep)}
.group + .group{margin-top:clamp(2rem,4vw,3rem)}
.group-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1rem}
.group-head h3{font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.group-head .mono{flex:1;border-top:1px solid var(--line);height:0;position:relative;top:-.15em}
.web-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.web-list li{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr auto;gap:var(--col-gap);align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--line)}
.web-list .name{font-family:var(--font-display);font-size:var(--step-1);color:var(--fg)}
.web-list .since{font-family:var(--font-mono);font-size:var(--step--2);color:var(--fg-3);white-space:nowrap}
@media (max-width:40em){.web-list li{grid-template-columns:1fr}.web-list .since{grid-row:1}}

/* ==== PORTFOLIO GALLERY ====
   The design showcase from the current site, rebuilt as real <img> elements:
   indexable by Google Images, readable by screen readers, lazy-loaded and
   responsive. Full-bleed like the original masonry, three across on desktop. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--bg-2)}
.gallery img{width:100%;aspect-ratio:705/529;object-fit:cover;display:block;
  transition:transform var(--t-slow) var(--ease)}
.gallery figure:hover img{transform:scale(1.035)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .8rem;
  font-family:var(--font-mono);font-size:var(--step--2);color:var(--paper);
  background:linear-gradient(to top,rgba(11,14,20,.72),transparent);
  opacity:0;transition:opacity var(--t-med) var(--ease)}
.gallery figure:hover figcaption,.gallery figure:focus-within figcaption{opacity:1}
@media (max-width:60em){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:34em){.gallery{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .gallery img,.gallery figure:hover img{transform:none;transition:none}
  .gallery figcaption{transition:none}
}

/* ==== BIO — the narrative from the current site, set as an editorial column ==== */
.bio-narrative{max-width:var(--w-prose)}
.bio-narrative h3{font-family:var(--font-display);font-size:var(--step-2);line-height:1.2;
  margin:2.6rem 0 .7rem;color:var(--fg)}
.bio-narrative h3:first-of-type{margin-top:0}
.bio-narrative p{color:var(--fg-2);text-wrap:pretty}
.bio-narrative .lede{color:var(--fg)}
.welcome{max-width:34ch}
.welcome-line{font-family:var(--font-display);font-size:var(--step-2);line-height:1.32;
  color:var(--fg);text-wrap:pretty;margin:0 0 1.2rem}

/* ==== ABOUT ==== */
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:2rem;align-items:start}
.about-photo{grid-column:1/5}
.about-photo img{width:100%;border-radius:var(--radius);box-shadow:0 30px 60px -40px rgba(23,32,43,.5)}
.about-photo figcaption{margin-top:.6rem}
.about-body{grid-column:5/13}
.about-body .prose p:first-of-type{font-family:var(--font-display);font-size:var(--step-1);line-height:1.45;color:var(--fg)}
.signoff{font-family:var(--font-display);font-style:italic;font-size:var(--step-1);color:var(--fg);margin-top:1.5rem}
@media (max-width:56em){.about-photo{grid-column:1/-1;max-width:22rem}.about-body{grid-column:1/-1}}

/* ==== TEASER (home about) ==== */
.teaser{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:1.5rem;align-items:center;padding:clamp(1.5rem,3vw,2.5rem);background:var(--bg-2);border-radius:var(--radius)}
.teaser img{grid-column:1/4;width:100%;max-width:220px;border-radius:50%;box-shadow:var(--ring)}
.teaser div{grid-column:4/13}
@media (max-width:48em){.teaser img{grid-column:1/-1;max-width:140px}.teaser div{grid-column:1/-1}}

/* ==== CONTACT FORM ==== */
.form{max-width:36rem}
.field{margin:0 0 1.1rem}
.field label{display:block;font-family:var(--font-sans);font-size:var(--step--1);font-weight:600;color:var(--fg);margin-bottom:.35rem}
.field input,.field textarea{width:100%;font:inherit;color:var(--fg);background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);padding:.7rem .85rem;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--fg);box-shadow:0 0 0 3px var(--accent-tint)}
.field textarea{min-height:11rem;resize:vertical}
.field .err{display:none;color:var(--danger);font-size:var(--step--1);margin-top:.35rem}
.field .err:not([hidden]){display:block}
.field .invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(163,58,42,.12)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.status{min-height:1.5em;margin-top:1rem;font-weight:500}
.status-ok{color:var(--success)}.status-err{color:var(--danger)}
.turnstile-wrap{margin:.25rem 0 1rem}
button[disabled]{opacity:.6;cursor:progress}

/* ==== REVEAL (IntersectionObserver, same vocabulary as the sibling) ==== */
html.js .reveal{opacity:0;transform:translateY(12px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
html.js .reveal.is-visible{opacity:1;transform:none}

/* ==== FOOTER ==== */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);margin-top:var(--section)}
.footer-inner{width:min(100% - 2*var(--gutter),var(--w-content));margin-inline:auto;padding:clamp(3rem,6vw,5rem) 0 2rem;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);row-gap:2rem}
.footer-brand{grid-column:1/7}
.footer-tag{max-width:36ch;margin:1rem 0 1.25rem;color:var(--fg-3)}
.footer-col{grid-column:span 2}
.footer-col h4{font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 .75rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.footer-col a{color:var(--fg-2);text-decoration:none}
.footer-col a:hover{color:var(--fg);text-decoration:underline}
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.social a{display:inline-grid;place-items:center;width:44px;height:44px;color:var(--fg-3);transition:color var(--t-fast)}
.social a:hover{color:var(--fg)}
.social svg{width:20px;height:20px}
.footer-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.footer-bottom p{margin:0;color:var(--fg-3);font-size:var(--step--1)}
.gpref{display:inline-flex;align-items:center;gap:.6rem;padding:.65rem 1rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:var(--step--1);font-weight:500;text-decoration:none;transition:background var(--t-fast),transform var(--t-fast)}
.gpref:hover{background:#fff;color:var(--fg);transform:translateY(-1px)}
.gpref svg{width:18px;height:18px;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:56em){.footer-brand{grid-column:1/-1}.footer-col{grid-column:span 4}}
@media (max-width:36em){.footer-col{grid-column:span 6}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{animation:none;opacity:1;transform:none}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .btn,.app,.gpref{transition:none}
  .btn:hover,.app:hover,.gpref:hover{transform:none}
}