/* ============================================================
   KOZY — Journal · "Koziology" (ink)
   Loaded after sensory.css. Index + article pages.
   ============================================================ */

/* ---------- index ---------- */
/* the journal hero — staged like the home hero: the Ondol Dusk artwork, the wordmark up in the dark, the notes down in the warmth */
.hero.j-hero{max-width:none;margin:0;padding:6.5rem var(--gutter) 2.2rem;min-height:100svh}
.hero.j-hero .cap.top{display:block;padding-top:6vh;color:var(--ivory-70)}
.hero.j-hero .word{max-width:none;padding-top:0;margin:.5rem 0 auto -.04em;color:var(--ivory)}
.hero.j-hero .line{align-items:baseline;gap:1rem 3rem}
.hero.j-hero .line .lede{max-width:50ch;color:var(--ink);margin:0}
.hero.j-hero .line .cap{color:var(--ink-70);white-space:nowrap}
.hero.j-hero .glyph{z-index:1;top:5rem;opacity:.08}
.j-hero .word{font-family:var(--display);font-weight:300;font-size:clamp(4.2rem,15vw,15rem);line-height:.9;letter-spacing:-.035em;font-variation-settings:"opsz" 144,"SOFT" 40;white-space:nowrap;margin-left:-.04em}
.j-hero .word em{font-variation-settings:"opsz" 144,"SOFT" 100}
.j-hero .glyph{position:absolute;right:var(--gutter);top:4.5rem;font-family:var(--kr);font-weight:200;font-size:clamp(7rem,16vw,15rem);line-height:.9;color:var(--ivory);opacity:.07;pointer-events:none}
.notes{max-width:1280px;margin:0 auto;padding:clamp(2rem,5vh,4rem) var(--gutter) 0}
.note{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,5rem);align-items:center;padding:clamp(2.5rem,6vh,4.5rem) 0;border-top:1px solid var(--ivory-18);text-decoration:none;color:inherit}
.note:last-child{border-bottom:1px solid var(--ivory-18)}
.note .swatch{position:relative;aspect-ratio:16/10;overflow:hidden;--zoom:600%;--drift:14%;--breath:5%}
.note .swatch svg{position:absolute;inset:0;width:100%;height:100%;padding:clamp(1rem,3vw,2.5rem)}
.note .swatch .kr{position:absolute;right:.6rem;bottom:.2rem;font-family:var(--kr);font-weight:200;font-size:clamp(4rem,7vw,7rem);line-height:1;color:var(--ivory);opacity:.28;z-index:3}
.note .num{font-family:var(--display);font-weight:300;font-size:1.1rem;color:var(--amber);font-variation-settings:"opsz" 40;margin-bottom:.9rem;display:block}
.note h2{font-size:clamp(1.9rem,3.6vw,3.4rem);max-width:18ch;line-height:1.02;transition:color var(--slow) ease}
.note:hover h2{color:#fffdf6}
.note .std{color:var(--ivory-70);margin-top:1.1rem;max-width:52ch}
.note .meta{margin-top:1.2rem;display:block}
.note .go{display:inline-block;margin-top:1.4rem}
.note:nth-child(even) .swatch{order:2}
.note:nth-child(1) .swatch{--base:.08}
.note:nth-child(2) .swatch{--base:.4}
.note:nth-child(3) .swatch{--base:.7}
.note .swatch .line-art{stroke:var(--ivory)}
.note .swatch .line-art .heat{stroke:#f1c9a4}
.soon{max-width:1280px;margin:0 auto;padding:clamp(2rem,5vh,3.5rem) var(--gutter) 0;color:var(--ivory-45);font-size:14.5px;max-width:60ch}
.j-finale{--base:1;--zoom:300%;--drift:0%;--breath:0%;margin-top:clamp(5rem,12vh,9rem);min-height:70svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--ink);padding:6rem 1.5rem 5rem}
.j-finale h2{color:var(--ink);max-width:12ch}
.j-finale .lede{color:var(--ink-70);margin:1.4rem auto 0;max-width:40ch}
.j-finale .row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}
.j-finale .btn{border-color:var(--ink-45);color:var(--ink)}
.j-finale .btn:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.j-finale .btn.solid{border-color:var(--ink);background:var(--ink);color:var(--ivory)}
.j-finale .btn.solid:hover{background:var(--ink-deep)}
.j-finale .cap{color:var(--ink-45);margin-top:1.2rem}
@media (max-width:900px){.note{grid-template-columns:1fr;gap:1.4rem}.note:nth-child(even) .swatch{order:0}.hero.j-hero{padding-top:6rem}.j-hero .word{white-space:normal}.j-hero .glyph{display:none}.hero.j-hero .line .down{margin-left:0}}

/* ---------- article ---------- */
.progress{position:fixed;left:0;top:0;height:2px;width:0;background:var(--amber);z-index:101;opacity:.85;transition:width .3s linear}
.a-hero{padding:8.5rem var(--gutter) 0;max-width:1280px;margin:0 auto}
.a-hero .crumb{font-size:12.5px;letter-spacing:.08em;color:var(--ivory-70);text-decoration:none}
.a-hero .crumb a{color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--ivory-45)}
.a-hero h1{font-size:clamp(2.6rem,6vw,6.2rem);max-width:16ch;margin-top:1.2rem}
.a-hero h1 em{font-variation-settings:"opsz" 144,"SOFT" 60}
.a-hero .std{font-family:var(--display);font-weight:300;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.4;max-width:40ch;margin-top:1.6rem;font-variation-settings:"opsz" 40;color:var(--ivory)}
.a-hero .by{display:block;margin-top:1.6rem}
.a-art{position:relative;max-width:1280px;margin:clamp(2.5rem,6vh,4.5rem) auto 0;padding:0 var(--gutter)}
.a-art .swatch{position:relative;aspect-ratio:21/9;overflow:hidden;--zoom:600%;--drift:16%;--breath:5%}
.a-art .swatch svg{position:absolute;inset:0;width:100%;height:100%;padding:clamp(1.5rem,4vw,3.5rem)}
.a-art .swatch .line-art{stroke:var(--ivory)}
.a-art .swatch .line-art .heat{stroke:#f1c9a4}
.a-art .swatch .kr{position:absolute;right:1rem;bottom:.4rem;font-family:var(--kr);font-weight:200;font-size:clamp(5rem,9vw,9rem);line-height:1;color:var(--ivory);opacity:.28;z-index:3}
.a-body{max-width:720px;margin:0 auto;padding:clamp(3rem,7vh,5rem) var(--gutter) 0}
.a-body .article{font-size:17.5px;line-height:1.72}
.a-body .article>p{color:var(--ivory-70);margin:0 0 1.35rem}
.a-body .article>p strong{color:var(--ivory);font-weight:500}
.a-body .article h2{font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.12;margin:clamp(2.6rem,5vh,3.6rem) 0 1.1rem;max-width:22ch}
.a-body .article h2:first-child{margin-top:0}
.a-body .article em{color:var(--ivory)}
.a-body .article ul,.a-body .article ol{margin:0 0 1.35rem 1.2rem;color:var(--ivory-70)}
.a-body .article li{margin:.4rem 0}
.a-body .article li strong{color:var(--ivory);font-weight:500}
/* the short answer — set apart so it can be read (and quoted) first */
.a-body .article h2:first-child + p{font-family:var(--display);font-weight:300;font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.5;color:var(--ivory);border-left:1px solid var(--amber);padding-left:1.4rem;margin-bottom:2rem;font-variation-settings:"opsz" 40}
.a-body .article .faq details{border-top:1px solid var(--ivory-18)}
.a-body .article .faq details:last-child{border-bottom:1px solid var(--ivory-18)}
.a-body .article .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 0;font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1.5vw,1.3rem);font-variation-settings:"opsz" 40;color:var(--ivory)}
.a-body .article .faq summary::-webkit-details-marker{display:none}
.a-body .article .faq summary::after{content:"+";color:var(--amber);font-family:var(--body);font-weight:300;transition:transform var(--ui)}
.a-body .article .faq details[open] summary::after{transform:rotate(45deg)}
.a-body .article .faq p{color:var(--ivory-70);padding:0 0 1.2rem;margin:0;font-size:16px}
.a-body .article .article-note{margin-top:2.2rem;font-size:13.5px;color:var(--ivory-45);border-top:1px solid var(--ivory-18);padding-top:1rem}
.a-more{max-width:1280px;margin:clamp(4rem,9vh,7rem) auto 0;padding:0 var(--gutter)}
.a-more h3{margin-bottom:1.4rem}
.a-more .list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem)}
.a-more a{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--ivory-18);padding-top:1.1rem}
.a-more a b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.15;margin:.4rem 0 .5rem;font-variation-settings:"opsz" 48;transition:color var(--slow) ease}
.a-more a:hover b{color:#fffdf6}
.a-more a p{color:var(--ivory-70);font-size:15px;max-width:44ch}
.j-finale.a-finale{min-height:0;padding:5rem 1.5rem 4.5rem;margin-top:clamp(4rem,9vh,7rem)}
@media (max-width:900px){.a-more .list{grid-template-columns:1fr}.a-art .swatch{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.progress{transition:none}}