/* FONTLY story page (/story): "from stone to screen", six chapters of the Hebrew letter. Builds on app.css. */
@font-face{font-family:"ff-herzl";src:url("../fonts/herzl/Herzl-Black.woff2") format("woff2");font-weight:900;font-display:swap}

.story-page{--paper-ink:#1b1712;--paper-muted:#4f463b;--red-deep:#c23a1c;background:#000}
.story{max-width:none;padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}

.st-sec{position:relative;padding:clamp(72px,12vh,140px) var(--gutter);overflow:hidden}
.st-sec[data-bg="#2a2621"]{background:#2a2621}
.st-sec[data-bg="#3b3428"]{background:#3b3428}
.st-sec[data-bg="#e7dcc6"]{background:#e7dcc6}
.st-sec[data-bg="#f6f3ed"]{background:#f6f3ed}
.st-sec[data-bg="#ffffff"]{background:#fff}
/* with js one background runs behind the whole page and blends between chapters; without it each chapter paints its own */
.js .st-sec{background:transparent}
.st-sec.dark{color:#fff}
.st-sec.light{color:var(--paper-ink)}

/* ===== opening ===== */
.st-open{min-height:calc(100svh - 75px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-bottom:140px}
.st-open .eyebrow{margin:0 0 18px}
.st-h1{margin:0;font-family:"ff-herzl",var(--ui);font-weight:900;font-size:clamp(46px,10.4vw,170px);line-height:1;letter-spacing:-.01em;white-space:nowrap;max-width:100%}
@media (max-width:700px){.st-h1{white-space:normal;font-size:clamp(40px,17vw,120px);line-height:1.05}}
.st-h1 .dot{width:.16em;height:.16em;margin-inline-start:.05em}
.st-lead{max-width:480px;margin:28px 0 0;font-size:18px;line-height:1.6;color:var(--muted)}
.st-cue{position:absolute;bottom:28px;left:50%;width:44px;height:96px;margin-left:-22px;display:block}
.st-cue i{position:absolute;left:50%;top:0;bottom:10px;width:1px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.7))}
.st-cue::after{content:"";position:absolute;left:50%;bottom:6px;width:11px;height:11px;margin-left:-5px;border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red);transform:rotate(45deg);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{50%{opacity:.25;transform:translateY(-6px) rotate(45deg)}}

/* ===== chapters: text on the right, the letter on the left ===== */
.st-ch{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,80px);max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto}
.st-copy{max-width:480px}
.st-label{margin:0 0 14px;color:var(--red);font-size:15px;font-weight:700;letter-spacing:.02em}
.light .st-label{color:var(--red-deep)}
.st-ch h2{margin:0 0 18px;font-size:44px;line-height:1.1;font-weight:900;letter-spacing:-.01em}
.st-copy p:not(.st-label){margin:0;font-size:18px;line-height:1.7}
.dark .st-copy p:not(.st-label){color:#d9d3cc}
.light .st-copy p:not(.st-label){color:var(--paper-muted)}
.st-vis{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.ot{margin:0;font-size:150px;line-height:1.15;white-space:nowrap;direction:rtl}
.ot span{display:inline-block}

/* 1 stone: carved into a slab */
.slab{position:relative;width:min(100%,460px);aspect-ratio:5/4;display:grid;place-items:center;border-radius:6px;
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.07),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .47 0 0 0 0 .43 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #3a352f;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.7)}
.ot-stone{font-family:"Noto Sans Phoenician",serif;color:#8d857b;letter-spacing:.06em;
  text-shadow:-2px -2px 1px rgba(0,0,0,.75),1px 1px 0 rgba(255,255,255,.16),0 0 1px rgba(0,0,0,.4)}

/* 2 parchment: ink on skin */
.parch{position:relative;width:min(100%,460px);aspect-ratio:5/4;display:grid;place-items:center;border-radius:4px 10px 6px 12px;
  background:
    radial-gradient(90% 80% at 50% 45%,transparent 55%,rgba(105,78,40,.35)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #d8c8a4;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
.parch::before{content:"";position:absolute;inset:18% 12%;background:repeating-linear-gradient(transparent 0 37px,rgba(90,65,35,.18) 37px 38px);pointer-events:none}
.ot-ink{position:relative;font-family:"Noto Serif Hebrew",serif;font-weight:500;color:#3b2716;text-shadow:0 0 1px rgba(59,39,22,.5)}

/* 3 print: heavy, inked, slightly squashed into the page */
.ch-print .st-vis{min-height:300px}
.ot-press{font-family:"Frank Ruhl Libre",serif;font-weight:900;color:#1d1813;filter:url(#st-ink);
  text-shadow:0 0 1px rgba(29,24,19,.6),.5px .5px 0 rgba(29,24,19,.35)}

/* 4 newspaper: the letter in the middle of a page of small, blurred text */
.paper{position:relative;width:min(100%,500px);display:flex;flex-direction:column;gap:14px;padding:22px 22px 26px;background:#fff;border:1px solid #e3ddd1;box-shadow:0 24px 50px -30px rgba(40,30,20,.35);overflow:hidden}
.paper .mast{height:0;border-top:2px solid #b9b1a3;border-bottom:1px solid #b9b1a3;padding-top:4px}
.paper .txt{margin:0;columns:3;column-gap:16px;font:400 8px/1.55 "Frank Ruhl Libre",serif;color:#7d756a;text-align:justify;filter:blur(.55px);height:7.2em;overflow:hidden}
.paper .txt.b{height:10.8em}
.ot-news{display:block;text-align:center;font-family:"Frank Ruhl Libre",serif;font-weight:400;color:#141210;font-size:150px;line-height:1;white-space:nowrap}
/* 5 screen */
.screen{position:relative;width:min(100%,480px);aspect-ratio:16/10;display:grid;place-items:center;background:#000;border-radius:16px;border:10px solid #141414;box-shadow:0 0 0 1px #2a2a2a,0 40px 70px -35px rgba(0,0,0,.6)}
.screen::after{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 40%);pointer-events:none}
.stand{width:90px;height:34px;background:linear-gradient(#1a1a1a,#0d0d0d);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}
.ot-screen{display:flex;align-items:center;font-family:"ff-yossi",var(--ui);font-weight:700;color:#fff;font-size:130px;line-height:1}
.caret{display:inline-block;width:.055em;height:.78em;margin-inline-start:.06em;background:var(--red);animation:caret 1.05s steps(1) infinite}
.st-weight{width:min(100%,480px);margin-top:28px;display:grid;gap:8px}
.st-weight .lbl{font-size:15px;color:var(--paper-muted);display:flex;gap:8px}
.st-weight .lbl b{color:var(--paper-ink)}
.st-weight input{width:100%;accent-color:var(--red);height:28px;cursor:pointer}

/* ===== 6: now ===== */
.st-now{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding-bottom:clamp(60px,8vw,110px)}
.st-big{margin:0;font-size:clamp(44px,7vw,112px);line-height:.98;font-weight:900;letter-spacing:-.02em}
.st-big .dot{width:.16em;height:.16em;margin-inline-start:.05em}
.st-input{display:block;width:100%;max-width:640px;margin:36px 0 28px;padding:16px 22px;border-radius:99px;border:1px solid var(--line-2);background:var(--card);color:#fff;font:600 20px var(--ui);outline:none;transition:border-color .2s}
.st-input::placeholder{color:#8a837c}
.st-input:focus{border-color:var(--red)}
.st-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.st-card{display:grid;grid-template-rows:auto auto;gap:18px;padding:24px;min-width:0;text-decoration:none;color:#fff;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .25s,transform .25s}
.st-card:hover{border-color:var(--red);transform:translateY(-3px)}
.st-card .smp{font-size:clamp(56px,6vw,84px);line-height:1.15;min-height:1.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-card .nm{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.st-card .nm b{font-size:24px;font-weight:900}
.st-card .nm span{color:var(--muted);font-size:14px}

/* ===== timeline (desktop) + progress bar (mobile) ===== */
.st-line{--c:rgba(255,255,255,.55);--c2:#fff;position:fixed;left:clamp(14px,2vw,30px);top:50%;z-index:15;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px;padding:6px 0;direction:ltr;transition:opacity .3s}
.st-line::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:var(--c);opacity:.5}
.st-line.on-light{--c:rgba(27,23,18,.55);--c2:#1b1712}
.st-line a{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--c);font-size:13px;font-weight:700;min-height:24px}
.st-line a i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--c);background:transparent;flex:none;transition:transform .3s,background .3s,border-color .3s}
.st-line a span{opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.st-line a:hover span,.st-line a:focus-visible span,.st-line a.cur span{opacity:1;transform:none}
.st-line a.cur{color:var(--c2)}
.st-line a.cur i{background:var(--red);border-color:var(--red);transform:scale(1.35)}
.st-line.away{opacity:0;pointer-events:none}
.st-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;display:none;pointer-events:none}
.st-progress i{display:block;height:100%;background:var(--red);transform-origin:right;transform:scaleX(0)}

/* ===== full story (expand) ===== */
.st-more{margin-top:22px}
.st-more-body{overflow:hidden}
.st-copy .st-more-body p{margin:0 0 14px;font-size:16px;line-height:1.75}
.st-copy .st-more-body p:last-child{margin-bottom:0}
.st-more-btn{display:none;align-items:center;gap:10px;margin-top:14px;padding:10px 18px;border:1px solid currentColor;border-radius:999px;background:transparent;color:var(--red);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .25s,color .25s}
.light .st-more-btn{color:var(--red-deep)}
.st-more-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.st-more-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.st-more-btn i{width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg);transition:transform .35s}
.st-more.ready .st-more-btn{display:inline-flex}
.st-more.ready .st-more-body{position:relative;max-height:5.3em;cursor:pointer;filter:blur(2.2px);opacity:.75;-webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent 100%);mask-image:linear-gradient(to bottom,#000 10%,transparent 100%);transition:max-height .7s cubic-bezier(.2,.8,.2,1),filter .5s ease,opacity .5s ease;user-select:none}
.st-more.ready.open .st-more-body{filter:none;opacity:1;-webkit-mask-image:none;mask-image:none;cursor:auto;user-select:auto}
.st-more.open .st-more-btn i{transform:translateY(2px) rotate(135deg)}
@media (prefers-reduced-motion:reduce){.st-more.ready .st-more-body,.st-more-btn i{transition:none}}

/* ===== entrances (once) ===== */
.js .st-up,.js .st-copy>*{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.js .st-copy>:nth-child(2){transition-delay:.08s}.js .st-copy>:nth-child(3){transition-delay:.16s}
.js .st-open .st-up:nth-child(2){transition-delay:.12s}.js .st-open .st-up:nth-child(3){transition-delay:.26s}
.js .in .st-up,.js .in .st-copy>*{opacity:1;transform:none}
.js .st-vis{opacity:0;transition:opacity .9s ease .35s}
.js .in .st-vis{opacity:1}
/* stone: carved right to left */
.js .ot-stone span{clip-path:inset(0 0 0 100%)}
.js .in .ot-stone span{clip-path:inset(0 0 0 0);transition:clip-path 1.8s cubic-bezier(.65,0,.35,1) .6s}
/* parchment: the ink runs in */
.js .ot-ink span{-webkit-mask-image:linear-gradient(to left,#000 45%,transparent 55%);mask-image:linear-gradient(to left,#000 45%,transparent 55%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:0 0;mask-position:0 0;filter:blur(3px);opacity:.4}
.js .in .ot-ink span{-webkit-mask-position:100% 0;mask-position:100% 0;filter:blur(0);opacity:1;transition:-webkit-mask-position 2.4s ease .6s,mask-position 2.4s ease .6s,filter 1.6s ease 1.2s,opacity 1.2s ease .6s}
/* print: pressed onto the page */
.js .ot-press span{opacity:0;transform:scale(1.9)}
.js .in .ot-press span{opacity:1;transform:scale(1);transition:opacity .5s ease .55s,transform .75s cubic-bezier(.55,0,.75,.2) .55s;animation:thud .5s ease-out 1.3s both}
@keyframes thud{0%{transform:scale(1)}35%{transform:scale(.965,.95)}100%{transform:scale(1)}}
/* newspaper: settles in */
.js .ot-news{opacity:0;transform:translateY(12px)}
.js .in .ot-news{opacity:1;transform:none;transition:opacity 1s ease .6s,transform 1.1s cubic-bezier(.2,.8,.2,1) .6s}
/* now: cards one after the other */
.js .st-now>*:not(.st-cards){opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.js .st-now.in>*{opacity:1;transform:none}
.js .st-card{opacity:0;transform:translateY(30px)}
.js .st-now.in .st-card{opacity:1;transform:none;transition:opacity .7s ease calc(.25s + var(--i) * .09s),transform .8s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * .09s),border-color .25s}
.js .st-now.in .st-card:hover{transform:translateY(-3px);transition-delay:0s}

/* ===== responsive ===== */
@media (min-width:901px){.st-sec{padding-left:max(var(--gutter),120px)}}
@media (max-width:1100px){.st-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .st-line{display:none}
  .st-progress{display:block}
  /* one column: label and headline, then the letter, then the text, so the picture shows up without scrolling past the story */
  .st-ch{grid-template-columns:1fr;min-height:0;align-items:start;gap:0}
  .st-copy{display:contents}
  .st-copy>*{order:4}
  .st-copy>.st-label{order:1}
  .st-copy>h2{order:2}
  .st-ch .st-vis{order:3;margin:10px 0 30px}
  .st-ch h2{font-size:32px}
  .ot{font-size:96px}
  .ot-news{font-size:96px}
  .ot-screen{font-size:96px}
  .slab,.parch,.paper,.screen{width:min(100%,420px)}
  .ch-print .st-vis{min-height:200px}
}
@media (max-width:640px){
  .st-cards{grid-template-columns:1fr}
  .st-open{padding-bottom:130px}
  .st-input{font-size:18px}
  .paper{padding:18px 14px 20px}
}
@media (prefers-reduced-motion:reduce){
  .st-cue::after,.caret,.ot-press span{animation:none!important}
}
.nw{white-space:nowrap}