/* ==========================================================================
   Ibragim Zayniyev · personal site

   White page, one typeface, hairlines instead of boxes, real photographs.
   Inter for everything; IBM Plex Mono only where figures must line up
   (the journal, the phones in the demos, times).
   ========================================================================== */

:root{
  --bg:#ffffff;
  --fg:#111111;
  --fg-2:#4b4b4b;
  --fg-3:#8b8b8b;
  --line:#e9e9e9;
  --line-2:#d6d6d6;
  --surface:#f7f7f7;
  --surface-2:#efefef;
  --ok:#1f8a4c;
  --warn:#c98a1b;
  --bad:#c9413a;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap:768px;
  --wide:1040px;
  --prose:720px;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:72px }
body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  letter-spacing:-.006em;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block }
a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--line-2);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-color .15s ease;
}
a:hover{ text-decoration-color:var(--fg) }
strong, b{ font-weight:600 }
h1, h2, h3, h4{ margin:0; font-weight:600; letter-spacing:-.018em; line-height:1.25 }
h1{ font-size:28px; letter-spacing:-.024em; line-height:1.15 }
h2{ font-size:20px; margin-bottom:18px }
h3{ font-size:15px; font-weight:500 }
p{ margin:0 0 14px }
:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; border-radius:2px }
.skip-link{ position:absolute; left:8px; top:-48px; z-index:1000; padding:8px 12px; background:var(--fg); color:#fff; font-size:13px; border-radius:0 0 6px 6px; text-decoration:none }
.skip-link:focus{ top:0 }
.view[hidden]{ display:none !important }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px }
.wrap.wide{ max-width:var(--wide) }
/* inside a wide section, text still sits on the reading column */
.wide > .prose, .wide > .build-head, .wide > .figures, .wide > .toc{ max-width:var(--prose); margin-left:auto; margin-right:auto }
.wide > .figures{ margin-top:0; margin-bottom:28px }
.prose{ max-width:var(--prose) }
.prose p{ color:var(--fg-2); font-size:15.5px; line-height:1.65 }
.prose p:last-child{ margin-bottom:0 }
.section{ padding-top:64px }
.intro-line{ max-width:var(--prose); font-size:16.5px; line-height:1.6; color:var(--fg-2); margin:12px 0 18px }
.kicker{ font-size:13px; color:var(--fg-3); margin:0 0 8px }
.source{ font-size:12.5px; color:var(--fg-3); margin:12px 0 0; max-width:var(--prose) }
.source a{ color:inherit }
.next{ margin:72px auto 0; padding-top:18px; font-size:14px }
.next a{ display:inline-block; padding-top:18px; border-top:1px solid var(--line); color:var(--fg-2); text-decoration:none; width:100%; max-width:var(--prose) }
.next a:hover{ color:var(--fg) }

/* ---------- top bar ---------- */
.top{
  position:fixed; inset:0 0 auto; height:56px; z-index:100;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.top-in{ padding:0 28px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand{ font-size:14px; font-weight:600; text-decoration:none; letter-spacing:-.01em; white-space:nowrap }
#main-nav{ display:flex; gap:22px; align-items:center }
#main-nav a{ font-size:14px; color:var(--fg-3); text-decoration:none; padding:6px 0; white-space:nowrap; transition:color .15s ease }
#main-nav a:hover{ color:var(--fg-2) }
#main-nav a.active{ color:var(--fg); font-weight:500 }
main{ padding-top:56px }

/* ---------- hero ---------- */
.hero-photo, .banner-photo{
  width:100%; max-width:1920px; margin:0 auto;
  background:#e8e8e8 center 50% / cover no-repeat;
}
.hero-photo{ height:clamp(260px, 44vw, 560px); background-image:url("./images/registan-day.jpg?v=4") }
html[data-sky="dusk"] .hero-photo{ background-image:url("./images/registan-dusk.jpg?v=4") }
html[data-sky="night"] .hero-photo{ background-image:url("./images/registan-night.jpg?v=4") }
.banner-photo{ height:clamp(180px, 26vw, 340px); background-image:url("./images/sher-dor.jpg") }
.hero-cap{ display:flex; justify-content:space-between; gap:24px; padding-top:10px; font-size:12.5px; color:var(--fg-3) }
.hero-cap p{ margin:0 }
.hero-cap time{ font-family:var(--mono); font-size:12px; color:var(--fg-2) }
.intro{ padding-top:56px }
.links{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14px }
.collab{ margin:10px 0 0; font-size:13.5px; color:var(--fg-3) }
.collab a{ color:var(--fg-2) }

/* ---------- facts, figures ---------- */
.figures{ list-style:none; margin:40px 0 0; padding:20px 0 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; border-top:1px solid var(--line) }
.figures li b{ display:block; font-size:26px; font-weight:600; letter-spacing:-.025em; line-height:1.1 }
.figures li b small{ font-size:14px; font-weight:400; color:var(--fg-3); letter-spacing:0 }
.figures li span{ display:block; margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--fg-3) }
.figures.small{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:22px; padding-top:16px }
.figures.small li b{ font-size:22px }
.figures.stack{ grid-template-columns:1fr; gap:14px; margin-top:0; padding-top:0; border-top:0 }
.figures.stack li{ padding-bottom:14px; border-bottom:1px solid var(--line) }
.figures.stack li span{ margin-top:2px; font-size:13.5px; color:var(--fg-2) }

/* ---------- experience ---------- */
.cv{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.cv-row{ display:grid; grid-template-columns:152px minmax(0,1fr); gap:24px; padding:22px 0; border-bottom:1px solid var(--line) }
.cv-row:last-child{ border-bottom:0 }
.cv-when{ font-size:13px; color:var(--fg-2); line-height:1.5; font-variant-numeric:tabular-nums }
.cv-pic{ width:100%; max-width:152px; height:auto; aspect-ratio:1; object-fit:cover; margin-top:12px; border-radius:6px; background:var(--surface-2) }
.cv-body{ max-width:var(--prose) }
.cv-body h3{ font-size:15px; font-weight:500 }
.cv-org{ color:var(--fg-3); font-weight:400 }
.cv-org::before{ content:'·'; margin:0 6px 0 4px }
.cv-body p{ margin:8px 0 0; font-size:14.5px; line-height:1.62; color:var(--fg-2) }
.cv-sub{ list-style:none; margin:12px 0 0; padding:0 }
.cv-sub li{ padding:14px 0 0; margin-top:14px; border-top:1px solid var(--line) }
.cv-subwhen{ font-size:13.5px; font-weight:500 }

/* ---------- page heads, builds ---------- */
.page-head{ padding-top:64px }
.page-head .intro-line{ margin-bottom:0 }
.toc{ list-style:none; counter-reset:toc; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 24px; font-size:14px }
.toc li{ counter-increment:toc }
.toc li::before{ content:counter(toc, decimal-leading-zero); font-family:var(--mono); font-size:12px; color:var(--fg-3); margin-right:8px }
.toc a{ color:var(--fg-2); text-decoration:none }
.toc a:hover{ color:var(--fg) }
.build{ padding-top:72px; scroll-margin-top:72px }
.build-head{ display:flex; gap:16px; align-items:flex-start; margin-bottom:20px }
.wide > .build-head{ margin-bottom:20px }
.build-num{ font-family:var(--mono); font-size:12px; color:var(--fg-3); padding-top:8px }
.build-head h2{ margin:0; font-size:22px }
.build-meta{ margin:4px 0 0; font-size:13px; color:var(--fg-3) }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start }
.shot{ display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface) }
.shot img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top }

/* one chart, two bars, real numbers */
.chart{ margin:0; max-width:440px }
.chart figcaption{ font-size:13px; color:var(--fg-3); margin-bottom:14px }
.bar-row{ display:grid; grid-template-columns:44px 1fr 96px; align-items:center; gap:12px; padding:6px 0; font-size:13px; font-variant-numeric:tabular-nums }
.bar-label{ color:var(--fg-3) }
.bar{ display:block; height:14px; width:var(--w); border-radius:3px; background:var(--line-2) }
.bar.is-max{ background:var(--fg) }
.bar-val{ color:var(--fg) }
.bar-val em{ font-style:normal; color:var(--fg-3); margin-left:4px }

/* ---------- demos: shared ---------- */
.demo{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:18px 20px 16px; margin-top:8px }
.demo-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap }
.demo-title{ margin:0; font-size:14px; font-weight:500 }
.demo-title span{ font-weight:400; color:var(--fg-3); margin-right:8px }
.demo-hint{ margin:6px 0 16px; font-size:13.5px; color:var(--fg-2); max-width:640px }
.demo-foot{ margin:12px 0 0; font-size:12px; color:var(--fg-3) }
.demo-fallback{ margin:0; font-size:14px; color:var(--fg-2) }
.seg{ display:inline-flex; padding:2px; border:1px solid var(--line-2); border-radius:8px; background:#fff }
.seg button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:5px 10px; border-radius:6px; font:500 12px/1.2 var(--sans); color:var(--fg-3);
  display:inline-flex; align-items:center; gap:6px;
}
.seg button[aria-pressed="true"]{ background:var(--fg); color:#fff }
.seg .badge{ min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--bad); color:#fff; font-size:10px; font-weight:600; display:inline-grid; place-items:center }
.seg button[aria-pressed="true"] .badge{ background:#fff; color:var(--fg) }
.col-title{ margin:0 0 8px; font-size:12px; color:var(--fg-3) }

/* ---------- demo 1: housekeeping ---------- */
.hk-tabs{ display:none; margin-bottom:12px }
.hk-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start }
.hk-building{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px 12px }
.hk-floor{ padding:10px 0; border-top:1px solid var(--line) }
.hk-floor.is-here{ background:linear-gradient(90deg, var(--surface), transparent); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:6px }
.hk-floor-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:13px }
.hk-floor-name{ font-weight:500 }
.hk-floor-note{ color:var(--bad); font-size:12px }
.hk-here{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--fg-2) }
.hk-here svg{ width:13px; height:13px }
.bars{ display:inline-flex; align-items:flex-end; gap:2px; height:11px }
.bars i{ display:block; width:3px; border-radius:1px; background:var(--line-2) }
.bars i:nth-child(1){ height:4px } .bars i:nth-child(2){ height:7px } .bars i:nth-child(3){ height:11px }
.bars.b1 i:nth-child(-n+1), .bars.b2 i:nth-child(-n+2), .bars.b3 i:nth-child(-n+3){ background:currentColor }
.hk-spots{ display:flex; flex-wrap:wrap; gap:6px }
.hk-spot{
  position:relative; appearance:none; cursor:pointer;
  padding:5px 9px; border:1px solid var(--line-2); border-radius:6px; background:#fff;
  font:400 12.5px/1 var(--mono); color:var(--fg);
  transition:border-color .12s ease, background-color .12s ease;
}
.hk-spot.wide{ font-family:var(--sans); font-size:12px }
.hk-spot:hover{ border-color:var(--fg-3) }
.hk-spot[aria-pressed="true"]{ background:var(--fg); color:#fff; border-color:var(--fg) }
.hk-dot{ position:absolute; top:-4px; right:-4px; width:9px; height:9px; border-radius:50%; border:2px solid #fff }
.st-queued{ background:#fff; box-shadow:inset 0 0 0 2px var(--bad) }
.st-sent{ background:var(--bad) }
.st-onway{ background:var(--warn) }
.st-fixed{ background:var(--ok) }
.hk-legend{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); font-size:11.5px; color:var(--fg-3) }
.hk-legend span{ display:inline-flex; align-items:center; gap:5px }
.hk-legend i{ position:static; display:inline-block; width:8px; height:8px; border-radius:50%; border:0 }

.phone{ background:#fff; border:1px solid var(--line-2); border-radius:22px; padding:8px; box-shadow:0 1px 2px rgba(0,0,0,.04) }
.phone-label{ display:block; padding:2px 0 7px; text-align:center; font-size:11px; color:var(--fg-3) }
.phone-screen{ display:flex; flex-direction:column; min-height:430px; border-radius:15px; overflow:hidden; background:#fafafa; border:1px solid var(--line) }
.phone-status{ display:flex; align-items:center; gap:8px; padding:8px 12px 6px; font:400 11px/1 var(--mono); color:var(--fg-2) }
.phone-status .net{ margin-left:auto; font-family:var(--sans); font-weight:500 }
.phone-status.off .net{ color:var(--bad) }
.phone-status.on .net{ color:var(--ok) }
.phone-app{ flex:1 1 auto; display:flex; flex-direction:column; gap:10px; padding:4px 12px 12px }
.app-title{ margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em }
.app-sub{ margin:-8px 0 0; font-size:11.5px; color:var(--fg-3) }
.field{ display:flex; flex-direction:column; gap:5px }
.field-label{ font-size:11px; color:var(--fg-3) }
.field-value{ font-size:14px; font-weight:500 }
.chips{ display:flex; flex-wrap:wrap; gap:5px }
.chip{ appearance:none; cursor:pointer; border:1px solid var(--line-2); background:#fff; padding:4px 9px; border-radius:999px; font:400 12px/1.3 var(--sans); color:var(--fg) }
.chip[aria-pressed="true"]{ background:var(--fg); border-color:var(--fg); color:#fff }
.photo{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:4/3; border:1px dashed var(--line-2); background:var(--surface-2); display:grid; place-items:center }
.photo.has{ border:1px solid var(--line-2); background:#e9edf1 }
.photo svg{ width:76%; height:auto }
.photo-stamp{ position:absolute; right:7px; bottom:6px; font:400 10px/1 var(--mono); color:#ff9f43; text-shadow:0 1px 1px rgba(0,0,0,.3) }
@media (prefers-reduced-motion:no-preference){
  .photo .drip{ animation:drip 1.4s ease-in infinite }
  .photo .drip.d2{ animation-delay:.7s }
  @keyframes drip{ 0%{ transform:translateY(-6px); opacity:0 } 25%{ opacity:1 } 100%{ transform:translateY(12px); opacity:0 } }
  .photo.flash::after{ content:''; position:absolute; inset:0; background:#fff; animation:flash .4s ease-out forwards }
  @keyframes flash{ from{ opacity:1 } to{ opacity:0 } }
}
.btn{ appearance:none; cursor:pointer; border:0; padding:9px 12px; border-radius:9px; font:500 13px/1.1 var(--sans); transition:opacity .15s ease, transform .1s ease }
.btn:active{ transform:scale(.985) }
.btn[disabled]{ opacity:.35; cursor:not-allowed }
.btn-primary{ background:var(--fg); color:#fff }
.btn-ghost{ background:#fff; color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-2) }
.btn-cam{ background:#fff; color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,.12), inset 0 0 0 1px var(--line); display:inline-flex; align-items:center; gap:7px }
.btn-cam svg{ width:15px; height:15px }
.btn-warn{ background:var(--warn); color:#fff }
.btn-ok{ background:var(--ok); color:#fff }
.outbox{ padding:10px; border-radius:10px; background:#fff5f4; border:1px solid rgba(201,65,58,.3) }
.outbox-title{ display:flex; align-items:center; gap:6px; margin:0 0 6px; font-size:12px; font-weight:500; color:var(--bad) }
.outbox ul, .sentlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px }
.outbox li, .sentlist li{ display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--fg-2) }
.outbox li time, .sentlist li time{ font-family:var(--mono); color:var(--fg-3) }
.outbox .btn{ margin-top:8px; width:100% }
.spin{ width:11px; height:11px; border-radius:50%; border:2px solid rgba(201,65,58,.25); border-top-color:var(--bad) }
@media (prefers-reduced-motion:no-preference){ .spin{ animation:spin .9s linear infinite } @keyframes spin{ to{ transform:rotate(360deg) } } }
.pill{ display:inline-block; padding:2px 7px; border-radius:999px; font-size:10.5px; font-weight:500; line-height:1.4; white-space:nowrap }
.pill.st-queued{ color:var(--bad); background:rgba(201,65,58,.1); box-shadow:none }
.pill.st-sent{ color:#fff; background:var(--bad) }
.pill.st-onway{ color:#fff; background:var(--warn) }
.pill.st-fixed{ color:#fff; background:var(--ok) }
.notes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.note{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:9px; padding:9px; border-radius:10px; background:#fff; border:1px solid var(--line) }
@media (prefers-reduced-motion:no-preference){
  .note.is-new{ animation:drop .35s ease }
  @keyframes drop{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
  .phone.buzz{ animation:buzz .45s linear }
  @keyframes buzz{ 0%,100%{ transform:none } 20%,60%{ transform:translateX(-2px) } 40%,80%{ transform:translateX(2px) } }
}
.note-thumb{ border-radius:7px; overflow:hidden; background:#e9edf1; aspect-ratio:1; display:grid; place-items:center }
.note-thumb svg{ width:92%; height:auto }
.note-title{ margin:0; font-size:12.5px; font-weight:500; line-height:1.3 }
.note-meta{ margin:2px 0 6px; font:400 10.5px/1.3 var(--mono); color:var(--fg-3) }
.note-actions{ display:flex; gap:6px; align-items:center }
.note-actions .btn{ padding:6px 9px; font-size:11.5px; border-radius:7px }
.empty{ margin:auto 0; text-align:center; font-size:12.5px; color:var(--fg-3); padding:30px 10px }
.empty svg{ display:block; width:30px; height:30px; margin:0 auto 8px; opacity:.4 }
.alert{ margin:0; padding:7px 10px; border-radius:8px; background:var(--fg); color:#fff; font-size:11.5px; line-height:1.35; display:flex; gap:8px; align-items:center }
.hk-log-wrap{ margin-top:14px; padding:12px 16px; border-radius:12px; background:#fff; border:1px solid var(--line) }
.hk-log{ list-style:none; margin:0; padding:0; font:400 12px/1.7 var(--mono); color:var(--fg-2); max-height:150px; overflow:auto }
.hk-log li{ display:flex; gap:10px }
.hk-log time{ color:var(--fg-3) }
.hk-log .lg-queued{ color:var(--bad) }
.hk-log .lg-sync{ color:var(--fg) }
.hk-log .lg-fixed{ color:var(--ok) }
.hk-log .lg-empty{ color:var(--fg-3) }

/* ---------- demo 2: review assistant ---------- */
.rv-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:14px; align-items:start }
.rv-guests{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px }
.rv-guest{
  appearance:none; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:#fff;
  font:inherit; color:inherit; transition:border-color .12s ease;
}
.rv-guest:hover{ border-color:var(--fg-3) }
.rv-guest[aria-pressed="true"]{ border-color:var(--fg); box-shadow:inset 0 0 0 1px var(--fg) }
.rv-avatar{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--fg-2); font-size:11.5px; font-weight:600 }
.rv-name{ display:block; font-size:13.5px; font-weight:500; line-height:1.25 }
.rv-from{ display:block; font-size:12px; color:var(--fg-3) }
.rv-chan{ font-size:11px; color:var(--fg-3) }
.folio{ border-radius:10px; background:#fff; border:1px solid var(--line); padding:10px 12px 6px }
.folio-title{ margin:0 0 4px; display:flex; justify-content:space-between; font-size:11px; color:var(--fg-3) }
.folio dl{ margin:0 }
.folio-row{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; padding:7px 4px; margin:0 -4px; border-top:1px solid var(--line); border-radius:4px; cursor:default; transition:background-color .12s ease }
.folio-row dt{ font-size:12.5px; color:var(--fg-3) }
.folio-row dd{ margin:0; font:400 12.5px/1.3 var(--mono); text-align:right }
.folio-row:hover, .folio-row:focus-visible{ background:#fff3c4 }
.rv-out{ display:flex; flex-direction:column; gap:10px }
.rv-toggles{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--fg-2) }
.rv-toggles label{ display:inline-flex; gap:7px; align-items:center; cursor:pointer }
.rv-toggles input{ accent-color:var(--fg); width:14px; height:14px; margin:0 }
.chan{ border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#fff }
.chan-head{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); font-size:12.5px }
.chan-head b{ font-weight:500 }
.chan-head small{ display:block; font-size:11px; color:var(--fg-3) }
.chan-dot{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--fg); color:#fff; font-size:9.5px; font-weight:600; flex:0 0 auto }
.chan-body{ padding:14px; min-height:210px; background:var(--surface) }
.chan-gm .chan-body{ background:#fff }
.bubble{ position:relative; max-width:94%; padding:10px 12px 18px; border-radius:12px; border-top-left-radius:3px; background:#fff; border:1px solid var(--line); font-size:14px; line-height:1.55 }
.bubble-time{ position:absolute; right:10px; bottom:5px; font:400 10px/1 var(--mono); color:var(--fg-3) }
.mail-meta{ margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--fg-3); line-height:1.6 }
.mail-meta b{ color:var(--fg); font-weight:500 }
.mail-body{ font-size:14px; line-height:1.6 }
.rv-msg mark{ background:transparent; color:inherit; border-radius:2px; padding:0 1px; transition:background-color .15s ease }
.rv-stage.hl .rv-msg mark{ background:#fff3c4 }
.rv-stage[data-focus="nights"] mark[data-f="nights"], .rv-stage[data-focus="room"] mark[data-f="room"],
.rv-stage[data-focus="breakfast"] mark[data-f="breakfast"], .rv-stage[data-focus="drinks"] mark[data-f="drinks"],
.rv-stage[data-focus="desk"] mark[data-f="desk"]{ background:#ffdf6b !important }
.rv-tr{ margin:0; padding:12px 14px; border-radius:10px; background:#fff; border:1px dashed var(--line-2); font-size:13.5px; color:var(--fg-2) }
.rv-tr b{ display:block; margin-bottom:4px; font-size:11px; font-weight:500; color:var(--fg-3) }

/* ---------- mehmon ---------- */
.essay{ padding-top:48px }
.proverb{ font-size:clamp(28px, 4.6vw, 40px); font-weight:600; letter-spacing:-.03em; line-height:1.1; margin:0 0 8px }
.proverb-en{ font-size:16px; color:var(--fg-2); margin:0 0 36px }
.essay > p{ font-size:16.5px; line-height:1.7; color:#222 }
.essay h3{ font-size:18px; font-weight:600; margin:44px 0 12px }
.essay .figures{ margin-top:24px; grid-template-columns:repeat(3, minmax(0,1fr)) }
.learn{ margin:0 0 16px; padding:0 0 0 22px }
.learn li{ padding:6px 0; font-size:15.5px; line-height:1.6; color:var(--fg-2) }
.learn b{ color:var(--fg); font-weight:500 }
.creed{ margin:36px 0; padding:2px 0 2px 20px; border-left:2px solid var(--line-2) }
.creed p{ font-size:17px; line-height:1.55; color:#222; margin:0 0 8px }
.creed cite{ font-style:normal; font-size:13px; color:var(--fg-3) }
.route{ list-style:none; margin:8px 0 28px; padding:0 }
.route li{ display:grid; grid-template-columns:52px 64px minmax(0,1fr); gap:18px; align-items:center; padding:12px 0; border-top:1px solid var(--line) }
.route li:last-child{ border-bottom:1px solid var(--line) }
.route time{ font:400 12px/1 var(--mono); color:var(--fg-3) }
.route img{ width:64px; height:64px; object-fit:cover; border-radius:6px; background:var(--surface-2) }
.route h4{ font-size:15px; font-weight:500 }
.route p{ margin:2px 0 0; font-size:14px; line-height:1.5; color:var(--fg-2) }
.signoff{ color:var(--fg-2) }

/* ---------- interests ---------- */
.int-shell{ display:grid; grid-template-columns:minmax(0,1fr) var(--prose) minmax(0,1fr); align-items:start; padding-top:40px }
.int-rail{ grid-column:1; position:sticky; top:80px; justify-self:end; padding-right:36px; text-align:right }
.int-main{ grid-column:2 }
.int-rail ol{ list-style:none; margin:0; padding:0 }
.int-rail a{ display:block; padding:4px 0; font-size:13px; color:var(--fg-3); text-decoration:none; transition:color .15s ease }
.int-rail a:hover{ color:var(--fg-2) }
.int-rail a.is-active{ color:var(--fg); font-weight:500 }
.int-group{ padding-bottom:56px }
.int-group h2{ margin-bottom:10px }
.count{ font:400 12px/1 var(--mono); color:var(--fg-3); margin-left:8px; vertical-align:2px }
.int-list{ list-style:none; margin:0; padding:0 }
.int-list li{ padding:16px 0; border-top:1px solid var(--line) }
.int-head{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px }
.int-name{ font-weight:500 }
.int-meta{ font-size:12.5px; color:var(--fg-3) }
.int-list blockquote{ margin:8px 0 0; padding:0 0 0 16px; border-left:2px solid var(--line-2); font-size:15.5px; line-height:1.62; color:#222 }
.int-note{ margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--fg-2) }
.quotes{ list-style:none; margin:0; padding:0 }
.quotes li{ padding:16px 0; border-top:1px solid var(--line) }
.quotes p{ margin:0; font-size:18px; font-weight:500; letter-spacing:-.012em; line-height:1.4 }
.quotes .tr{ font-weight:400; color:var(--fg-3); font-size:15px }
.quotes cite{ display:block; margin-top:4px; font-style:normal; font-size:13px; color:var(--fg-3) }
.shelf{ list-style:none; margin:0 0 14px; padding:0; columns:2; column-gap:32px }
.shelf li{ break-inside:avoid; padding:7px 0; border-top:1px solid var(--line); font-size:14.5px }
.ext{ list-style:none; margin:0; padding:0 }
.ext a{ display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:12px; padding:11px 0; border-top:1px solid var(--line); text-decoration:none; font-size:14px }
.ext a > span:first-child{ font-weight:500 }
.ext-handle{ color:var(--fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ext-go{ color:var(--fg-3) }
.ext a:hover .ext-go{ color:var(--fg) }

/* ---------- books ---------- */
.shelf-title{ margin:48px 0 6px; font-size:13px; font-weight:500; color:var(--fg-3) }
.books{ list-style:none; margin:0; padding:0; max-width:760px }
.book{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:24px; padding:24px 0; border-top:1px solid var(--line) }
.book:last-child{ border-bottom:1px solid var(--line) }
.cover{ display:block; text-decoration:none; align-self:start }
.cover img{ width:88px; height:auto; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.06) }
.book h3{ font-size:16px; font-weight:500 }
.book-by{ margin:3px 0 10px; font-size:13px; color:var(--fg-3) }
.book div p:last-child{ margin:0; font-size:14.5px; line-height:1.62; color:var(--fg-2); max-width:60ch }

/* ---------- footer, toast ---------- */
.foot{ margin-top:96px; padding:28px 0 48px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-3) }
.foot-row{ display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap }
.foot-links{ display:flex; gap:16px }
.foot-links a{ text-decoration:none; color:var(--fg-2) }
.foot-links a:hover{ color:var(--fg) }
.foot-note{ margin:8px 0 0 }
.toast{
  position:fixed; left:50%; bottom:24px; z-index:200; transform:translateX(-50%);
  max-width:min(92vw, 460px); padding:10px 14px; border-radius:10px;
  background:var(--fg); color:#fff; font-size:13.5px; line-height:1.45;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.toast b{ font-weight:600 }
@media (prefers-reduced-motion:no-preference){
  .toast.show{ animation:toastIn .25s ease both }
  @keyframes toastIn{ from{ opacity:0; transform:translate(-50%, 8px) } to{ opacity:1; transform:translate(-50%, 0) } }
  .view.view-enter{ animation:viewIn .18s ease both }
  @keyframes viewIn{ from{ opacity:0 } to{ opacity:1 } }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px){
  .hk-grid{ grid-template-columns:1fr 1fr }
  .hk-building{ grid-column:1 / -1 }
  .int-shell{ grid-template-columns:1fr }
  .int-rail{ display:none }
  .int-main{ grid-column:1 }
}
@media (max-width:880px){
  .split{ grid-template-columns:1fr; gap:28px }
  .rv-grid{ grid-template-columns:1fr }
  .figures{ grid-template-columns:1fr 1fr }
  .essay .figures{ grid-template-columns:1fr }
}
@media (max-width:700px){
  .hk-grid{ grid-template-columns:1fr }
  .hk-tabs{ display:inline-flex }
  .hk-grid .phone-label{ display:none }
  .hk-grid[data-show="hk"] .phone-eng, .hk-grid[data-show="eng"] .phone-hk{ display:none }
  .phone-screen{ min-height:0 }
}
@media (max-width:640px){
  .wrap{ padding:0 18px }
  /* these three are .wrap too, and the line above would zero their top padding */
  .hero-cap{ padding-top:10px }
  .essay{ padding-top:36px }
  .int-shell{ padding-top:32px }
  .top-in{ padding:0 18px; gap:0 }
  .brand{ display:none }
  #main-nav{ width:100%; justify-content:space-between; gap:12px; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 92%, transparent); mask-image:linear-gradient(90deg, #000 92%, transparent); padding-right:18px }
  #main-nav::-webkit-scrollbar{ display:none }
  #main-nav a{ font-size:13.5px }
  .hero-photo{ height:62vw; min-height:220px }
  .hero-cap{ flex-direction:column; gap:2px }
  .intro, .section, .page-head, .build{ padding-top:44px }
  .cv-row{ grid-template-columns:1fr; gap:6px; padding:18px 0 }
  .cv-pic{ width:96px; margin:8px 0 4px }
  .figures.small{ grid-template-columns:1fr; gap:10px }
  .figures.small li{ display:flex; align-items:baseline; gap:12px }
  .figures.small li b{ min-width:64px }
  .figures.small li span{ margin:0 }
  .demo{ padding:14px 14px 12px; border-radius:12px }
  .route li{ grid-template-columns:44px 52px minmax(0,1fr); gap:12px }
  .route img{ width:52px; height:52px }
  .book{ grid-template-columns:64px minmax(0,1fr); gap:16px }
  .cover img{ width:64px }
  .shelf{ columns:1 }
  .ext a{ grid-template-columns:96px minmax(0,1fr) auto }
  .foot{ margin-top:64px }
}
@media (max-width:400px){
  .figures{ grid-template-columns:1fr 1fr; gap:16px }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
}
@media print{
  .top, .toast, .demo, .next{ display:none !important }
  .view[hidden]{ display:block !important }
  main{ padding-top:0 }
  .hero-photo, .banner-photo{ height:240px }
}