/* Home */
:root{
  --ink:#14142B;
  --paper:#FFF8EE;
  --ground:#FFF8EE;
  --fg:#14142B;
  --anti:#FFFFFF; /* field fill */
  /* the number's colour is an accent now, never the ground; set per result in JS */
  --acc:#14142B; --acc-on:#FFF8EE; --acc-safe:#14142B; --acc-deep:#14142B; --acc-num:#14142B; --acc-tint:#E9E6E2; --acc-tint-deep:#CFCBC6;
  --display:"Unbounded", Heebo, sans-serif;
  --body:"Manrope", Heebo, sans-serif;
  --gut:clamp(16px, 3.4vw, 56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--ground);
  color:var(--fg);
  font-family:var(--body);
  font-size:16px;
  line-height:1.4;
  min-height:100svh;
  overflow-x:clip;
}
.page{
  position:relative; z-index:1;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding-inline:var(--gut);
}

/* hero grid */
.hero{
  display:grid;
  grid-template-columns:minmax(380px, 5fr) 7fr;
  gap:clamp(24px, 4vw, 72px);
  min-height:0;
  padding-block:8px 20px;
}
.ask{align-self:stretch; display:flex; flex-direction:column; gap:24px; max-width:600px}
.ask .sub{margin-top:-8px}
.ask h1{margin-top:auto}
.ask .how{margin-bottom:auto}
h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(34px, 4.1vw, 62px);
  line-height:1.02; letter-spacing:-.025em;
  margin:0; max-width:11ch;
}

/* form */
form{margin:0}
fieldset{border:0; margin:0; padding:0; min-width:0}
legend{font-weight:800; font-size:16px; padding:0; margin-bottom:12px}
.fields{display:grid; grid-template-columns:84px 76px 112px auto; gap:10px; align-items:end}
.fld{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700}
.fld span{opacity:.92}
input{
  font:700 18px/1 var(--body);
  color:var(--fg);
  background:color-mix(in srgb, var(--ground) 76%, var(--anti));
  border:2px solid color-mix(in srgb, var(--fg) 70%, transparent);
  border-radius:12px;
  height:56px; width:100%;
  padding:0 12px;
  font-variant-numeric:tabular-nums;
  /* no colour transitions: the flood flips every colour in one frame */
}
input::placeholder{color:var(--fg); opacity:.78}
input:focus{outline:none}
input:focus-visible{border-color:var(--acc-safe); background:color-mix(in srgb, var(--ground) 62%, var(--anti))}
input:active{border-color:var(--fg)}
input[aria-invalid="true"]{border-color:var(--fg); border-style:dashed}
@media (hover:hover){ input:hover{border-color:color-mix(in srgb, var(--fg) 75%, transparent)} }
.go{
  height:56px; padding:0 26px;
  font:800 17px/1 var(--body);
  color:var(--acc-on); background:var(--acc);
  border:2px solid var(--acc-safe); /* the same colour for dark numbers; gives pale ones (33) an edge on Paper */
  border-radius:999px; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease;
}
@media (hover:hover){ .go:hover{transform:translateY(-2px); box-shadow:0 10px 20px -8px color-mix(in srgb, var(--ink) 70%, transparent)} }
.go:active{transform:translateY(1px) scale(.97); box-shadow:none}
.err{min-height:22px; margin:10px 0 0; font-weight:700; font-size:15px}
.err:empty{margin-top:0}

/* how */
.how{display:flex; flex-direction:column; gap:8px; font-size:15px}
.how p{margin:0}
.date-label{font-weight:800}
.trace{display:flex; flex-wrap:wrap; gap:4px 18px; font-weight:500; font-variant-numeric:tabular-nums}
.trace span{white-space:nowrap}
.trace b{font-weight:800}
.trace{min-height:1.4em}
.trace.sum{font-family:var(--display); font-weight:800; font-size:clamp(22px,2.6vw,42px); letter-spacing:-.02em; line-height:1.05; min-height:1.1em}

/* stage */
.stage{display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:0; gap:10px}
.board{position:relative; min-height:0; overflow:hidden}
.geo{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; visibility:hidden}
/* first entry, before any date: the nine-point geometry, drawn once, with the twelve numbers resting on it */
.idle{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.idle .il{fill:none; stroke:var(--ink); stroke-opacity:.2; stroke-width:1.4; vector-effect:non-scaling-stroke}
.idle .chip{transform-box:fill-box; transform-origin:center}
.idle text{font-family:var(--display); font-weight:800}
/* on the phone the dial rests in the open space under the form, where the result will appear */
@media (max-width: 860px){ .hero.is-idle .result{min-height:310px} }
.geo *{fill:none; stroke:var(--fg); stroke-width:1; vector-effect:non-scaling-stroke}
.geo .faint{opacity:.22}
.geo .dot{fill:var(--fg); stroke:none; opacity:.35}
.geo .dot.on{opacity:1}
.par{position:absolute; inset:0}
.pieces{position:absolute; inset:0}
.blk{
  position:absolute; left:50%; top:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; line-height:1;
  border-radius:18%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
  will-change:transform;
  user-select:none;
}
.blk.zero{background:transparent; box-shadow:inset 0 0 0 2px var(--fg); color:var(--fg)}
.glabel{
  position:absolute; left:50%; top:50%;
  font-size:14px; font-weight:800; white-space:nowrap;
  transform:translateX(-50%);
}
.numeral{
  position:absolute; inset:0;
  pointer-events:none;
  transform-origin:50% 50%;
  visibility:hidden;
}
.numeral svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.numeral text{
  font-family:var(--display); font-weight:800;
  font-variant-numeric:lining-nums;
}
.nfull{fill:var(--acc-num)}
#numGeo *{fill:none; stroke:var(--acc-deep); stroke-width:1.4; vector-effect:non-scaling-stroke}
#numGeo .gdot{fill:var(--acc-deep); stroke:none}
.result{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:12px 24px; min-height:56px;
  visibility:hidden;
}
.rtext{max-width:46ch}
.rline{margin:10px 0 0; font-size:17px; font-weight:500; line-height:1.45; text-wrap:pretty}
.rline:has(> .hl:empty){display:none}
/* .hl only marks the text runs whose edges the numeral placement measures; it paints nothing */
.fld > .hl{align-self:flex-start}
.sub{margin:0; font-size:clamp(17px,1.35vw,20px); font-weight:500; line-height:1.45; max-width:34ch; text-wrap:pretty}
.rname{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(24px, 2.8vw, 44px); letter-spacing:-.02em; line-height:1.05}
.path{
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 24px;
  border:2px solid var(--acc-safe); border-radius:999px;
  color:var(--fg); text-decoration:none; font-weight:800; font-size:16px;
  transition:transform .18s ease;
}
.path svg{width:18px; height:18px; transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.path svg *{stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover){
  .path:hover{background:var(--acc); border-color:var(--acc); color:var(--acc-on)}
  .path:hover svg{transform:translateX(4px)}
}
.path:active{transform:scale(.97)}

/* the nine */
.nine{
  list-style:none; margin:0; padding:14px 0 18px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px;
  border-top:1px solid color-mix(in srgb, var(--fg) 26%, transparent);
}
.nine li{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700}
.sw{
  flex:none; width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:14px;
  transition:transform .3s ease;
}
.nine li.on .sw{outline:2px solid var(--fg); outline-offset:3px; transform:scale(1.08)}
.nine .w{white-space:nowrap}

/* ---------- below the hero: each section carries its own ground; the number's colour is an accent ---------- */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
::selection{background:var(--fg); color:var(--ground)}
.sec{position:relative; z-index:1; padding-inline:var(--gut); background:var(--ground); color:var(--fg)}
.sec-nums{--ground:#FFF8EE; --fg:#14142B; padding-block:clamp(72px,9vw,128px) clamp(64px,8vw,112px)}
.sec-how{--ground:#14142B; --fg:#FFF8EE; padding-block:clamp(80px,10vw,144px)}
.grid12{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(16px,2vw,32px)}
h2{font-family:var(--display); font-weight:800; font-size:clamp(34px,4.6vw,66px); line-height:1; letter-spacing:-.03em; margin:0; text-wrap:balance}
.sec-top h2{grid-column:1 / span 6}

/* the twelve: each column holds its giant numeral, cropped at the column edge (the page's one grid break);
   the open one floods and keeps its numeral whole behind the name, a room in its colour */
.nums{list-style:none; margin:clamp(32px,4vw,56px) 0 0; padding:0; display:flex; gap:6px; height:clamp(560px, 72vh, 680px)}
.num{
  position:relative; flex:1 1 0; min-width:0; border-radius:20px; overflow:hidden;
  background:color-mix(in srgb, var(--c) 16%, #FFF8EE); color:#14142B;
  font-variant-numeric:tabular-nums;
  transition:flex-grow .9s cubic-bezier(.16,1,.3,1), outline-color .2s ease;
  outline:3px solid transparent; outline-offset:3px;
}
.num.open{flex-grow:5.4}
.num.yours{outline-color:#14142B}
.num .fill{position:absolute; inset:0; background:var(--c); clip-path:inset(58% 0 0 0 round 0); transition:clip-path .9s cubic-bezier(.16,1,.3,1)}
.num.open .fill{clip-path:inset(0 0 0 0 round 0)}
.big{
  position:absolute; left:6px; top:calc(58% - .8em); z-index:1; pointer-events:none;
  font-family:var(--display); font-weight:800; line-height:1; letter-spacing:-.06em; white-space:nowrap;
  font-size:clamp(190px, 17.4vw, 260px); color:var(--big);
  transform-origin:0 100%;
  transition:color .6s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.num.open .big{color:var(--tone); transform:translate(16px, -14%) scale(1.6)}
.nhead{
  position:absolute; inset:0; z-index:2; width:100%; margin:0; padding:0;
  background:none; border:0; border-radius:20px; cursor:pointer;
  color:inherit; font:inherit; text-align:left;
}
.nhead:focus-visible{outline:3px solid #14142B; outline-offset:-6px}
.nhead:active .nn{transform:translateX(-50%) scale(.92)}
.nn{
  position:absolute; left:50%; top:calc(58% + 14px); transform:translateX(-50%);
  font-family:var(--display); font-weight:800; font-size:20px; line-height:1; letter-spacing:-.03em; color:var(--on);
  transition:opacity .2s ease, transform .15s ease;
}
.num.open .nn{opacity:0}
.nname{
  position:absolute; left:50%; bottom:20px;
  writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg);
  font-weight:800; font-size:16px; white-space:nowrap; color:var(--on);
  transition:opacity .2s ease;
}
.num.open .nname{opacity:0}
.nbody{
  position:absolute; z-index:3; left:28px; bottom:28px; width:min(380px, 25vw);
  color:var(--on); opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.num.open .nbody{opacity:1; transform:none; pointer-events:auto; transition-delay:.35s}
.bname{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(24px,2.2vw,34px); line-height:1.05; letter-spacing:-.02em}
.nline{margin:12px 0 0; font-size:16px; font-weight:500; line-height:1.45}
.nline:empty{display:none}
.nlink{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:12px;
  color:inherit; font-weight:800; font-size:16px; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px;
}
.nlink svg,.credit svg{width:18px; height:18px; transition:transform .2s cubic-bezier(.16,1,.3,1)}
.nlink svg *{stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.nlink:active{transform:scale(.97)}
.nlink:focus-visible{outline:3px solid currentColor; outline-offset:3px; border-radius:6px}
@media (hover:hover){
  .nhead:hover .nn{transform:translateX(-50%) translateY(-3px)}
  .nlink:hover svg{transform:translateX(4px)}
  .nlink:hover{text-decoration-thickness:3px}
}

/* how it's calculated: the same blocks, small, in three steps */
.how-side{grid-column:1 / span 4; display:flex; flex-direction:column; align-items:flex-start; gap:32px}
.how-grid{align-items:stretch}
.steps{grid-column:6 / span 7; list-style:none; margin:0; padding:0}
.step{padding-block:28px; border-top:1px solid color-mix(in srgb, var(--fg) 22%, transparent)}
.step:first-child{border-top:0; padding-top:0}
.row{display:flex; align-items:center; gap:16px; min-height:56px}
.row + .row{margin-top:12px}
.rlab{flex:none; width:128px; font-weight:800; font-size:16px}
.chain{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.part{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.master{margin-top:auto; padding-top:32px; border-top:1px solid color-mix(in srgb, var(--fg) 22%, transparent); display:flex; flex-direction:column; gap:20px; align-self:stretch}
.mlab{margin:0; font-weight:800; font-size:16px}
.mrow{display:flex; gap:12px}
.mrow .cb{width:84px; height:84px; font-size:30px; border-radius:18px}
.cb{
  width:48px; height:48px; border-radius:18%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:22px; line-height:1;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #FFF8EE 16%, transparent);
}
.cb.two{font-size:17px}
.cb.zero{box-shadow:inset 0 0 0 2px var(--fg); color:var(--fg)}
.op{font-family:var(--display); font-weight:700; font-size:18px; width:14px; text-align:center}
.arw{width:24px; height:24px}
.arw *{stroke:var(--fg); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.final{display:flex; align-items:center; gap:24px}
.final .cb{width:112px; height:112px; font-size:52px; border-radius:22px}
.final .cb.two{font-size:40px}
.fname{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(24px,2.4vw,36px); letter-spacing:-.02em; line-height:1.05}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* phone */
@media (max-width: 860px){
  .logo{font-size:16px}
  .links{gap:16px}
  .links a{font-size:14px; white-space:nowrap}
  .hero{grid-template-columns:1fr; gap:14px; padding-block:4px 12px}
  /* phone reading order: headline, line, form, numeral and name, then the working */
  .ask{display:contents}
  .ask h1{order:1; margin-top:0} .ask .sub{order:2; margin-top:-6px; font-size:16px}
  #form{order:3} #calc{order:4; margin-top:-4px} .stage{order:5}
  .rline{font-size:16px}
  h1{font-size:clamp(26px, 7.4vw, 40px); max-width:14ch}
  legend{font-size:15px; margin-bottom:8px}
  .fields{grid-template-columns:1fr 1fr 1.35fr; gap:8px}
  .go{grid-column:1 / -1; margin-top:4px}
  input{height:48px; padding:0 10px; font-size:17px}
  .go{height:52px; padding:0 18px; font-size:16px}
  .err{margin-top:8px; min-height:0}
  .how{gap:4px; font-size:14px}
  .stage{gap:6px}
  .board{height:clamp(170px, 27svh, 300px)}
  .result{min-height:48px; gap:8px 12px}
  .rname{font-size:clamp(20px, 5.6vw, 28px)}
  .path{min-height:48px; padding:0 16px; font-size:15px}
}
@media (max-width: 860px){
  .sec-top h2{grid-column:1 / -1}
  .nums{flex-direction:column; height:auto; gap:6px}
  .num{flex:none; border-radius:16px}
  .num .fill{clip-path:inset(0 calc(100% - 64px) 0 0 round 0)}
  .num.open .fill{clip-path:inset(0 0 0 0 round 0)}
  .nhead{position:relative; inset:auto; display:flex; align-items:center; gap:16px; min-height:64px; border-radius:16px}
  .nn{position:static; flex:none; width:64px; text-align:center; font-size:24px; color:var(--on); transform:none !important; opacity:1 !important}
  .big{display:none}
  .num.open .big{display:block; left:auto; right:8px; top:-.16em; font-size:190px; transform:none}
  .nname{position:static; writing-mode:horizontal-tb; transform:none; color:#14142B; font-size:17px; opacity:1 !important; transition:color .25s ease}
  .num.open .nname{color:var(--on)}
  .nbody{position:relative; left:auto; bottom:auto; width:auto; opacity:1; transform:none; pointer-events:auto; display:grid; grid-template-rows:0fr; transition:grid-template-rows .7s cubic-bezier(.16,1,.3,1)}
  .num.open .nbody{grid-template-rows:1fr; transition-delay:0s}
  .nbody-in{overflow:hidden; min-height:0}
  .nbody-in > :last-child{margin-bottom:16px}
  .nbody-in{padding-left:80px; padding-right:16px}
  .bname{display:none}
  .nline{margin-top:0}
  .nlink{margin-top:4px}
  .num:not(.open) .nlink{visibility:hidden}
  .how-side,.steps{grid-column:1 / -1}
  .how-side{margin-bottom:40px}
  .row{flex-wrap:wrap; gap:8px 12px}
  .rlab{width:100%}
  .cb{width:32px; height:32px; font-size:15px}
  .cb.two{font-size:14px}
  .op{font-size:14px; width:8px}
  .arw{width:18px; height:18px}
  .chain{gap:4px}
  .final{flex-direction:column; align-items:flex-start; gap:16px}
  /* phone: the method first, the exception after it */
  .how-grid{display:flex; flex-direction:column}
  .how-side{display:contents}
  .how-side h2{order:1; margin-bottom:24px} .how-side .path{order:2; margin-bottom:48px} .steps{order:3} .master{order:4; margin-top:40px}
  .final .cb{width:88px; height:88px; font-size:40px}
  .fname{white-space:nowrap; font-size:min(26px, 6.2vw)}
  .mrow .cb{width:64px; height:64px; font-size:24px}
  .part{gap:4px}
  .foot-row{flex-direction:column; align-items:flex-start}
}
/* ---------- the result numeral is a backdrop behind the content ---------- */
.board{z-index:0}
.ask, .result{position:relative; z-index:1}
@media (min-width: 861px){
  .hero{position:relative; grid-template-rows:minmax(0,1fr) auto}
  .stage{display:contents}
  .ask{grid-row:1; grid-column:1}
  /* the result joins the text column; the numeral owns the right and runs off the edge */
  .result{grid-row:2; grid-column:1; justify-content:flex-start; align-items:flex-start; flex-direction:column; gap:16px; padding-top:20px}
  /* JS places the numeral to the right of the text, so nothing on desktop overlaps it */
  .board{position:absolute; top:0; bottom:0; left:22%; right:calc(-1 * var(--gut))}
}
@media (max-width: 860px){
  .hero{align-content:start}
  .stage{display:contents}
  .ask h1, .ask .sub, #form{position:relative; z-index:1; grid-column:1}
  .ask h1{grid-row:1} .ask .sub{grid-row:2} #form{grid-row:3}
  .board{grid-row:1 / 6; grid-column:1; height:auto; align-self:stretch; margin-inline:calc(-1 * var(--gut))}
  #calc, .result{position:relative; z-index:1}
  #calc{grid-row:4; grid-column:1} .result{grid-row:5; grid-column:1}
  /* text runs across the numeral on the phone, so the whole numeral is a light tint of its colour */
  .nfull{fill:var(--acc-tint)}
  #numGeo *{stroke:var(--acc-tint-deep)}
  #numGeo .gdot{fill:var(--acc-tint-deep)}
  .glabel{display:none}
}
@media (max-width: 420px){
  .logo{font-size:14px}
  .links{gap:14px}
}
@media (max-width: 370px){
  .nav{height:auto; flex-wrap:wrap; row-gap:0; padding-block:8px}
  .fields{grid-template-columns:1fr 1fr 1.35fr; }
}