/* ============================================================
   byjacklloyd — stylesheet
   Warm, type-led, film-inflected. Light mode only.
   Design tokens are the single source of truth; change a value
   in :root and it propagates everywhere.
   ============================================================ */

/* ---------- self-hosted fonts ---------- */
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("/fonts/SplineSansMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light only;
  --paper:#f5f0e6; --paper-2:#ebe4d6; --ink:#2b2620;
  --ink-soft:#8a8175; --accent:#9c4a2f; --line:#d8cfbe;
  --ease:cubic-bezier(.2,.7,.3,1); --read:72ch;
  --pad:3rem; --gap-section:6rem; --maxw:1500px;
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family:"EB Garamond",Garamond,Georgia,serif;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
/* film grain */
body::before {
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display:block; max-width:100%; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); position:relative; z-index:2; }
main { position:relative; z-index:2; }
.mono { font-family:"Spline Sans Mono",monospace; }

/* ---------- headers ---------- */
.hdr-full .wrap { display:flex; justify-content:space-between; align-items:center; padding-top:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line); gap:1.5rem; }
.brand { font-size:1.5rem; font-weight:500; text-decoration:none; color:var(--ink); }
.brand .by { color:var(--ink-soft); font-style:italic; }
.topnav { display:flex; gap:2rem; flex-wrap:wrap; }
.topnav a { font-family:"Spline Sans Mono",monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-soft); text-decoration:none; transition:color 0.2s; white-space:nowrap; }
.topnav a.on { color:var(--ink); }
.topnav a:hover { color:var(--accent); }
.hdr-min .wrap { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; padding-bottom:2rem; gap:1.5rem; }
.hdr-min .back { font-family:"Spline Sans Mono",monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-soft); text-decoration:none; display:inline-flex; align-items:center; gap:0.5em; transition:color 0.2s; white-space:nowrap; }
.hdr-min .back:hover { color:var(--accent); }
.hdr-min .brand { font-size:1.1rem; color:var(--ink-soft); }

/* ---------- masthead ---------- */
.masthead { margin:4rem 0 3rem; }
.plate-no { font-family:"Spline Sans Mono",monospace; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); }
.masthead h1 { font-size:clamp(2.4rem,6vw,4.5rem); font-weight:500; line-height:1.02; letter-spacing:-0.015em; margin:0.6rem 0 0; max-width:20ch; }
.masthead .sub { font-size:1.3rem; color:var(--ink-soft); font-style:italic; margin-top:1rem; max-width:48ch; }
.masthead .meta { font-family:"Spline Sans Mono",monospace; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:1.25rem; display:flex; gap:1.5rem; flex-wrap:wrap; }
.meta-note { font-family:"Spline Sans Mono",monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- shared prose ---------- */
.prose { max-width:var(--read); }
.prose p { font-size:1.3rem; line-height:1.55; margin-bottom:1.3rem; }
.prose p.lead { font-size:1.6rem; line-height:1.4; }
.prose p.spaced { margin-bottom:2rem; }
.prose h2 { font-size:1.7rem; font-weight:500; margin:2.4rem 0 0.8rem; }
.prose em { font-style:italic; } .prose strong { font-weight:600; }
.prose a { color:var(--ink); text-decoration:underline; text-underline-offset:0.25em; text-decoration-color:var(--line); transition:color 0.2s; }
.prose a:hover { color:var(--accent); }
.prose .signoff { font-size:1.4rem; font-style:italic; color:var(--ink-soft); margin-top:2.5rem; }

/* ---------- homepage ---------- */
.lede { font-size:clamp(1.9rem,4.2vw,3.5rem); font-weight:500; line-height:1.15; max-width:18ch; margin:4rem 0 4.5rem; letter-spacing:-0.015em; }
.lede em { font-style:italic; color:var(--accent); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
.work { cursor:pointer; text-decoration:none; color:var(--ink); display:block; }
.frame { position:relative; overflow:hidden; aspect-ratio:3/2; background:var(--paper-2); }
.stack { position:absolute; inset:0; }
.stack img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.96) contrast(1.02); opacity:0; transition:opacity 0.7s ease; }
.stack img.on { opacity:1; }
.plate { position:absolute; top:0.85rem; left:0.85rem; z-index:5; font-family:"Spline Sans Mono",monospace; font-size:0.65rem; letter-spacing:0.1em; color:var(--paper); background:rgba(43,38,32,0.55); padding:0.25rem 0.5rem; backdrop-filter:blur(2px); }
.dim { position:absolute; inset:0; z-index:3; background:linear-gradient(to top,rgba(20,17,14,0.5),rgba(20,17,14,0) 55%); opacity:0; transition:opacity 0.4s var(--ease); }
.work:hover .dim { opacity:1; }
.label { position:absolute; left:1.25rem; bottom:1.15rem; z-index:4; opacity:0; transition:opacity 0.4s var(--ease); }
.work:hover .label { opacity:1; }
.label .view { color:var(--paper); font-size:1.2rem; font-style:italic; }
.label .count { font-family:"Spline Sans Mono",monospace; font-size:0.66rem; letter-spacing:0.1em; color:var(--paper); opacity:0.85; text-transform:uppercase; margin-top:0.3rem; display:block; }
.cap { display:flex; justify-content:space-between; align-items:baseline; margin-top:0.85rem; gap:1rem; }
.cap .name { font-size:1.35rem; font-weight:500; }
.cap .m { font-family:"Spline Sans Mono",monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); white-space:nowrap; }
.home-grid { margin-bottom:var(--gap-section); }

/* ---------- collection page ---------- */
.intro { max-width:var(--read); margin-bottom:4.5rem; }
.intro p { font-size:1.3rem; line-height:1.55; } .intro p + p { margin-top:1.2rem; }
.intro em { font-style:italic; color:var(--accent); }
.frames { display:flex; flex-direction:column; gap:3rem; }
.frames img { width:100%; filter:saturate(0.96) contrast(1.02); }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.figure .fcap { font-family:"Spline Sans Mono",monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:0.6rem; }
.next { margin-top:var(--gap-section); padding-top:2.5rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; text-decoration:none; color:var(--ink); transition:color 0.3s; gap:2rem; }
.next:hover { color:var(--accent); }
.next .lbl { font-family:"Spline Sans Mono",monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
.next .nm { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:500; margin-top:0.4rem; }
.next .arrow { font-size:2.5rem; }

/* ---------- journal index ---------- */
.featured { display:block; text-decoration:none; color:var(--ink); margin-bottom:4rem; }
.featured .fimg { width:100%; aspect-ratio:3/2; object-fit:cover; filter:saturate(0.96) contrast(1.02); transition:opacity 0.4s var(--ease); }
.featured:hover .fimg { opacity:0.88; }
.featured .fm { font-family:"Spline Sans Mono",monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin:1.25rem 0 0; display:flex; gap:1.25rem; }
.featured h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:500; line-height:1.1; margin:0.6rem 0 0; max-width:24ch; }
.featured .excerpt { font-size:1.25rem; line-height:1.5; margin-top:0.9rem; max-width:var(--read); }
.featured .more { font-style:italic; color:var(--accent); margin-top:0.8rem; display:inline-block; }
.listhead { font-family:"Spline Sans Mono",monospace; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); padding-bottom:1rem; border-bottom:1px solid var(--line); }
.plist { display:flex; flex-direction:column; }
.prow { display:grid; grid-template-columns:10rem 1fr auto; gap:2rem; align-items:baseline; padding:1.4rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:color 0.2s; }
.prow:hover { color:var(--accent); }
.prow .d { font-family:"Spline Sans Mono",monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.prow:hover .d { color:var(--accent); }
.prow .t { font-size:1.5rem; font-weight:500; }
.prow .arr { font-size:1.2rem; opacity:0; transition:opacity 0.2s; }
.prow:hover .arr { opacity:1; }
.journal-empty { color:var(--ink-soft); font-style:italic; font-size:1.25rem; padding:2rem 0; }

/* ---------- journal post ---------- */
.post-figure { margin:2.5rem 0; }
.post-figure img { width:100%; filter:saturate(0.96) contrast(1.02); }
.post-figure .fcap { font-family:"Spline Sans Mono",monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:0.6rem; }
.post-nav { margin-top:4rem; padding-top:2rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:2rem; }
.post-nav a { text-decoration:none; color:var(--ink); transition:color 0.2s; } .post-nav a:hover { color:var(--accent); }
.post-nav .lbl { font-family:"Spline Sans Mono",monospace; font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.post-nav .pt { font-size:1.2rem; font-weight:500; margin-top:0.3rem; }
.post-nav .nx { text-align:right; }

/* ---------- contact ---------- */
.contact-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:4rem; max-width:64rem; }
.cform { display:flex; flex-direction:column; gap:1.1rem; }
.cfield { display:flex; flex-direction:column; gap:0.45rem; }
.cfield label { font-family:"Spline Sans Mono",monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.cfield input, .cfield textarea { background:var(--paper-2); color:var(--ink); border:1px solid transparent; border-radius:3px; padding:0.9rem 1rem; font-family:"EB Garamond",serif; font-size:1.15rem; transition:border-color 0.2s; width:100%; color-scheme:light; }
.cfield input:focus, .cfield textarea:focus { outline:none; border-color:var(--accent); }
.cfield textarea { min-height:9rem; resize:vertical; line-height:1.5; }
.csubmit { align-self:flex-start; margin-top:0.4rem; background:var(--ink); color:var(--paper); border:none; border-radius:3px; padding:0.85rem 1.8rem; font-family:"Spline Sans Mono",monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:transform 0.15s,background 0.2s; }
.csubmit:hover { background:var(--accent); } .csubmit:active { transform:scale(0.96); }
.cdirect { display:flex; flex-direction:column; gap:1.5rem; }
.cdirect .h { font-family:"Spline Sans Mono",monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.cdirect .list { display:flex; flex-direction:column; gap:0.7rem; }
.cdirect a { color:var(--ink); text-decoration:none; font-size:1.3rem; display:inline-flex; align-items:center; gap:0.4em; transition:color 0.2s; width:fit-content; }
.cdirect a:hover { color:var(--accent); } .cdirect a .ar { color:var(--ink-soft); }

/* ---------- 404 ---------- */
.nf { min-height:56vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1.5rem; }
.nf .num { font-size:clamp(6rem,20vw,14rem); font-weight:500; line-height:0.9; letter-spacing:-0.03em; }
.nf .num .dot { color:var(--accent); }
.nf .msg { font-size:1.6rem; max-width:30ch; line-height:1.3; }
.nf a { font-family:"Spline Sans Mono",monospace; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; display:inline-flex; align-items:center; gap:0.5em; transition:color 0.2s; }
.nf a:hover { color:var(--accent); }

/* ---------- footer ---------- */
.colophon-wrap { position:relative; z-index:2; }
.colophon { margin-top:var(--gap-section); padding-top:2.5rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2.5rem; }
.colophon .left { max-width:32ch; }
.colophon .left p { font-size:1.1rem; line-height:1.5; font-style:italic; color:var(--ink-soft); }
.colophon .navcol { display:flex; gap:4rem; flex-wrap:wrap; }
.colophon .navcol .grp { display:flex; flex-direction:column; gap:0.6rem; }
.colophon .navcol .grp .h { font-family:"Spline Sans Mono",monospace; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.3rem; }
.colophon .navcol a { color:var(--ink); text-decoration:none; font-size:1.1rem; transition:color 0.2s; }
.colophon .navcol a:hover { color:var(--accent); }
.sig { font-size:2.5rem; margin-top:2.5rem; width:100%; text-decoration:none; color:var(--ink); }
.sig .by { color:var(--ink-soft); font-style:italic; }
.copyline { margin-top:2rem; padding-bottom:2.5rem; }
.copyline .mono { font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }

/* ============================================================
   RESPONSIVE — three tiers
   ============================================================ */
@media (max-width:1080px) {
  :root { --pad:2rem; --gap-section:4.5rem; }
  .topnav { gap:1.4rem; }
  .colophon .navcol { gap:2.5rem; }
  .prow { grid-template-columns:8rem 1fr auto; gap:1.5rem; }
}
@media (max-width:720px) {
  :root { --pad:1.25rem; --gap-section:3.5rem; }
  .masthead { margin:2.5rem 0 2rem; }
  .grid { grid-template-columns:1fr; gap:2rem; }
  .pair { grid-template-columns:1fr; gap:1rem; }
  .contact-grid { grid-template-columns:1fr; gap:2.5rem; }
  .prow { grid-template-columns:1fr; gap:0.3rem; padding:1.1rem 0; }
  .prow .arr { display:none; }
  .prose p { font-size:1.2rem; } .prose p.lead { font-size:1.4rem; }
  .intro p { font-size:1.2rem; }
  /* mobile: covers show label always (no hover on touch) */
  .dim { opacity:1; background:linear-gradient(to top,rgba(20,17,14,0.35),rgba(20,17,14,0) 45%); }
  .label { opacity:1; }
  .next { flex-direction:column; align-items:flex-start; gap:0.5rem; }
  .next .arrow { display:none; }
  .post-nav { flex-direction:column; }
  .post-nav .nx { text-align:left; }
  .colophon { gap:2rem; }
  .colophon .navcol { gap:2rem; width:100%; }
  .sig { font-size:2rem; margin-top:1.5rem; }
  .hdr-full .wrap { flex-direction:column; align-items:flex-start; gap:1.25rem; }
}

/* ---------- SVG wordmark sizing ---------- */
.brand .wordmark-img { height: 1.75rem; width: auto; display: block; }
.hdr-min .brand .wordmark-img { height: 1.5rem; }
.sig .wordmark-img { height: 2.5rem; width: auto; display: block; }

/* ---------- pricing page ---------- */
.intro { max-width:var(--read); margin-bottom:3.5rem; }
.price-sec { margin-bottom:3.5rem; }
.sec-kicker { font-family:"Spline Sans Mono",monospace; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); }
.price-h2 { font-size:1.6rem; font-weight:500; letter-spacing:-0.01em; margin:0.4rem 0 0.5rem; border:none; padding:0; }
.price-lede { font-size:1.1rem; color:var(--ink-soft); font-style:italic; max-width:64ch; margin-bottom:1rem; }
.price-rows { border-top:1px solid var(--line); }
.price-row { display:flex; align-items:baseline; gap:1.25rem; padding:1rem 0.15rem; border-bottom:1px solid var(--line); }
.pr-nm { flex:0 0 auto; min-width:11em; }
.pr-t { font-size:1.2rem; font-weight:500; }
.pr-k { display:block; font-family:"Spline Sans Mono",monospace; font-size:0.58rem; letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-soft); margin-top:0.2rem; }
.pr-desc { flex:1 1 auto; font-size:1.02rem; color:var(--ink-soft); line-height:1.4; }
.pr-price { flex:0 0 auto; font-size:1.45rem; font-weight:500; white-space:nowrap; text-align:right; min-width:5.5em; }
.pr-from { display:block; font-family:"Spline Sans Mono",monospace; font-size:0.56rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1px; }
.price-addons { margin-top:0.9rem; display:flex; flex-wrap:wrap; gap:0.4rem 0.5rem; align-items:center; }
.pa-lbl { font-family:"Spline Sans Mono",monospace; font-size:0.58rem; letter-spacing:0.11em; text-transform:uppercase; color:var(--accent); margin-right:0.15rem; }
.pa-chip { font-family:"Spline Sans Mono",monospace; font-size:0.64rem; letter-spacing:0.04em; color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line); border-radius:3px; padding:0.2rem 0.5rem; }
.pa-chip b { color:var(--ink); font-weight:500; }
.price-footnote { font-size:0.98rem; color:var(--ink-soft); margin-top:0.7rem; font-style:italic; max-width:64ch; }
.price-how { display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; border-top:1px solid var(--line); }
.ph-item { padding:1rem 0; border-bottom:1px solid var(--line); }
.ph-k { font-family:"Spline Sans Mono",monospace; font-size:0.6rem; letter-spacing:0.11em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:0.3rem; }
.ph-item p { font-size:1.02rem; color:var(--ink); max-width:40ch; }
.ph-item p .soft { color:var(--ink-soft); }
.price-contact { margin-top:1rem; padding-top:2rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; text-decoration:none; color:var(--ink); transition:color 0.2s; }
.price-contact:hover { color:var(--accent); }
.pc-lead { font-size:1.3rem; font-style:italic; max-width:34ch; line-height:1.3; }
.pc-cta { font-family:"Spline Sans Mono",monospace; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
@media (max-width:720px) {
  .price-row { flex-wrap:wrap; gap:0.4rem 1rem; }
  .pr-desc { flex:1 1 100%; order:3; }
  .price-how { grid-template-columns:1fr; gap:0; }
  .price-contact { flex-direction:column; align-items:flex-start; gap:0.75rem; }
}