/* ============================================================
   Charles JY Oh — charlesoh.co
   "Specification" — Swiss-precision, light, engineered
   ============================================================ */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/space-grotesk.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 650;font-display:swap;src:url('assets/fonts/inter.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');}

:root{
  --paper:   #F4F4F1;   /* page */
  --panel:   #FBFBF9;
  --ink:     #16171B;   /* primary text */
  --ink-2:   #44474E;   /* body */
  --muted:   #86888F;   /* labels / tertiary */
  --faint:   #A9AAA6;
  --line:    #E2E2DC;   /* hairline */
  --line-2:  #D0D0C9;   /* stronger hairline */
  --accent:  #1E47E6;   /* sharp cobalt — single accent, used sparingly */
  --accent-wash: rgba(30,71,230,.07);

  --display:'Space Grotesk', system-ui, sans-serif;
  --sans:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 4.5vw, 3.25rem);
  --rail: clamp(9rem, 16vw, 12rem);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-size:clamp(1rem,.97rem + .2vw,1.06rem);line-height:1.7;
  font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;}

.skip{position:absolute;left:-999px;top:0;z-index:40;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;font:600 .85rem/1 var(--sans);}
.skip:focus{left:0;}

/* ---------- Frame ---------- */
.frame{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}

/* print-style register marks — the quiet signature */
.reg{position:absolute;width:11px;height:11px;pointer-events:none;color:var(--faint);z-index:5;}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor;}
.reg::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px);}
.reg::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px);}
.reg--tl{left:calc(var(--pad) - 5.5px);top:70px;}
.reg--tr{right:calc(var(--pad) - 5.5px);top:70px;}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:60px;background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
  margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);
}
.topbar__id{display:inline-flex;align-items:center;gap:.6rem;}
.monogram{
  display:inline-grid;place-items:center;width:26px;height:26px;
  border:1px solid var(--ink);font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.02em;color:var(--ink);
}
.topbar__name{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.topnav{display:flex;gap:clamp(.9rem,2.4vw,1.9rem);}
.topnav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted);
  padding-block:.2rem;position:relative;transition:color .18s ease;}
.topnav a:hover{color:var(--ink);}
.topnav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--accent);transition:width .22s ease;}
.topnav a:hover::after{width:100%;}
.ext{margin-left:.15em;}

/* ---------- Masthead ---------- */
.masthead{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,26vw,320px);
  gap:clamp(1.5rem,5vw,4rem);align-items:center;
  padding-block:clamp(3rem,9vh,6.5rem) clamp(2.5rem,6vh,4.5rem);
}
.kicker{display:flex;align-items:center;gap:.6rem;margin:0 0 1.4rem;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.kicker .idx{color:var(--accent);font-size:.7rem;}
.name{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.7rem,1.7rem + 4.8vw,4.9rem);line-height:.98;letter-spacing:-.028em;
  color:var(--ink);margin:0 0 1.4rem;text-wrap:balance;
}
.statement{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1.15rem,1rem + .7vw,1.55rem);line-height:1.42;letter-spacing:-.006em;
  color:var(--ink-2);margin:0 0 1.9rem;max-width:32ch;text-wrap:pretty;
}
.domains{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 0;margin:0;padding:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;
}
.domains li{padding:0 .85rem;border-left:1px solid var(--line-2);}
.domains li:first-child{padding-left:0;border-left:0;}

.portrait{margin:0;justify-self:end;width:100%;max-width:340px;}
.portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) contrast(1.02);
  transition:filter .5s ease;}
.portrait:hover img{filter:grayscale(0) contrast(1.02);}
.portrait figcaption{
  margin-top:.7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  display:flex;justify-content:space-between;}
.portrait figcaption::after{content:"01";color:var(--faint);}

/* ---------- Blocks (index rail + body) ---------- */
.block{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(2.6rem,6vh,4.2rem);border-top:1px solid var(--line);
  scroll-margin-top:80px;
}
.block__index{display:flex;flex-direction:column;gap:.4rem;}
.sec{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.05em;color:var(--accent);}
.block__title{font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);}

.block__body{max-width:64ch;}
.lede{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);
  line-height:1.34;letter-spacing:-.012em;color:var(--ink);margin:0 0 1.3rem;text-wrap:pretty;}
.block__body p{margin:0 0 1.1rem;}
.block__body p:last-child{margin-bottom:0;}

/* ---------- Ventures: spec table ---------- */
.spec{list-style:none;margin:0;padding:0;max-width:none;}
.spec__head,.spec__row{
  display:grid;grid-template-columns:minmax(200px,1.15fr) .8fr 2fr;
  gap:clamp(1rem,2.4vw,2rem);align-items:center;
}
.spec__head{
  align-items:baseline;
  padding-bottom:.7rem;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.spec__row{padding:1.3rem 0;border-bottom:1px solid var(--line);position:relative;transition:background .2s ease;}
.spec__row::before{content:"";position:absolute;inset:0 calc(-1 * .8rem);background:var(--accent-wash);opacity:0;transition:opacity .2s ease;z-index:-1;}
.spec__row:hover::before{opacity:1;}

/* Logo slot: every lockup occupies the same box and is centred in it, so the row
   height (which varies with the Focus text) can't drag the logos off centre. */
.spec__venture{display:flex;align-items:center;min-height:44px;}
.lockup{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);transition:color .2s ease;}
.lockup .mark{height:23px;width:auto;flex:none;}
.lockup .wm{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1;letter-spacing:-.015em;}
.lockup .wordmark{width:auto;display:block;}
/* Each SVG is now cropped tight to its own artwork, so box edge == ink edge and all
   three lockups share one left edge. Heights equalise cap-height at ~15.5px. The
   translate pulls each wordmark's letter band onto a common centre line: Komstadt
   carries its dot-mark above the letters, BOOQED a descender below, so centring the
   boxes alone would leave the letters sitting at three different heights. */
.logo--booqed{height:23px;transform:translateY(3px);}
.logo--komstadt{height:34px;transform:translateY(-9px);}
/* Mono by default, brand colour on hover. Requires the brand colour to be baked into
   each SVG — brightness(0) collapses it to the mono state, removing the filter reveals it. */
.lockup .mark,.lockup .wordmark{filter:brightness(0);transition:filter .25s ease;}
.spec__row:hover .lockup .mark,.spec__row:hover .lockup .wordmark,
.lockup:focus-visible .mark,.lockup:focus-visible .wordmark{filter:none;}
.lockup .arrow{font-family:var(--sans);color:var(--muted);opacity:0;transform:translate(-3px,0);transition:opacity .2s ease,transform .2s ease,color .2s ease;align-self:center;}
.spec__row:hover .lockup{color:var(--brand,var(--accent));}
.spec__row:hover .arrow{opacity:1;transform:translate(0,0);color:var(--accent);}

.spec__role{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);}
.spec__focus{font-size:.98rem;line-height:1.5;color:var(--ink-2);}

/* ---------- Background facts ---------- */
/* auto-fit so four stat tiles settle into a balanced 2x2 at this measure,
   rather than a lopsided 3 + 1 */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(1.5rem,3vw,2.1rem) clamp(1.4rem,3vw,2.4rem);
  margin:2.2rem 0 0;padding-top:1.8rem;border-top:1px solid var(--line);}
.fact dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem;}
.fact dd{margin:0;font-family:var(--display);font-weight:500;font-size:1.08rem;line-height:1.25;color:var(--ink);}
.fact dd span{display:block;font-family:var(--sans);font-weight:400;font-size:.85rem;color:var(--muted);margin-top:.2rem;letter-spacing:0;}

/* ---------- Colophon ---------- */
.colophon{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.6rem 0 3rem;border-top:1px solid var(--line-2);margin-top:1.5rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted);
}
.colophon__c{color:var(--faint);}
.colophon__r{display:inline-flex;align-items:center;gap:.55rem;}
.colophon__r a{color:var(--muted);transition:color .18s ease;}
.colophon__r a:hover{color:var(--ink);}
.colophon .sep{color:var(--faint);}

/* ---------- Motion ---------- */
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);}
.reveal.is-in{opacity:1;transform:none;}
.masthead__lead .reveal:nth-child(1){transition-delay:.04s;}
.masthead__lead .reveal:nth-child(2){transition-delay:.11s;}
.masthead__lead .reveal:nth-child(3){transition-delay:.18s;}
.masthead__lead .reveal:nth-child(4){transition-delay:.25s;}
.masthead .portrait{transition-delay:.14s;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .masthead{grid-template-columns:1fr;gap:2rem;padding-top:clamp(2rem,7vh,3.5rem);}
  .portrait{order:-1;justify-self:start;max-width:min(46vw,240px);}
  .block{grid-template-columns:1fr;gap:1rem;}
  .block__index{flex-direction:row;align-items:baseline;gap:.7rem;}
}
@media (max-width:620px){
  .topbar__name{display:none;}
  .spec__head{display:none;}
  .spec__row{grid-template-columns:1fr;gap:.55rem;padding:1.35rem 0;}
  .spec__row::before{inset:0 calc(-1 * var(--pad));}
  .spec__focus{color:var(--muted);}
  .facts{grid-template-columns:1fr;gap:1.3rem;}
  .colophon__c{display:none;}
  /* stacked: the logo is its own line, so the fixed slot is no longer needed */
  .spec__venture{min-height:0;margin-bottom:.15rem;}
  .masthead{padding-block:clamp(1.75rem,6vh,2.75rem) clamp(2rem,5vh,3rem);}
  .statement{max-width:none;}
}

/* Small phones: the four nav labels are the tightest thing on the page. */
@media (max-width:480px){
  .topnav{gap:.85rem;}
  .topnav a{font-size:.68rem;letter-spacing:.02em;}
  .domains li{padding:0 .6rem;}
}
@media (max-width:360px){
  .topnav{gap:.6rem;}
  .topnav a{font-size:.64rem;letter-spacing:0;}
}

/* Touch devices: hover never fires, so give the links real tap targets instead. */
@media (hover:none){
  .topnav a{padding-block:.55rem;}
  .colophon__r a{padding-block:.35rem;}
  .lockup{padding-block:.15rem;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}