/* layout.css — page grid (desktop first: drawing 68% / panel 32%) */
.wrap{max-width:1680px;margin:0 auto;padding:28px var(--gut) 60px}

/* header */
.top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:stretch}
.badge{background:var(--purple);color:#fff;width:168px;min-height:168px;display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px}
.badge small{font:600 12px/1 var(--f-mono);letter-spacing:.12em}
.badge b{font:900 92px/.8 var(--f-sans);letter-spacing:-.04em}
.titles{min-width:0}
.titles h1{margin:0;font:900 clamp(34px,4.6vw,66px)/.92 var(--f-sans);letter-spacing:-.035em;text-transform:uppercase}
.titles h1 span:first-child{display:block}
.titles .sub{margin:14px 0 0;font-size:17px;font-weight:500;max-width:46ch}
.titles .kick{margin:10px 0 0;font:600 12px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--grey-d)}
.meta{border-left:1.5px solid var(--ink);padding-left:22px;margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-content:start;width:400px;max-width:100%}
.meta .mi{display:contents}
.meta dt{font:600 12px/1.6 var(--f-mono);letter-spacing:.12em;color:var(--grey-d);padding-top:6px}
.meta dd{margin:0;font-weight:600;font-size:14px;min-width:0}
.meta dd>span{display:block;font-weight:400;font-size:12px;color:#444}
.rule{height:3px;background:var(--ink);margin:26px 0 22px}

/* main grid */
.layout{display:grid;grid-template-columns:minmax(0,68fr) minmax(0,32fr);gap:32px;align-items:start}
.stage{min-width:0}
.panel{border:1.5px solid var(--ink);position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;background:#fff;min-width:0}

/* project line + data strip + footer */
.projline{margin:36px 0 0;font:600 12px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--grey-d)}
.projline b{color:var(--ink)}
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:3px solid var(--ink);border-bottom:1.5px solid var(--ink);margin-top:8px}
.strip div{padding:18px 16px 18px 0;border-right:1px solid var(--rule);min-width:0}
.strip div:last-child{border-right:0}
.strip b{display:block;font:900 clamp(36px,5vw,72px)/.9 var(--f-sans);letter-spacing:-.03em}
.strip i{display:block;height:6px;width:40px;margin-top:12px}
.strip span{display:block;margin-top:8px;font:600 12px/1.35 var(--f-mono);letter-spacing:.12em}
.foot{margin-top:18px;font-size:12px;color:#666;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot span{max-width:70ch}
/* credit band: full-bleed black band at the very bottom */
.credit{background:var(--ink);color:#fff;padding-inline:var(--gut,24px);padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));overflow-wrap:anywhere}
.credit-in{max-width:1680px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px}
.credit .label{color:#fff;opacity:.7;display:block;font:500 12px var(--f-mono);letter-spacing:.06em}
.credit .who{display:flex;flex-direction:column;gap:4px}
.credit .who b{font-family:var(--f-sans);font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em;line-height:1.1}
.credit .contact{font-size:13px;opacity:.9}
.credit .lic{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 420px;justify-content:flex-end}
.credit .lic p{font-size:13px;line-height:1.55;max-width:62ch;font-family:var(--f-thai)}
.credit .lic p span{opacity:.7}
.credit a{color:var(--lime)}
.cc{display:flex;gap:4px;flex:none}
.cc i{font-style:normal;font-family:var(--f-sans);font-weight:800;font-size:12px;width:30px;height:30px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;text-transform:uppercase}
.terms{max-width:1680px;margin:22px auto 0;border-top:1px solid rgba(255,255,255,.25);padding-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px;font-family:var(--f-thai)}
.terms h4{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--lime)}
.terms p{margin:0;font-size:12.5px;line-height:1.6;opacity:.82}
.terms .cite{font-family:var(--f-mono);font-size:12px;opacity:1}
@media (max-width:1000px){.terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.credit{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}.credit .lic{justify-content:flex-start;flex-wrap:wrap}}
@media (max-width:560px){.terms{grid-template-columns:1fr}}