/* ---------------- self-hosted fonts (no Google CDN — GDPR) ---------------- */
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/spectral-300.woff2') format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/spectral-400.woff2') format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/spectral-500.woff2') format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/spectral-600.woff2') format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:italic; font-weight:300; font-display:swap; src:url('../fonts/spectral-300i.woff2') format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/spectral-400i.woff2') format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:italic; font-weight:500; font-display:swap; src:url('../fonts/spectral-500i.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/hanken-400.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/hanken-500.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/hanken-600.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/hanken-700.woff2') format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/spacemono-400.woff2') format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/spacemono-700.woff2') format('woff2'); }

:root{
  --paper:      #F4EEE2;   /* warm beige paper */
  --paper-2:    #ECE4D4;   /* deeper beige, bands & slots */
  --paper-3:    #E2D8C4;   /* slot fill */
  --ink:        #2A2620;   /* warm brown-black */
  --ink-soft:   #6E6557;   /* muted brown, secondary text */
  --ink-faint:  #9A9081;   /* hairlines, captions */
  --green:      #51663F;   /* muted moss */
  --green-deep: #3C4E2E;   /* deeper forest */
  --brown:      #846C4F;   /* earthy brown */
  --line:       #D8CEBC;   /* hairline */

  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:  'Space Mono', ui-monospace, monospace;

  --p: 4px; /* pixel unit */
  --maxw: 1200px;
  --measure: 40rem;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:19px;
  line-height:1.72;
  font-weight:400;
  letter-spacing:.002em;
}
/* faint paper warmth */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(132,108,79,.06), transparent 55%),
    radial-gradient(90% 70% at -10% 110%, rgba(81,102,63,.05), transparent 55%);
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1; }

.mono{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:400;
}

/* ---------------- image slots ---------------- */
.imgslot{ background:var(--paper-3); overflow:hidden; position:relative; }
.imgslot img{ width:100%; height:100%; object-fit:cover; display:block; }
.imgslot .slot-label{
  display:grid; place-items:center; width:100%; height:100%; min-height:140px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); text-align:center; padding:12px;
}
.imgslot.portrait{ width:100%; aspect-ratio:4/5; border-radius:16px; }
.imgslot.sq-img{ width:100%; aspect-ratio:1/1; border-radius:12px; }
.imgslot.wide-img{ width:100%; aspect-ratio:21/9; border-radius:16px; }

/* ---------------- pixel whisper ---------------- */
.pixel-sprout{
  display:inline-block; position:relative;
  width:calc(7*var(--p)); height:calc(5*var(--p));
  vertical-align:-2px; flex:none;
}
.pixel-sprout i{
  position:absolute; top:0; left:0;
  width:var(--p); height:var(--p); background:transparent;
  box-shadow:
    0 0 0 0 var(--green),
    calc(6*var(--p)) 0 0 0 var(--green),
    calc(1*var(--p)) calc(1*var(--p)) 0 0 var(--green),
    calc(5*var(--p)) calc(1*var(--p)) 0 0 var(--green),
    calc(2*var(--p)) calc(2*var(--p)) 0 0 var(--green),
    calc(4*var(--p)) calc(2*var(--p)) 0 0 var(--green),
    calc(3*var(--p)) calc(1*var(--p)) 0 0 var(--brown),
    calc(3*var(--p)) calc(2*var(--p)) 0 0 var(--brown),
    calc(3*var(--p)) calc(3*var(--p)) 0 0 var(--brown),
    calc(3*var(--p)) calc(4*var(--p)) 0 0 var(--brown);
}
/* tiny pixel logo mark: 2x2 cluster */
.pixel-mark{
  display:inline-block; position:relative;
  width:calc(3*var(--p)); height:calc(3*var(--p));
  flex:none;
}
.pixel-mark i{
  position:absolute; top:0; left:0; width:var(--p); height:var(--p); background:var(--green);
  box-shadow:
    calc(2*var(--p)) 0 0 0 var(--brown),
    0 calc(2*var(--p)) 0 0 var(--brown),
    calc(2*var(--p)) calc(2*var(--p)) 0 0 var(--green);
}
/* blinking caret */
.caret{
  display:inline-block; width:.42em; height:1.0em;
  background:var(--green); margin-left:.12em; vertical-align:-.08em;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* ---------------- header ---------------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.site.scrolled{ border-bottom-color:var(--line); background:color-mix(in srgb, var(--paper) 94%, transparent); }
.bar{ display:flex; align-items:center; justify-content:space-between; height:74px; }

.logo{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-serif); font-weight:500; font-size:1.18rem;
  letter-spacing:.01em; text-decoration:none; color:var(--ink);
}
.logo b{ font-weight:600; }
.logo .sep{ color:var(--ink-faint); font-weight:400; }
.logo-img{ height:26px; width:auto; display:block; }

.nav{ display:flex; align-items:center; gap:26px; }

.gerome{ position:relative; }
.gerome > a.gerome-link{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:none;
  text-decoration:none; color:var(--ink); padding:8px 2px;
  border-bottom:1.5px solid transparent; transition:border-color .25s, color .25s;
}
.gerome > a.gerome-link::after{
  content:""; width:6px; height:6px; border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-1px); transition:transform .25s, border-color .25s; margin-left:2px;
}
.gerome:hover > a.gerome-link, .gerome:focus-within > a.gerome-link{ color:var(--green-deep); border-bottom-color:var(--green); }
.gerome:hover > a.gerome-link::after, .gerome:focus-within > a.gerome-link::after{ transform:rotate(225deg) translateY(2px); border-color:var(--green); }

.dropdown{
  position:absolute; top:calc(100% + 12px); right:0; min-width:230px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 44px -22px rgba(42,38,32,.45), 0 2px 0 0 rgba(255,255,255,.4) inset;
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.gerome:hover .dropdown, .gerome:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown::before{
  content:""; position:absolute; top:-6px; right:26px; width:11px; height:11px;
  background:var(--paper); border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.dropdown .dd-head{ padding:8px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.dropdown a.dd-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--ink);
  font-size:.96rem; font-weight:500; transition:background .16s, color .16s, padding .16s;
}
.dropdown a.dd-item .idx{ font-family:var(--font-mono); font-size:.64rem; color:var(--ink-faint); letter-spacing:.1em; }
.dropdown a.dd-item:hover{ background:var(--paper-2); color:var(--green-deep); padding-left:18px; }
.dropdown a.dd-item:hover .idx{ color:var(--green); }

.socials{ display:flex; align-items:center; gap:6px; padding-left:22px; margin-left:4px; border-left:1px solid var(--line); }
.icon-btn{
  display:grid; place-items:center; width:40px; height:40px; border-radius:9px;
  color:var(--ink-soft); text-decoration:none; transition:color .2s, background .2s, transform .2s;
}
.icon-btn:hover{ color:var(--green-deep); background:var(--paper-2); transform:translateY(-1px); }
.icon-btn svg{ width:21px; height:21px; }

/* ---------------- hero ---------------- */
.hero{ padding:clamp(48px,8vh,104px) 0 clamp(40px,6vh,72px); }
.hero-grid{ display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(32px,5vw,72px); align-items:center; }
.kicker{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.kicker .dot{ width:7px; height:7px; background:var(--green); border-radius:1px; }
h1.lede{
  font-family:var(--font-serif); font-weight:400; color:var(--ink);
  font-size:clamp(2.3rem,4.6vw,3.55rem); line-height:1.08; letter-spacing:-.012em;
  margin:0 0 28px; text-wrap:balance;
}
h1.lede em{ font-style:italic; color:var(--green-deep); }
.hero-sub{
  font-size:1.12rem; color:var(--ink-soft); max-width:34rem; line-height:1.66; margin:0;
}
.hero-sub strong{ color:var(--ink); font-weight:600; }

.portrait-wrap{ position:relative; }
.portrait-wrap .tag{
  position:absolute; left:-10px; bottom:18px; z-index:3;
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px 7px 12px; display:flex; align-items:center; gap:9px;
  box-shadow:0 12px 30px -18px rgba(42,38,32,.5);
}
.hero-meta{ display:flex; gap:30px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.hero-meta .m{ display:flex; flex-direction:column; gap:3px; }
.hero-meta .m .v{ font-family:var(--font-serif); font-size:1.5rem; color:var(--ink); line-height:1; }
.hero-meta .m .k{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------------- manifesto ---------------- */
.manifesto{ padding:clamp(28px,5vh,56px) 0 24px; }
.col{ max-width:var(--measure); margin:0 auto; }
.section{ padding:clamp(40px,7vh,84px) 0; }
.section + .section{ border-top:1px solid var(--line); }

.sec-kicker{ display:flex; align-items:center; gap:12px; margin:0 auto 22px; max-width:var(--measure); }
.sec-kicker .num{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; color:var(--green); }
.sec-kicker .rule{ flex:1; height:1px; background:var(--line); }

h2.sub{
  font-family:var(--font-serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.14; letter-spacing:-.01em;
  margin:0 auto 30px; max-width:var(--measure); text-wrap:balance;
}
.col p{ margin:0 0 1.35em; color:var(--ink); }
.col p:last-child{ margin-bottom:0; }
.col p.lead{ font-size:1.34rem; line-height:1.6; color:var(--ink); font-weight:400; letter-spacing:-.005em; }
.col p.lead .start{ font-family:var(--font-serif); font-style:italic; color:var(--green-deep); }
.post-content h2, .post-content h3{ font-family:var(--font-serif); font-weight:500; }
.post-content img{ border-radius:12px; margin:1.4em auto; }

/* ---------------- Koenig editor (Ghost cards — required by gscan) ---------------- */
.kg-width-wide{ position:relative; width:min(85vw, 56rem); margin-left:50%; transform:translateX(-50%); }
.kg-width-full{ position:relative; width:100vw; margin-left:50%; transform:translateX(-50%); max-width:100vw; }
.kg-width-full img{ width:100%; border-radius:0; }
.kg-image{ margin:1.4em auto; }
.kg-gallery-container{ display:flex; flex-direction:column; max-width:min(85vw,56rem); margin:1.4em auto; }
.kg-gallery-row{ display:flex; flex-direction:row; justify-content:center; gap:10px; }
.kg-gallery-image img{ display:block; margin:0; width:100%; height:100%; border-radius:10px; }
.kg-bookmark-card a.kg-bookmark-container{ display:flex; text-decoration:none; border:1px solid var(--line); border-radius:12px; overflow:hidden; color:var(--ink); }
.kg-bookmark-content{ padding:18px 20px; }
.kg-bookmark-title{ font-weight:600; }
.kg-callout-card{ display:flex; gap:12px; padding:16px 18px; border-radius:12px; background:var(--paper-2); margin:1.4em 0; }
.kg-toggle-card{ border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:1.4em 0; }
.kg-btn{ display:inline-block; padding:11px 20px; border-radius:10px; background:var(--green-deep); color:var(--paper); text-decoration:none; font-weight:600; }

/* sub-brands */
.brands{ max-width:var(--measure); margin:0 auto; }
.brand{ display:grid; grid-template-columns:auto 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--line); }
.brand:first-of-type{ border-top:none; }
.brand .name{
  font-family:var(--font-serif); font-style:italic; font-size:1.3rem; color:var(--green-deep);
  min-width:118px; padding-top:.12em;
}
.brand .name .ix{ display:block; font-family:var(--font-mono); font-style:normal; font-size:.6rem; letter-spacing:.14em; color:var(--ink-faint); margin-top:6px; }
.brand p{ margin:0; color:var(--ink); font-size:1.02rem; }

/* woven images */
.figure{ margin:6px auto clamp(6px,3vh,20px); max-width:var(--measure); }
.figure.wide{ max-width:min(100%, 56rem); }
.fig-cap{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px; }
.float-row{ display:grid; grid-template-columns:1fr 200px; gap:34px; align-items:start; max-width:var(--measure); margin:0 auto; }
.float-row .sq .fig-cap{ text-align:left; }

/* ---------------- closing ---------------- */
.closing{ background:var(--paper-2); border-top:1px solid var(--line); padding:clamp(56px,9vh,108px) 0; }
.closing .col{ text-align:center; }
.closing .pixel-sprout{ margin-bottom:22px; transform:scale(1.5); transform-origin:center bottom; }
h2.bye{ font-family:var(--font-serif); font-weight:400; font-style:italic; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ink); margin:0 0 30px; }
.links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.link-btn{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  padding:13px 22px; border-radius:11px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); font-weight:600; font-size:.98rem; transition:all .2s ease;
}
.link-btn svg{ width:20px; height:20px; color:var(--green-deep); }
.link-btn:hover{ border-color:var(--green); color:var(--green-deep); transform:translateY(-2px); box-shadow:0 14px 30px -20px rgba(42,38,32,.55); }

/* ---------------- footer ---------------- */
footer.site{ padding:38px 0; }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot .copy{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft); display:flex; align-items:center; gap:10px; }
.foot .fsoc{ display:flex; gap:6px; }

/* ---------------- reveal ---------------- */
@media (prefers-reduced-motion: no-preference){
  html.anim .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  html.anim .reveal.in{ opacity:1; transform:none; }
}

/* ---------------- mobile gutters ---------------- */
/* the centered measure-blocks had no side padding on narrow screens → text touched the edge */
.col, .sec-kicker, h2.sub, .brands, .float-row, .figure{ width:min(100% - 2.5rem, var(--measure)); margin-inline:auto; }
.figure.wide{ width:min(100% - 2.5rem, 56rem); }

/* ---------------- responsive ---------------- */
@media (max-width:880px){
  body{ font-size:18px; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .portrait-wrap{ order:-1; max-width:420px; }
  .float-row{ grid-template-columns:1fr; gap:20px; }
  .float-row .sq{ max-width:300px; }
  .socials{ display:none; }
  .nav{ gap:14px; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .brand{ grid-template-columns:1fr; gap:6px; }
  .brand .name{ min-width:0; }
  .hero-meta{ flex-wrap:wrap; gap:20px 34px; }
}