@font-face { font-family:"Archivo"; src:url("/fonts/archivo-var.woff2") format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face { font-family:"Spectral"; src:url("/fonts/spectral-400-italic.woff2") format("woff2"); font-style:italic; font-weight:400; font-display:swap; }
@font-face { font-family:"Libre Baskerville"; src:url("/fonts/libre-baskerville-latin-400-normal.woff2") format("woff2"); font-display:swap; }

/* Light is the ivory version of the identity, dark the teal one (#40). */
:root {
  --ground:#F5F1E8; --ink:#0F4C5C; --body:#283236; --muted:#5F6967; --line:#DDD5C3; --bronze:#9A7640; --band:#ECE5D6; --ok:#2E7D5B;
  --wide:118%;
  color-scheme:light;
}
:root[data-theme="dark"] { --ground:#0C3D49; --ink:#F5F1E8; --body:#DCE7E9; --muted:#9DBAC1; --line:#245E6C; --bronze:#C9A66B; --band:#0F4C5C; --ok:#8FD3B0; color-scheme:dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground:#0C3D49; --ink:#F5F1E8; --body:#DCE7E9; --muted:#9DBAC1; --line:#245E6C; --bronze:#C9A66B; --band:#0F4C5C; --ok:#8FD3B0; color-scheme:dark; } }

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--ground); color:var(--body); font:400 17px/1.6 "Archivo", system-ui, sans-serif; font-stretch:100%; transition:background .35s, color .35s; }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline:2px solid var(--bronze); outline-offset:4px; }
.wrap { width:min(1200px, 100% - 48px); margin-inline:auto; }
@media (max-width:600px) { .wrap { width:calc(100% - 32px); } }
.skip { position:absolute; left:-9999px; top:8px; z-index:20; background:#F5F1E8; color:#0F4C5C; padding:8px 12px; }
.skip:focus { left:12px; }

/* top bar, over the photograph */
.top { position:absolute; inset:0 0 auto; z-index:5; color:#fff; }
.top .wrap { display:flex; align-items:center; gap:28px; height:84px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.brand svg { width:36px; height:36px; flex:none; }
.brand b { display:block; font:400 15px/1.15 "Libre Baskerville", Georgia, serif; letter-spacing:.16em; text-transform:uppercase; }
.brand small { display:block; font:500 11px/1.4 "Archivo", sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#C9A66B; margin-top:3px; }
.top nav { margin-left:auto; display:flex; gap:26px; font-size:15px; }
.top nav a { text-decoration:none; opacity:.88; }
.top nav a:hover { opacity:1; text-decoration:underline; text-underline-offset:5px; }
.mode { background:none; border:1px solid rgba(255,255,255,.5); color:#fff; font:500 13px "Archivo", sans-serif; padding:7px 12px; cursor:pointer; }
.mode:hover { border-color:#fff; }
@media (max-width:760px) { .top nav { display:none; } .mode { margin-left:auto; } }

/* hero */
.hero { position:relative; min-height:max(620px, min(94vh, 900px)); color:#fff; overflow:hidden; background:#08303A; display:flex; align-items:flex-end; }
.photo { position:absolute; left:-2%; right:-2%; top:-27%; height:131%; }
.photo img, .photo canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.photo img { object-fit:cover; object-position:60% 50%; animation:settle 1.6s ease-out both; }
.photo canvas { opacity:0; transition:opacity 1.2s ease; }
.photo canvas.on { opacity:1; }
@keyframes settle { from { opacity:.3; } to { opacity:1; } }
.shade { position:absolute; inset:0; background:
  linear-gradient(0deg, rgba(8,44,54,.96) 0%, rgba(8,44,54,.78) 34%, rgba(8,44,54,.25) 56%, rgba(8,44,54,0) 72%),
  linear-gradient(180deg, rgba(8,44,54,.55) 0%, rgba(8,44,54,0) 22%); }
@media (max-aspect-ratio: 5/4) {
  .hero { display:block; min-height:0; }
  .photo { position:relative; left:auto; right:auto; top:auto; height:46vh; min-height:280px; margin:0 -4%; -webkit-mask-image:linear-gradient(#000 78%, transparent); mask-image:linear-gradient(#000 78%, transparent); }
  .photo img { object-position:62% 50%; }
  .shade { background:linear-gradient(180deg, rgba(8,44,54,.6) 0%, rgba(8,44,54,0) 26%); }
  .hero .wrap { padding-top:8px; padding-bottom:44px; }
}
.hero .wrap { position:relative; padding-bottom:60px; }
h1 { margin:0 0 28px; font:500 clamp(36px, 5vw, 74px)/1.02 "Archivo", sans-serif; font-stretch:var(--wide); letter-spacing:-.025em; }
h1 span { display:block; animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
h1 span:nth-child(2) { animation-delay:.14s; }
@keyframes rise { from { transform:translateY(40%); opacity:0; } to { transform:none; opacity:1; } }
.below { display:grid; grid-template-columns:minmax(0, 6fr) auto auto; gap:24px 48px; align-items:end; }
@media (max-width:980px) { .below { grid-template-columns:1fr; } }
.lede { margin:0; max-width:34em; font-size:clamp(17px, 1.5vw, 20px); color:#E4EEF0; animation:rise 1.1s .4s cubic-bezier(.2,.7,.2,1) both; }
.act { display:flex; flex-wrap:wrap; align-items:center; gap:22px; animation:rise 1.1s .5s cubic-bezier(.2,.7,.2,1) both; }
.btn { display:inline-block; background:#F5F1E8; color:#0F4C5C; text-decoration:none; font:600 16px "Archivo", sans-serif; padding:15px 26px; transition:background .2s; }
.btn:hover { background:#fff; }
.alt { font-size:16px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px; }
.alt:hover { border-color:#fff; }
.clock { font-size:14px; line-height:1.5; color:#D3E2E5; border-left:1px solid rgba(255,255,255,.35); padding-left:16px; min-width:190px; max-width:250px; }
.clock [data-time] { display:block; font:500 30px/1.1 "Archivo", sans-serif; font-stretch:var(--wide); color:#fff; font-variant-numeric:tabular-nums; }
.clock i { font:italic 15px "Spectral", Georgia, serif; color:#C9A66B; }
@media (prefers-reduced-motion: reduce) { .photo img, h1 span, .lede, .act { animation:none !important; } .photo canvas { transition:none; } }

/* sections */
section { padding:clamp(72px, 9vw, 128px) 0; border-bottom:1px solid var(--line); }
h2 { margin:0 0 28px; font:500 clamp(28px, 3.2vw, 44px)/1.05 "Archivo", sans-serif; font-stretch:var(--wide); letter-spacing:-.02em; color:var(--ink); }
.split { display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px, 6vw, 96px); }
@media (max-width:860px) { .split { grid-template-columns:1fr; } }
.big { font-size:clamp(21px, 2vw, 26px); line-height:1.45; color:var(--ink); margin:0; }
dl { margin:0; }
dt { font:600 18px "Archivo", sans-serif; color:var(--ink); padding-top:20px; border-top:1px solid var(--line); }
dd { margin:6px 0 24px; }
.figure { display:flex; gap:28px; margin-top:12px; flex-wrap:wrap; }
.figure div { font:italic 15px/1.4 "Spectral", Georgia, serif; color:var(--muted); }
.figure b { display:block; font:500 30px/1 "Archivo", sans-serif; font-stretch:var(--wide); font-style:normal; color:var(--ink); margin-bottom:4px; }

.process { background:var(--band); }
.tabs { display:grid; grid-template-columns:repeat(5, 1fr); border-bottom:1px solid var(--line); position:relative; margin-bottom:40px; }
.tabs::after { content:""; position:absolute; left:0; bottom:-1px; height:3px; background:var(--bronze); width:20%; transform:translateX(calc(var(--step, 0) * 100%)); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.tabs button { appearance:none; background:none; border:0; text-align:left; cursor:pointer; padding:0 8px 16px 0; font:500 16px "Archivo", sans-serif; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.tabs button em { font:italic 15px "Spectral", Georgia, serif; color:var(--bronze); }
.tabs button[aria-selected="true"] { color:var(--ink); }
.tabs button:hover { color:var(--ink); }
@media (max-width:760px) {
  .tabs { grid-template-columns:repeat(5, auto); overflow-x:auto; gap:22px; scrollbar-width:none; }
  .tabs::after { display:none; }
  .tabs button { white-space:nowrap; }
  .tabs button[aria-selected="true"] { box-shadow:inset 0 -3px var(--bronze); }
}
@media (prefers-reduced-motion: reduce) { .tabs::after { transition:none; } }
.step { display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px, 6vw, 96px); align-items:start; }
@media (max-width:860px) { .step { grid-template-columns:1fr; gap:12px; } }
.step h3 { margin:0; font:500 clamp(24px, 2.4vw, 32px)/1.1 "Archivo", sans-serif; font-stretch:var(--wide); color:var(--ink); }
.step p { margin:0; font-size:19px; max-width:34em; }

.commit ol { list-style:none; margin:0; padding:0; }
.commit li { padding:22px 0; border-top:1px solid var(--line); font-size:19px; }
.commit li b { display:block; font-weight:600; color:var(--ink); font-size:21px; margin-bottom:4px; }

.about { display:grid; grid-template-columns:260px 1fr; gap:clamp(32px, 6vw, 96px); align-items:center; }
@media (max-width:720px) { .about { grid-template-columns:1fr; } }
.portrait { width:min(260px, 70vw); aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--band); }
.portrait img { width:100%; height:100%; object-fit:cover; display:block; }
.about p { margin:0 0 18px; max-width:36em; font-size:19px; }

.contact .mail { display:inline-block; font:500 clamp(24px, 5.2vw, 72px)/1.05 "Archivo", sans-serif; font-stretch:var(--wide); letter-spacing:-.025em; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--bronze); padding-bottom:6px; overflow-wrap:anywhere; }
.contact .mail:hover { border-bottom-width:4px; }
.row { display:flex; flex-wrap:wrap; gap:20px 56px; margin-top:44px; font-size:18px; }
.row .k { display:block; font:italic 16px "Spectral", Georgia, serif; color:var(--muted); }
.row a { text-decoration:none; color:var(--ink); }
.row a:hover { text-decoration:underline; text-underline-offset:4px; }
.row [data-time] { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.row [data-open="true"] [data-status] { color:var(--ok); }

footer { padding:32px 0 56px; font-size:14px; color:var(--muted); }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 32px; }

/* 404 */
.lost { min-height:100vh; display:grid; place-items:center; text-align:center; padding:24px; }
.lost h1 { color:var(--ink); font-size:clamp(28px, 4vw, 44px); }
.lost h1 span { animation:none; }