/* ==========================================================================
   THALIA sub pages: My Works (works.html) + About Me (about.html)
   Standalone white pages - this file does NOT need css/style.css.
   Fonts are loaded by the <link> in each html file.
   ========================================================================== */
:root{--ink:#131812;--dot:#a3a3a3;--mute:#6f6f6f;--hh:calc(46px + env(safe-area-inset-top,0px));--gl:8.7vw;--gr:4.7vw;--img:37vw;box-sizing:border-box}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--hh)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #111;outline-offset:3px}
.p{
  font-family: 'Encode Sans Expanded', sans-serif;font-size:clamp(10px,.9vw,13px);line-height:1.35;letter-spacing:0}
}
h1,h2,h3{margin:0}
.m{font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;font-size:clamp(10px,.9vw,13px);line-height:1.35;letter-spacing:0}
.m{font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;font-size:clamp(10px,.9vw,13px);line-height:1.35;letter-spacing:0}
.d{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.88}
.s{font-family:"Instrument Serif",Times,serif;font-weight:400;letter-spacing:-.01em}
/* ---------- header: same structure as the main site, on a white background ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top,0px)) 2vw 14px;background:#fff;color:#111;border-bottom:1px solid #e3e3e3}
.hd div{min-width:0}.hd div:nth-child(2){text-align:center}.hd div:last-child{flex:none;text-align:right;white-space:nowrap}
.hd a{margin-left:2.4em;padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .25s}
.hd a:hover,.hd a[aria-current=page]{border-color:#111}

/* ---------- scroll reveal (only when JS is running) ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}

/* ==========================================================================
   MY WORKS
   =======================
   =================================================== */
.wk{padding-top:calc(var(--hh) + 2vw)}
.wk-cols,.row{display:grid;grid-template-columns:var(--gl) minmax(0,1fr) var(--img) var(--gr)}
.wk-cols{font-size:clamp(12px,1.18vw,17px);text-transform:uppercase;padding-bottom:1.2vw}
.wk-cols span:nth-child(1){grid-column:2}
.wk-cols span:nth-child(2){grid-column:3;padding-left:2vw}
.row{border-top:1px dotted var(--dot);transition:background .35s}
.row:last-of-type{border-bottom:1px dotted var(--dot)}
.row:hover{background:#fafafa}
.rt{grid-column:2;padding:2.5vw 7vw 2vw 0}
.rt h3{font-size:clamp(19px,1.8vw,30px);font-weight:700;line-height:1.1;margin-bottom:1.6vw}
.rt p{font-size:clamp(17px,1.8vw,30px);line-height:1.15}
.pv{grid-column:3;padding:2.6vw 0 2vw}
.pvw{overflow:hidden;background:#e8e8e8}
.pv img{display:block;width:100%;height:auto;aspect-ratio:728/325;object-fit:cover;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.row:hover .pv img{transform:scale(1.04)}
.row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}

/* dark "design map" panel */
.map{overflow:hidden;background:var(--ink);color:#f0f0f0;padding:1.4vw 1.4vw 1.1vw}
.map .m{font-size:clamp(9px,.68vw,11px)}
.map h2{font-family:"Instrument Serif",Times,serif;font-weight:400;font-size:clamp(22px,2vw,34px);letter-spacing:-.01em;margin:1vw 0 1vw;padding-bottom:1vw;border-bottom:1px solid #3a3f39;line-height:1.1}
.mc{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:0 2vw}
.mc b{display:block;font-weight:700;margin-bottom:.7vw}
.mc span{display:block;color:#cfcfcf}
.bigword{display:block;width:max-content;margin:4.6vw 0 3vw;font-weight:800;line-height:.95;letter-spacing:-.03em;text-transform:uppercase;color:#8d8d8d;white-space:nowrap;font-size:5.9vw}
.bigword i{font-style:normal;margin:0 .22em}
.mf{display:flex;justify-content:space-between;gap:12px;color:#cfcfcf}

/* ==========================================================================
   ABOUT ME
   ========================================================================== */
.ab{padding-top:var(--hh);padding-bottom:7vw}
.dt{display:block;padding:.9vw 2vw;font-size:clamp(12px,1.05vw,15px);text-transform:uppercase;border-bottom:1px dotted var(--dot)}
.ag{display:grid;grid-template-columns:19.4vw minmax(0,1fr);padding-right:3vw}
.col{border-left:1px dotted var(--dot);border-right:1px dotted var(--dot)}
.blk{position:relative}
.blk.ext::after{content:"";position:absolute;left:-19.4vw;width:19.4vw;bottom:0;border-top:1px dotted var(--dot)}
.cz{font-family:"Cinzel","Trajan Pro","Times New Roman",serif;font-weight:700;font-size:5.4vw;line-height:1;letter-spacing:.01em;padding:4.4vw 2.6vw .7vw;border-bottom:1px dotted var(--dot)}
.cz::first-letter{font-size:1.3em}
.blk:first-child .cz{padding-top:1.4vw}
.tb{width:100%;border-collapse:collapse;table-layout:fixed;font-family:"Barlow Condensed","Roboto Condensed","Arial Narrow",sans-serif;font-size:clamp(14px,1.22vw,19px);color:#3d3d3d}
.tb th{font-weight:500;color:#111;text-align:left;text-transform:uppercase;padding:.55vw .5vw .55vw 0;border-bottom:1px dotted var(--dot)}
.tb td{padding:.85vw .8vw .85vw 0;border-bottom:1px dotted var(--dot);vertical-align:middle;line-height:1.15}
.tb th:first-child,.tb td:first-child{padding-left:3.1vw}
.tb.up td{text-transform:uppercase}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media(max-width:767px){
 :root{--hh:calc(44px + env(safe-area-inset-top,0px))}
 body{font-size:15px}
 .hd{padding-left:4.5vw;padding-right:4.5vw}
 .hd div:first-child{display:none}.hd div:nth-child(2){text-align:left;font-weight:500}
 .hd a{margin-left:.9em}

 /* works: title, text, then the preview image under it */
 .wk{padding-top:calc(var(--hh) + 9vw)}
 .wk-cols{display:none}
 .row{display:block;padding:5vw 4.5vw 7vw}
 .rt{padding:0}
 .rt h3{font-size:24px;margin-bottom:10px}
 .rt p{font-size:18px;line-height:1.25}
 .pv{padding:5vw 0 0}
 .map{margin:6vw 3vw 6vw;padding:5vw 4.5vw 4.5vw}
 .map h2{font-size:26px;margin:14px 0 14px;padding-bottom:14px}
 .map .m{font-size:10px}
 .mc{gap:0 4vw}.mc b{margin-bottom:8px}
 .bigword{width:auto;margin:11vw 0 9vw;font-size:15vw;line-height:.92;white-space:normal}
 .bigword span{display:block}.bigword i{display:none}
 .mf{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}.mf span:nth-child(even){text-align:right}

 /* about: every table row becomes a small card, labels shown beside the value */
 .ab{padding-bottom:14vw}
 .dt{padding:12px 4.5vw}
 .ag{display:block;padding:0}
 .col{border:0}
 .blk.ext::after{display:none}
 .cz{font-size:11.5vw;padding:9vw 4.5vw 4vw}
 .blk:first-child .cz{padding-top:6vw}
 .tb,.tb tbody,.tb tr,.tb td{display:block}
 .tb thead{position:absolute;left:-9999px}
 .tb tr{padding:12px 4.5vw;border-bottom:1px dotted var(--dot)}
 .tb td{display:grid;grid-template-columns:34% 1fr;gap:10px;padding:3px 0;border:0;font-size:17px}
 .tb td::before{content:attr(data-l);font-size:13px;line-height:1.5;color:#8a8a8a;text-transform:uppercase}
 .tb th:first-child,.tb td:first-child{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
 .js .rv{opacity:1;transform:none;transition:none}
 .pv img,.row,.hd a{transition:none}
}