:root { --ink:#171719; --paper:#fbfbfa; --red:#d71921; --muted:#747474; --line:#d4d4d1; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:76px; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,"Microsoft YaHei",sans-serif; } a { color:inherit; text-decoration:none; }
.site-header { position:sticky; top:0; z-index:20; height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 4vw; border-bottom:1px solid var(--ink); background:rgba(251,251,250,.95); backdrop-filter:blur(14px); }.wordmark { font-size:19px; font-weight:900; letter-spacing:-1.2px; }.wordmark span { color:var(--red); font-size:28px; vertical-align:-2px; }.site-header nav { display:flex; gap:15px; overflow-x:auto; white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.1em; }.site-header nav a:hover,.contact:hover,footer a:hover { color:var(--red); }.contact { font-size:10px; font-weight:800; letter-spacing:.12em; white-space:nowrap; }
.page-shell { display:grid; grid-template-columns:18% 1fr 21%; gap:28px; padding:80px 4vw; }.eyebrow,.embed-label { margin:0; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.13em; line-height:1.35; }.hero { min-height:calc(100vh - 76px); align-items:center; position:relative; overflow:hidden; background-image:radial-gradient(circle,rgba(23,23,25,.28) 0 1px,transparent 1.15px); background-size:30px 30px; }.hero-copy { z-index:1; }.hero h1 { margin:0; font-size:clamp(68px,11.5vw,174px); line-height:.76; letter-spacing:-.11em; }.hero h1 span,.case-content h2 strong { color:var(--red); }.hero-copy p { margin:38px 0 0; font-size:clamp(13px,1.4vw,18px); font-weight:700; line-height:1.5; }.round-button { position:absolute; left:22%; bottom:62px; width:56px; height:56px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:25px; transition:.2s; }.round-button:hover { color:var(--paper); background:var(--ink); transform:translateY(4px); }
.intro { min-height:72vh; align-items:center; border-top:1px solid var(--ink); }.feature-directory { grid-column:2 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--ink); }.feature-directory a { min-height:118px; display:grid; grid-template-columns:38px 1fr auto; grid-template-rows:auto auto; gap:7px 14px; align-content:center; padding:20px 2vw; border-bottom:1px solid var(--ink); border-right:1px solid var(--ink); transition:.2s; }.feature-directory a:nth-child(2n) { border-right:0; }.feature-directory a:hover { color:var(--paper); background:var(--ink); }.feature-directory span,.feature-directory small { font-size:9px; font-weight:900; letter-spacing:.1em; }.feature-directory b { font-size:clamp(21px,2.35vw,35px); letter-spacing:-.07em; line-height:.9; }.feature-directory small { grid-column:2; color:var(--red); }.feature-directory i { grid-column:3; grid-row:1 / span 2; align-self:center; font-style:normal; font-size:20px; }.case-stack { border-top:1px solid var(--ink); }.case-page { min-height:100vh; display:grid; grid-template-columns:11% minmax(270px,.9fr) minmax(390px,1.1fr); gap:3.3vw; align-items:center; padding:64px 4vw; position:relative; overflow:hidden; border-bottom:1px solid var(--ink); background-color:var(--paper); background-image:radial-gradient(circle,rgba(23,23,25,.18) 0 1px,transparent 1.15px); background-size:34px 34px; scroll-margin-top:76px; }.case-side { align-self:stretch; display:flex; justify-content:space-between; flex-direction:column; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.13em; }.case-side span:last-child { writing-mode:vertical-rl; transform:rotate(180deg); }.case-content { position:relative; z-index:1; max-width:560px; }.case-content h2 { margin:17px 0 23px; font-size:clamp(45px,5.6vw,83px); line-height:.86; letter-spacing:-.1em; }.case-content p:not(.eyebrow) { margin:0; max-width:450px; font-size:16px; line-height:1.75; font-weight:700; }.case-media { position:relative; z-index:1; min-width:0; }.compare-media { display:flex; align-items:flex-end; gap:18px; }.compare-media figure { flex:1; min-width:0; margin:0; }.compare-media img { display:block; width:100%; height:auto; max-height:74vh; object-fit:contain; object-position:center; border:1px solid var(--ink); border-radius:26px; background:#111; }.compare-media figcaption { margin-top:10px; font-size:9px; font-weight:900; letter-spacing:.11em; }.compare-media figure:last-child { transform:translateY(-20px); }.embed-grid { display:grid; gap:18px; }.two-embeds { grid-template-columns:repeat(2,minmax(0,1fr)); }.embed-card,.image-card { overflow:hidden; border:1px solid var(--ink); border-radius:26px; background:var(--paper); }.embed-label { padding:12px 14px; color:var(--ink); border-bottom:1px solid var(--ink); background:var(--paper); }.embed-card iframe { display:block; width:100%; height:430px; border:0; background:var(--paper); }.two-embeds iframe { height:375px; }.embed-card a,.image-card a { display:block; padding:12px 14px; border-top:1px solid var(--ink); font-size:9px; font-weight:900; letter-spacing:.11em; background:var(--paper); }.embed-card a:hover,.image-card a:hover { color:var(--red); }.image-card img { display:block; width:100%; height:auto; }.sources { min-height:55vh; align-items:center; background:var(--ink); color:var(--paper); }.sources .eyebrow { color:#b7b7b7; }.sources h2 { color:var(--paper); }.sources p:not(.eyebrow) { color:#d4d4d4; } footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 4vw; color:var(--paper); background:var(--ink); border-top:1px solid #555; font-size:10px; font-weight:800; letter-spacing:.1em; }
@media (max-width:980px) { .case-page { grid-template-columns:9% minmax(220px,.85fr) minmax(310px,1.1fr); gap:24px; }.two-embeds { grid-template-columns:1fr; }.two-embeds iframe { height:355px; } }
@media (max-width:700px) { .site-header { height:64px; padding:0 18px; }.site-header nav { display:none; }.page-shell { grid-template-columns:1fr; gap:24px; padding:58px 18px; }.hero { min-height:720px; }.hero h1 { font-size:25vw; }.round-button { left:18px; bottom:38px; }.intro { min-height:0; }.feature-directory { grid-column:1; grid-template-columns:1fr; }.feature-directory a,.feature-directory a:nth-child(2n) { min-height:100px; padding:18px 0; border-right:0; }.feature-directory b { font-size:28px; }.case-page { grid-template-columns:44px 1fr; gap:20px; min-height:0; padding:44px 18px 54px; scroll-margin-top:64px; }.case-side { grid-row:1 / span 2; }.case-content h2 { font-size:56px; }.case-media { grid-column:2; margin-top:8px; }.compare-media { gap:10px; max-width:480px; align-items:flex-start; }.compare-media img { border-radius:17px; max-height:none; }.compare-media figure:last-child { transform:none; }.two-embeds { grid-template-columns:1fr; }.embed-card iframe,.two-embeds iframe { height:410px; }.embed-card,.image-card { border-radius:20px; }.sources { min-height:410px; } footer { flex-wrap:wrap; padding:22px 18px; } footer p { width:100%; order:3; margin:0; } }

.embed-card video { display:block; width:100%; height:430px; background:#111; object-fit:contain; }.two-embeds video { height:375px; }.local-source { display:block; margin:0; padding:12px 14px; color:var(--muted); border-top:1px solid var(--ink); background:var(--paper); font-size:9px; font-weight:900; letter-spacing:.11em; }.local-source:hover,.local-source a:hover { color:var(--red); }.local-source a + a { margin-left:18px; } @media (max-width:700px) { .embed-card video,.two-embeds video { height:410px; } }

/* Local media uses its native ratio, so no player-created letterboxing is visible. */
.compare-media img { background:var(--paper); }.embed-card:has(video) { position:relative; cursor:zoom-in; }.embed-card video,.two-embeds video { height:auto !important; background:transparent; object-fit:cover; }.video-toggle { position:absolute; z-index:2; right:12px; bottom:48px; width:34px; height:34px; padding:0; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); cursor:pointer; }.video-toggle::before { content:""; display:block; width:3px; height:12px; margin:auto; background:currentColor; box-shadow:6px 0 currentColor; }.video-toggle.is-paused::before { width:0; height:0; margin-left:12px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid currentColor; background:transparent; box-shadow:none; }.video-toggle:hover { color:var(--paper); background:var(--ink); }.embed-card.is-expanded { position:fixed; inset:4vh 4vw; z-index:40; display:flex; flex-direction:column; border-radius:18px; cursor:zoom-out; box-shadow:0 0 0 9999px rgba(0,0,0,.72); }.embed-card.is-expanded video { flex:1; min-height:0; height:auto !important; object-fit:contain; background:var(--paper); }.embed-card.is-expanded .video-toggle { bottom:52px; } body.demo-open { overflow:hidden; } @media (max-width:700px) { .embed-card.is-expanded { inset:9vh 12px; }.embed-card.is-expanded .video-toggle { bottom:52px; } }

/* Refined balance and media crop for the Nothing case-study pages. */
.case-content h2 { line-height:.92; letter-spacing:.018em; } #clock-colour .embed-card:first-child video { width:114%; max-width:none; margin-left:-7%; } @media (min-width:981px) { .case-page { grid-template-columns:8% minmax(270px,.9fr) minmax(390px,1.1fr); gap:2vw; } } @media (min-width:701px) and (max-width:980px) { .case-page { grid-template-columns:7% minmax(220px,.85fr) minmax(310px,1.1fr); gap:18px; } }

/* Case-page layout polish. */
.hero h1 span,.hero-role span { display:inline-block; white-space:nowrap; }.hero-role { display:grid; gap:5px; }.compare-media figure:last-child img { max-height:none; }.two-embeds { align-items:start; }.local-source { padding-right:58px; }.video-toggle { right:12px; bottom:4px; display:grid; place-items:center; }.video-toggle::before { width:10px; height:12px; margin:0; background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 7px,currentColor 7px 10px); box-shadow:none; }.video-toggle.is-paused::before { width:0; height:0; margin:0 0 0 2px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid currentColor; background:transparent; box-shadow:none; }.embed-card.is-expanded .video-toggle { bottom:4px; } #shortcut .case-media { width:min(100%,360px); justify-self:start; }

/* Stronger visual correction after rendered-page review. */
.case-content h2 { letter-spacing:.055em; line-height:1.03; } #clock-colour .embed-card:first-child video { width:100%; margin-left:0; transform:scale(1.82); transform-origin:center; } #clock-colour .embed-card:first-child.is-expanded video { transform:scale(1.82); } #shortcut .case-media { width:min(100%,300px); } @media (min-width:981px) { .case-page { grid-template-columns:6% minmax(270px,.9fr) minmax(390px,1.1fr); gap:1.4vw; } }

/* Cover alignment, asymmetric case pages and compact contact surface. */
.contact-button { appearance:none; padding:0; color:inherit; border:0; background:transparent; font-family:inherit; cursor:pointer; }
.contact-dialog { width:min(390px,calc(100vw - 36px)); margin:auto; padding:26px 28px 24px; color:var(--ink); border:1px solid var(--ink); border-radius:18px; background:var(--paper); box-shadow:8px 8px 0 var(--ink); }
.contact-dialog::backdrop { background:rgba(23,23,25,.16); backdrop-filter:blur(2px); }
.contact-dialog .eyebrow { margin:0 0 26px; color:var(--red); }
.contact-dialog p:not(.eyebrow) { display:grid; grid-template-columns:68px 1fr; gap:14px; margin:11px 0; font-size:15px; font-weight:800; line-height:1.4; }
.contact-dialog p span { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.12em; padding-top:4px; }
.contact-close { position:absolute; top:9px; right:12px; width:28px; height:28px; padding:0; color:var(--ink); border:0; background:transparent; font:400 27px/1 Arial,sans-serif; cursor:pointer; }
.contact-row { display:grid; grid-template-columns:78px minmax(0,1fr); gap:13px; align-items:baseline; margin:13px 0; }.contact-row span { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.1em; }.contact-row a { min-width:0; font-size:15px; font-weight:800; line-height:1.4; overflow-wrap:anywhere; }.contact-row a:hover { color:var(--red); }.contact-dialog .contact-note { display:block!important; margin:20px 0 0!important; padding-top:15px; color:var(--muted); border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent); font-size:10px!important; font-weight:700!important; line-height:1.65!important; }
.hero-copy { transform:translateX(clamp(28px,3.2vw,56px)); }
.round-button { left:calc(22% + clamp(28px,3.2vw,56px)); }
.case-rail { position:fixed; z-index:19; left:0; top:50%; width:29px; padding:18px 0; transform:translateY(-50%); border-radius:0 9px 9px 0; background:var(--ink); box-shadow:1px 0 0 rgba(255,255,255,.12) inset; }
.case-rail nav { display:flex; flex-direction:column; align-items:center; gap:12px; }
.case-rail a { display:block; width:10px; height:2px; border-radius:2px; background:#626264; transition:width .16s,background .16s; }
.case-rail a:hover,.case-rail a.is-active { width:16px; background:var(--red); }
@media (min-width:701px) { .case-page.case-media-left .case-media { grid-column:2; grid-row:1; } .case-page.case-media-left .case-content { grid-column:3; grid-row:1; } }

/* The colour picker is intentionally portrait: crop side bars, keep the full vertical selector. */
#clock-colour .embed-grid { grid-template-columns:minmax(240px,285px) minmax(280px,1fr); align-items:start; }
#clock-colour .embed-card:first-child video { width:100%; height:560px !important; margin:0; transform:none; transform-origin:center; object-fit:cover; object-position:center; background:transparent; }
#clock-colour .embed-card:first-child.is-expanded video { width:100%; height:auto !important; transform:none; object-fit:contain; }
@media (max-width:700px) { .hero-copy { transform:translateX(16px); } .round-button { left:34px; } .case-rail { display:none; } #clock-colour .embed-grid { grid-template-columns:1fr; } #clock-colour .embed-card:first-child { max-width:285px; } #clock-colour .embed-card:first-child video { height:540px !important; } }

/* Hero details sit together; the case rail behaves like a compact navigation handle. */
.hero-copy { transform:translateX(clamp(68px,6.1vw,108px)); }
.hero-meta { display:flex; align-items:flex-end; gap:28px; margin-top:38px; }
.hero-copy .hero-portfolio { margin:0 0 8px; color:var(--red); font-size:10px; font-weight:900; letter-spacing:.13em; line-height:1.35; }
.hero-copy .hero-role { margin:0; }
.hero .round-button { position:static; flex:0 0 56px; margin:0 0 2px; }
.case-rail { width:36px; height:250px; padding:0; border-radius:0 8px 8px 0; background:#1d1d1f; box-shadow:inset -1px 0 rgba(255,255,255,.08), 1px 0 4px rgba(0,0,0,.12); }
.case-rail::before { content:""; position:absolute; left:0; top:50%; width:8px; height:84px; transform:translateY(-50%); border-radius:0 5px 5px 0; background:#303033; }
.case-rail nav { position:relative; z-index:1; width:100%; height:232px; justify-content:space-between; gap:0; padding:0 0 0 11px; }
.case-rail a { position:relative; width:25px; height:24px; background:transparent; }
.case-rail a::after { content:""; position:absolute; right:6px; top:11px; width:8px; height:2px; border-radius:2px; background:#5d5d60; transition:width .16s,background .16s; }
.case-rail a::before { content:attr(data-label); position:absolute; left:38px; top:50%; width:max-content; padding:7px 9px; transform:translateY(-50%) translateX(-4px); color:var(--paper); border:1px solid #48484a; border-radius:5px; background:var(--ink); font-size:9px; font-weight:900; letter-spacing:.08em; opacity:0; pointer-events:none; transition:opacity .14s,transform .14s; }
.case-rail a:hover::after,.case-rail a.is-active::after { width:15px; background:var(--red); }
.case-rail a:hover::before,.case-rail a:focus-visible::before { opacity:1; transform:translateY(-50%) translateX(0); }
.case-rail a:hover,.case-rail a.is-active { width:25px; background:transparent; }

/* Keep controls completely inside the source strip, even when there are two source links. */
.local-source { display:flex; align-items:center; min-height:46px; padding:10px 52px 10px 14px; }
.video-toggle,.embed-card.is-expanded .video-toggle { right:12px; bottom:8px; width:28px; height:28px; }
.video-toggle::before { width:8px; height:10px; background:linear-gradient(90deg,currentColor 0 2px,transparent 2px 6px,currentColor 6px 8px); }
.video-toggle.is-paused::before { margin-left:2px; border-top-width:6px; border-bottom-width:6px; border-left-width:9px; }
#clock-faces .local-source { gap:19px; }
#clock-faces .local-source a,#clock-faces .local-source a + a { display:inline; margin:0; padding:0; border:0; }

/* Crop only the letterbox at the colour-demo's top and bottom; the colour selector remains intact. */
#clock-colour .embed-card:first-child video { transform:scaleY(1.1); }
#clock-colour .embed-card:first-child.is-expanded video { transform:none; }
.embed-label,.local-source { position:relative; z-index:1; }
@media (max-width:700px) { .hero-copy { transform:translateX(28px); } .hero-meta { gap:16px; margin-top:30px; } .hero .round-button { flex-basis:48px; width:48px; height:48px; font-size:21px; } }

/* Fine-tune the three asymmetric case pages around their shared visual centre. */
#wallpaper .case-media { width:86%; justify-self:center; }
@media (min-width:701px) {
  #shortcut.case-media-left .case-media { transform:translateX(clamp(48px,7vw,108px)); }
  #shortcut.case-media-left .case-content { transform:translateX(clamp(-108px,-7vw,-48px)); }
  #status-bar .case-media { transform:translateX(clamp(-96px,-6vw,-42px)); }
}
@media (max-width:700px) { #wallpaper .case-media { width:100%; } }

@media (min-width:701px) {
  #clock-faces.case-media-left .case-content { transform:translateX(clamp(28px,3vw,54px)); }
}

/* Six fixed slots prevent the rail markers from shifting with hover state. */
.case-rail nav { display:grid; grid-template-rows:repeat(6,1fr); align-items:center; height:220px; margin:15px 0; padding:0 0 0 11px; }
.case-rail a { width:25px; height:100%; }
.case-rail a::after { top:50%; transform:translateY(-50%); }

/* Mobile cover: keep the full wordmark on screen and preserve project access. */
@media (max-width:700px) {
  .site-header {
    gap:12px;
    padding:0 16px;
  }
  .site-header nav {
    display:flex;
    flex:1;
    justify-content:flex-end;
    overflow:visible;
  }
  .site-header nav a:first-child {
    display:none;
  }
  .site-header nav a:last-child {
    font-size:0;
  }
  .site-header nav a:last-child::after {
    content:"PROJECTS ↗";
    font-size:9px;
    letter-spacing:.1em;
  }
  .wordmark {
    flex:0 0 auto;
    font-size:17px;
  }
  .contact {
    flex:0 0 auto;
    font-size:9px;
  }
  .hero {
    min-height:calc(100svh - 64px);
    padding:52px 24px;
  }
  .hero-copy {
    width:100%;
    min-width:0;
    transform:none;
  }
  .hero h1 {
    max-width:100%;
    font-size:clamp(54px,17vw,72px);
    line-height:.8;
    letter-spacing:-.1em;
  }
  .hero-meta {
    display:grid;
    grid-template-columns:minmax(0,1fr) 48px;
    gap:14px;
    align-items:end;
    margin-top:30px;
  }
  .hero-copy .hero-portfolio {
    font-size:9px;
    letter-spacing:.1em;
  }
  .hero-role {
    gap:4px;
  }
  .hero-role span {
    font-size:13px;
    white-space:normal;
  }
  .hero .round-button {
    width:48px;
    height:48px;
    margin:0;
  }
}