/* ============================================================================
   One Hundred Million LLC — ohm100.com
   Built from "The Mark and the Name", 18 September 2026.
   Palette, type and geometry are taken from that document; nothing is invented.
   ========================================================================= */

/* ---- Fonts: self-hosted, so the site still makes no external requests ---- */
@font-face{font-family:"Wix Madefor Display";src:url("fonts/wix-madefor-display-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Wix Madefor Display";src:url("fonts/wix-madefor-display-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Wix Madefor Display";src:url("fonts/wix-madefor-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Wix Madefor Text";src:url("fonts/wix-madefor-text-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Wix Madefor Text";src:url("fonts/wix-madefor-text-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Wix Madefor Text";src:url("fonts/wix-madefor-text-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tokens - */
:root{
  /* palette — Appendix B */
  --ink:#101113;            /* the mark, and all body text        */
  --bone:#EFECE4;           /* panels and quiet grounds           */
  --paper:#FBFAF7;          /* page and page-like surfaces        */
  --minium:#B4472B;         /* one accent, used sparingly         */
  --minium-lift:#BF624A;    /* Minium on Ink grounds only (4.55:1)*/

  --ground:var(--paper);
  --panel:var(--bone);
  --fg:var(--ink);
  --fg-quiet:color-mix(in srgb,var(--ink) 72%,var(--paper));
  --fg-faint:color-mix(in srgb,var(--ink) 62%,var(--paper));
  --rule:color-mix(in srgb,var(--ink) 14%,var(--paper));
  --rule-firm:color-mix(in srgb,var(--ink) 26%,var(--paper));
  --accent:var(--minium);

  /* the mark's own grid: ten cells. one cell = a tenth of the square. */
  --cell:10;
  --clear:0.2;              /* clear space = two cells = a fifth   */

  --measure:64ch;
  --gutter:clamp(20px,5vw,56px);
  --bay:min(1240px,100% - var(--gutter)*2);
  --rhythm:clamp(72px,11vh,148px);

  --font-display:"Wix Madefor Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-text:"Wix Madefor Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-firm:cubic-bezier(.65,.02,.2,1);
}

/* Dark is the Ink ground: the same palette, inverted. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:var(--ink);
    --panel:color-mix(in srgb,var(--ink) 88%,var(--bone));
    --fg:var(--bone);
    --fg-quiet:color-mix(in srgb,var(--bone) 78%,var(--ink));
    --fg-faint:color-mix(in srgb,var(--bone) 62%,var(--ink));
    --rule:color-mix(in srgb,var(--bone) 16%,var(--ink));
    --rule-firm:color-mix(in srgb,var(--bone) 30%,var(--ink));
    --accent:var(--minium-lift);
  }
}
:root[data-theme="dark"]{
  --ground:var(--ink);
  --panel:color-mix(in srgb,var(--ink) 88%,var(--bone));
  --fg:var(--bone);
  --fg-quiet:color-mix(in srgb,var(--bone) 78%,var(--ink));
  --fg-faint:color-mix(in srgb,var(--bone) 62%,var(--ink));
  --rule:color-mix(in srgb,var(--bone) 16%,var(--ink));
  --rule-firm:color-mix(in srgb,var(--bone) 30%,var(--ink));
  --accent:var(--minium-lift);
}

/* An Ink section inside a light page carries its own inverted scope. */
.ground-ink{
  --ground:var(--ink);
  --panel:color-mix(in srgb,var(--ink) 86%,var(--bone));
  --fg:var(--bone);
  --fg-quiet:color-mix(in srgb,var(--bone) 78%,var(--ink));
  --fg-faint:color-mix(in srgb,var(--bone) 62%,var(--ink));
  --rule:color-mix(in srgb,var(--bone) 15%,var(--ink));
  --rule-firm:color-mix(in srgb,var(--bone) 28%,var(--ink));
  --accent:var(--minium-lift);
  background:var(--ground);color:var(--fg);
}
.ground-bone{--ground:var(--bone);background:var(--bone)}

/* ------------------------------------------------------------------ base - */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--fg);
  font-family:var(--font-text);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

.bay{width:var(--bay);margin-inline:auto}
.bay-narrow{width:min(820px,100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:var(--rhythm)}
.hairline{height:1px;background:var(--rule);border:0;margin:0}

/* ------------------------------------------------------------------ type - */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance}
.d1{font-size:clamp(2.35rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.038em}
.d2{font-size:clamp(1.85rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.033em}
.d3{font-size:clamp(1.3rem,2.3vw,1.95rem);line-height:1.14;letter-spacing:-.025em}
.d4{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.3;letter-spacing:-.015em;font-weight:600}
.lede{font-size:clamp(1.0625rem,.98rem + .5vw,1.28rem);line-height:1.55;color:var(--fg-quiet);max-width:50ch;letter-spacing:-.008em}
p{margin:0 0 1.15em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
.quiet{color:var(--fg-quiet)}
.faint{color:var(--fg-faint)}

.eyebrow{
  font-family:var(--font-text);font-size:.6875rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);
  margin:0 0 1.5rem;display:flex;align-items:center;gap:.9em;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:200px}
.tag{font-family:var(--font-text);font-size:.625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}

/* --------------------------------------------------------------- the mark */
/* Nothing extends beyond the square. Clear space is two of its own cells. */
.mark{width:var(--size,40px);height:var(--size,40px);flex:none}
.mark path{fill:currentColor}
.mark-pad{padding:calc(var(--size,40px) * var(--clear))}

/* Lockup 06 — sight line, stacked. Mark at 2.65x the type size;
   cap of ONE meets the top of the square, baseline of MILLION its foot. */
.lockup{display:flex;align-items:flex-start;gap:calc(var(--lk,20px) * .3 * 2.65);color:var(--fg)}
.lockup .mark{--size:calc(var(--lk,20px) * 2.65)}
.lockup-name{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--lk,20px);line-height:1.148;letter-spacing:-.02em;
  text-transform:uppercase;white-space:nowrap;margin-top:-.06em;
}
/* Lockup 01 — sight line, horizontal. */
.lockup-h{display:flex;align-items:center;gap:calc(var(--lk,20px) * .3 * 2.65)}
.lockup-h .mark{--size:calc(var(--lk,20px) * 1.42)}
.lockup-h .lockup-name{line-height:1;font-size:var(--lk,20px)}
.lockup-h .descriptor{
  display:block;font-family:var(--font-text);font-weight:500;
  font-size:calc(var(--lk,20px) * .32);letter-spacing:.24em;
  color:var(--fg-quiet);margin-top:.5em;text-transform:uppercase;
}

/* ---------------------------------------------------------------- controls */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-text);font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  padding:.82em 1.5em;border:1px solid var(--fg);background:var(--fg);color:var(--ground);
  cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{background:transparent;color:var(--fg)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--rule-firm)}
.btn-ghost:hover{background:var(--fg);color:var(--ground);border-color:var(--fg)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

.link-rule{
  display:inline-flex;align-items:center;gap:.5em;font-weight:500;
  border-bottom:1px solid var(--rule-firm);padding-bottom:.15em;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.link-rule:hover{border-color:var(--accent);color:var(--accent)}

/* ------------------------------------------------------------------ chrome */
.masthead{
  position:fixed;inset:0 0 auto;z-index:50;
  padding-block:clamp(14px,2vh,20px);
  padding-top:calc(clamp(14px,2vh,20px) + env(safe-area-inset-top,0px));
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s var(--ease);
  border-bottom:1px solid transparent;
}
.masthead.on-ink{
  --fg:var(--bone);--fg-quiet:color-mix(in srgb,var(--bone) 64%,var(--ink));
  --fg-faint:color-mix(in srgb,var(--bone) 62%,var(--ink));
  --ground:var(--ink);--rule:color-mix(in srgb,var(--bone) 15%,var(--ink));
  --rule-firm:color-mix(in srgb,var(--bone) 28%,var(--ink));--accent:var(--minium-lift);
  color:var(--fg);
}
.masthead.is-stuck{
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--rule);
}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.masthead nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.navlink{
  font-size:.875rem;font-weight:500;color:var(--fg-quiet);position:relative;
  transition:color .3s var(--ease);
}
.navlink::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.navlink:hover{color:var(--fg)}
.navlink:hover::after{transform:scaleX(1)}
@media (max-width:720px){.navlink.opt{display:none}}

.masthead .lockup-h{--lk:17px}
@media (max-width:520px){.masthead .lockup-h .lockup-name{font-size:0;width:0;overflow:hidden}}

/* ------------------------------------------------------------------- hero */
.hero{min-height:100svh;display:grid;align-content:center;padding-block:clamp(110px,16vh,180px) var(--rhythm);position:relative}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,88px);align-items:center}
@media (min-width:920px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hero h1{margin-bottom:.6em;max-width:15ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:2.4rem}
.hero-direct{font-size:.875rem;color:var(--fg-faint);margin-top:1.4rem}
.hero-direct a{border-bottom:1px solid var(--rule-firm)}
.hero-direct a:hover{color:var(--accent);border-color:var(--accent)}

.scroll-cue{
  position:absolute;left:0;bottom:clamp(20px,4vh,40px);
  display:flex;align-items:center;gap:.8em;color:var(--fg-faint);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
}
.scroll-cue i{display:block;width:34px;height:1px;background:var(--rule-firm);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ------------------------------------------------------- the reveal (hero) */
.reveal-stage{position:relative;display:grid;place-items:center;isolation:isolate}
.reveal-svg{width:min(100%,420px);aspect-ratio:1;color:var(--fg)}
.reveal-svg rect{fill:currentColor;transition:opacity .7s var(--ease)}
/* Each bar is revealed by a clip inset; the pen travels clockwise. */
.reveal-svg .bar{clip-path:inset(0 100% 0 0)}
.reveal-svg [data-bar="top"]{clip-path:inset(0 100% 0 0)}
.reveal-svg [data-bar="right"]{clip-path:inset(0 0 100% 0)}
.reveal-svg [data-bar="bottom"]{clip-path:inset(0 0 0 100%)}
.reveal-svg [data-bar="left"]{clip-path:inset(100% 0 0 0)}
.reveal-svg [data-bar="cross"]{clip-path:inset(0 100% 0 0)}
.reveal-svg [data-bar="stem"]{clip-path:inset(0 0 100% 0)}
.reveal-svg .bar.drawn{clip-path:inset(0 0 0 0);transition:clip-path var(--dur,.6s) var(--ease-firm)}
.reveal-svg .bar.recede{opacity:.16}
.reveal-name{
  margin-top:.2rem;opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--ease) ,transform .9s var(--ease);
}
.reveal-name.on{opacity:1;transform:none}
.replay{
  position:absolute;right:0;top:0;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--fg-faint);background:none;border:0;cursor:pointer;padding:6px;
  opacity:0;transition:opacity .4s var(--ease),color .3s var(--ease);font-family:var(--font-text);
}
.reveal-stage:hover .replay,.replay:focus-visible{opacity:1}
.replay:hover{color:var(--accent)}

/* ------------------------------------------------------------- the pillars */
.pillars{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media (min-width:860px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--ground);padding:clamp(30px,3.4vw,52px) clamp(24px,2.6vw,42px) clamp(40px,4.6vw,68px);position:relative}
.pillar-n{
  font-family:var(--font-display);font-weight:600;font-size:.8125rem;letter-spacing:.06em;
  color:var(--fg-faint);display:flex;align-items:center;gap:.8em;margin-bottom:clamp(40px,5vw,72px);
}
.pillar-n i{display:block;width:9px;height:9px;background:var(--rule-firm);transition:background .5s var(--ease)}
.pillar.lit .pillar-n i{background:var(--accent)}
.pillar h3{margin-bottom:.75em;max-width:18ch}
.pillar p{color:var(--fg-quiet);font-size:.9375rem;max-width:40ch}

/* ------------------------------------------------------------ the flicker */
.flicker-wrap{display:grid;gap:clamp(36px,5vw,80px);align-items:center}
@media (min-width:920px){.flicker-wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.flicker{width:min(100%,400px);aspect-ratio:1;display:block;margin-inline:auto}
.pixel-canvas{display:block;width:100%;height:100%;border-radius:1px}

/* --------------------------------------------------------------- the team */

.governs{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(34px,4vw,56px)}
@media (min-width:640px){.governs{grid-template-columns:repeat(4,1fr)}}
.govern{background:var(--ground);padding:clamp(20px,2.4vw,30px)}
.govern .k{font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-.02em}
.govern .v{font-size:.75rem;color:var(--fg-quiet);margin-top:.5em;letter-spacing:.04em}

/* ---------------------------------------------------------------- closing */
.closing{text-align:center;display:grid;justify-items:center;gap:1.6rem}
.closing .d2{max-width:18ch}

/* ----------------------------------------------------------------- footer */
.colophon{border-top:1px solid var(--rule);padding-block:clamp(40px,5vw,64px) clamp(28px,3.4vw,44px)}
.colophon-in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.colophon nav{display:flex;flex-wrap:wrap;gap:22px}
.colophon a{font-size:.8125rem;color:var(--fg-quiet);transition:color .3s var(--ease)}
.colophon a:hover{color:var(--accent)}
.colophon .fine{font-size:.75rem;color:var(--fg-faint);margin-top:1.6rem}

/* ------------------------------------------- cell-grid entrance transition */
/* A curtain of the mark's own cells, dissolving in sequence. */
.cells-in{--cin:0;opacity:0;transform:translateY(14px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:calc(var(--cin) * 70ms)}
.cells-in.seen{opacity:1;transform:none}

.curtain{position:relative;isolation:isolate}
.curtain-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);pointer-events:none;z-index:2}
.curtain-cells i{background:var(--ground);opacity:1;transition:opacity .5s linear}
.curtain.seen .curtain-cells i{opacity:0}

/* --------------------------------------------------- prose (legal + long) */
.prose{max-width:66ch}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em;line-height:1.1;margin:clamp(46px,5vw,72px) 0 .6em}
.prose>:first-child h2,.prose>h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.018em;margin:2.2em 0 .5em}
.prose p{color:var(--fg-quiet)}
.prose strong{color:var(--fg);font-weight:600}
.prose ul{padding-left:1.1em;margin:0 0 1.15em;color:var(--fg-quiet)}
.prose li{margin-bottom:.45em}
.prose a{border-bottom:1px solid var(--rule-firm)}
.prose a:hover{color:var(--accent);border-color:var(--accent)}
.prose .callout{border-left:2px solid var(--accent);padding:.2em 0 .2em 1.4em;margin:2em 0;color:var(--fg)}

.page-head{padding-block:clamp(130px,19vh,210px) clamp(40px,5vw,64px)}
.page-head .d1{font-size:clamp(2.2rem,5.6vw,4.2rem)}

/* -------------------------------------------- honour reduce-motion, always */
/* Anyone who has asked for less movement gets the finished logo instead of
   a drawing sequence. The resting mark carries the brand on its own.        */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal-svg .bar{clip-path:inset(0 0 0 0) !important;opacity:1 !important}
  .reveal-name{opacity:1 !important;transform:none !important}
  .cells-in{opacity:1 !important;transform:none !important}
  .curtain-cells{display:none}
  .scroll-cue i::after{display:none}
  .replay{display:none}
}

/* ------------------------------------------------ reveal stage, as a lockup -
   Lockup 06, sight line stacked. The mark is 2.65x the type size; the cap of
   ONE meets the top of the square, the baseline of MILLION meets its foot,
   and the crossbar runs level with the crossbar of the H in HUNDRED.
   The gap is three cells of the mark's own grid. Nothing leaves the square. */
.reveal-wrap{position:relative;display:inline-block}
.reveal-stage{
  --size:clamp(96px,26vw,176px);
  display:flex;align-items:flex-start;gap:calc(var(--size) * .3);
  place-items:initial;isolation:isolate;
}
.reveal-svg{width:var(--size);height:var(--size);flex:none}
.reveal-name{
  font-family:var(--font-display);font-weight:600;
  font-size:calc(var(--size) / 2.65);line-height:.9675;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--fg);
  margin-top:calc(var(--size) / 2.65 * var(--cap-fix,-.14875));
  opacity:0;transform:translateY(8px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal-name.on{opacity:1;transform:none}
.reveal-name span{display:block}
.reveal-descriptor{
  display:block;font-family:var(--font-text);font-weight:500;
  font-size:calc(var(--size) / 2.65 * .3);letter-spacing:.24em;
  color:var(--fg-faint);margin-top:.9em;text-transform:uppercase;
}
.replay{
  position:absolute;right:0;top:-4px;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--fg-faint);background:none;border:0;cursor:pointer;padding:6px;
  opacity:0;transition:opacity .4s var(--ease),color .3s var(--ease);font-family:var(--font-text);
}
.reveal-wrap:hover .replay,.replay:focus-visible{opacity:1}
.replay:hover{color:var(--accent)}
@media (min-width:920px){.reveal-wrap{justify-self:end}}