/* orpheus — one sheet. stone dark, one sans, one mono, hairlines. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --bg:#141211;        /* stone 950 */
  --fg:#e7e5e4;        /* stone 200 */
  --dim:#78716c;       /* stone 500: muted rows, meta */
  --line:#44403c;      /* stone 700: hairlines */
  --green:#86efac; --amber:#f4b444; --blue:#0976f2;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(1rem,2.2vw,1.5rem);
  --t:240ms cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--fg)}
body{margin:0;font:400 15px/1.4 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none} h1,h2,p{margin:0;font-weight:400}
::selection{background:var(--fg);color:var(--bg)}

/* masthead: boxed wordmark left, a couple of links right */
.mast{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--pad)}
.logo{position:relative;display:inline-block;font-weight:600;font-size:1.35rem;line-height:1;letter-spacing:-.01em;padding:.3rem .5rem .4rem;border:2.5px solid var(--fg);border-radius:.45rem}
.logo sup{position:absolute;right:-.85rem;top:-.3rem;font-size:.55rem;font-weight:600}
.mast nav{display:flex;gap:1.5rem;padding-top:.35rem}
.mast nav a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mast nav a:hover{color:var(--dim)}

/* hero: one sentence, very large; the year sits on the far right */
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding:clamp(1.5rem,3vw,2.5rem) var(--pad) clamp(3.5rem,8vw,6.5rem)}
.hero h1{font-size:clamp(2.6rem,5.6vw,5rem);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.hero .yr{white-space:nowrap;padding-bottom:.4rem}

/* the list: dot + code, hairline, big word, short blurb */
.rows{padding:0 var(--pad)}
.row{display:block;transition:opacity var(--t)}
.row .code{display:flex;align-items:center;gap:.6rem;font:500 .8rem/1 var(--mono);text-transform:uppercase;padding-bottom:.65rem}
.row .code::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--dot,var(--fg))}
.row .body{display:grid;grid-template-columns:37% minmax(0,21rem);gap:0;border-top:1px solid var(--line);padding:.55rem 0 2.1rem}
.row h2{font-size:clamp(2.6rem,5.6vw,5rem);line-height:1.05;letter-spacing:-.01em;transition:transform var(--t)}
.row p{padding-top:.8rem;line-height:1.4}
.row.green{--dot:var(--green)} .row.amber{--dot:var(--amber)} .row.blue{--dot:var(--blue)}
.row.soon{color:var(--dim)}
.row.soon .code::before{background:var(--blue)}
.rows:hover .row:not(:hover){opacity:.35}
a.row:hover h2{transform:translateX(.35rem)}

/* foot */
.foot{margin-top:auto;display:flex;justify-content:space-between;gap:1rem;padding:4rem var(--pad) var(--pad);font:500 .75rem/1.4 var(--mono);text-transform:uppercase;color:var(--dim)}

@media(max-width:40rem){
  .hero{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .row .body{grid-template-columns:1fr}
  .row p{padding-top:.4rem;color:inherit}
  .row .body{padding-bottom:1.75rem}
  .foot{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}