/* 3thanWong master stylesheet: the design language every new page shares.
   Page-only styles (e.g. the homepage hero) stay in that page. Change a token here and every page follows. */

/* ---------- 0. Fonts (self-hosted, latin; Chinese falls back to the system font) ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin-opsz-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin-opsz-italic.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2')}

/* ---------- 1. Tokens ---------- */
:root{
  /* colour */
  --paper:#F5F4F0; --paper-2:#fbfaf7; --ink:#1E221C; --slate:#44525F; --accent:#A8322D; --accent-lt:#DD5A50; --accent-soft:#f5e1df; --line:#d9d6cc;
  --board:#1f2a24; --chalk:#efe9d8;
  /* type: Fraunces = headlines (thin), Manrope = paragraphs, JetBrains Mono = small labels only */
  --serif:'Fraunces',Georgia,serif; --sans:'Manrope',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --h1:clamp(44px,7.4vw,104px); --h2:clamp(34px,4.6vw,64px); --h3:22px; --body:17px; --small:15px; --label:12px;
  /* layout + motion */
  --max:1120px; --gutter:24px; --head-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
/* clip, not hidden: hidden would turn body into a scroll box and break position:sticky */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--body);line-height:1.6;overflow-x:clip}
/* height:auto keeps photos in proportion when they shrink (their width/height attributes would otherwise stretch them) */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono,.label{font-family:var(--mono);font-size:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.h2{font-family:var(--serif);font-weight:300;font-size:var(--h2);line-height:1.08;letter-spacing:-.015em}
.lead{color:var(--slate);max-width:48ch}
.accent{font-style:italic;color:var(--accent)}

/* film grain over everything, very light */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:60;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-3%,2%)}100%{transform:translate(2%,-3%)}}

/* ---------- 3. Site header ---------- */
.site-head{position:fixed;top:0;left:0;right:0;height:var(--head-h);z-index:40;display:flex;align-items:center;gap:32px;padding:0 40px 0 52px;
  transition:transform .5s var(--ease),background-color .4s,box-shadow .4s}
.site-head.solid{background:rgba(245,244,240,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.site-head.hide{transform:translateY(-100%)}
.brand{font-family:var(--serif);font-weight:300;font-size:24px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand i{font-style:italic;color:var(--accent)}
.site-nav{display:flex;gap:28px;margin-left:auto}
.site-nav a,.site-nav button{font-family:var(--mono);font-size:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);text-decoration:none;position:relative;padding:6px 0}
.site-nav a::after,.site-nav button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.site-nav a:hover,.site-nav button:hover{color:var(--ink)}
.site-nav a:hover::after,.site-nav button:hover::after{transform:scaleX(1);transform-origin:left}
.head-tools{display:flex;align-items:center;gap:22px}
.lang{font-family:var(--mono);font-size:var(--label);letter-spacing:.1em;color:var(--slate);text-decoration:none}
.lang b{color:var(--ink);font-weight:400}
.menu-btn{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--label);letter-spacing:.14em;text-transform:uppercase}
.menu-btn .bars{width:22px;height:10px;position:relative}
.menu-btn .bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.menu-btn .bars i:first-child{top:0}
.menu-btn .bars i:last-child{top:8px}
.menu-open .menu-btn .bars i:first-child{top:4px;transform:rotate(45deg)}
.menu-open .menu-btn .bars i:last-child{top:4px;transform:rotate(-45deg)}

/* ---------- 4. Full-screen menu ---------- */
.menu-panel{position:fixed;inset:0;z-index:39;background:var(--ink);color:var(--paper);overflow-y:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden}
.menu-panel .wrap{padding-top:calc(var(--head-h) + 6vh);padding-bottom:6vh;display:grid;grid-template-columns:1.1fr 2fr;gap:64px;min-height:100%}
.menu-panel .label{color:rgba(245,244,240,.5);display:block;margin-bottom:18px}
.menu-main{list-style:none}
.menu-main a{display:inline-block;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.4vw,46px);line-height:1.22;white-space:nowrap;letter-spacing:-.015em;text-decoration:none;transition:color .3s,transform .4s var(--ease)}
.menu-main a:hover{color:var(--accent-lt);transform:translateX(8px)}
.menu-main small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent-lt);vertical-align:super;margin-left:8px}
.menu-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px;align-content:start}
.menu-cols ul{list-style:none}
.menu-cols li a{display:block;padding:5px 0;color:rgba(245,244,240,.82);text-decoration:none;font-size:var(--small);transition:color .3s}
.menu-cols li a:hover{color:var(--accent-lt)}
.menu-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(245,244,240,.14)}
.menu-foot a{color:rgba(245,244,240,.7);text-decoration:none}
.menu-foot a:hover{color:var(--accent-lt)}
.menu-open .site-head{color:var(--paper);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
.menu-open .site-nav{visibility:hidden}
.menu-open .lang,.menu-open .lang b{color:var(--paper)}
.menu-open .brand i{color:var(--accent-lt)}
.menu-panel :focus-visible{outline-color:var(--accent-lt)}
.menu-open{overflow:hidden}

/* ---------- 5. Shared components ---------- */
/* chapter label + thread + year counter */
.thread{position:fixed;left:28px;top:0;bottom:0;width:1px;background:var(--line);z-index:20}
.thread i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.year{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:20;display:flex;align-items:baseline;gap:10px;
  background:rgba(245,244,240,.88);padding:6px 16px;border-radius:30px;font-family:var(--mono);font-size:var(--label);letter-spacing:.22em;color:var(--slate)}
.year{transition:opacity .4s,transform .4s var(--ease)}
.year.off{opacity:0;transform:translate(-50%,12px);pointer-events:none}
.year b{font-weight:700;color:var(--ink);font-size:24px;letter-spacing:.08em;font-variant-numeric:tabular-nums}

/* photos: one colour grade for every era, revealed by a wipe */
.photo{position:relative;overflow:hidden;background:#ddd}
.photo img{width:100%;height:100%;object-fit:cover;filter:sepia(.28) saturate(.82) contrast(1.06) brightness(.98);transform:scale(1.12)}
.photo figcaption{position:absolute;left:14px;bottom:12px;background:rgba(245,244,240,.92);padding:4px 10px}
.reveal{clip-path:inset(0 100% 0 0)}

/* artifact: a real object taped to the desk */
.artifact{position:relative;background:#fff;padding:12px 12px 40px;box-shadow:0 18px 40px -18px rgba(30,34,28,.45),0 2px 6px rgba(30,34,28,.12);transform:rotate(-3deg)}
.artifact::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;margin-left:-55px;background:rgba(221,90,80,.3);transform:rotate(2deg)}
.artifact img{filter:sepia(.2) contrast(1.05)}
.artifact .note{position:absolute;bottom:10px;left:16px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:18px;color:var(--slate)}

/* feature tiles + the travelling-light flow line */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--paper);padding:30px 28px 34px;min-height:210px;position:relative;transition:background-color 1s ease}
.tile svg{width:34px;height:34px;stroke:var(--ink);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke 1s ease}
.tile h3{font-family:var(--serif);font-weight:400;font-size:var(--h3);margin:18px 0 8px}
.tile p{color:var(--slate);font-size:var(--small)}
.tile .from{position:absolute;top:28px;right:24px}
.tile::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s ease}
.tile.lit{background:var(--paper-2);transition-duration:.3s}
.tile.lit::before{transform:scaleX(1);transition-duration:.6s}
.tile.lit svg{stroke:var(--accent);transition-duration:.3s}
.tile:hover{background:#fff}
.flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.flow span{font-family:var(--mono);font-size:var(--label);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);border-radius:30px;background:#fff;color:var(--slate);
  transition:box-shadow 1.1s ease,border-color 1.1s ease,background-color 1.1s ease,color 1.1s ease}
.flow em{font-style:normal;color:#e3bcb8;transition:color 1s ease,text-shadow 1s ease}
.flow span.lit{transition-duration:.25s;color:var(--ink);border-color:var(--accent);background:#fbf0ef;box-shadow:0 0 0 4px rgba(168,50,45,.16),0 0 26px 2px rgba(168,50,45,.4)}
.flow em.lit{transition-duration:.2s;color:var(--accent);text-shadow:0 0 12px rgba(168,50,45,.6)}

/* kopitiam menu board (post lists) */
.board{background:var(--board);color:var(--chalk);border-radius:6px;padding:46px 48px 40px;position:relative;
  box-shadow:inset 0 0 0 10px #3b2c22,inset 0 0 0 12px #2a1f18,0 30px 60px -30px rgba(0,0,0,.5)}
.board::after{content:"";position:absolute;inset:12px;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.board .bhead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed rgba(239,233,216,.35);padding-bottom:16px;margin-bottom:10px}
.board .bhead h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;letter-spacing:-.01em}
.board .bhead .mono{color:rgba(239,233,216,.6)}
.board ol{list-style:none}
.board li a{display:flex;align-items:baseline;gap:12px;padding:12px 0;text-decoration:none}
.board li .no{font-family:var(--mono);font-size:12px;color:rgba(239,233,216,.5);width:26px}
.board li .dish{font-family:var(--sans);font-weight:600;font-size:20px;line-height:1.2}
.board li .dots{flex:1;border-bottom:2px dotted rgba(239,233,216,.3);transform:translateY(-6px)}
.board li .t{font-family:var(--mono);font-size:13px;letter-spacing:.08em;white-space:nowrap}
.board li .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent-lt);margin-left:8px}
.board li a:hover .dish{color:var(--accent-lt)}
.board .bfoot{margin-top:18px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:17px;color:rgba(239,233,216,.7)}

/* signature sign-off */
.sign{padding:20vh 0 16vh;text-align:center;overflow-x:clip}
.sign svg{width:min(560px,90vw);height:auto}
.sign text{font-family:var(--serif);font-style:italic;font-weight:500;font-size:92px;letter-spacing:-.02em;fill:transparent;stroke:var(--ink);stroke-width:1}
.sign p{margin-top:18px}

/* ---------- 6. Site footer ---------- */
.site-foot{position:relative;border-top:1px solid var(--line);padding:72px 0 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-grid p{color:var(--slate);font-size:var(--small);max-width:30ch;margin-top:14px}
.foot-grid .label{display:block;margin-bottom:16px}
.foot-grid ul{list-style:none}
.foot-grid li a{display:inline-block;padding:4px 0;color:var(--ink);text-decoration:none;font-size:var(--small);background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.foot-grid li a:hover{background-size:100% 1px}
.makers{margin-top:56px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 26px;background:var(--paper-2);border:1px solid var(--line)}
.makers p{color:var(--slate);font-size:var(--small)}
.makers a{font-family:var(--mono);font-size:var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.makers a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0 30px;margin-top:40px;border-top:1px solid var(--line)}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--ink)}
.foot-mark{font-family:var(--serif);font-weight:300;font-size:clamp(80px,19vw,290px);line-height:.8;letter-spacing:-.04em;color:#e9e6dd;white-space:nowrap;text-align:center;user-select:none;margin-bottom:-.12em}
.foot-mark i{font-style:italic;color:#ecd2cf}

/* ---------- 7. Small screens ---------- */
@media (max-width:980px){
  .site-nav{display:none}
  .site-head{padding:0 20px}
  .head-tools{margin-left:auto}
}
@media (max-width:820px){
  .thread{display:none}
  .year{bottom:14px;padding:5px 14px}
  .year b{font-size:20px}
  .tiles{grid-template-columns:1fr}
  .board{padding:30px 22px}
  .menu-panel .wrap{grid-template-columns:1fr;gap:40px}
  .menu-cols{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:first-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){ .grain{animation:none} }

/* photo strip buttons (added by autoStrips in 3w.js) */
.strip-nav{display:flex;gap:10px;justify-content:flex-end;margin:12px 0 28px}
.strip-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s}
.strip-nav button:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.strip-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}