/* han.espil.online — fully Monocle-fitted edition
   Colour system (per Han, 2026-10-14):
   - Canvas: PANTONE 11-4201 Cloud Dancer — Pantone Color of the Year 2026,
     digital approx. #F0EEE9 (RGB 240 238 233). The "blank canvas" white.
   - Highlight: editorial red #C8102E — links, kickers, numerals, cursor ring.
   - Ink: #161616. Everything else is a tone between Cloud Dancer and ink.
   Custom mouse: the UseDesign logo itself (assets/usedesign-logo.svg, Han's file),
   as cursor — hover turns the spiral in the hat, pressing grows its feather.
   Ink version by day, Cloud Dancer version by night; native fallbacks kept. */
:root{
  --paper:#f0eee9;            /* Cloud Dancer */
  --paper-2:#e8e4da;          /* deeper cloud tone — cards, bands */
  --ink:#161616;
  --muted:#6e6a61;
  --rule:#d5d0c4;
  --highlight:#c8102e;
  --highlight-ink:#a50d26;
  --card:#e8e4da;
  --masthead-bg:#161616;
  --masthead-fg:#f0eee9;
  --sans:Helvetica,Arial,"Helvetica Neue",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --cursor:url("assets/usedesign-cursor-light.svg") 12 11, auto;
  --cursor-link:url("assets/usedesign-cursor-light-hover.svg") 12 11, pointer;
  --cursor-active:url("assets/usedesign-cursor-light-active.svg") 12 11, auto;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141412;
    --paper-2:#1c1c19;
    --ink:#f0eee9;
    --muted:#a8a296;
    --rule:#3b3a35;
    --highlight:#ef6461;
    --highlight-ink:#ef6461;
    --card:#1c1c19;
    --masthead-bg:#f0eee9;
    --cursor:url("assets/usedesign-cursor-dark.svg") 12 11, auto;
    --cursor-link:url("assets/usedesign-cursor-dark-hover.svg") 12 11, pointer;
    --cursor-active:url("assets/usedesign-cursor-dark-active.svg") 12 11, auto;
    --masthead-fg:#161616;
  }
}
html[data-theme="dark"]{
    --paper:#141412;
    --paper-2:#1c1c19;
    --ink:#f0eee9;
    --muted:#a8a296;
    --rule:#3b3a35;
    --highlight:#ef6461;
    --highlight-ink:#ef6461;
    --card:#1c1c19;
    --masthead-bg:#f0eee9;
    --cursor:url("assets/usedesign-cursor-dark.svg") 12 11, auto;
    --cursor-link:url("assets/usedesign-cursor-dark-hover.svg") 12 11, pointer;
    --cursor-active:url("assets/usedesign-cursor-dark-active.svg") 12 11, auto;
    --masthead-fg:#161616;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif);
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  cursor:var(--cursor);
}
::selection{background:var(--highlight); color:#f0eee9}
a{color:var(--highlight-ink); text-decoration:none; cursor:var(--cursor-link)}
a:hover{text-decoration:underline; text-underline-offset:3px}
/* Press state: while the mouse is down, the hat's feather grows. */
body:active, body:active *{cursor:var(--cursor-active)}
img{max-width:100%}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}

/* ---- Folio bar: the magazine's running head ---- */
.folio{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:9px 0 8px; border-bottom:1px solid var(--ink);
  font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
}
.folio .folio-mid{color:var(--highlight-ink)}
.folio .folio-end{display:inline-flex; align-items:center; gap:12px}
.theme-toggle{
  font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:transparent; color:var(--ink); border:1px solid var(--ink); border-radius:999px;
  padding:3px 10px; cursor:var(--cursor-link); line-height:1.5;
}
.theme-toggle:hover{background:var(--ink); color:var(--paper)}

/* ---- Masthead: a magazine cover, not a page header ---- */
.masthead{
  background:var(--masthead-bg); color:var(--masthead-fg);
  margin:0 -28px; padding:44px 28px 30px; text-align:center;
}
.masthead .brand{
  font-family:var(--sans); font-size:clamp(52px,10vw,104px); font-weight:800;
  letter-spacing:-.02em; line-height:.95; text-transform:uppercase;
}
.masthead .brand span{color:var(--highlight)}
.masthead .tagline{font-style:italic; margin-top:12px; font-size:clamp(16px,2.4vw,20px); opacity:.85}
.masthead .issue{
  margin:22px auto 0; max-width:760px; padding-top:12px;
  border-top:1px solid var(--highlight);
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
}

/* ---- Contents: sticky index bar ---- */
nav.contents{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:3px double var(--ink); padding:11px 0;
  font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; text-align:center;
}
nav.contents a{color:var(--ink); margin:0 10px; white-space:nowrap; display:inline-block; padding:3px 0}
nav.contents a:hover{color:var(--highlight-ink); text-decoration:none; box-shadow:inset 0 -2px 0 var(--highlight)}
nav.contents a.active{color:var(--highlight-ink); box-shadow:inset 0 -2px 0 var(--highlight)}

/* ---- Sections: each one opens like a magazine department ---- */
section{padding:56px 0 12px; scroll-margin-top:64px; border-top:4px solid var(--ink); margin-top:44px}
section:first-of-type{border-top:none; margin-top:0}
.kicker{
  display:inline-block; background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; margin:0 0 14px; padding:5px 10px 4px;
}
.kicker::after{content:""; }
h2{
  font-size:clamp(30px,5.4vw,46px); line-height:1.08; margin:0 0 20px;
  font-weight:700; letter-spacing:-.01em; max-width:22ch;
}
h3{font-size:21px; margin:26px 0 6px; line-height:1.3}
p{margin:0 0 14px}
.lede{font-size:19.5px; line-height:1.62}
#briefing .lede::first-letter, #cover-story .lede::first-letter{
  float:left; font-size:64px; line-height:.82; padding:6px 10px 0 0;
  font-weight:700; color:var(--highlight);
}
.small{font-size:14.5px; color:var(--muted)}
hr.rule{border:none; border-top:1px solid var(--rule); margin:30px 0}

/* ---- Briefing layout: text + sidebar fact box (desktop magazine grid) ---- */
@media (min-width:900px){
  #briefing{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:44px}
  #briefing .kicker, #briefing h2{grid-column:1/-1}
  #briefing .factbox{grid-column:2; grid-row:3/span 3; align-self:start; margin:0}
  #briefing > p, #briefing > h3{grid-column:1}
}

/* Fact box — the magazine's "at a glance" panel */
.factbox{border:2px solid var(--ink); padding:20px 22px; margin:22px 0; background:var(--card)}
.factbox dl{margin:0; display:grid; grid-template-columns:118px 1fr; gap:8px 16px}
.factbox dt{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--highlight-ink); padding-top:4px;
}
.factbox dd{margin:0}

/* Pull quote */
.pullquote{
  font-size:clamp(26px,5vw,38px); font-style:italic; text-align:center;
  line-height:1.3; margin:38px auto; max-width:700px;
}
.pullquote::before{content:""; display:block; width:54px; height:4px; background:var(--highlight); margin:0 auto 20px}
.pullquote .attrib{display:block; font-size:13px; font-style:normal; color:var(--muted); margin-top:12px; font-family:var(--sans); font-weight:700; letter-spacing:.14em; text-transform:uppercase}

/* Connected-world panel — the issue's centre spread */
.panel{background:var(--masthead-bg); color:var(--masthead-fg); padding:28px 30px 18px; margin:28px 0}
.panel h3{text-align:center; font-size:25px; margin-top:0}
.panel .small{color:inherit; opacity:.75}
.panel ol{margin:0; padding-left:22px}
.panel li{margin:0 0 10px}
.panel li strong{font-variant:small-caps; letter-spacing:.03em; color:inherit}
.panel a{color:inherit; text-decoration:underline}

/* Record entries — date column + story column, like a magazine chronology */
.entry{padding:16px 0; border-bottom:1px solid var(--rule)}
.entry:last-child{border-bottom:none}
@media (min-width:760px){
  .entry{display:grid; grid-template-columns:178px minmax(0,1fr); column-gap:28px}
  .entry h3, .entry p{grid-column:2}
  .entry .when{grid-row:1/span 2}
}
.entry .when{
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--highlight-ink); padding-top:5px;
}
.entry h3{margin:0 0 6px; font-size:20px}
.entry p{margin:0 0 8px}

/* Selected works — a two-column magazine index */
ol.works{list-style:none; margin:0; padding:0; counter-reset:work}
@media (min-width:860px){
  ol.works{display:grid; grid-template-columns:1fr 1fr; column-gap:44px}
}
ol.works li{counter-increment:work; padding:16px 0 16px 62px; border-top:1px solid var(--ink); position:relative}
ol.works li::before{
  content:counter(work,decimal-leading-zero);
  position:absolute; left:0; top:14px;
  font-family:var(--sans); font-size:22px; font-weight:800; color:var(--highlight);
}
ol.works h3{margin:0 0 4px; font-size:19px}
ol.works p{margin:0}
.connects{font-style:italic; color:var(--highlight-ink)}

/* Full index — compact, ruled, dated */
.index-group{margin:0 0 10px}
.index-group h3{
  font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:7px;
}
ul.index{list-style:none; margin:0 0 22px; padding:0}
ul.index li{padding:8px 0; border-bottom:1px dotted var(--rule); font-size:15.5px}
ul.index li:last-child{border-bottom:none}
ul.index .yr{
  display:inline-block; font-family:var(--sans); font-size:11px; font-weight:700; color:var(--paper);
  background:var(--highlight); letter-spacing:.06em; padding:1px 6px; margin:0 2px; vertical-align:1px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) ul.index .yr{color:#161616} }
html[data-theme="dark"] ul.index .yr{color:#161616}
.footnote{font-size:13.5px; color:var(--muted); font-style:italic}

/* Capabilities — departments with lettered badges */
.dept{padding:14px 0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:16px}
.dept:last-child{border-bottom:none}
.dept h3{margin:0 0 4px; font-size:19px; grid-column:2}
.dept p{margin:0; grid-column:2}
.dept h3 .letter{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-left:-68px; float:left;
  background:var(--highlight); color:#f0eee9; border-radius:50%;
  font-family:var(--sans); font-size:16px; font-weight:800;
}
.toolbox{margin-top:34px; border-top:4px solid var(--ink); padding-top:10px}
.toolbox h3{font-size:22px}
.toolbox h4{
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--highlight-ink); margin:22px 0 6px;
}
.toolbox ul{list-style:none; margin:0; padding:0; columns:2; column-gap:40px}
.toolbox li{padding:5px 0; border-bottom:1px dotted var(--rule); font-size:15.5px; break-inside:avoid}

/* Images — captioned like magazine plates */
figure.cover{margin:28px 0}
figure.cover img{width:100%; height:auto; display:block; border:1px solid var(--ink)}
figure.cover figcaption{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-top:9px; text-align:left;
}
figure.cover figcaption::before{content:""; display:inline-block; width:9px; height:9px; background:var(--highlight); margin-right:8px}

/* Espil House renders (kept from v1, re-toned) */
.house-renders{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0}
.house-renders img{width:100%; height:auto; display:block; border:1px solid var(--ink)}
.house-renders img:first-child{grid-column:1/-1}
.house-renders figcaption{grid-column:1/-1; font-size:13px; font-style:italic; color:var(--muted)}
@media (max-width:640px){.house-renders{grid-template-columns:1fr}}

/* Correspondence / footer — colophon */
.contact-list{list-style:none; margin:0; padding:0}
.contact-list li{padding:10px 0; border-bottom:1px solid var(--rule); font-size:16.5px}
.contact-list .label{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--highlight-ink); display:inline-block; width:118px;
}
footer{
  margin:56px -28px 0; padding:26px 28px 44px;
  background:var(--masthead-bg); color:var(--masthead-fg);
  text-align:center; font-size:13.5px; font-style:italic;
}
footer .colophon{
  display:block; font-family:var(--sans); font-style:normal; font-weight:700;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; opacity:.75; margin-top:10px;
}
footer a{color:inherit; text-decoration:underline}

/* Small screens: single column, swipeable contents */
@media (max-width:899px){
  .wrap{padding:0 18px}
  .masthead{margin:0 -18px; padding:34px 18px 24px}
  footer{margin:48px -18px 0; padding:22px 18px 36px}
  body{font-size:16px}
  .factbox dl{grid-template-columns:1fr; gap:2px}
  .factbox dd{margin-bottom:8px}
  .toolbox ul{columns:1}
  ol.works li{padding-left:50px}
  nav.contents{text-align:left; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .folio .folio-mid{display:none}
}
/* ---- Loading screen: the supplied house render + a glass of water ----
   Full-screen cover shown while the page's real assets load. The glass
   circle fills with water in step with measured load progress (JS at the
   end of index.html sets --p and the % counter); waves, bubbles and the
   glass shine sell the water. Fades out on completion; a no-JS page never
   traps the reader (noscript rule in index.html hides it). */
@property --p{syntax:"<number>"; inherits:true; initial-value:0}
#loader{
  position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px;
  --rock:calc(0.5deg + var(--p,0) * .02deg + var(--agit,0.7) * (1.1deg + var(--p,0) * .055deg));
  --sway:calc(0.4px + var(--p,0) * .016px + var(--agit,0.7) * (0.9px + var(--p,0) * .05px));
  --bob:calc(.8px + var(--p,0) * .032px);
  background:#141412; overflow:hidden;
  transition:opacity .6s ease, visibility .6s;
}
#loader.done{opacity:0; visibility:hidden; pointer-events:none}
#loader .loader-bg{
  position:absolute; inset:0;
  background:url("universe/render-tree.png") center/cover no-repeat;
  opacity:.55; transform:scale(1.04);
}
#loader .loader-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,18,.42), rgba(20,20,18,.18) 40%, rgba(20,20,18,.55));
}
#loader .glass{
  position:relative; width:98px; height:98px; border-radius:50%;
  overflow:hidden; isolation:isolate;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.34), rgba(255,255,255,.10) 26%, rgba(255,255,255,0) 48%),
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.03) 52%, rgba(255,255,255,0) 62%),
    linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%, rgba(120,200,255,.06) 78%, rgba(190,242,100,.08)),
    rgba(240,238,233,.02);
  border:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 10px 18px rgba(255,255,255,.14),
    inset 0 -16px 24px rgba(0,0,0,.38),
    inset 0 0 17px rgba(240,238,233,.10),
    0 0 18px rgba(220,255,190,.10),
    0 12px 30px rgba(0,0,0,.4);
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.35));
  -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px);
}
/* Spherical rim light (Han 2026-10-15): a thin ring whose brightness varies
   around the circle, so the edge reads as curved glass catching light. */
#loader .glass::before{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:4; pointer-events:none;
  background:conic-gradient(from 215deg, rgba(255,255,255,.62), rgba(255,255,255,.10) 20%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 74%, rgba(190,242,100,.24) 90%, rgba(255,255,255,.5));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
/* Bounce light pooled at the bottom inside of the glass. */
#loader .glass::after{
  content:""; position:absolute; left:10%; right:10%; bottom:4px; height:18px; border-radius:50%; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(216,252,170,.34), rgba(216,252,170,0) 70%);
}
/* The liquid mass: everything wet lives in .slosh and rocks as one body,
   pivoting low in the glass — the fill stays put, the liquid moves. */
#loader .slosh{
  position:absolute; inset:-6px; z-index:1; /* oversized so a hard rock never pulls a corner clear of the glass */
  transform-origin:50% 88%;
  animation:espilSloshRock 3.4s ease-in-out infinite alternate;
}
@keyframes espilSloshRock{
  from{transform:rotate(calc(var(--rock) * -1)) translateX(calc(var(--sway) * -1))}
  to{transform:rotate(var(--rock)) translateX(var(--sway))}
}
/* Liquid physics layer (Han 2026-10-15): a canvas spring-surface with
   droplet particles, driven by the same --p (script at end of body).
   Pure enhancement — while .physics-on is absent the CSS liquid above
   renders exactly as before, and any failure leaves it in place. */
#loader .water-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; display:none; filter:brightness(1.24) saturate(1.38)}
#loader.physics-on .water-canvas{display:block}
#loader.physics-on .slosh{display:none}
#loader .water{
  position:absolute; left:0; right:0; bottom:0; height:calc(var(--p,0)*1%);
  background:
    linear-gradient(100deg, rgba(255,255,255,.12), rgba(255,255,255,0) 36%, rgba(255,255,255,.07) 60%, rgba(255,255,255,0) 82%),
    linear-gradient(180deg, rgba(255,245,155,.78), rgba(254,246,160,.72) 22%, rgba(224,252,175,.70) 45%, rgba(198,244,120,.68) 66%, rgba(172,232,70,.70) 85%, rgba(148,214,50,.74));
  filter:brightness(1.24) saturate(1.38);
  transition:height .12s linear; /* JS tick already eases; a long CSS transition makes the water trail the % counter */
  z-index:1;
}
#loader .water::before{ /* caustic glow pooled at the bottom of the glass */
  content:""; position:absolute; left:6%; right:6%; bottom:2px; height:34%;
  background:radial-gradient(ellipse at 50% 100%, rgba(232,255,200,.68), rgba(232,255,200,0) 70%);
}
#loader .water::after{ /* a slow light streak travelling through the liquid */
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 28%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.05) 55%, transparent 68%);
  background-size:260% 100%;
  animation:espilStreakSlide 5.5s ease-in-out infinite alternate;
}
@keyframes espilStreakSlide{from{background-position:110% 0}to{background-position:-30% 0}}
/* The surface: an ellipse the light catches — reads as liquid in a round glass */
#loader .surface{
  position:absolute; left:-4%; right:-4%; top:-7px; height:14px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%, rgba(236,255,205,.85), rgba(196,244,120,.34) 55%, rgba(196,244,120,0) 74%);
  animation:espilSurfaceBob 1.7s ease-in-out infinite alternate;
}
@keyframes espilSurfaceBob{
  from{transform:translateY(calc(var(--bob) * -1)) rotate(calc(var(--rock) * -.5))}
  to{transform:translateY(var(--bob)) rotate(calc(var(--rock) * .5))}
}
#loader .wave{
  position:absolute; left:0; top:-7px; width:200%; height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q 15 1 30 8 T 60 8 T 90 8 T 120 8 V14 H0 Z' fill='%23bef264' fill-opacity='0.42'/%3E%3C/svg%3E") repeat-x;
  background-size:120px 8px;
  animation:espilWaveMove1 2.6s linear infinite;
}
#loader .wave.back{top:-6px; opacity:.22; animation:espilWaveMove2 4.4s linear infinite}
#loader .wave.deep{top:-5px; opacity:.15; background-size:170px 10px; height:10px; animation:espilWaveMove3 7s linear infinite}
@keyframes espilWaveMove1{
  0%{transform:translate(0,0)}
  50%{transform:translate(-60px, calc(.9px + var(--p,0) * .028px))}
  100%{transform:translate(-120px,0)}
}
@keyframes espilWaveMove2{
  0%{transform:translate(-120px, calc(.8px + var(--p,0) * .02px))}
  50%{transform:translate(-60px,-1px)}
  100%{transform:translate(0, calc(.8px + var(--p,0) * .02px))}
}
@keyframes espilWaveMove3{
  0%{transform:translate(0,0)}
  50%{transform:translate(-85px, calc(1.2px + var(--p,0) * .03px))}
  100%{transform:translate(-170px,0)}
}
/* Swirl: a slow rotating light-disc inside the liquid, clipped to the water's own box */
#loader .swirl{
  position:absolute; left:0; right:0; bottom:0; height:calc(var(--p,0)*1%);
  overflow:hidden; z-index:2; transition:height .12s linear; pointer-events:none;
}
#loader .swirl i{
  position:absolute; left:50%; top:50%; width:220px; height:220px; margin:-110px 0 0 -110px;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,244,150,.3) 40deg, transparent 95deg, rgba(255,255,255,.16) 165deg, transparent 215deg, rgba(190,242,100,.26) 300deg, transparent 345deg);
  animation:espilSwirlSpin 6s linear infinite;
}
@keyframes espilSwirlSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#loader .bubble{
  position:absolute; bottom:8px; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 32% 32%, rgba(255,255,255,.95), rgba(255,255,255,.15) 65%);
  animation:espilBubbleRise 3.2s ease-in infinite;
}
#loader .bubble.b1{left:38%; width:5px; height:5px; animation-delay:0s}
#loader .bubble.b2{left:55%; width:3px; height:3px; animation-delay:1.1s}
#loader .bubble.b3{left:47%; width:6px; height:6px; animation-delay:2s}
#loader .bubble.b4{left:63%; width:4px; height:4px; animation-delay:.6s}
#loader .bubble.b5{left:29%; width:3.5px; height:3.5px; animation-delay:1.7s}
@keyframes espilBubbleRise{
  0%{transform:translate(0,0); opacity:0}
  12%{opacity:.85}
  38%{transform:translate(calc(var(--sway) * -.8),-28px)}
  62%{transform:translate(calc(var(--sway) * .75),-50px)}
  88%{opacity:.7}
  100%{transform:translate(calc(var(--sway) * -.35),-74px); opacity:0}
}
#loader .glass-shade{
  position:absolute; inset:0; border-radius:50%; z-index:3; pointer-events:none;
  box-shadow:inset -14px -12px 26px rgba(0,0,0,.24), inset 12px 14px 22px rgba(255,255,255,.06), inset 0 -22px 30px rgba(0,0,0,.16), inset -6px 4px 14px rgba(140,220,255,.05);
}
#loader .glass-shine{
  position:absolute; inset:0; border-radius:50%; z-index:4; pointer-events:none;
  background:
    radial-gradient(64px 36px at 30% 15%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%),
    radial-gradient(26px 13px at 24% 11%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%),
    radial-gradient(100px 100px at 78% 88%, rgba(255,255,255,.13), rgba(255,255,255,0) 55%),
    radial-gradient(76px 30px at 50% 97%, rgba(216,252,170,.18), rgba(216,252,170,0) 70%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.13) 46%, rgba(255,255,255,.03) 54%, transparent 66%);
  background-size:auto, auto, auto, auto, 260% 100%;
  animation:espilSheenSweep 7s ease-in-out infinite alternate;
}
@keyframes espilSheenSweep{
  from{background-position:0 0, 0 0, 0 0, 0 0, 115% 0}
  to{background-position:0 0, 0 0, 0 0, 0 0, -35% 0}
}
body.loading{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  #loader .wave, #loader .bubble, #loader .swirl i, #loader .slosh, #loader .surface, #loader .water::after, #loader .glass-shine{animation:none}
  #loader{transition:opacity .2s}
}
/* Exit transition: the loader re-appears while the browser leaves for a sub-site.
   Water sways indeterminately (no fake percentage), bubbles and counter hidden. */
#loader.exit .water{transition:none; animation:exitSway 1.1s ease-in-out infinite alternate}
#loader.exit .slosh{animation-duration:2.1s}
#loader.exit .bubble{display:none}
@keyframes exitSway{from{height:30%}to{height:56%}}

/* Touch / reduced motion: native cursor and no smooth scroll */
@media (pointer:coarse){
  body, a{cursor:auto}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
@media print{
  body, a{cursor:auto}
  nav.contents{position:static}
  .masthead, .panel, footer{background:#fff; color:#000}
}

/* ---- Animated logo cursor (Han's spec): the UseDesign hat follows the
   pointer; on links its spiral screws in and out, on press the feather
   grows outward. Falls back to the static url() cursors without JS. ---- */
#espil-cursor{
  position:fixed; left:0; top:0; width:24px; height:23px; margin:-11px 0 0 -12px;
  pointer-events:none; z-index:2147483200; opacity:0; transition:opacity .18s ease;
  color:#fff; mix-blend-mode:difference; will-change:transform;
}
#espil-cursor.on{opacity:1}
html.uc-on, html.uc-on *{cursor:none!important}
/* Hover: the spiral screws IN — an extension curve draws itself toward
   the centre — then screws back out. The original curves never change. */
#espil-cursor .screw-ext{stroke-dasharray:100; stroke-dashoffset:100}
#espil-cursor.is-hover .screw-ext{animation:uc-screw 1.6s ease-in-out infinite}
@keyframes uc-screw{
  0%{stroke-dashoffset:100}
  50%{stroke-dashoffset:0}
  100%{stroke-dashoffset:100}
}
#espil-cursor .feather-all{transform-box:fill-box; transform-origin:50% 0%; transition:transform .18s ease}
#espil-cursor.is-active .feather-all{transform:translate(-8px,0) scale(1.3,.95)}
@media (prefers-reduced-motion: reduce){
  #espil-cursor.is-hover .screw-ext{animation:none}
}

/* Scroll indicator (per Han, 2026-10-14): the native scrollbar is removed;
   a Genshin-style hairline with a line-drawn diamond marks the position. */
html{scrollbar-width:none; -ms-overflow-style:none}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0; height:0; display:none}
#scroll-track{
  position:fixed; right:17px; top:50%; transform:translateY(-50%);
  width:13px; height:min(46vh,430px); z-index:900; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
}
#scroll-track.on{opacity:1}
#scroll-track::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  margin-left:-.5px; background:var(--ink); opacity:.45;
}
#scroll-track .cap{
  position:absolute; left:50%; width:5px; height:5px; border:1px solid var(--ink);
  transform:translate(-50%,-50%) rotate(45deg);
}
#scroll-track .cap.top{top:0}
#scroll-track .cap.bot{top:100%}
#scroll-track .tick{
  position:absolute; left:50%; width:7px; height:1px; background:var(--ink);
  opacity:.45; transform:translate(-50%,-50%);
}
#scroll-track .tick.active{width:11px; opacity:1}
#scroll-shadow{
  position:absolute; left:50%; top:12px; width:15px; height:6px; border-radius:50%;
  background:var(--ink); filter:blur(2.5px); opacity:.26;
  transform:translate(-50%,-50%); transition:opacity .5s ease, transform .5s ease;
}
#scroll-track.moving #scroll-shadow{opacity:0; transform:translate(-50%,-50%) scale(.35)}
#scroll-diamond{
  position:absolute; left:50%; top:12px; width:11px; height:11px;
  border:1.5px solid var(--ink); background:transparent;
  transform:translate(-50%,-50%) scale(1,1.5) rotate(45deg); transition:background .15s ease;
}
#scroll-track.moving #scroll-diamond{background:var(--ink)}
@media (max-width:719px){#scroll-track{display:none}}

/* Section stop (per Han, 2026-10-14): on pages with sections, scrolling
   settles at each section's start. Proximity, so long sections stay free. */
html:has(section[id]){scroll-snap-type:y proximity}
section[id]{scroll-snap-align:start; scroll-margin-top:64px}