:root{
  --bg:#0c0b0a; --bg2:#100e0b; --panel:#141210;
  --ink:#e9e3d8; --ink-soft:#cfc7ba; --mut:#8f867a; --line:#2a2620;
  --accent:#b0895a; --accent-dim:#7d6a52;
  --measure:640px; --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:19px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.display{font-family:"Grenze Gotisch","EB Garamond",serif;font-weight:400}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.measure{max-width:var(--measure);margin-left:auto;margin-right:auto}
.eyebrow{font-family:"EB Garamond",serif;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent);font-weight:500}
.hair{height:1px;background:var(--line);border:0;margin:0}
.rule-c{width:52px;height:1px;background:var(--accent);margin:20px auto;opacity:.8}

/* masthead (very quiet) */
.mast{position:absolute;top:0;left:0;right:0;z-index:20;padding:26px 0}
.mast .wrap{display:flex;justify-content:space-between;align-items:center}
.mast .studio{font-family:"Grenze Gotisch",serif;font-size:16px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);font-weight:500}
.mast a.enter{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--accent-dim);padding-bottom:3px}
.mast a.enter:hover{color:var(--accent)}

/* cover */
.cover{position:relative;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden}
.cover-img{position:absolute;inset:0;background:#000 center/cover no-repeat;filter:saturate(.92) brightness(.86)}
.cover::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,11,10,.5) 0%,rgba(12,11,10,.05) 30%,rgba(12,11,10,.85) 100%)}
.cover .wrap{position:relative;z-index:2;padding-bottom:8vh;width:100%}
.cover .series{font-size:12px;letter-spacing:.5em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.cover h1{font-family:"Grenze Gotisch",serif;font-weight:300;font-size:clamp(58px,12vw,150px);line-height:.94;margin:0;letter-spacing:.02em}
.cover .sub{font-style:italic;color:var(--ink-soft);font-size:clamp(18px,2.4vw,24px);margin-top:18px;max-width:520px}
.cover .creed{margin-top:24px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);opacity:.92}
.cover .cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--mut);font-size:11px;letter-spacing:.34em;text-transform:uppercase}

/* generic section */
section{padding:120px 0}
.num{font-family:"Grenze Gotisch",serif;color:var(--accent);font-size:15px;letter-spacing:.3em}
h2{font-family:"Grenze Gotisch",serif;font-weight:400;font-size:clamp(32px,5vw,54px);line-height:1.08;margin:14px 0 0;letter-spacing:.01em}

/* foreword / statement */
.foreword{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.foreword .measure{text-align:center}
.statement{font-size:clamp(20px,2.6vw,26px);line-height:1.75;color:var(--ink);margin-top:30px;font-weight:400}
.statement .lead::first-letter{font-family:"Grenze Gotisch",serif;font-size:3.4em;line-height:.72;float:left;padding:8px 12px 0 0;color:var(--accent);font-weight:500}
.statement p{margin:0 0 22px}
.sig{margin-top:26px;font-style:italic;color:var(--mut);font-size:17px}

/* the book — fade carousel, prints mounted on paper (Taschen) */
.plates{padding:104px 0 120px;overflow:hidden}
.reader{position:relative;max-width:1000px;margin:0 auto;padding:0 54px}
.stage{position:relative;height:min(82vh,860px)}
.stage .fog{position:absolute;inset:-10%;z-index:5;pointer-events:none;opacity:.42;
  background:radial-gradient(45% 55% at 24% 56%,rgba(200,200,210,.07),transparent 60%),
            radial-gradient(50% 50% at 78% 40%,rgba(180,180,195,.05),transparent 60%);
  animation:fogdrift 34s linear infinite}
@keyframes fogdrift{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
.page{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(1.035);transition:opacity 1.05s ease,transform 1.5s ease;pointer-events:none}
.page.active{opacity:1;transform:scale(1);pointer-events:auto}
.leaf{background:#f1eee7;height:100%;aspect-ratio:5/7;max-width:100%;position:relative;overflow:hidden;
  box-shadow:0 46px 100px rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:8% 8% 13%}
.leaf::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 70px rgba(120,110,95,.14);pointer-events:none;z-index:2}
.leaf img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 10px 34px rgba(0,0,0,.32)}
.page.active .leaf img{animation:kb 10s ease-out both}
@keyframes kb{from{transform:scale(1.01)}to{transform:scale(1.06)}}
.leaf.pair{gap:6%}
.leaf.pair img{max-width:46%}
.leaf .cap{position:absolute;left:0;right:0;bottom:5.4%;text-align:center;font-family:"EB Garamond",serif;
  font-style:italic;color:#4c453b;font-size:15px;letter-spacing:.02em;z-index:3}
.turn{position:absolute;top:0;bottom:0;width:52px;z-index:8;cursor:pointer;background:transparent;border:0;
  display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.45;transition:opacity .2s}
.turn:hover{opacity:1}.turn.prev{left:0}.turn.next{right:0}.turn svg{width:26px;height:26px}
.reader .meta{text-align:center;margin-top:26px;font-family:"Grenze Gotisch",serif;letter-spacing:.32em;color:var(--mut);font-size:13px}
.reader .meta b{color:var(--accent);font-weight:400}
@media(max-width:640px){
  .reader{padding:0 32px}.leaf{aspect-ratio:4/5;padding:7% 6% 12%}
  .leaf.pair{flex-direction:column}.leaf.pair img{max-width:80%;max-height:46%}
}

/* poem interstitial */
.poem{position:relative;min-height:94svh;display:flex;align-items:center;overflow:hidden;text-align:center}
.poem-bg{position:absolute;inset:0;background:#000 center/cover no-repeat;filter:brightness(.42) saturate(.8) contrast(1.06);transform:scale(1.06);animation:slowzoom 32s ease-in-out infinite alternate}
.poem::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(10,9,8,.5),rgba(7,6,5,.95))}
.poem .fog{position:absolute;inset:-10%;z-index:1;opacity:.5;background:radial-gradient(40% 50% at 30% 60%,rgba(190,190,200,.08),transparent 60%);animation:fogdrift 42s linear infinite}
.poem .wrap{position:relative;z-index:3;max-width:920px}
.poem p{font-family:"EB Garamond",Georgia,serif;font-weight:400;font-style:italic;font-size:clamp(23px,3.5vw,40px);line-height:1.5;color:var(--ink);margin:0}
.poem .accent{color:var(--accent);font-style:normal}
@keyframes slowzoom{from{transform:scale(1.05)}to{transform:scale(1.14)}}

/* invitation */
.invite{background:
  linear-gradient(rgba(10,9,8,.9),rgba(10,9,8,.94)),url('/img/g07.jpg') center/cover no-repeat;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.invite .measure{text-align:center}
.invite .statement{font-size:clamp(19px,2.4vw,23px)}
.form-card{max-width:600px;margin:34px auto 0;text-align:left;background:rgba(20,18,16,.86);
  border:1px solid var(--line);padding:36px;backdrop-filter:blur(4px)}
label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:20px 0 7px}
.req{color:var(--accent)}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:18px;padding:9px 2px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
select{background:var(--panel);border:1px solid var(--line);padding:11px 12px}
textarea{border:1px solid var(--line);padding:11px 12px;min-height:88px;resize:vertical;font-size:17px}
option{background:var(--panel)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.submit{margin-top:30px;display:inline-block;width:100%;text-align:center;background:transparent;
  border:1px solid var(--accent);color:var(--accent);font-family:"Grenze Gotisch",serif;
  letter-spacing:.24em;text-transform:uppercase;font-size:15px;padding:15px;cursor:pointer;transition:background .25s,color .25s}
.submit:hover{background:var(--accent);color:#14110d}
.form-note{color:var(--mut);font-size:14px;text-align:center;margin-top:16px;font-style:italic}
.err{color:#c98b7a;font-size:14px;text-align:center;margin-top:12px;min-height:16px}
.thanks{text-align:center;padding:16px 6px}
.thanks h3{font-family:"Grenze Gotisch",serif;font-weight:400;font-size:32px;margin:0 0 10px}
.thanks p{color:var(--ink-soft)}

/* colophon */
.colophon{padding:70px 0;text-align:center;border-top:1px solid var(--line)}
.colophon .studio{font-family:"Grenze Gotisch",serif;letter-spacing:.34em;text-transform:uppercase;font-size:15px}
.colophon .meta{color:var(--mut);font-size:14px;margin-top:10px;font-style:italic}
.colophon .yr{color:var(--accent);letter-spacing:.3em;font-size:13px;margin-top:6px}

/* lightbox */
#lb{position:fixed;inset:0;z-index:80;background:rgba(6,5,4,.96);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
#lb img{max-width:92vw;max-height:90vh;border:1px solid var(--line)}

/* reveal on scroll */
.rise{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}
.rise.in{opacity:1;transform:none}

@media(max-width:820px){
  section{padding:80px 0}.plate{margin-bottom:74px}
  .spread{grid-template-columns:1fr}.row2{grid-template-columns:1fr;gap:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.rise{opacity:1;transform:none;transition:none}
}
