/* ============================================================
   Proposal 02 — "Monograph"
   Editorial / typographic. Craft over flash. No gradients, no glow,
   no library soup. Self-hosted-feel type system + bespoke SVG motion.
   ============================================================ */
:root {
  /* warm paper (default) */
  --bg: #ece6da;
  --surface: #f4efe6;
  --ink: #1b1813;
  --muted: #6c6456;
  --faint: #9a9284;
  --line: #d4ccbb;
  --accent: #b8431f;        /* ember */
  --accent-ink: #8f3317;
  --sel: #e9ddc3;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --col: min(1080px, 92vw);
}
:root[data-theme="dark"] {
  --bg: #14120d;
  --surface: #1b1813;
  --ink: #e9e2d3;
  --muted: #918977;
  --faint: #6b6456;
  --line: #2a261d;
  --accent: #e0693a;
  --accent-ink: #f0845a;
  --sel: #2d2616;
}

* { box-sizing: border-box; }
::selection { background: var(--sel); color: var(--ink); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* paper grain — extremely subtle, no gradients/blobs */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer { position: relative; z-index: 1; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 16px max(24px, calc((100vw - var(--col)) / 2));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.top.stuck { border-bottom-color: var(--line); }
.mark { display: flex; align-items: center; gap: 11px; }
.mark svg { width: 30px; height: 30px; display: block; overflow: visible; }
.mark .who { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--ink); }
.mark .who b { font-weight: 600; }
.mark .who span { color: var(--faint); }
.top nav { margin-left: auto; display: flex; gap: 22px; font-family: var(--mono); font-size: 13px; }
.top nav a { color: var(--muted); position: relative; padding-bottom: 2px; }
.top nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right .3s var(--ease); }
.top nav a:hover, .top nav a.on { color: var(--ink); }
.top nav a:hover::after, .top nav a.on::after { right: 0; }
.tbtn { font-family: var(--mono); font-size: 12px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.tbtn:hover { color: var(--ink); border-color: var(--accent); }
@media (max-width: 680px) { .top nav { display: none; } }

/* SVG draw mark */
.draw { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.mark.ready .draw { animation: draw 1.1s var(--ease-draw) forwards; }
.mark .fillit { fill: var(--ink); opacity: 0; }
.mark.ready .fillit { animation: fillin .5s ease 1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .draw { stroke-dashoffset: 0; } .fillit { opacity: 1; } .mark.ready .draw, .mark.ready .fillit { animation: none; }
}

/* ---------- layout ---------- */
section { padding: clamp(72px, 12vh, 150px) 0; }
.col { width: var(--col); margin: 0 auto; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* hero */
.hero { padding-top: clamp(48px, 10vh, 120px); }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 8.5vw, 112px); line-height: 0.98; letter-spacing: -0.02em;
  margin: 0; color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}
.hero h1 em { font-style: italic; color: var(--accent); font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; }
.hero .lede { font-size: clamp(19px, 2.3vw, 25px); color: var(--ink); max-width: 40ch; margin: 30px 0 0; line-height: 1.5; }
.hero .lede b { font-weight: 600; }
.hero .metaline { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero .metaline .k { color: var(--faint); }

/* generic reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; } .d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* about */
.about .big { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.3; letter-spacing: -0.01em; max-width: 24ch; color: var(--ink); margin: 0; }
.about .big .mk { color: var(--accent); font-style: italic; }
.about .sum { font-size: 18px; color: var(--muted); max-width: 54ch; margin: 28px 0 0; }

/* section heading */
.shead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.shead h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4vw, 44px); letter-spacing: -0.02em; margin: 0; }
.shead .n { font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* experience — editorial rows */
.xlist { margin-top: 10px; }
.x { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 24px 0; border-top: 1px solid var(--line); align-items: baseline; }
.x:last-child { border-bottom: 1px solid var(--line); }
.x .co { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); font-weight: 400; color: var(--ink); }
.x .co .flag { font-family: var(--mono); font-size: 11px; color: var(--accent); vertical-align: middle; margin-left: 10px; letter-spacing: .1em; }
.x .when { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; text-align: right; }
.x .role { grid-column: 1 / -1; color: var(--muted); font-size: 15px; margin-top: 2px; }
.x .desc { grid-column: 1 / -1; color: var(--ink); max-width: 68ch; margin: 10px 0 0; }
.x .tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tag { font-family: var(--mono); font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; }
.x .read { grid-column: 1/-1; margin-top: 12px; }
.x .read a { font-family: var(--mono); font-size: 13px; color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 1px; }
.x .read a:hover { color: var(--accent-ink); }

/* work / projects — editorial index */
.work .w { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); transition: padding-left .3s var(--ease); }
.work .w:last-child { border-bottom: 1px solid var(--line); }
.work .w:hover { padding-left: 14px; }
.work .num { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.work .wn { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 28px); color: var(--ink); }
.work .wn .star { color: var(--accent); font-size: 12px; font-family: var(--mono); vertical-align: super; }
.work .wmeta { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.work .wd { grid-column: 2 / -1; color: var(--muted); font-size: 15px; margin-top: 2px; max-width: 60ch; }
.work .wl { grid-column: 2 / -1; display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; margin-top: 8px; }
.work .wl a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.work .wl a:hover { color: var(--accent-ink); }
@media (max-width: 620px) { .work .w { grid-template-columns: 1fr; } .work .wmeta { text-align: left; } .work .wd, .work .wl { grid-column: 1 / -1; } }

/* writing card */
.signal { display: inline-flex; gap: 16px; align-items: center; margin-top: 18px; padding: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s ease; max-width: 500px; }
.signal:hover { border-color: var(--accent); }
.signal img { width: 128px; height: 70px; object-fit: cover; }
.signal .s { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.signal .t { font-family: var(--serif); font-size: 19px; color: var(--ink); margin-top: 3px; line-height: 1.25; }

/* contact */
.contact { text-align: left; }
.contact h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 8vw, 92px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 30px; }
.contact h2 em { font-style: italic; color: var(--accent); }
.contact .links { display: flex; flex-wrap: wrap; gap: 14px 28px; font-family: var(--mono); font-size: 15px; }
.contact .links a { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color .2s ease, color .2s ease; }
.contact .links a:hover { color: var(--accent); border-color: var(--accent); }

/* footer / colophon + telemetry */
footer { padding: 40px 0 60px; border-top: 1px solid var(--line); }
footer .col { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--faint); }
footer .tel b { color: var(--muted); font-weight: 400; }

@media (max-width: 680px) {
  .mark .who span { display: none; }
  .tbtn { white-space: nowrap; margin-left: auto; }
}

.x .read a.signal { border-bottom: 1px solid var(--line); padding-bottom: 12px; color: var(--ink); margin-top: 6px; }
.x .read a.signal:hover { border-color: var(--accent); }

.work .wl.faint { color: var(--faint); }
.nojs { max-width: 680px; margin: 40px auto; padding: 0 24px; font-family: var(--serif); }
footer a { text-decoration: underline; text-underline-offset: 3px; }