:root{
    --paper:#F7F2E8;
    --paper-warm:#EFE9DB;
    --ink:#1F1A14;
    --ink-soft:#3D352A;
    --ink-quiet:#6B6055;
    --rule:#D9CFB9;
    --accent:#7A8266;
    --accent-deep:#4F5642;
    --gold:#A88A4A;
    --max:920px;
    --reading:680px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"EB Garamond", Georgia, serif;
    font-size:19px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* subtle paper grain via gradient */
  body::before{
    content:"";
    position:fixed;inset:0;
    pointer-events:none;
    z-index:1;
    background-image:
      radial-gradient(circle at 25% 25%, rgba(122,130,102,0.03) 0, transparent 35%),
      radial-gradient(circle at 75% 75%, rgba(168,138,74,0.025) 0, transparent 40%);
  }

  a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .2s}
  a:hover{border-bottom-color:var(--ink)}

  .wrap{max-width:var(--max);margin:0 auto;padding:0 32px;position:relative;z-index:2}
  .reading{max-width:var(--reading);margin:0 auto}

  /* ====== top bar ====== */
  .topbar{
    padding:28px 0;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-family:"Cormorant Garamond", serif;
    font-size:14px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ink-quiet);
  }
  .topbar .mark{font-weight:500;letter-spacing:0.22em}
  .topbar nav a{
    border:none;
    margin-left:28px;
    color:var(--ink-quiet);
    transition:color .2s;
  }
  .topbar nav a:hover{color:var(--ink)}
  @media (max-width:600px){
    .topbar{flex-direction:column;align-items:flex-start;gap:14px}
    .topbar nav a{margin-left:0;margin-right:20px}
  }

  /* ====== HERO — portrait + greeting ====== */
  .hero{
    padding:60px 0 88px;
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap:64px;
    align-items:center;
  }
  @media (max-width:760px){
    .hero{grid-template-columns:1fr;padding:32px 0 56px;gap:40px}
  }
  .hero-portrait{
    position:relative;
    aspect-ratio: 3 / 4;
    overflow:hidden;
    box-shadow:
      0 30px 60px -28px rgba(31,26,20,0.35),
      0 60px 90px -40px rgba(31,26,20,0.20);
  }
  .hero-portrait img{
    width:100%;height:100%;object-fit:cover;display:block;
  }

  .hero-text h1{
    font-family:"Cormorant Garamond", serif;
    font-weight:400;
    font-size:clamp(42px, 6.6vw, 64px);
    line-height:1;
    letter-spacing:-0.005em;
    margin-bottom:18px;
  }
  .hero-text .role{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:22px;
    color:var(--ink-soft);
    margin-bottom:32px;
  }
  .hero-text .lede{
    font-size:19px;
    color:var(--ink-soft);
    max-width:34ch;
    margin-bottom:36px;
  }
  .hero-text .actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
  .btn{
    display:inline-block;
    font-family:"Cormorant Garamond", serif;
    font-size:14px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    padding:13px 26px;
    border:1px solid var(--ink);
    color:var(--ink);
    background:transparent;
    transition:background .2s, color .2s;
  }
  .btn:hover{background:var(--ink);color:var(--paper)}
  .btn-quiet{
    border:none;
    padding:13px 0;
    color:var(--ink-quiet);
    border-bottom:1px solid var(--rule);
  }
  .btn-quiet:hover{color:var(--ink);background:transparent;border-bottom-color:var(--ink)}

  /* ====== section rule ====== */
  .rule{
    text-align:center;
    margin:96px 0 64px;
    color:var(--accent);
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:13px;
    letter-spacing:0.32em;
    text-transform:lowercase;
  }
  .rule::before, .rule::after{
    content:"";
    display:inline-block;
    width:42px;height:1px;
    background:var(--accent);
    vertical-align:middle;
    margin:0 18px;
    opacity:0.45;
  }

  /* ====== HELLO section ====== */
  .hello{padding:24px 0}
  .hello h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:400;
    font-size:clamp(32px, 4.4vw, 44px);
    line-height:1.15;
    margin-bottom:32px;
    color:var(--ink);
    max-width:24ch;
  }
  .hello p{
    font-size:20px;
    color:var(--ink-soft);
    margin-bottom:1.1em;
    max-width:62ch;
  }
  .hello .sign{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:22px;
    color:var(--accent-deep);
    margin-top:8px;
  }

  /* ====== BOOK section ====== */
  .book{
    padding:64px 0;
    display:grid;
    grid-template-columns: 0.85fr 1fr;
    gap:64px;
    align-items:center;
  }
  @media (max-width:760px){
    .book{grid-template-columns:1fr;gap:48px;padding:48px 0}
  }
  /* Placeholder cover — replace .cover-art block with <img src="assets/cover.jpg"> when ready */
  .cover{
    aspect-ratio: 2 / 3;
    background:linear-gradient(150deg, #EFE7D4 0%, #E5DBC1 60%, #D8CBAA 100%);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.04),
      0 20px 40px -16px rgba(31,26,20,0.25),
      0 40px 60px -28px rgba(31,26,20,0.20);
    position:relative;
    border-radius:1px;
    overflow:hidden;
    max-width:340px;
    width:100%;
    justify-self:center;
  }
  .cover-art{
    position:absolute;inset:0;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:32px;
    text-align:center;
  }
  .cover-art .author-tag{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:14px;
    color:var(--ink-soft);
    letter-spacing:0.05em;
    margin-bottom:18px;
  }
  .cover-art .title{
    font-family:"Cormorant Garamond", serif;
    font-weight:400;
    font-size:clamp(26px, 4.5vw, 38px);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink);
    line-height:1.15;
  }
  .cover-art .ornament{margin:22px 0 18px;width:36px;height:1px;background:var(--accent)}
  .cover-art .imprint{
    font-family:"Cormorant Garamond", serif;
    font-size:11px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--ink-quiet);
  }
  .cover img{width:100%;height:100%;object-fit:cover;display:block}

  .book-info .label{
    font-family:"Cormorant Garamond", serif;
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:14px;
  }
  .book-info h3{
    font-family:"Cormorant Garamond", serif;
    font-weight:400;
    font-size:clamp(34px, 5vw, 48px);
    line-height:1.05;
    margin-bottom:14px;
  }
  .book-info .tagline{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:20px;
    color:var(--ink-soft);
    margin-bottom:24px;
  }
  .book-info p{
    font-size:19px;
    color:var(--ink-soft);
    margin-bottom:1em;
  }
  .book-info .meta-line{
    font-family:"Cormorant Garamond", serif;
    font-size:13px;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--ink-quiet);
    margin:24px 0 28px;
  }

  /* ====== SAMPLER ====== */
  .sampler{padding:32px 0}

  .theme-group{
    padding:64px 0;
    border-top:1px solid var(--rule);
  }
  .theme-group:first-child{border-top:none}

  .theme-header{
    text-align:center;
    max-width:34ch;
    margin:0 auto 56px;
  }
  .theme-header .meta{
    font-family:"Cormorant Garamond", serif;
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:12px;
  }
  .theme-header h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:400;
    font-size:clamp(30px, 4.4vw, 40px);
    line-height:1.15;
    margin-bottom:10px;
  }
  .theme-header .epigraph{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    color:var(--ink-quiet);
    font-size:18px;
  }

  /* Individual poem — two variants */
  .poem-block{
    padding:48px 0;
  }
  .poem-block + .poem-block{
    border-top:1px solid var(--rule);
  }

  /* Plain poem (no illustration) — block is centered in page, text stays left-aligned */
  .poem-plain{
    text-align:center;
  }
  .poem-plain .poem-text{
    display:inline-block;
    text-align:left;
    max-width:32em;
  }

  /* Ornamented poem — small illustration centered ABOVE a centered poem */
  .poem-ornamented{
    text-align:center;
  }
  .poem-ornamented .ornament-top{
    margin-bottom:32px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
  }
  .poem-ornamented .ornament-top img{
    max-height:140px;
    width:auto;
    mix-blend-mode:multiply;
  }
  .poem-ornamented .poem-text{
    display:inline-block;
    text-align:left;
    max-width:32em;
  }

  /* Illustrated poem — two-column on desktop */
  .poem-illustrated{
    display:grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap:56px;
    align-items:center;
  }
  .poem-illustrated.reverse{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .poem-illustrated.reverse .illustration{order:2}
  .poem-illustrated.reverse .poem{order:1}
  @media (max-width:720px){
    .poem-illustrated,
    .poem-illustrated.reverse{
      grid-template-columns:1fr;
      gap:32px;
    }
    .poem-illustrated.reverse .illustration{order:0}
    .poem-illustrated.reverse .poem{order:1}
  }

  .illustration{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .illustration img{
    max-width:100%;
    max-height:520px;
    height:auto;
    display:block;
    mix-blend-mode: multiply; /* makes the white-bg illustrations sit nicely on cream */
  }
  /* small ornament-style illustrations */
  .illustration.small img{
    max-height:240px;
  }

  /* Poem typography */
  .poem{
    font-size:19px;
    line-height:1.85;
    color:var(--ink);
  }
  .poem h4{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-weight:500;
    font-size:22px;
    margin-bottom:18px;
    color:var(--ink);
  }
  .poem p{margin-bottom:1em}
  .poem .tag{
    display:block;
    font-style:italic;
    color:var(--accent-deep);
    margin-top:1.2em;
    text-align:right;
    font-size:17px;
  }

  /* For the haiku-style brief poem */
  .poem.brief{font-size:21px;line-height:1.7}

  /* ====== back cover feature ====== */
  .back-cover-feature{
    padding:32px 0 64px;
  }
  .awakening-title{
    font-family:"Cormorant Garamond", serif !important;
    font-style:italic;
    font-weight:400 !important;
    font-size:22px !important;
    color:var(--ink-soft) !important;
    margin-bottom:24px !important;
    text-transform:lowercase;
    letter-spacing:0.02em;
  }
  .awakening-tag{
    text-align:left !important;
    margin-top:1em !important;
  }
  .awakening-tag::before{
    content:none;
  }

  /* ====== closing ====== */
  .closing{
    padding:88px 0 32px;
    text-align:center;
  }
  .closing p{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:24px;
    color:var(--accent-deep);
    line-height:1.5;
  }

  /* ====== buy strip near bottom ====== */
  .buy-strip{
    padding:72px 0 80px;
    text-align:center;
    border-top:1px solid var(--rule);
    margin-top:48px;
  }
  .buy-strip .pull{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:22px;
    color:var(--ink-soft);
    max-width:30ch;
    margin:0 auto 28px;
    line-height:1.45;
  }
  .buy-strip .meta{
    font-family:"Cormorant Garamond", serif;
    font-size:13px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--ink-quiet);
    margin-top:20px;
  }

  /* ====== footer ====== */
  footer{
    padding:48px 0 56px;
    border-top:1px solid var(--rule);
    font-family:"Cormorant Garamond", serif;
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-quiet);
    text-align:center;
  }
  footer .row{margin-bottom:8px}
  footer a{color:var(--ink-quiet);border:none}
  footer a:hover{color:var(--ink)}

/* ====== shared nav (3 pages) ====== */
.topbar nav a.current{color:var(--ink);border-bottom:1px solid var(--rule)}

/* ====== page header for Writing / Twilight ====== */
.page-head{padding:56px 0 24px;max-width:var(--reading);margin:0 auto}
.page-head .kicker{font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.page-head h1{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(38px,6vw,56px);line-height:1.05;margin-bottom:18px}
.page-head .sub{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:21px;color:var(--ink-soft);max-width:40ch}
.page-head p.intro{font-size:19px;color:var(--ink-soft);margin-top:24px;max-width:62ch}

/* ====== Hello section with candle photo ====== */
.hello-grid{display:grid;grid-template-columns:1fr 240px;gap:48px;align-items:start;max-width:var(--max);margin:0 auto}
.hello-grid .candle{aspect-ratio:3/4;overflow:hidden;box-shadow:0 20px 40px -20px rgba(31,26,20,.35)}
.hello-grid .candle img{width:100%;height:100%;object-fit:cover;display:block}
.hello-grid .caption{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:14px;color:var(--ink-quiet);margin-top:10px;text-align:center}
@media (max-width:760px){.hello-grid{grid-template-columns:1fr}.hello-grid .candle{max-width:260px;margin:0 auto}}

/* ====== flipbook ====== */
.flip{max-width:var(--max);margin:0 auto;padding:16px 0 32px}
.flip .flip-label{text-align:center;font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.flip-stage{position:relative;margin:0 auto;display:flex;justify-content:center;align-items:stretch;gap:0;perspective:2200px;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.flip-page{width:min(46%,330px);aspect-ratio:715/1105;background:#fff;box-shadow:0 18px 40px -22px rgba(31,26,20,.45);position:relative;overflow:hidden;transform-origin:left center;transition:transform .55s ease, opacity .4s ease}
.flip-page.left{transform-origin:right center}
.flip-page img{width:100%;height:100%;object-fit:cover;display:block}
.flip-page.turning-out{transform:rotateY(-80deg);opacity:0}
.flip-page.turning-in{animation:turnin .55s ease both}
@keyframes turnin{from{transform:rotateY(80deg);opacity:0}to{transform:none;opacity:1}}
.flip-page.turning-out-back{transform:rotateY(80deg);opacity:0}
.flip-page.turning-in-back{animation:turninb .55s ease both}
@keyframes turninb{from{transform:rotateY(-80deg);opacity:0}to{transform:none;opacity:1}}
.flip-gutter{width:1px;background:linear-gradient(to bottom,transparent,rgba(31,26,20,.25),transparent)}
.flip-controls{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:22px;font-family:"Cormorant Garamond",serif;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-quiet)}
.flip-controls button{background:none;border:1px solid var(--rule);color:var(--ink);font:inherit;letter-spacing:.18em;text-transform:uppercase;padding:9px 18px;cursor:pointer;transition:background .2s,color .2s}
.flip-controls button:hover{background:var(--ink);color:var(--paper)}
.flip-controls button:disabled{opacity:.35;cursor:default;background:none;color:var(--ink)}
.flip-hint{text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:14px;color:var(--ink-quiet);margin-top:10px}
@media (max-width:640px){.flip-page{width:min(84%,340px)}.flip-page.left,.flip-gutter{display:none}}

/* ====== bleed ornament (dragonfly entering from page edge) ====== */
.poem-bleed{position:relative;overflow:hidden}
.poem-bleed .bleed-art{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(40%,300px);opacity:.85;mix-blend-mode:multiply;pointer-events:none;-webkit-mask-image:linear-gradient(to right,#000 55%,transparent 100%);mask-image:linear-gradient(to right,#000 55%,transparent 100%)}
.poem-bleed .poem{position:relative;z-index:1}
@media (max-width:640px){.poem-bleed .bleed-art{width:50%;opacity:.28}}

/* ====== Writing entries ====== */
.works{max-width:var(--reading);margin:0 auto;padding:24px 0 48px}
.work{padding:48px 0;border-top:1px solid var(--rule)}
.work:first-child{border-top:none}
.work .label{font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.work .label .award{color:var(--accent-deep);font-weight:600}
.work h3{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(26px,3.8vw,34px);line-height:1.15;margin-bottom:12px}
.work .prompt{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:19px;color:var(--ink-quiet);margin-bottom:22px;max-width:52ch}
.work p.abs{font-size:19px;color:var(--ink-soft);margin-bottom:1em}
.work .outcome{display:grid;grid-template-columns:120px 1fr;gap:8px 18px;margin-top:20px;padding-top:14px;border-top:1px dotted var(--rule);font-size:17px}
.work .outcome dt{font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-quiet);padding-top:4px}
.work .outcome dd{color:var(--ink-soft)}
.note{max-width:var(--reading);margin:0 auto;padding:40px 0 24px;border-top:1px solid var(--rule)}
.note .label{font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-quiet);margin-bottom:14px}
.note p{font-size:17px;color:var(--ink-soft);margin-bottom:.8em}

/* ====== Twilight ====== */
.forthcoming{max-width:var(--reading);margin:0 auto;padding:16px 0 48px}
.forthcoming .title-card{text-align:center;padding:56px 24px;border:1px solid var(--rule);margin-bottom:40px}
.forthcoming .title-card .k{font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.forthcoming .title-card h2{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(44px,8vw,72px);letter-spacing:.06em;text-transform:uppercase;line-height:1;margin-bottom:14px}
.forthcoming .title-card .by{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:20px;color:var(--ink-soft)}
.forthcoming p{font-size:19px;color:var(--ink-soft);margin-bottom:1em}
.samples-empty{text-align:center;padding:40px 0;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:19px;color:var(--ink-quiet)}

/* ====== weight pass: headings + nav more present ====== */
.topbar{font-size:15px;letter-spacing:.2em}
.topbar .mark{font-weight:600;color:var(--ink);font-size:16px}
.topbar nav a{color:var(--ink-soft);font-weight:500;padding-bottom:4px}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a.current{color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--accent-deep)}
.hero-text h1,.page-head h1,.hello h2,.book-info h3,.theme-header h2,.work h3,.forthcoming .title-card h2{font-weight:500;color:var(--ink)}
.hero-text h1,.page-head h1{font-weight:600;letter-spacing:-.01em}
.theme-header h2{font-weight:600}
.work h3{font-weight:600}
.page-head .kicker,.book-info .label,.theme-header .meta,.work .label,.flip .flip-label{color:var(--accent-deep);font-weight:600}
.rule{color:var(--accent-deep);font-weight:500}
.poem h4,.poem-text h4{font-weight:600;color:var(--ink)}

/* ====== Writing labels: legible award + venue ====== */
.work .label{font-size:14px;letter-spacing:.14em;color:var(--ink-soft);font-weight:500;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:16px}
.work .label .award{display:inline-block;font-size:12px;letter-spacing:.22em;font-weight:700;color:var(--paper);background:var(--accent-deep);padding:5px 11px 4px;border-radius:2px}
.work .prompt{color:var(--ink-soft)}
.work .outcome dt{color:var(--ink-soft);font-weight:600}

/* ====== Twilight cover spread ====== */
.spread{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:720px;margin:8px auto 10px;align-items:end}
.spread-page{margin:0;position:relative}
.spread-page img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover;box-shadow:0 24px 50px -24px rgba(31,26,20,.45)}
.spread-page.back img{box-shadow:0 24px 50px -24px rgba(31,26,20,.45),inset -18px 0 24px -22px rgba(31,26,20,.35)}
.spread-page.front img{box-shadow:0 24px 50px -24px rgba(31,26,20,.45),inset 18px 0 24px -22px rgba(31,26,20,.35)}
.spread-page figcaption{text-align:center;font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-quiet);margin-top:12px}
.spread-note{text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;color:var(--ink-quiet);margin-bottom:44px}
@media (max-width:560px){.spread{grid-template-columns:1fr;gap:28px;max-width:320px}.spread-page.back{order:2}.spread-page.front{order:1}}

/* ====== dialogue poems ====== */
.dialogue{max-width:var(--reading);margin:0 auto;padding:40px 0 56px;border-top:1px solid var(--rule)}
.dialogue:first-of-type{border-top:none}
.dialogue h4{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;font-size:24px;margin-bottom:26px;text-align:center}
.dialogue .v{font-size:19px;line-height:1.8;color:var(--ink);margin-bottom:22px;max-width:30em}
.dialogue .v p{margin-bottom:.9em}
.dialogue .v p:last-child{margin-bottom:0}
.dialogue .v.a{margin-right:auto;text-align:left}
.dialogue .v.b{margin-left:auto;text-align:right;color:var(--ink-soft)}
.dialogue .sep{text-align:center;color:var(--accent);letter-spacing:.4em;margin:8px 0 30px;font-family:"Cormorant Garamond",serif}
.poem.prose .poem-text{max-width:34em}
.poem.prose p{margin-bottom:1.1em}
@media (max-width:560px){.dialogue .v{max-width:88%}}