/* Rico Chi Kit Sou — Spectrum · shared styles */
:root{
  --void: oklch(0.165 0.028 276);
  --panel: oklch(0.205 0.03 278);
  --ink: oklch(0.96 0.008 270);
  --ink-dim: oklch(0.74 0.018 272);
  --ink-faint: oklch(0.56 0.02 274);
  --line: oklch(0.32 0.025 278);
  --v1: oklch(0.72 0.17 320);  /* violet */
  --v2: oklch(0.66 0.18 268);  /* blue */
  --v3: oklch(0.82 0.16 195);  /* cyan */
  --v4: oklch(0.88 0.17 150);  /* green */
  --v5: oklch(0.85 0.16 95);   /* amber */
  --spectrum: linear-gradient(90deg, var(--v1), var(--v2), var(--v3), var(--v4), var(--v5));
  --serif: "Spectral", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --pad: clamp(1.2rem, 4vw, 4.5rem);
  --maxw: 1320px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--void); color: var(--ink);
  font-family: var(--sans); font-weight:300; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
  display:flex; flex-direction:column;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background: radial-gradient(70vw 50vw at 85% -5%, oklch(0.4 0.12 300 / 0.25), transparent 55%),
              radial-gradient(60vw 50vw at -5% 110%, oklch(0.4 0.1 200 / 0.18), transparent 55%);
}
::selection{ background: oklch(0.72 0.17 320 / 0.3); }
a{ color: inherit; }
.shell{ position:relative; z-index:2; max-width: var(--maxw); margin:0 auto; width:100%; flex:1 0 auto; }

.spectrum-bar{ height:3px; background: var(--spectrum); width:100%; }
.spectrum-fixed{ position:fixed; top:0; left:0; right:0; z-index:60; height:3px; background: var(--spectrum); }

/* nav */
nav{ position: sticky; top:3px; z-index:55; backdrop-filter: blur(12px);
  background: oklch(0.165 0.028 276 / 0.72); border-bottom:1px solid var(--line); }
.nav-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding: .95rem var(--pad); gap:1rem; }
.brand{ font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-decoration:none; white-space:nowrap; }
.brand b{ font-weight:500; }
.navlinks{ display:flex; gap: clamp(.7rem,1.6vw,1.6rem); list-style:none; overflow-x:auto; scrollbar-width:none; }
.navlinks::-webkit-scrollbar{ display:none; }
.navlinks a{ font-family:var(--mono); font-size:.72rem; color:var(--ink-dim); text-decoration:none; transition:color .25s; white-space:nowrap; padding-bottom:2px; border-bottom:1px solid transparent; }
.navlinks a:hover{ color:var(--ink); }
.navlinks a[aria-current="page"]{ color:var(--ink); border-bottom-color: var(--v3); }

/* generic section */
section{ padding: clamp(3rem,8vh,6rem) var(--pad); position:relative; }
section[id]{ scroll-margin-top: 72px; }
.label{ display:flex; align-items:baseline; gap:.9rem; margin-bottom: clamp(2rem,5vh,3.2rem); }
.label .n{ font-family:var(--mono); font-size:.8rem; color:transparent; background:var(--spectrum); -webkit-background-clip:text; background-clip:text; font-weight:500; }
.label .t{ font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
.label .rule{ flex:1; height:1px; background:var(--line); }

/* page hero (subpages) */
.page-hero{ padding: clamp(3rem,8vh,5.5rem) var(--pad) clamp(1.5rem,4vh,2.5rem); }
.kicker{ display:flex; align-items:center; gap:1rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--ink-dim); text-transform:uppercase; margin-bottom: clamp(1.2rem,3vh,2rem); flex-wrap:wrap; }
.kicker .sw{ display:flex; gap:4px; }
.kicker .sw i{ width:11px; height:11px; border-radius:2px; display:block; }
.page-title{ font-family:var(--serif); font-weight:300; font-size: clamp(2.4rem,6.5vw,5rem); line-height:1.02; letter-spacing:-.015em; max-width:20ch; }
.page-title .grad{ background: var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }
.page-lead{ margin-top: clamp(1.2rem,3vh,2rem); color:var(--ink-dim); font-size: clamp(1.02rem,1.4vw,1.2rem); max-width:60ch; }

/* home hero */
.hero{ padding: clamp(3.5rem,9vh,7rem) var(--pad) clamp(2rem,5vh,3.5rem); position:relative; min-height: min(88vh, 820px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hero > *{ position:relative; z-index:2; }
.hero-photo{ position:absolute; inset:0 0 0 auto; width:64%; z-index:0; pointer-events:none; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:58% 38%; }
/* fade the photo into the void: dark on the left (behind the title), clear on the right */
.hero-photo::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--void) 4%, oklch(0.165 0.028 276 / 0.72) 32%, oklch(0.165 0.028 276 / 0.12) 64%, transparent 88%),
    linear-gradient(0deg, var(--void) 1%, transparent 22%, transparent 82%, oklch(0.165 0.028 276 / 0.55) 100%); }
.hero h1{ font-family:var(--serif); font-weight:300; font-size: clamp(2.7rem,7.5vw,6.2rem); line-height:1.02; letter-spacing:-.015em; max-width:18ch; }
.hero h1 .grad{ background: var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }
.hero-sub{ margin-top: clamp(1.6rem,4vh,2.6rem); display:grid; grid-template-columns:1fr; gap:1.4rem; max-width:62ch; }
@media(min-width:720px){ .hero-sub{ grid-template-columns: 1fr 1fr; align-items:end; gap:2.4rem; max-width:54ch; } }
.hero-sub p{ color:var(--ink-dim); font-size: clamp(1.02rem,1.4vw,1.2rem); }
.hero-meta{ font-family:var(--mono); font-size:.74rem; color:var(--ink-faint); line-height:1.9; }
.hero-meta div{ display:flex; justify-content:space-between; gap:1.5rem; border-bottom:1px solid var(--line); padding:.32rem 0; }
.hero-meta div span:last-child{ color:var(--ink-dim); white-space:nowrap; }
@media(max-width:719px){
  .hero-photo{ width:100%; }
  .hero-photo img{ object-position:62% 30%; }
  .hero-photo::after{ background:
    linear-gradient(0deg, var(--void) 6%, oklch(0.165 0.028 276 / 0.62) 46%, oklch(0.165 0.028 276 / 0.42) 100%); }
  .hero{ min-height: min(92vh, 760px); }
}

/* about */
.about{ display:grid; grid-template-columns:1fr; gap: clamp(1.6rem,4vw,3rem); }
@media(min-width:880px){ .about{ grid-template-columns: 1fr 1fr; } }
.about .big{ font-family:var(--serif); font-weight:300; font-size: clamp(1.5rem,2.8vw,2.3rem); line-height:1.3; text-wrap:pretty; }
.about .big em{ color: var(--v3); }
.about p.body{ color:var(--ink-dim); margin-bottom:1rem; max-width:46ch; }
.about p.body strong{ color:var(--ink); font-weight:500; }

/* cards */
.cards{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
@media(min-width:820px){ .cards{ grid-template-columns:1fr 1fr; } }
.card{ background:var(--void); padding: clamp(1.6rem,3.5vw,2.6rem); text-decoration:none; color:inherit; position:relative; transition: background .4s; display:flex; flex-direction:column; gap:1rem; min-height:230px; }
.card.wide{ grid-column:1/-1; }
.card:hover{ background: var(--panel); }
.card .top{ display:flex; justify-content:space-between; align-items:center; }
.card .yr{ font-family:var(--mono); font-size:.74rem; color:var(--ink-faint); }
.card .wl{ width:34px; height:34px; border-radius:50%; background:var(--spectrum); opacity:.85; }
.card h3{ font-family:var(--serif); font-weight:400; font-size: clamp(1.4rem,2.6vw,2rem); line-height:1.1; }
.card:hover h3{ color:var(--v3); transition:color .3s; }
.card p{ color:var(--ink-dim); font-size:.98rem; max-width:52ch; }
.card .tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; align-items:center; }
.tag{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line); border-radius:4px; padding:.28rem .6rem; }
.card .go{ font-family:var(--mono); font-size:.72rem; color:var(--v3); }

/* skills */
.specrow{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.specrow .col{ padding: clamp(1.4rem,3vw,2rem); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.specrow h4{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin-bottom:.9rem; }
.specrow .band{ height:4px; border-radius:2px; margin-bottom:1.1rem; }
.specrow ul{ list-style:none; }
.specrow li{ color:var(--ink-dim); padding:.36rem 0; font-size:.96rem; }

/* experience */
.exp{ display:flex; flex-direction:column; }
.exp-item{ display:grid; grid-template-columns: 9rem 1fr; gap:clamp(1rem,3vw,2rem); padding: clamp(1.3rem,3vh,2rem) 0; border-top:1px solid var(--line); }
.exp-item:last-child{ border-bottom:1px solid var(--line); }
@media(max-width:600px){ .exp-item{ grid-template-columns:1fr; gap:.4rem; } }
.exp-item .when{ font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); }
.exp-item h3{ font-family:var(--serif); font-weight:400; font-size:1.4rem; }
.exp-item .where{ color:var(--v3); font-size:.95rem; margin:.2rem 0 .5rem; }
.exp-item p{ color:var(--ink-dim); font-size:.97rem; max-width:62ch; }
.exp-item a{ color:var(--v3); }

/* gallery */
.gal{ display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(.5rem,1.2vw,.9rem); }
@media(min-width:760px){ .gal{ grid-template-columns:repeat(3,1fr); } }
.ph{ position:relative; aspect-ratio:4/3; border:1px solid var(--line); border-radius:5px; overflow:hidden;
  background: repeating-linear-gradient(135deg, oklch(0.22 0.03 278) 0 2px, transparent 2px 9px); display:flex; align-items:center; justify-content:center; }
.ph::after{ content: attr(data-label); font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:0 1rem; text-align:center; }
.ph.tall{ aspect-ratio:3/4; grid-row:span 2; }
.ph .corner{ position:absolute; top:7px; right:9px; width:7px; height:7px; border-radius:50%; }

/* writing */
.post{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(.8rem,2.5vw,2rem); align-items:center; padding:clamp(1.2rem,3vh,1.8rem) 0; border-top:1px solid var(--line); text-decoration:none; color:inherit; }
.post:last-child{ border-bottom:1px solid var(--line); }
.post .d{ font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); white-space:nowrap; }
.post h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.2rem,2.2vw,1.7rem); }
.post:hover h3{ color:var(--v3); transition:color .3s; }
.post .arr{ font-family:var(--mono); color:var(--ink-faint); }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:.7rem 1.2rem; transition: border-color .3s, color .3s; }
.btn:hover{ color:var(--v3); border-color:var(--v3); }
.btn.spectrum{ border:none; padding:calc(.7rem + 1px) calc(1.2rem + 1px); background: linear-gradient(var(--void),var(--void)) padding-box, var(--spectrum) border-box; border:1px solid transparent; }

/* link rows / quick nav on home */
.quick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.quick a{ background:var(--void); padding:1.4rem clamp(1.2rem,3vw,1.8rem); text-decoration:none; color:inherit; transition:background .3s; display:flex; flex-direction:column; gap:.4rem; }
.quick a:hover{ background:var(--panel); }
.quick a .ql{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--v3); }
.quick a .qt{ font-family:var(--serif); font-size:1.3rem; }
.quick a .qd{ color:var(--ink-faint); font-size:.86rem; }

/* contact */
.contact{ text-align:center; }
.contact h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.05; margin-bottom:1.6rem; }
.contact h2 .grad{ background:var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }
.maillink{ font-family:var(--mono); font-size:clamp(1rem,2vw,1.3rem); color:var(--ink); text-decoration:none; border-bottom:2px solid; border-image: var(--spectrum) 1; padding-bottom:.15em; }
.socials{ display:flex; gap:clamp(1rem,3vw,2.2rem); justify-content:center; margin-top:2.6rem; flex-wrap:wrap; }
.socials a{ font-family:var(--mono); font-size:.74rem; color:var(--ink-dim); text-decoration:none; transition:color .25s; }
.socials a:hover{ color:var(--v3); }

/* cinema */
.cinema-wrap{ border:1px solid var(--line); border-radius:4px; padding:clamp(2.4rem,7vw,5rem) clamp(1.6rem,5vw,4rem); text-align:center; position:relative; overflow:hidden; }
.cinema-wrap::before{ content:""; position:absolute; inset:0; background:var(--spectrum); opacity:.05; pointer-events:none; }
.cinema-wrap .sw{ display:inline-flex; gap:5px; margin-bottom:1.6rem; }
.cinema-wrap .sw i{ width:11px; height:11px; border-radius:2px; display:block; }
.cinema-big{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,5.2vw,3.8rem); line-height:1.08; letter-spacing:-.015em; text-wrap:pretty; }
.cinema-big .grad{ background:var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }
.cinema-sub{ font-family:var(--mono); font-size:clamp(.78rem,1.4vw,.9rem); color:var(--ink-faint); margin-top:1.4rem; letter-spacing:.02em; }

/* footer */
footer{ flex-shrink:0; border-top:1px solid var(--line); margin-top: clamp(3rem,8vh,6rem); }
.foot-inner{ max-width:var(--maxw); margin:0 auto; padding:1.6rem var(--pad) 2.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; align-items:center;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.foot-inner .foot-socials{ display:flex; gap:1.4rem; }
.foot-inner a{ color:var(--ink-faint); text-decoration:none; transition:color .25s; }
.foot-inner a:hover{ color:var(--v3); }

/* reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }