/* The Alan Watts Archive · starting scaffold.
   Ink-on-washi brand language shared with the Timeline Experience. */

@font-face { font-family:'IM Fell English'; src:url('/fonts/fell-english.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IM Fell English'; src:url('/fonts/fell-english-italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('/fonts/spectral.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('/fonts/spectral-italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('/fonts/spectral-medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/fonts/plex-mono.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/fonts/plex-mono-300.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }

:root {
  --washi:#f4ead4; --washi-deep:#ebdfc0; --washi-warm:#faf3dd;
  --ink:#0a1428; --ink-soft:#41506b; --sumi:#1a1814; --gold:#b8954b;
  --line: rgba(10,20,40,0.14);
  --display:'IM Fell English','Cardo',Georgia,serif;
  --body:'Spectral','Cardo',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw: 1120px;
}

* { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:var(--washi); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Paper grain, multiplied onto the substrate (Timeline parity). */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,4vw,2.5rem); position:relative; z-index:2; }

a { color:inherit; }
.k { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); }

/* Topbar -------------------------------------------------------------------- */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:1.4rem 0; }
.brand { display:flex; align-items:center; gap:0.85rem; }
.brand img { height:30px; width:auto; }
.brand .wordmark { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-soft); }
.nav { display:flex; gap:1.7rem; }
.nav a { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
.nav a:hover { color:var(--gold); }

/* Hero ---------------------------------------------------------------------- */
.hero { text-align:center; padding: clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,6vw,4.5rem); }
.hero .sig { width:min(300px,60vw); height:auto; opacity:0.9; margin:0 auto 1.6rem; display:block; }
.hero .eyebrow { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); }
.hero h1 { font-family:var(--display); font-weight:400; font-size:clamp(2.6rem,7vw,5rem); line-height:1.03; letter-spacing:-0.01em; margin:1rem 0 0; }
.hero h1 em { font-style:italic; }
.hero .lede { max-width:40rem; margin:1.6rem auto 0; font-size:clamp(1.05rem,2vw,1.28rem); color:var(--ink-soft); }
.cta-row { margin-top:2.4rem; display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap; }
.btn { font-family:var(--mono); font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; text-decoration:none; padding:0.9rem 1.6rem; border-radius:3px; transition:background .2s ease, color .2s ease, border-color .2s ease; display:inline-block; }
.btn.primary { background:var(--ink); color:var(--washi); }
.btn.primary:hover { background:var(--gold); }
.btn.ghost { border:1px solid var(--line); color:var(--ink); }
.btn.ghost:hover { border-color:var(--gold); color:var(--gold); }

/* Section scaffolding ------------------------------------------------------- */
.section { padding: clamp(2.6rem,6vw,5rem) 0; }
.rule { display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem; }
.rule::after { content:""; flex:1; height:1px; background:var(--line); }
.section h2 { font-family:var(--display); font-weight:400; font-size:clamp(1.8rem,4vw,2.7rem); margin:0.2rem 0 0; }
.section .sub { color:var(--ink-soft); max-width:42rem; margin:0.6rem 0 0; }

/* Collections grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem; margin-top:2rem; }
.card { background:var(--washi-warm); border:1px solid var(--line); border-radius:6px; padding:1.5rem; min-height:196px; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:border-color .2s ease, transform .2s ease; }
.card:hover { border-color:var(--gold); transform:translateY(-2px); }
.card .n { font-family:var(--mono); font-size:0.66rem; letter-spacing:0.14em; color:var(--gold); }
.card h3 { font-family:var(--display); font-weight:400; font-size:1.5rem; margin:0.5rem 0 0.45rem; }
.card p { margin:0; color:var(--ink-soft); font-size:0.95rem; flex:1; }
.card .more { font-family:var(--mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:1rem; }

/* Timeline feature */
.feature { background:var(--ink); color:var(--washi); border-radius:10px; padding:clamp(2rem,5vw,3.4rem); display:grid; grid-template-columns:1.25fr 1fr; gap:2.2rem; align-items:center; }
.feature .k { color:var(--gold); }
.feature h2 { font-family:var(--display); font-weight:400; font-size:clamp(1.9rem,4vw,2.9rem); color:var(--washi); margin:0.6rem 0 0.8rem; line-height:1.05; }
.feature p { color:rgba(244,234,212,0.82); margin:0 0 1.6rem; }
.feature .thumb { border:1px solid rgba(244,234,212,0.22); border-radius:6px; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,234,212,0.4); }

/* About */
.about { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:2rem; }
.about h3 { font-family:var(--display); font-weight:400; font-size:1.4rem; margin:0 0 0.5rem; }
.about p { color:var(--ink-soft); margin:0; }

/* Footer */
.footer { border-top:1px solid var(--line); margin-top:2rem; padding:2.6rem 0 3.5rem; }
.footer .cols { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:baseline; }
.footer .wordmark { font-family:var(--display); font-size:1.15rem; }
.footer nav { display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer a { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
.footer a:hover { color:var(--gold); }
.footer small { display:block; margin-top:1.4rem; color:var(--ink-soft); font-family:var(--mono); font-size:0.68rem; letter-spacing:0.05em; }

@media (max-width:760px) {
  .nav { display:none; }
  .feature, .about { grid-template-columns:1fr; }
  .feature .thumb { order:-1; }
}