/* ── fonts (self-hosted, SIL OFL) ─────────────── */
/* Archivo 500 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext-20ba07.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 500 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-79dc5e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 700 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext-20ba07.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 700 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-79dc5e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 800 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext-20ba07.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 800 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-latin-79dc5e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 400 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-395290.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-395290.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 500 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 400 latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-ba1653.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 400 latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-480c06.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 500 latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-ba1653.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 500 latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-480c06.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#f5f1e7;
  --fg:#0a2233;
  --iznik:#018acd;
  --iznik-deep:#00679a;
  --gold:#c9a95c;
  --gold-deep:#7f6126;
  --mute:#5a6670;
  --rule:rgba(10,34,51,.12);
  --uline:rgba(10,34,51,.28);
  --uline-mute:rgba(90,102,112,.4);
  --hover:rgba(10,34,51,.03);
  --sel-bg:var(--iznik);
  --sel-fg:#fff;
  --grain-blend:multiply;
  --grain-o:.05;
  --display:"Archivo",system-ui,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,72px);
  --bar-h:52px;
  --d1:clamp(2.6rem,8.2vw,7.2rem);
  --d2:clamp(1.45rem,3.6vw,2.9rem);
  --lead:clamp(1.05rem,1.5vw,1.3rem);
  --body:clamp(0.95rem,1.05vw,1.0625rem);
  --meta:clamp(0.68rem,0.8vw,0.75rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light dark}
:root[data-scheme="light"]{color-scheme:light}
:root[data-scheme="dark"]{color-scheme:dark}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size-adjust:from-font;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:var(--grain-o);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--sel-bg);color:var(--sel-fg)}
p{text-wrap:pretty}
h1,h2{text-wrap:balance}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--iznik-deep);outline-offset:4px}

.wrap{padding-inline:var(--gutter)}
.meta{font-family:var(--mono);font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* ── masthead ───────────────────────────────── */
.mast{min-height:calc(100svh - var(--bar-h));display:grid;grid-template-rows:1fr auto;padding-block:clamp(20px,3vh,32px) clamp(20px,4vh,40px)}
.top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.statement{align-self:center;padding-block:clamp(24px,6vh,64px)}
.statement h1{
  font-family:var(--display);font-weight:800;font-size:var(--d1);
  line-height:.94;letter-spacing:-.035em;max-width:16ch;
}
.statement .aud{color:var(--mute);margin-bottom:clamp(14px,2.2vh,24px)}
.statement h1 em{font-style:normal;color:var(--iznik)}
.statement .sub{
  font-family:var(--display);font-weight:500;font-size:var(--d2);
  line-height:1.08;letter-spacing:-.02em;margin-top:clamp(16px,2.4vh,28px);max-width:30ch;color:var(--fg);
}
.statement .sub span{display:block;text-wrap:balance}
.statement .sub span+span{margin-top:.18em}
.ticker{display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap;border-top:1px solid var(--gold);padding-top:14px}
.ticker span{color:var(--mute)}
.ticker span:first-of-type{color:var(--fg)}

/* ── sections ───────────────────────────────── */
section{border-top:1px solid var(--rule);padding-block:clamp(44px,7vh,88px)}
.grid{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3.2fr);gap:clamp(16px,3vw,56px)}
@media (max-width:760px){.grid{grid-template-columns:1fr;gap:14px}}

.do{display:flex;flex-direction:column;list-style:none}
.do .item{
  display:grid;grid-template-columns:2.6rem 1fr;gap:clamp(10px,2vw,24px);align-items:baseline;
  padding-block:clamp(10px,1.6vh,18px);border-bottom:1px solid var(--rule);
  transition:color .18s;
}
.do .item:first-child{border-top:1px solid var(--rule)}
.do .num{font-family:var(--mono);font-size:var(--meta);color:var(--mute);transition:color .18s}
.do .txt{font-family:var(--display);font-weight:500;font-size:var(--d2);line-height:1.12;letter-spacing:-.02em}
.do .item:hover .num{color:var(--gold-deep)}
.do .item:hover .txt{color:var(--iznik-deep)}

.prose{max-width:52ch;font-size:var(--lead);line-height:1.52}
.prose p+p{margin-top:.9em}
.prose .kicker{color:var(--iznik-deep)}

/* ── work table ─────────────────────────────── */
.work{width:100%;border-collapse:collapse;font-size:var(--body)}
.work th{
  font-family:var(--mono);font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);text-align:left;font-weight:400;padding-bottom:10px;border-bottom:1px solid var(--rule);
}
.work td{padding-block:clamp(9px,1.3vh,14px);border-bottom:1px solid var(--rule);vertical-align:baseline}
.work tr{transition:background .18s}
.work tbody tr:hover{background:var(--hover)}
.work .yr{font-family:var(--mono);font-size:var(--meta);color:var(--mute);white-space:nowrap;width:7.5rem;font-variant-numeric:tabular-nums}
.work tbody tr:hover .yr{color:var(--iznik-deep)}
.work .role{display:block;font-family:var(--mono);font-size:var(--meta);color:var(--mute);margin-top:3px;letter-spacing:.04em}
.work tbody tr:hover .role{color:var(--fg)}
.portrait{display:block;margin-top:clamp(20px,3vh,32px);width:clamp(104px,12vw,148px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.06);border:1px solid var(--rule);transition:filter .4s ease}
.portrait:hover{filter:grayscale(0) contrast(1)}
.about-side .portrait{width:clamp(120px,11vw,176px);margin-top:18px}
.story .about-side .portrait{width:clamp(160px,16vw,248px);margin-top:20px}
@media (max-width:760px){.about-side .portrait{width:96px}.story .about-side .portrait{width:128px}}
.work .src{font-family:var(--mono);font-size:var(--meta);letter-spacing:.06em;color:var(--mute);text-align:right;white-space:nowrap}
.work .src a{border-bottom:1px solid var(--uline-mute)}
.work .src a:hover{color:var(--iznik-deep);border-bottom-color:var(--iznik-deep)}
@media (max-width:640px){
  .work .yr{width:5rem}
  .work .src{display:none}
  .work .mob-src{display:block;font-family:var(--mono);font-size:var(--meta);color:var(--mute);margin-top:4px}
  .work .mob-src a{border-bottom:1px solid var(--uline-mute)}
}
.mob-src{display:none}

/* ── contact ────────────────────────────────── */
.contact{border-top:1px solid var(--rule);padding-block:clamp(48px,9vh,110px) clamp(32px,5vh,56px)}
.contact p{font-family:var(--display);font-weight:500;font-size:var(--d2);line-height:1.1;letter-spacing:-.02em;max-width:24ch}
.mailto{
  display:inline-block;margin-top:clamp(18px,3vh,34px);
  font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4.6vw,3.6rem);
  letter-spacing:-.035em;color:var(--iznik);line-height:1;
  border-bottom:2px solid transparent;transition:border-color .2s;
}
.mailto:hover{border-bottom-color:var(--gold)}
.contact .alt{font-family:var(--display);font-weight:500;font-size:var(--lead);letter-spacing:-.01em;margin-top:clamp(12px,2vh,20px);color:var(--mute);max-width:none}
.contact .alt a{color:var(--fg);border-bottom:1px solid var(--uline);transition:color .15s,border-color .15s}
.contact .alt a:hover{color:var(--iznik-deep);border-bottom-color:var(--iznik-deep)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(28px,5vh,60px)}
.foot a{border-bottom:1px solid var(--uline-mute)}
.foot a:hover{color:var(--iznik-deep);border-bottom-color:var(--iznik-deep)}

/* ── motion: scroll-driven, progressively enhanced ── */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    @keyframes rise{from{opacity:0;transform:translateY(22px)}}
    .reveal{animation:rise auto linear backwards;animation-timeline:view();animation-range:entry 0 entry 180px}
  }
  /* the whole first screen arrives as one swoosh: travels in, sharpens, lands */
  .mast .statement,.mast .ticker{animation:swoosh .5s cubic-bezier(.16,1,.3,1) both}
  @keyframes swoosh{from{opacity:0;translate:0 1.2em;filter:blur(8px)}}
  @keyframes up{from{opacity:0;transform:translateY(14px)}}
}

/* ── shared nav ─────────────────────────────── */
.top a{border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.top a:hover{color:var(--fg);border-bottom-color:var(--rule)}
.top .links{display:flex;gap:18px}
.top .links a[aria-current="page"]{color:var(--fg)}

/* ── about page ─────────────────────────────── */
.story{padding-block:clamp(56px,10vh,120px) clamp(40px,6vh,72px)}
.story h1{font-family:var(--display);font-weight:800;font-size:var(--d2);line-height:1.05;letter-spacing:-.025em;max-width:20ch;margin-bottom:clamp(28px,5vh,56px)}
.story h1 em{font-style:normal;color:var(--iznik)}
.story .body{max-width:60ch;font-size:var(--lead);line-height:1.62}
.story .body p+p{margin-top:1.1em}
.story .body .pull{font-family:var(--display);font-weight:500;font-size:var(--d2);line-height:1.12;letter-spacing:-.02em;color:var(--fg);margin-block:1.3em}
.story .body .sign{color:var(--iznik-deep)}
.story .body a{border-bottom:1px solid var(--uline)}
.story .body a:hover{color:var(--iznik-deep);border-bottom-color:var(--iznik-deep)}
.more{display:inline-block;margin-top:1.1em;font-family:var(--mono);font-size:var(--meta);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--uline-mute)}
.more:hover{color:var(--iznik-deep);border-bottom-color:var(--iznik-deep)}

/* ── section bar ────────────────────────────── */
.bar-wrap{position:sticky;top:0;z-index:20;container-type:scroll-state;container-name:bar}
.bar{align-items:baseline;background:var(--bg);padding-block:16px 14px;border-bottom:1px solid transparent;transition:border-color .2s}
@container bar scroll-state(stuck: top){.bar{border-bottom-color:var(--gold)}}
.bar .sections{display:flex;gap:clamp(14px,2vw,28px);scroll-target-group:auto}
.bar .sections a:is(:target-current,.\:target-current){color:var(--fg);border-bottom-color:var(--gold)}
[id]{scroll-margin-top:calc(var(--bar-h) + 16px)}
@media (max-width:980px){.bar .place{display:none}}
@media (max-width:760px){
  :root{--bar-h:84px}
  .bar{row-gap:10px}
  .bar .sections{order:3;width:100%;overflow-x:auto;scrollbar-width:none;gap:18px}
  .bar .sections::-webkit-scrollbar{display:none}
}

/* ── page transitions ───────────────────────── */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.bar{view-transition-name:site-bar}

/* ── skip link ──────────────────────────────── */
.skip{position:absolute;left:var(--gutter);top:10px;z-index:30;padding:8px 12px;background:var(--fg);color:var(--bg);font-family:var(--mono);font-size:var(--meta);letter-spacing:.12em;text-transform:uppercase;transform:translateY(-200%)}
.skip:focus{transform:none}
[tabindex="-1"]:focus{outline:none}

/* ── night: coal + Nautilus rose gold ──────────────────
   Ground: anthracite coal #23201f (sampled, Wikimedia Commons), deepened in
   the same hue to #171514. Text: bone, the day ground reversed.
   Metal: rose gold from Patek's 5712/1R photo, polished #ddbfa0 / satin #ab8365.
   Muted: the same coal, lifted to #a49b98. Flat, like the day side. */
@media (prefers-color-scheme:dark){
  :root:not([data-scheme="light"]){
  --bg:#171514;--fg:#f5f1e7;--iznik:#ddbfa0;--iznik-deep:#ddbfa0;--gold:#ab8365;--gold-deep:#ddbfa0;--mute:#a49b98;
  --rule:rgba(245,241,231,.11);--uline:rgba(245,241,231,.28);--uline-mute:rgba(245,241,231,.22);--hover:rgba(245,241,231,.03);
  --sel-bg:#ddbfa0;--sel-fg:#171514;--grain-blend:screen;--grain-o:.025;
}
}
:root[data-scheme="dark"]{
  --bg:#171514;--fg:#f5f1e7;--iznik:#ddbfa0;--iznik-deep:#ddbfa0;--gold:#ab8365;--gold-deep:#ddbfa0;--mute:#a49b98;
  --rule:rgba(245,241,231,.11);--uline:rgba(245,241,231,.28);--uline-mute:rgba(245,241,231,.22);--hover:rgba(245,241,231,.03);
  --sel-bg:#ddbfa0;--sel-fg:#171514;--grain-blend:screen;--grain-o:.025;
}

/* ── day / night switch ─────────────────────── */
.scheme{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;border-bottom:1px solid transparent;padding:0;cursor:pointer;transition:color .15s,border-color .15s}
.scheme:hover{color:var(--fg);border-bottom-color:var(--rule)}

/* ── hierarchy: one accent per screen ─────────
   Name = identity (full text colour). Links, switch, labels = quiet (muted).
   The only colour above the fold is the accent word in the headline. */
.bar>a:first-child{color:var(--fg)}

/* ── phones: one quiet row at the top; sections appear after the hero ── */
@media (max-width:760px){
  .bar{position:relative}
  .bar .sections{position:absolute;left:0;right:0;top:100%;width:auto;padding:9px var(--gutter) 10px;background:var(--bg);border-bottom:1px solid var(--rule);transition:opacity .25s ease,translate .25s ease,visibility .25s}
  .at-hero .bar .sections{opacity:0;visibility:hidden;translate:0 -6px}
}

/* ── the face beside the claim (a real photo next to a statement makes it more believable) ── */
.ticker .face{width:32px;height:32px;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.06);border:1px solid var(--rule);margin-right:calc(clamp(12px,2vw,28px) * -.5)}
@media (max-width:760px){.ticker .face{width:28px;height:28px}}