/* Cameron Tang: the look, in one place (version 0, 13 October 2026).

   The brand's object is an architect's model: one building of black card, cut open, lit warm from
   inside, with brass running through it. So the pages are dark, the lettering reads as engraved, and
   the one accent is white gold. Every page and document in the model look takes its type, colour and
   parts from this file and adds only its own layout. It is served as assets/brand.css.

   Two typefaces, both free to use (SIL Open Font Licence):
   - Sofia Sans Extra Condensed: every heading and label, in capitals. Headings light (300), labels
     regular (400) and widely spaced, like lettering engraved on an instrument or a title plate. A label
     that names a heading is a step larger and heavier (500), so it reads beside the heading.
   - Hanken Grotesk: everything that is read as a sentence.
   Print and the 3D scene need the font files themselves: assets/fonts/ (woff2). */
@font-face{font-family:Sofia;src:url(fonts/sofia-sans-extra-condensed-latin-wght-normal.woff2) format('woff2');font-weight:1 1000;font-display:block}
@font-face{font-family:Hanken;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:Hanken;src:url(fonts/hanken-grotesk-latin-wght-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:block}

:root{
  /* ground and ink */
  --bg:#030304;            /* the void the model stands in: page ground everywhere */
  --card:#0b0b0c;          /* black card: a raised surface, a panel, a table row */
  --card-2:#131314;        /* a second step of card, for something sitting on a panel */
  --ink:#f1efe9;           /* warm white: headings and anything that must be read first */
  --soft:#c8c6c0;          /* body text */
  --dim:#8a8c90;           /* labels, captions, anything secondary */
  /* the one accent, and the metal it comes from */
  --gold:#e6cf9a;          /* white gold: the second half of a heading, a current mark, a link's rule */
  --brass:#b39258;         /* brass: rules that are objects (a rod, a plate edge), never text */
  --warm:#ffdcab;          /* lamp light: a glow, never a fill */
  /* rules */
  --line:rgba(241,239,233,.18);
  --line2:rgba(241,239,233,.34);
  /* measure */
  --pad:4vw;               /* the page's side margin */
  --small:clamp(11.5px,.74vw,19px);
  --label:clamp(13.5px,1vw,25px);   /* a label that names a heading */
  --body:clamp(16px,1.02vw,26px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:Hanken,system-ui,sans-serif;font-size:clamp(15px,.9vw,23.5px);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}

/* engraved label: small capitals, widely spaced. An <em> inside it is the gold word. */
.eng{font-family:Sofia,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:var(--small);color:var(--dim);line-height:1.4}
.eng em,.gold{color:var(--gold);font-style:normal}
/* the label right above a heading names its section, so it must read beside the heading's size: larger, a
   touch heavier and in warm grey (23 Oct 2026: at --small in --dim it was hard to read, Cam found). Menus,
   footers and captions stay at --small. */
.eng:has(+ .title){font-size:var(--label);font-weight:500;letter-spacing:.16em;color:var(--soft)}
/* heading: light condensed capitals, set tight. Put the turn of the sentence in <span class="gold">. */
.title{font-family:Sofia,sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.03em;line-height:.92;color:var(--ink)}
.h1{font-size:clamp(44px,6vw,156px)}
.h2{font-size:clamp(34px,3.9vw,100px)}
.h3{font-size:clamp(26px,2.3vw,60px)}
/* the name, top left of every page */
.mark{font-family:Sofia,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(19px,1.22vw,31px)}
/* sentences */
.lead{font-size:clamp(20px,1.5vw,39px);line-height:1.28;font-weight:300;color:var(--ink)}
.note{color:var(--soft);font-size:var(--body);line-height:1.46;max-width:29em}
/* a labelled fact: gold label, plain value, under a hairline */
.fact{display:grid;grid-template-columns:max-content 1fr;gap:.5vw 1.6vw;padding-top:1.2vw;border-top:1px solid var(--line);max-width:30em}
.fact dt{font-family:Sofia,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(12.5px,.86vw,22px);color:var(--gold);padding-top:.25em}
.fact dd{color:var(--ink);font-size:clamp(15px,.96vw,25px);line-height:1.4}
/* a button or link that goes somewhere: hairline box, gold mark at the end */
.go{display:inline-flex;align-items:center;gap:.9em;border:1px solid var(--line2);padding:.75vw 1.2vw;font-size:clamp(13px,.8vw,20px);background:rgba(3,3,4,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;color:var(--ink);font-family:inherit;transition:border-color .3s,background .3s}
.go:hover,.go:focus-visible{border-color:var(--gold);background:rgba(230,207,154,.08)}
.go i{font-style:normal;color:var(--gold)}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
/* film grain over everything: add <div class="grain" aria-hidden="true"></div> once per page.
   The picture is a 240 px tile of fractal noise (an SVG feTurbulence filter), base64 so that the
   filter's own reference inside it is not read as a file by the site's link check. */
.grain{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAuNyAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+")}
@media(max-width:800px){
  :root{--pad:22px;--body:16px}
  .h1{font-size:13.4vw}.h2{font-size:10.4vw}.h3{font-size:7.6vw}
  .lead{font-size:19px}
  .fact{gap:6px 14px;padding-top:12px}.fact dd{font-size:14.5px}
  .go{padding:10px 14px;font-size:13.5px}
  .mark{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* Smooth wheel scrolling (Lenis 1.3.26, when it is on): its own recommended rules */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}