/* ============================================================================
   02 — INK SCRIBE  ·  Heritage paper atelier  ·  Scriptorium
   Cream cotton-rag · India black ink · Fraunces italic · slow & contemplative
   ============================================================================ */
:root{
  /* Paper / ink palette */
  --paper:#f3ead6;          /* cream cotton-rag */
  --paper-2:#ece1c6;        /* shadow side */
  --paper-3:#dccfa9;        /* fold edge */
  --paper-deep:#c9b988;     /* deckle shadow */
  --ink:#0e0a06;            /* India black, warm shadow */
  --ink-2:#1d1612;          /* dilute */
  --ink-mute:#5d5346;       /* secondary ink */
  --ink-faint:#8b7e6a;      /* tertiary */
  --rule:#8b7e6a;
  --sepia:#8a5a2b;          /* iron-gall accent */
  --vermilion:#9b2a1f;      /* rubric accent */

  /* Type */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --book:'EB Garamond',Garamond,Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-slow:cubic-bezier(.16,.84,.32,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%}
html{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--book);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  overflow:hidden;
  font-size:calc(16px*var(--res-scale-text,1));
  line-height:1.62;
  background:
    radial-gradient(110% 80% at 50% 35%,#f6efdc 0%,#f1e6cc 60%,#e6d8b3 100%);
  cursor:none;
}
body.is-locked{overflow:hidden}
::selection{background:var(--ink);color:var(--paper)}

a{color:inherit;text-decoration:none}
button{background:none;border:0;cursor:none;font-family:inherit;color:inherit}
/* Gate buttons MUST be clickable + show a real cursor (nib-cursor doesn't apply over the gate) */
.gate, .gate *{cursor:auto !important}
.gate__btn{cursor:pointer !important;position:relative;z-index:3}

/* ----- Backdrop canvases ------------------------------------------------- */
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;background:transparent}
#inkCanvas{position:fixed;left:-99999px;top:-99999px;pointer-events:none;opacity:0}

/* ----- Atmosphere overlays ---------------------------------------------- */
.paper-grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.46  0 0 0 0 0.28  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(140% 100% at 50% 45%,transparent 50%,rgba(60,42,18,.28) 100%);
}
.deckle{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 80px rgba(108,82,40,.18), inset 0 0 220px rgba(70,50,20,.10);
  background:
    linear-gradient(180deg,rgba(80,55,20,.05) 0%,transparent 4%,transparent 96%,rgba(80,55,20,.05) 100%),
    linear-gradient(90deg,rgba(80,55,20,.06) 0%,transparent 4%,transparent 96%,rgba(80,55,20,.06) 100%);
}

/* ----- Custom nib cursor ------------------------------------------------ */
.nib-cursor{
  position:fixed;top:0;left:0;width:18px;height:18px;z-index:90;
  pointer-events:none;mix-blend-mode:multiply;
  transform:translate(-50%,-50%);
  transition:transform .22s var(--ease),opacity .22s var(--ease);
}
.nib-cursor::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#1d1612 0%,#0e0a06 40%,transparent 70%);
  opacity:.85;
}
.nib-cursor::after{
  content:'';position:absolute;left:50%;top:50%;width:1px;height:1px;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(14,10,6,.25), 0 0 0 6px rgba(14,10,6,.06);
}
.nib-cursor.is-pressed{transform:translate(-50%,-50%) scale(1.6)}

/* ----- Masthead --------------------------------------------------------- */
.masthead{
  position:fixed;top:36px;left:64px;right:64px;z-index:50;
  display:flex;align-items:center;gap:22px;
  font:400 11px/1 var(--mono);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mute);
}
.masthead__left{display:flex;align-items:center;gap:12px;color:var(--ink)}
.masthead__name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;letter-spacing:.04em;text-transform:none;color:var(--ink)}
.hallmark{font-size:14px;color:var(--vermilion);transform:translateY(-1px)}
.masthead__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule) 30%,var(--rule) 70%,transparent);opacity:.42}
.masthead__right{display:flex;align-items:center;gap:14px}
.masthead__sep{opacity:.5}

/* ----- Folio counter ---------------------------------------------------- */
.folio{
  position:fixed;bottom:38px;left:64px;z-index:50;
  display:flex;align-items:baseline;gap:10px;
  font:400 12px/1 var(--mono);
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink-mute);
}
.folio__num{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--vermilion);letter-spacing:0;font-weight:500}
.folio__sep{opacity:.5}
.folio__name{font-family:var(--book);font-style:italic;text-transform:none;letter-spacing:.04em;font-size:14px;color:var(--ink)}

/* ----- Cursor cue (BR) -------------------------------------------------- */
.cursor-cue{
  position:fixed;bottom:38px;right:64px;z-index:50;
  display:flex;align-items:center;gap:12px;
  font:400 11px/1.2 var(--book);font-style:italic;color:var(--ink-mute);
  transition:opacity 1.4s var(--ease);max-width:280px;text-align:right;
}
.cursor-cue.is-faded{opacity:0;pointer-events:none}
.cursor-cue__nib{font-size:18px;color:var(--sepia);transform:rotate(-12deg)}

/* ============================================================================
   DECK + SCENES
   ============================================================================ */
.deck{
  position:relative;z-index:5;
  height:100svh;overflow-y:scroll;
  scroll-snap-type:y mandatory;scrollbar-width:none;
}
.deck::-webkit-scrollbar{display:none}
.scene{
  scroll-snap-align:start;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(110px,12vh,160px) clamp(40px,7vw,140px);position:relative;
}
.scene__inner{width:100%;max-width:1200px;margin:0 auto}
.center-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.two-col{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(40px,6vw,110px);align-items:center}

/* Kicker / section labels — italic small caps */
.kicker{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(13px,1.05vw,16px);
  letter-spacing:.06em;color:var(--vermilion);
  margin-bottom:clamp(22px,2.4vw,40px);
}
.kicker.center{text-align:center}

/* Display type — Fraunces italic, the brand voice */
.display{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(76px,11vw,212px);
  line-height:.96;letter-spacing:-.02em;color:var(--ink);
  text-rendering:geometricPrecision;
}
.display em{font-style:italic}
.display__line{display:block}
.display--md{font-size:clamp(48px,6.6vw,108px);font-weight:400;font-style:normal;line-height:1.02;letter-spacing:-.012em}
.display--md em{font-style:italic;font-weight:300;color:var(--ink)}

/* Lede + body */
.lede{
  font-family:var(--book);font-weight:400;
  font-size:clamp(20px,1.6vw,28px);
  line-height:1.5;color:var(--ink-mute);
  max-width:640px;margin-top:clamp(22px,2.4vw,38px);
  font-style:italic;
}
.lede.center,.essay__lead.center{margin-left:auto;margin-right:auto;text-align:center}

/* Hero */
.hero-inner{position:relative}
.hero-foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  margin-top:clamp(36px,3.4vw,56px);
  font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
}
.hero-foot__chip{padding:6px 12px;border:1px solid rgba(93,83,70,.32);border-radius:1px;background:rgba(243,234,214,.55)}
.hero-foot__dot{color:var(--ink-faint);opacity:.6}

/* Essay layout */
.essay__cols{
  margin-top:clamp(28px,3vw,48px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,56px) clamp(40px,5vw,88px);
  max-width:1080px;
}
.essay__lead{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(22px,1.9vw,32px);line-height:1.42;color:var(--ink);
  grid-column:1 / -1;max-width:880px;
}
.essay__body{
  font-family:var(--book);font-weight:400;
  font-size:clamp(15px,1.05vw,17.5px);line-height:1.78;color:var(--ink-2);
}
.essay__body::first-letter{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:2.6em;float:left;line-height:.88;padding:6px 8px 0 0;color:var(--vermilion);
}
.signoff{
  font-family:var(--serif);font-style:italic;color:var(--ink-mute);
  font-size:clamp(15px,1.1vw,18px);margin-top:28px;
}

/* Editions */
.editions{
  margin-top:clamp(40px,4vw,72px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,2.6vw,48px);
}
.edition{
  position:relative;padding:clamp(22px,2vw,34px) clamp(20px,1.8vw,32px);
  border:1px solid rgba(93,83,70,.26);
  background:linear-gradient(180deg,rgba(243,234,214,.55) 0%,rgba(236,225,198,.42) 100%);
  border-radius:2px;
  box-shadow:
    0 1px 0 rgba(255,247,222,.6) inset,
    0 18px 40px -28px rgba(60,42,18,.45);
  transition:transform .8s var(--ease-slow), box-shadow .8s var(--ease-slow);
}
.edition:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,247,222,.6) inset, 0 26px 50px -28px rgba(60,42,18,.55)}
.edition--mid{transform:translateY(-10px)}
.edition--mid:hover{transform:translateY(-13px)}
.edition__head{
  display:flex;align-items:center;gap:14px;
  font:400 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:18px;
}
.edition__num{color:var(--vermilion)}
.edition__rule{flex:1;height:1px;background:rgba(93,83,70,.42)}
.edition__title{
  font-family:var(--serif);font-weight:400;font-size:clamp(26px,2vw,34px);
  line-height:1.1;color:var(--ink);margin-bottom:14px;letter-spacing:-.005em;
}
.edition__title em{font-style:italic;font-weight:300}
.edition__copy{
  font-family:var(--book);font-size:15px;line-height:1.65;color:var(--ink-2);min-height:120px;
}
.edition__price{
  margin-top:18px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);
  padding-top:16px;border-top:1px dotted rgba(93,83,70,.4);
}

/* Atelier card */
.card-letter{
  position:relative;padding:38px 32px;
  background:linear-gradient(180deg,#faf2dc 0%,#efe1bc 100%);
  border:1px solid rgba(93,83,70,.32);border-radius:2px;
  box-shadow:0 28px 60px -32px rgba(60,42,18,.55), 0 1px 0 rgba(255,247,222,.7) inset;
  transform:rotate(-1.4deg);
  font-family:var(--book);
}
.card-letter::before{
  content:'';position:absolute;inset:6px;border:1px dashed rgba(93,83,70,.22);border-radius:1px;pointer-events:none;
}
.card-letter__head{
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
  font:400 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute);
}
.card-letter__seal{font-size:18px;color:var(--vermilion)}
.card-letter__line{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:22px;line-height:1.42;color:var(--ink);
}
.card-letter__rule{height:1px;background:linear-gradient(90deg,transparent,rgba(93,83,70,.5),transparent);margin:18px 0}
.card-letter__small{font-size:13px;color:var(--ink-mute);line-height:1.55}

/* Contact */
.contact-btns{display:flex;gap:16px;margin-top:clamp(28px,2.4vw,40px);flex-wrap:wrap;justify-content:center}
.contact-btn{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:18px;padding:14px 28px;
  background:transparent;color:var(--ink);
  border:1px solid var(--ink);border-radius:1px;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
  letter-spacing:.005em;
}
.contact-btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.contact-btn--primary{background:var(--ink);color:var(--paper)}
.contact-btn--primary:hover{background:var(--ink-2);color:var(--paper)}

.flourish{margin-top:clamp(36px,3.6vw,60px);width:min(380px,72vw);color:var(--vermilion);opacity:.78}
.flourish svg{display:block;width:100%;height:auto}

.colophon{
  margin-top:clamp(40px,4vw,72px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  font:400 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.colophon__rule{flex:0 0 80px;height:1px;background:rgba(93,83,70,.4)}

/* ============================================================================
   REVEALS — slow, ink-on-paper feel
   ============================================================================ */
[data-reveal]{
  opacity:0;filter:blur(6px);transform:translateY(18px);
  transition:opacity 1.4s var(--ease-slow), filter 1.4s var(--ease-slow), transform 1.4s var(--ease-slow);
}
[data-reveal].is-visible{opacity:1;filter:blur(0);transform:translateY(0)}
.splitch{display:inline-block;opacity:0;filter:blur(8px);transition:opacity 1s var(--ease-slow), filter 1s var(--ease-slow)}
.splitch.is-visible{opacity:1;filter:blur(0)}

/* ============================================================================
   GATE
   ============================================================================ */
.gate{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 35%,#f4ecd6 0%,#e9dcb8 60%,#d8c690 100%);
  transition:opacity 1.4s var(--ease-slow), visibility 1.4s var(--ease-slow);
}
.gate.is-open{opacity:0;visibility:hidden;pointer-events:none}
.gate__bg{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.46  0 0 0 0 0.28  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  mix-blend-mode:multiply;opacity:.55;
}
.gate__inner{position:relative;z-index:2;text-align:center;padding:48px;max-width:520px}
.gate__loading{
  font:400 11px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--ink-mute);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:48px;
}
.dots{display:inline-flex;gap:3px}
.dots i{width:3px;height:3px;border-radius:50%;background:var(--vermilion);opacity:.4;animation:dotPulse 1.6s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes dotPulse{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}

.gate__hallmark{
  width:88px;height:88px;margin:0 auto 32px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);border-radius:50%;
}
.gate__star{font-size:36px;color:var(--vermilion);font-weight:400}

.gate__title{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(56px,6vw,84px);color:var(--ink);line-height:1;margin-bottom:14px;letter-spacing:-.01em;
}
.gate__sub{
  font-family:var(--book);font-style:italic;color:var(--ink-mute);
  font-size:18px;margin-bottom:42px;
}
.gate__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.gate__btn{
  min-height:48px;min-width:180px;padding:14px 26px;
  font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);
  border:1px solid var(--ink);border-radius:1px;background:transparent;
  touch-action:manipulation;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.gate__btn:hover{background:var(--ink);color:var(--paper)}
.gate__btn--primary{background:var(--ink);color:var(--paper)}
.gate__btn--primary:hover{background:var(--ink-2)}
.gate__small{
  margin-top:32px;font:400 11px/1.5 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:900px){
  .masthead{left:24px;right:24px}
  .folio{left:24px}
  .cursor-cue{right:24px;max-width:200px}
  .scene{padding:clamp(120px,16vh,160px) 24px}
  .essay__cols{grid-template-columns:1fr}
  .editions{grid-template-columns:1fr;gap:24px}
  .edition--mid{transform:none}
  .two-col{grid-template-columns:1fr}
  .card-letter{transform:rotate(-0.6deg)}
  body{cursor:auto}
  .nib-cursor{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
  [data-reveal]{opacity:1;filter:none;transform:none}
  .splitch{opacity:1;filter:none}
}