/* thepremortem.net — off-white paper, ink line drawings in the manner of Leonardo's notebooks, rose-gold foil pressed into the page.
Composition after Linden / midlife: one persistent drawing panel that changes shape, words set straight on the paper — never in boxes. */
@font-face{font-family:"Sarabun";font-weight:400;font-display:swap;src:url(/fonts/sarabun-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Sarabun";font-weight:600;font-display:swap;src:url(/fonts/sarabun-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Sarabun";font-weight:700;font-display:swap;src:url(/fonts/sarabun-thai-700-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Sarabun";font-weight:400;font-display:swap;src:url(/fonts/sarabun-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Sarabun";font-weight:600;font-display:swap;src:url(/fonts/sarabun-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Sarabun";font-weight:700;font-display:swap;src:url(/fonts/sarabun-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Cormorant";font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-weight:600;font-display:swap;src:url(/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-weight:500;font-style:italic;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
:root{
color-scheme:light;
--paper:#F6F2EB; --ink:#1B1816; --ink-soft:#4A4440; --muted:#7A716A; --rule:#DCD3C8;
--rose:#B76E79; --rose-ink:#8C4A55; --rose-deep:#6E3842;
--foil:linear-gradient(100deg,#8C4A55 0%,#C98A8F 18%,#F0CFC6 32%,#B76E79 48%,#E7BDB4 64%,#9A5560 82%,#C98A8F 100%);
--sans:"Sarabun","Leelawadee UI","Tahoma",sans-serif;
--latin:"Cormorant","Georgia",serif;
--gutter:max(20px,env(safe-area-inset-left,0px));
--gutter-r:max(20px,env(safe-area-inset-right,0px));
/* the folded plate: one place to tune it */
--plate-l:52vw; --plate-t:15vh; --plate-w:42vw; --plate-h:72vh;
--copy-w:min(42rem,44vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--paper);
background-image:url("data:image/svg+xml;utf8,");
color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:var(--rose-ink)}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance;font-weight:700}
p,ul{margin:0}
.foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(90,40,45,.32))}
.latin{font-family:var(--latin);font-style:italic;color:var(--rose-ink)}
/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:14px;
padding:calc(12px + env(safe-area-inset-top,0px)) var(--gutter-r) 10px var(--gutter)}
.bar .brand{line-height:0}
.bar .brand img{height:40px;width:auto}
.bar .path-pill{margin-left:auto;font-size:.82rem;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rose);padding:2px 0;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.bar .path-pill[hidden]{display:none}
.bar .path-pill wbr{display:none}
.bar .cta{margin-left:auto;font-family:var(--latin);font-size:1.05rem;letter-spacing:.06em;color:var(--rose-ink);text-decoration:none;border:1px solid var(--rose);border-radius:999px;padding:4px 18px;white-space:nowrap;background:rgba(246,242,235,.7)}
.bar .path-pill:not([hidden])+.cta{margin-left:0}
.bar a:focus-visible,.way:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
/* ---------- the drawing panel ---------- */
html,body{overflow-x:clip}
.panel{position:fixed;z-index:1;overflow:hidden;left:var(--pl,0);top:var(--pt,0);width:var(--pw,100vw);height:var(--ph,100vh);pointer-events:none;will-change:left,top,width,height}
.panel .frame{position:absolute;inset:0;border:1px solid rgba(140,74,85,var(--fa,0));transition:none}
.panel .art{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s ease}
.panel .art.on{opacity:1}
.art.walk{background:#e9e4dc url(/film/walk/f001.webp) center/cover no-repeat}
.art.walk canvas,.art.walk svg{position:absolute;inset:0;width:100%;height:100%}
.art.walk .guide{stroke-width:1.4}
.art .ink{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.art .rose{fill:none;stroke:var(--rose);stroke-linecap:round;stroke-linejoin:round}
.art .guide{fill:none;stroke:var(--rose);stroke-dasharray:6 9;stroke-width:1.2}
.art text{font-family:var(--latin);font-style:italic;fill:var(--rose-ink)}
/* ---------- scenes ---------- */
.sc{position:relative;height:calc(var(--len,2.5)*100vh)}
.sc>.art{display:none} /* moved into the panel by the script */
.sticky{position:sticky;top:0;height:100vh;height:100svh;z-index:2;pointer-events:none}
.copy{position:absolute;pointer-events:auto}
.eyebrow{font-size:1.1rem;margin-bottom:.8rem}
/* the door is the focal point, so the words sit low on the floor and leave it clear */
.hero{left:50%;top:auto;bottom:7vh;transform:translateX(-50%);width:min(64rem,calc(100% - 40px));text-align:center}
.hero::before{content:"";position:absolute;inset:-18% -14%;z-index:-1;background:radial-gradient(closest-side,rgba(246,242,235,.96),rgba(246,242,235,.85) 55%,rgba(246,242,235,0))}
/* hero order: brand (largest, foil) → promise (ink) → what I do → who */
.hero .wordmark{font-family:var(--latin);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(2rem,5.8vw,5.6rem);line-height:1;margin:0 0 .28em;white-space:nowrap}
@media (max-width:760px){.hero .wordmark{font-size:8.4vw;letter-spacing:.05em}}
.hero h1{font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.25;color:var(--ink);margin-bottom:.55em}
.hero .sub{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink);max-width:36rem;margin:0 auto}
.hero .byline{margin-top:1.4em;display:inline-flex;align-items:center;gap:12px;font-size:clamp(.95rem,1.4vw,1.05rem);font-weight:600;color:var(--rose-ink)}
.hero .byline::before,.hero .byline::after{content:"";width:36px;height:1px;background:var(--rose)}
.cue{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);font-family:var(--latin);font-style:italic;color:var(--rose-ink);display:grid;justify-items:center;gap:6px;white-space:nowrap}
.cue wbr{display:none}
@media (max-height:820px){.hero{bottom:4vh}.cue::after{height:28px}}
.cue::after{content:"";width:1px;height:46px;background:linear-gradient(var(--rose),rgba(183,110,121,0))}
.side{left:var(--gutter);top:50%;transform:translateY(-50%);width:var(--copy-w);padding-left:clamp(0px,3vw,40px)}
/* words sit on the footage with a soft paper glow behind them, never a box */
.side::before{content:"";position:absolute;inset:-22vh -8vw -22vh -30vw;z-index:-1;background:radial-gradient(ellipse at 40% 50%,rgba(246,242,235,.93),rgba(246,242,235,.8) 45%,rgba(246,242,235,0) 72%)}
.side h2{font-size:clamp(2rem,4.2vw,3.4rem);margin-bottom:.55em}
.voices{list-style:none;padding:0;display:grid;gap:.5em}
.voices li{font-size:clamp(1.05rem,1.55vw,1.35rem);line-height:1.5;text-wrap:pretty;font-weight:600;color:var(--ink)}
.close{margin-top:1.1em;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.55;text-wrap:balance;color:var(--rose-deep);font-weight:600}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);text-wrap:balance;color:var(--ink-soft);margin-bottom:1.4em}
/* per-word ink fill: words start faint and ink in as you read (scroll-driven) */
html.js .fill .w{opacity:var(--o,.14);transition:opacity .25s linear}
/* the three ways: plain words on the paper, a numeral and a hairline */
.ways{display:grid;border-top:1px solid var(--rule)}
.way{font:inherit;color:inherit;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:16px 4px;display:grid;grid-template-columns:3.2rem 1fr;gap:6px;align-items:baseline;cursor:pointer;transition:color .25s}
.way .n{font-family:var(--latin);font-style:italic;font-size:1.6rem;color:var(--rose-ink)}
.way .t{display:grid;gap:2px}
.way b{font-size:clamp(1.15rem,1.7vw,1.35rem)}
.way .d{font-size:.95rem;color:var(--muted);line-height:1.55}
.way:hover b{color:var(--rose-deep)}
.way[aria-pressed="true"] b{color:var(--rose-deep)}
.way[aria-pressed="true"] .n::after{content:" ✓";font-style:normal;font-size:1rem}
body[data-path] .way[aria-pressed="false"]{opacity:.5}
/* ---------- after the journey ---------- */
.after{position:relative;z-index:2;padding:22vh var(--gutter) 24vh;display:grid;justify-items:center;text-align:center;gap:18px;background:var(--paper)}
.after .latin{font-size:1.15rem}
.after h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:22ch}
.after p{color:var(--ink-soft);max-width:40rem;text-wrap:balance}
.after .proto{font-size:.85rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:14px;margin-top:10px}
.plain{min-height:100vh;display:grid;place-items:center}
.notfound{text-align:center;display:grid;gap:12px;justify-items:center;padding:24px}
.notfound h1{font-size:2.4rem}
/* ---------- phones: the plate becomes a band at the top, words below it ---------- */
@media (max-width:760px){
body{font-size:17px}
:root{--copy-w:auto}
.bar .brand img{height:32px}
.hero{top:52%}
.side{left:var(--gutter);right:var(--gutter);top:calc(60px + 42vh + 14px);bottom:auto;transform:none;padding-left:0}
.side .eyebrow{display:none}
.side h2{font-size:clamp(1.7rem,7vw,2.3rem)}
.voices li{font-size:1.08rem}
.way{padding:12px 2px;grid-template-columns:2.4rem 1fr}
.way .d{display:none}
}
/* ---------- no script, or reduced motion: a still, readable page ---------- */
html:not(.js) .panel{display:none}
html:not(.js) .sc>.art,html.still .sc>.art{display:block;position:relative;width:100%;height:60vh}
html:not(.js) .sc,html.still .sc{height:auto}
html:not(.js) .sticky,html.still .sticky{position:relative;height:auto}
html:not(.js) .copy,html.still .copy{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:44rem;margin:0 auto;padding:6vh var(--gutter)}
html.still .panel{display:none}
html.still .hero::before{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.panel .art{transition:none}}
/* scene 3: one way per view, a single pick button */
.way-card .lead{margin-bottom:1em}
.way-card .way{display:inline-flex;grid-template-columns:none;border:1px solid var(--rose);border-radius:999px;padding:8px 22px;font-size:1rem;font-weight:600;color:var(--rose-deep);background:rgba(246,242,235,.75)}
.way-card .way:hover{background:var(--rose-deep);color:var(--paper)}
.way-card .way[aria-pressed="true"]{background:var(--rose-deep);color:var(--paper)}
/* Thai marks above (ไม้โท, สระอี) and below (สระอุ อู) sit outside the line box; background-clip:text only paints inside
the element box, so give foil text room above and below or the marks vanish */
/* a tone mark stacked on an upper vowel (นี้, ที่) reaches ~.55em above the line: room for it, pulled back with a negative margin */
.foil{padding-top:.6em;padding-bottom:.32em;margin-top:-.42em;overflow:visible}
/* leading vowels ใ ไ โ curl .07em left of their box, a tone mark at line end .04em right: side room too (measured, Sarabun 700) */
.foil{padding-left:.12em;padding-right:.12em;margin-left:-.12em;margin-right:-.12em}
.hero .sub{max-width:46rem}
.way-card .way{display:inline-block}
/* Thai phrase wrapping (thaiwrap.js): lines break only at spaces between phrases; .loose = phrase wider than its box */
.ph{white-space:nowrap}
.ph:not(.loose) wbr{display:none} /* Chrome breaks at even inside nowrap */
.ph.loose{white-space:normal}
/* ---------- The Premortem Codex: one chapter per view, a notebook plate beside the words ---------- */
.codex-intro{padding-bottom:4vh}
.chapter{position:relative;z-index:2;background:var(--paper);min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px);padding:10vh max(var(--gutter),6vw)}
.chapter.rev .plate{order:2}
.chapter .plate{width:100%;max-width:560px;height:auto;justify-self:center;overflow:visible}
.chapter .text h2{font-size:clamp(1.9rem,3.8vw,3rem);margin-bottom:.45em}
.chapter .text p{color:var(--ink-soft);max-width:34rem;text-wrap:balance;margin-bottom:.8em}
.chapter .go{display:inline-block;margin-top:.4em;font-weight:600;color:var(--rose-deep);text-decoration:none;border-bottom:1px solid var(--rose);padding-bottom:2px}
.chapter .go::after{content:" →"}
.plate .ink,.plate .rose,.plate .guide{fill:none;stroke-linecap:round;stroke-linejoin:round}
.plate .ink{stroke:var(--ink);stroke-width:1.6}
.plate .rose{stroke:var(--rose);stroke-width:2}
.plate .hair{stroke-width:.8}
.plate .guide{stroke:var(--rose);stroke-width:1;stroke-dasharray:5 7}
.plate circle.rose,.plate circle.ink{fill:var(--paper)}
.plate .n{font-family:var(--latin);font-style:italic;font-size:21px;fill:var(--rose-ink)}
.plate .th{font-family:var(--sans);font-size:15px;fill:var(--muted)}
/* ---------- services: names and prices on hairlines, no boxes ---------- */
.svc{width:min(46rem,100%);margin:10px 0 0;text-align:left;border-top:1px solid var(--rule)}
.svc>div{display:grid;grid-template-columns:1fr auto;gap:2px 24px;padding:18px 2px;border-bottom:1px solid var(--rule)}
.svc dt{font-family:var(--latin);font-size:1.55rem;font-weight:600;color:var(--ink);line-height:1.3}
.svc dd{margin:0}
.svc .price{grid-column:2;grid-row:1;align-self:center;font-weight:700;color:var(--rose-deep);white-space:nowrap}
.svc dd:last-child{grid-column:1/-1;color:var(--ink-soft)}
.services .svc-sub{margin-top:28px;font-size:1.15rem;color:var(--rose-ink)}
.services .svc-note{font-size:.95rem;color:var(--muted);margin-top:10px}
@media (max-width:760px){
.chapter{grid-template-columns:1fr;min-height:auto;padding:9vh var(--gutter);gap:18px}
.chapter.rev .plate{order:0}
.chapter .plate{max-width:360px}
.svc>div{grid-template-columns:1fr}
.svc .price{grid-column:1;grid-row:auto}
}
.svc .inc{grid-column:1/-1;margin-top:8px}
.svc .inc p{font-size:.9rem;font-weight:600;color:var(--rose-ink);margin-bottom:2px}
.svc .inc ol,.svc .inc ul{margin:0;padding-left:1.3em;color:var(--ink-soft);font-size:.97rem;line-height:1.65}
.svc .inc li{padding:3px 0}
.svc .inc ol li::marker{font-family:var(--latin);font-style:italic;color:var(--rose-ink)}
.svc .inc ul li::marker{color:var(--rose)}
.svc .inc b{color:var(--ink);font-weight:600}
.svc dd:not(.price){grid-column:1/-1;color:var(--ink-soft)}
/* ---------- contact ---------- */
.contact-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.contact-btns a,.contact-btns button{font:inherit;font-weight:600;font-size:1.05rem;border-radius:999px;padding:10px 26px;text-decoration:none;cursor:pointer;border:1px solid var(--rose-deep)}
.btn-line{background:var(--rose-deep);color:var(--paper)}
.btn-tel{background:transparent;color:var(--rose-deep)}
.contact-btns a:focus-visible,.contact-btns button:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.contact .copied{min-height:1.8em;font-size:.95rem;color:var(--rose-ink)}
/* Codex chapter detail: what it is · what I do · what you get — on hairlines, never boxes */
.chapter{align-items:start}
.chapter .plate{position:sticky;top:14vh}
.ch-detail{margin:1.4em 0 .6em;border-top:1px solid var(--rule);max-width:36rem}
.ch-detail>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 18px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ch-detail dt{font-weight:700;color:var(--rose-deep);font-size:.98rem;line-height:1.6}
.ch-detail dd{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.65}
.ch-detail ol{margin:0;padding-left:1.3em}
.ch-detail li{padding:3px 0}
.ch-detail li::marker{font-family:var(--latin);font-style:italic;color:var(--rose-ink)}
@media (max-width:760px){
.chapter .plate{position:relative;top:auto}
.ch-detail>div{grid-template-columns:1fr}
}
@media (min-width:761px){
.chapter{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.chapter.rev{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.ch-detail>div{grid-template-columns:6.5em minmax(0,1fr)}
}
/* S-Gen: the four growth routes as a 2×2 on hairlines */
.ansoff{list-style:none;padding:0;margin:.2em 0 1em;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;max-width:30rem}
.ansoff li{padding:8px 2px;border-bottom:1px solid var(--rule);color:var(--ink);font-weight:600}
.svc dd.sample{margin-top:6px}
.svc dd.sample a{font-weight:600;color:var(--rose-deep);text-decoration:none;border-bottom:1px solid var(--rose)}
.svc dd.sample a::after{content:" →"}
/* ---------- main menu: Simulator · Premortem Scan · Premortem Codex ---------- */
.bar .menu{margin-left:auto;display:flex;gap:6px;align-items:center}
.bar .menu a{font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none;padding:5px 12px;border-radius:999px;background:rgba(246,242,235,.72);white-space:nowrap}
.bar .menu a:hover,.bar .menu a[aria-current="page"]{color:var(--rose-deep);box-shadow:inset 0 -1px 0 var(--rose)}
.bar .menu+.cta{margin-left:4px}
.bar .menu a:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
@media (max-width:760px){
.bar{gap:6px}
.bar .menu{gap:2px}
.bar .menu a{font-size:.8rem;padding:4px 7px}
.bar .menu .pf{display:none}
.bar .cta{font-size:.9rem;padding:3px 11px}
}
@media (max-width:370px){.bar .brand img{height:26px}}
.chapter .go+.go{margin-left:18px}
.svc dd.sample a+a{margin-left:18px}
.ansoff li small{display:block;font-family:var(--latin);font-style:italic;font-weight:500;color:var(--rose-ink);font-size:.95rem}
/* pages without the film: the bar sits on paper so text never runs under it */
.course-page .bar,.report-page .bar,.sim-page .bar{background:rgba(246,242,235,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 0 var(--rule)}
.course-page .bar .menu a,.report-page .bar .menu a,.sim-page .bar .menu a{background:transparent}
.nb{white-space:nowrap}
@media (max-width:760px){.chapter{grid-template-columns:minmax(0,1fr)}}