/* ===========================================================
   cheskygo.com — design system  (v4: ink / letterpress)
   Edit THIS file to change the look. The pipeline never touches it.
   One sheet for both pages: light cream, warm grain, dark petrol +
   warm blush as a two-color accent system.
   The typewriter header types itself via a small script (see handoff).
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400&family=Noto+Sans+Hebrew:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Special+Elite&display=swap');

:root{
  /* ---- paper + ink ---- */
  --paper:#EFEAE0;--paper-2:#E5DFD1;--paper-3:#F4EFE5;
  --ink:#1B1813;--ink-soft:#3C362D;--dim:#7C7363;
  /* ---- two-color accent system ---- */
  --spot:#47584E;        /* structure: lines, labels, accents */
  --spot-deep:#313E37;
  --warm:#F4E4D7;        /* light: washes, card / plate warmth */
  --glow:#FDFBF4;        /* cursor bloom */
  --hair:rgba(27,24,19,.15);--hair-2:rgba(27,24,19,.08);
  /* ---- fonts (originals kept; typewriter = main header only) ---- */
  --font-read:"Space Grotesk",system-ui,sans-serif;
  --font-poem:"Arimo","Noto Sans Hebrew",sans-serif;
  --font-mark:"Space Mono",ui-monospace,monospace;
  --font-type:"Special Elite","Courier New",monospace;
  /* ---- legacy aliases so nothing breaks ---- */
  --void:var(--paper);--current:var(--spot);--green-deep:var(--spot-deep);
  --green-mid:var(--spot);--black:var(--ink);--paper-dim:var(--dim);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;overflow-x:hidden;background:var(--paper);color:var(--ink)}
a{text-decoration:none;color:inherit}

/* paper grain — soft, static, warm */
body::before{
  content:"";position:fixed;inset:-60px;z-index:40;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url(%23n)'%20opacity='0.6'/%3E%3C/svg%3E");
  background-size:200px 200px;opacity:.26;mix-blend-mode:multiply}

/* ---------- motion primitives ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(11px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes travel{0%{top:-3%;opacity:0}10%{opacity:.5}74%{opacity:.5}90%{opacity:0}100%{top:103%;opacity:0}}
@keyframes inkBreath{0%,100%{opacity:.45}50%{opacity:.8}}
@keyframes blink{50%{opacity:0}}

/* =====================================================
   LANDING
   ===================================================== */
body.page-landing{font-family:var(--font-read);background:var(--paper)}

/* cursor: light, warm bloom in the grain */
.cursor-glow{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,16%), rgba(253,251,244,.62), rgba(253,251,244,0) 60%)}

/* the current — a faint printed margin rule + a slow ink bead */
.wire{position:fixed;top:0;right:0;width:1px;height:100%;
  background:linear-gradient(to bottom,var(--spot) 0%,var(--spot-deep) 45%,rgba(27,24,19,.22) 80%,transparent 100%);
  opacity:.5;z-index:5;animation:inkBreath 6.5s ease-in-out infinite}
.charge{position:fixed;top:0;right:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--spot);box-shadow:0 0 0 1px rgba(239,234,224,.6);z-index:6;opacity:.6;animation:travel 12s linear infinite}

.wrap{position:relative;z-index:2;max-width:1000px;margin-inline:auto;padding:0 28px}
.topnav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--hair);
  font-family:var(--font-mark);font-size:12px;letter-spacing:.04em;color:var(--ink-soft)}
.topnav .logo{font-family:var(--font-type);color:var(--ink);font-weight:400;font-size:15px;letter-spacing:.02em}
.topnav .spark{color:var(--spot);font-size:14px}

.hero{padding:84px 0 60px}
.hero .eyebrow,.hero p,.section-label,.card{opacity:0;animation:riseIn .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero .eyebrow{font-family:var(--font-mark);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--spot);margin-bottom:24px;animation-delay:.05s}
/* main header — typewriter face; the script types it and rests the caret after the last word */
.hero h1{font-family:var(--font-type);font-weight:400;font-size:clamp(40px,8.2vw,80px);line-height:1.1;letter-spacing:.004em;max-width:14ch;color:var(--ink);min-height:1.2em}
.hero h1 em,.hero h1 .em{font-style:normal;color:var(--spot)}
.hero h1 .caret{display:inline-block;width:0;height:.92em;border-right:.085em solid var(--spot);
  vertical-align:-.12em;margin-left:.06em;animation:blink 1.05s steps(1) infinite}
/* reader finishes the line — editable, ephemeral */
.hero h1 .finish{outline:none;color:var(--ink);caret-color:var(--spot);white-space:pre-wrap;word-break:break-word}
.hero h1 .finish:empty:not(:focus)::after{content:"";display:inline-block;width:0;height:.92em;
  border-right:.085em solid var(--spot);vertical-align:-.12em;margin-left:.02em;
  animation:blink 1.05s steps(1) infinite}
.hero p{margin-top:24px;max-width:50ch;color:var(--ink-soft);font-size:clamp(15px,2.4vw,18px);line-height:1.65;animation-delay:.30s}
.hero p+p{margin-top:14px}

.section-label{display:flex;align-items:baseline;gap:14px;margin:46px 0 22px;font-family:var(--font-mark);font-size:13px;letter-spacing:.08em;color:var(--dim);animation-delay:.46s}
.section-label .z{color:var(--spot)}
.section-label .rule{flex:1;height:1px;background:var(--hair)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{border:1px solid var(--hair);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;background:var(--paper-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(27,24,19,.03);
  transition:border-color .3s, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s}
.card:nth-child(1){animation-delay:.56s}.card:nth-child(2){animation-delay:.64s}
.card:nth-child(3){animation-delay:.72s}.card:nth-child(4){animation-delay:.80s}
.card:nth-child(5){animation-delay:.88s}.card:nth-child(6){animation-delay:.96s}
.card:nth-child(7){animation-delay:1.04s}.card:nth-child(8){animation-delay:1.12s}
.card:hover{border-color:rgba(71,88,78,.5);transform:translateY(-4px);box-shadow:0 12px 24px rgba(27,24,19,.10)}

.card .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;border-bottom:1px solid var(--hair);
  background:radial-gradient(95% 130% at 80% 12%, rgba(244,228,215,.4), transparent 58%),
    linear-gradient(135deg,var(--paper-3) 0%, var(--paper-2) 60%, var(--paper-3) 100%)}
/* hover: warm bloom washes across the plate */
.card .thumb::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(120% 130% at 78% 6%, rgba(244,228,215,.55), transparent 62%)}
.card:hover .thumb::before{opacity:1}
.card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(1.02) sepia(.12);
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .6s}
.card:hover .thumb img{transform:scale(1.045);filter:grayscale(.18) contrast(1.04) sepia(.03)}
.card .thumb::after{content:"";position:absolute;inset:0;z-index:2;mix-blend-mode:multiply;opacity:.16;
  background-image:radial-gradient(rgba(27,24,19,.6) .5px,transparent .6px);background-size:3px 3px}
.card .body{padding:20px 22px 26px}
.card .tag{font-family:var(--font-mark);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--spot);margin-bottom:12px}
.card .ptitle{position:relative;font-family:var(--font-poem);direction:rtl;text-align:right;
  font-weight:700;font-size:clamp(28px,5vw,40px);line-height:1.08;color:var(--spot)}
/* hover: a small structure rule draws in under the title (grows from the right, with the RTL text) */
.card .ptitle::after{content:"";position:absolute;right:0;bottom:-9px;height:2px;width:0;background:var(--spot);
  transition:width .45s cubic-bezier(.2,.7,.2,1)}
.card:hover .ptitle::after{width:40px}
.card .snip{font-family:var(--font-poem);direction:rtl;text-align:right;margin-top:14px;color:var(--ink-soft);font-weight:400;font-size:16px;line-height:1.7}

.lfoot{margin-top:70px;padding:26px 0 70px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;font-family:var(--font-mark);font-size:12px;color:var(--dim)}
.lfoot .out{color:var(--ink)}
.mark-type{font-family:var(--font-type)}

/* =====================================================
   POEM PAGE  (same sheet, same system)
   ===================================================== */
body.page-poem{font-family:var(--font-poem);background:var(--paper);color:var(--ink)}
body.page-poem .cursor-glow{display:none}
body.page-poem::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,26%), rgba(253,251,244,.55), rgba(253,251,244,0) 60%)}

.rwrap{position:relative;z-index:2;max-width:680px;margin-inline:auto;padding:0 26px}
.rtop{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--hair);
  font-family:var(--font-mark);font-size:12px;letter-spacing:.03em;color:var(--dim)}
.back{display:flex;align-items:center;gap:8px;color:var(--ink);font-family:var(--font-mark);font-size:12px}
.back .ar{color:var(--spot)}
.rtop .bsd{font-family:var(--font-poem);opacity:.55;font-size:13px}

/* poem entrance plays on page load */
body.page-poem .rplate,body.page-poem .rkicker,body.page-poem .rtitle,
body.page-poem .rtitle-rule,body.page-poem .rstanza,body.page-poem .rfig{opacity:0;animation:riseIn .75s cubic-bezier(.2,.7,.2,1) forwards}

.rplate{margin-top:28px;aspect-ratio:16/9;border-radius:2px;position:relative;overflow:hidden;border:1px solid var(--hair);
  background:radial-gradient(85% 130% at 80% 8%, rgba(244,228,215,.45), transparent 60%),
    linear-gradient(135deg,var(--paper-3) 0%, var(--paper-2) 60%, var(--paper-3) 100%);animation-delay:.05s}
.rplate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rplate::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.16;
  background-image:radial-gradient(rgba(27,24,19,.6) .5px,transparent .6px);background-size:3px 3px}
.rplate .cap{position:absolute;bottom:10px;left:12px;direction:ltr;
  font-family:var(--font-mark);font-size:10.5px;letter-spacing:.05em;color:var(--dim)}
.rplate .cap b{color:var(--spot);font-weight:400}

.rhead{padding-top:40px}
.rkicker{font-family:var(--font-mark);direction:ltr;text-align:right;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:14px;animation-delay:.14s}
.rtitle{font-family:var(--font-poem);direction:rtl;text-align:right;font-weight:700;
  font-size:clamp(40px,11vw,68px);line-height:1.05;color:var(--ink);animation-delay:.20s}
.rtitle-rule{width:46px;height:2px;background:var(--spot);margin-top:18px;float:right;clear:both;animation-delay:.28s}

.rpoem{clear:both;direction:rtl;text-align:right;padding:44px 0 10px;font-weight:400;
  font-size:clamp(20px,5.2vw,24px);line-height:1.85;color:#201D19}
.rstanza{margin-bottom:1.5em}
/* nth-of-type, not nth-child: figures sit between stanzas and must not
   shift the stanza sequence. Stanzas are <div>, figures are <figure>. */
.rstanza:nth-of-type(1){animation-delay:.36s}.rstanza:nth-of-type(2){animation-delay:.44s}
.rstanza:nth-of-type(3){animation-delay:.52s}.rstanza:nth-of-type(4){animation-delay:.60s}
.rstanza:nth-of-type(5){animation-delay:.68s}.rstanza:nth-of-type(6){animation-delay:.76s}
.rstanza:nth-of-type(7){animation-delay:.84s}.rstanza:nth-of-type(8){animation-delay:.92s}
.rstanza:nth-of-type(9){animation-delay:1.0s}.rstanza:nth-of-type(10){animation-delay:1.08s}
.rline{display:block}
/* the volta turns in the deep second ink */
.rstanza.volta{color:var(--spot-deep)}

/* ---- inline poem images ------------------------------------
   Same plate treatment as the header (hairline, halftone screen),
   but natural proportions — a poem's picture doesn't get cropped.
   ------------------------------------------------------------ */
.rfig{position:relative;margin:2.1em 0;border:1px solid var(--hair);border-radius:2px;overflow:hidden;
  background:linear-gradient(135deg,var(--paper-3) 0%, var(--paper-2) 60%, var(--paper-3) 100%)}
.rfig img{display:block;width:100%;height:auto}
.rfig::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.16;
  background-image:radial-gradient(rgba(27,24,19,.6) .5px,transparent .6px);background-size:3px 3px}
/* interleaved with the stanza delays above (.40 sits between .36 and .44) */
.rfig:nth-of-type(1){animation-delay:.40s}.rfig:nth-of-type(2){animation-delay:.48s}
.rfig:nth-of-type(3){animation-delay:.56s}.rfig:nth-of-type(4){animation-delay:.64s}
.rfig:nth-of-type(5){animation-delay:.72s}.rfig:nth-of-type(6){animation-delay:.80s}
.rfig:nth-of-type(7){animation-delay:.88s}.rfig:nth-of-type(8){animation-delay:.96s}
.rfig:nth-of-type(9){animation-delay:1.04s}.rfig:nth-of-type(10){animation-delay:1.12s}

.rfoot{direction:ltr;margin-top:56px;padding:24px 0 70px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;font-family:var(--font-mark);font-size:12px;color:var(--dim)}

@media (max-width:760px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.wrap,.rwrap{padding-left:20px;padding-right:20px}.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .charge{display:none}
  .wire{animation:none}
  body::before{animation:none}
  .hero h1 .caret{display:none}
  *{animation-duration:.001s!important;opacity:1!important}
}

/* =====================================================
   SEARCH  (floating button → expanding panel; both pages)
   ===================================================== */
.search{position:fixed;z-index:60;font-family:var(--font-mark)}
.search-toggle{width:48px;height:48px;border-radius:999px;border:1px solid rgba(27,24,19,.10);
  background:var(--spot);color:#F4EFE5;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 8px 22px rgba(31,42,36,.28);transition:transform .2s, background .2s, box-shadow .2s}
.search-toggle:hover{transform:translateY(-2px) scale(1.04);background:var(--spot-deep);box-shadow:0 12px 28px rgba(31,42,36,.34)}
.search-toggle svg{width:18px;height:18px;display:block}
.search-panel{position:fixed;left:14px;right:14px;top:14px;display:none;flex-direction:column;gap:12px;
  padding:14px 16px;border:1px solid rgba(255,255,255,.5);border-radius:18px;
  background:rgba(246,241,231,.66);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 18px 48px rgba(27,24,19,.18)}
.search.open .search-panel{display:flex;animation:searchIn .3s cubic-bezier(.2,.75,.25,1)}
.search.open .search-toggle{display:none}
@keyframes searchIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.search-row{display:flex;align-items:center;gap:8px}
.search-input{flex:1;font-family:var(--font-poem);font-size:17px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--hair);padding:8px 2px;outline:none}
.search-input::placeholder{color:var(--dim)}
.search-close{border:0;background:transparent;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;padding:4px}
.search-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--font-mark);font-size:11px;letter-spacing:.05em;color:var(--ink-soft);
  background:rgba(27,24,19,.045);border:1px solid rgba(27,24,19,.12);border-radius:999px;
  padding:6px 13px;cursor:pointer;transition:background .18s, border-color .18s, color .18s, transform .18s}
.chip:hover{border-color:var(--spot);color:var(--ink);transform:translateY(-1px)}
.chip.active{background:var(--spot);color:#fff;border-color:var(--spot)}
.search-empty{font-family:var(--font-mark);font-size:11px;color:var(--dim);padding:2px}
.card.hide{display:none}

/* poem-page tag row */
.rtags{direction:ltr;margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}
.rtags a{font-family:var(--font-mark);font-size:11px;letter-spacing:.03em;color:var(--spot);
  border:1px solid var(--hair);border-radius:999px;padding:5px 10px;transition:.18s}
.rtags a:hover{border-color:var(--spot)}