/* Poster Grid — shared system for Pudit Chokmeesuk portfolio
   Helvetica + Space Mono · paper/ink monochrome · light default, dark toggle */
:root{--paper:#fbfaf8;--ink:#0c0c0c;--graph:#5c6068;--mute:#6a6a67;--faint:#a6a6a1;--rule:rgba(12,12,12,.13);--tint:#e8e9ea;--sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;--mono:"Space Mono",ui-monospace,Menlo,monospace}
[data-theme=dark]{--paper:#0c0c0d;--ink:#f6f5f2;--graph:#9aa1ab;--mute:#95958f;--faint:#5d5d58;--rule:rgba(246,245,242,.16);--tint:#191a1c}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;overflow-x:hidden}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--graph)}
.wrap{width:100%;max-width:1560px;margin:0 auto;padding:0 clamp(14px,2.4vw,34px)}
.m{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase}
.grid-ov{position:fixed;inset:0;z-index:1;pointer-events:none;max-width:1560px;margin:0 auto;padding:0 clamp(14px,2.4vw,34px);display:grid;grid-template-columns:repeat(12,1fr)}
.grid-ov i{border-left:1px solid var(--rule);opacity:.5}
.grid-ov i:last-child{border-right:1px solid var(--rule)}
body>*:not(.grid-ov){position:relative;z-index:2}
/* top bar */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding-block:14px;border-bottom:2px solid var(--ink)}
.top .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.top nav{display:flex;gap:18px;justify-content:center}
.top nav a{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase}
.top nav a[aria-current=page]{border-bottom:2px solid var(--ink)}
.top .r{display:flex;justify-content:flex-end;gap:10px}
.tgl{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);background:none;color:var(--ink);padding:5px 10px;cursor:pointer}
.tgl:hover{background:var(--ink);color:var(--paper)}
/* poster type */
.poster{padding-block:clamp(18px,3vw,34px) 0}
.pt{font-weight:700;font-size:clamp(3.4rem,24vw,19.4rem);line-height:.78;letter-spacing:-.055em;margin:0;text-transform:uppercase}
.pt.mid{font-size:clamp(2.6rem,16vw,13rem)}
.pt.out{font-size:clamp(1.9rem,13.1vw,10.6rem);letter-spacing:-.035em;color:transparent;-webkit-text-stroke:2px var(--ink)}
.pt.out.mid{font-size:clamp(1.6rem,9.4vw,7.6rem)}
.pt span{display:block;overflow:hidden}
.pt span>i{display:block;font-style:normal;transform:translateY(101%);animation:up 1.05s cubic-bezier(.16,1,.3,1) forwards}
.pt.out span>i{animation-delay:.12s}
@keyframes up{to{transform:none}}
.blk{background:var(--ink);color:var(--paper);display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,44px);align-items:center;padding:9px clamp(12px,1.6vw,18px);margin-block:clamp(12px,2vw,20px)}
.blk span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.blk span.sp{margin-left:auto}
/* 12-col helpers */
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px)}
/* section head */
.sec{padding-block:clamp(40px,6vw,86px)}
.sh{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px);align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:10px}
.sh h2{grid-column:span 6;margin:0;font-weight:700;font-size:clamp(1.2rem,2.4vw,2rem);letter-spacing:-.03em;text-transform:uppercase}
.sh .n{grid-column:span 3;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sh .c{grid-column:span 3;text-align:right;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* index rows */
.tbl{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px);padding-block:18px;border-bottom:1px solid var(--rule);transition:background .35s}
.tbl:hover{background:var(--tint)}
.tbl .a{grid-column:span 2;font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;color:var(--mute)}
.tbl .b{grid-column:span 4}
.tbl .b h3{margin:0;font-size:1.06rem;font-weight:700;letter-spacing:-.02em}
.tbl .b span{color:var(--mute);font-size:.86rem}
.tbl .c2{grid-column:span 4;color:var(--mute);font-size:.88rem;text-wrap:pretty}
.tbl .d{grid-column:span 2;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:right}
/* statement band */
.band{background:var(--ink);color:var(--paper);padding-block:clamp(40px,7vw,96px);margin-top:clamp(30px,5vw,64px)}
.band .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px);align-items:end}
.band h2{grid-column:span 8;margin:0;font-weight:700;font-size:clamp(1.7rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.band h2 em{font-style:normal;color:var(--graph)}
.band .sub{grid-column:span 4;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;line-height:1.9;color:rgba(255,255,255,.6)}
[data-theme=dark] .band{border-block:1px solid var(--rule)}
[data-theme=dark] .band .sub{color:rgba(0,0,0,.55)}
/* end / footer */
.end{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px);padding-block:clamp(40px,6vw,80px) 30px;border-top:2px solid var(--ink)}
.end .big{grid-column:span 7}
.end .big a{display:block;font-weight:700;font-size:clamp(1.3rem,4.6vw,3.6rem);letter-spacing:-.04em;line-height:1;word-break:break-word}
.end .col{grid-column:span 2}
.end .col h4{margin:0 0 8px;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.end .col a,.end .col p{display:block;margin:0 0 5px;font-size:.86rem;color:var(--mute)}
footer{padding-block:12px 26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* marquee */
.mq{border-block:1px solid var(--rule);overflow:hidden;padding-block:10px;cursor:grab;user-select:none}
.mq.drag{cursor:grabbing}
.mq-t{display:flex;gap:36px;width:max-content;white-space:nowrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.mq-t b{color:var(--ink);font-weight:400}
/* reveal */
.rv3{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
.rv3.in{opacity:1;transform:none}
/* placeholder media */
.ph-media{display:grid;place-items:center;background-image:repeating-linear-gradient(135deg,transparent 0 8px,rgba(120,120,120,.14) 8px 9px)}
.ph-media span{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:center;padding:0 16px}
@media(max-width:1100px){.band h2{grid-column:span 12}.band .sub{grid-column:span 12;margin-top:18px}.tbl .b,.tbl .c2{grid-column:span 5}.tbl .d{display:none}.end .big{grid-column:span 12}.end .col{grid-column:span 4}}
@media(max-width:680px){.grid-ov{display:none}.top{grid-template-columns:1fr auto}.top nav{display:none}.tbl .a,.tbl .b,.tbl .c2{grid-column:span 12}.sh h2{grid-column:span 12}.sh .n,.sh .c{display:none}.end .col{grid-column:span 6}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* email reveal */
.mail-btn{display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--ink);font-family:inherit;text-align:left}
.mail-btn .txt{font-weight:700;font-size:clamp(1.3rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1;border-bottom:2px solid var(--ink);padding-bottom:5px;word-break:break-word}
.mail-btn .hint{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.mail-btn:hover .txt{color:var(--graph);border-color:var(--graph)}
.mail-btn.on .hint{color:var(--ink)}
/* portrait panel — colour, never grayscale */
.mepanel{border:1px solid var(--rule);background:var(--tint);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.mepanel img{height:100%;width:100%;object-fit:contain;object-position:bottom center;display:block}
.mecap{margin-top:8px;display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}