/* How it's calculated */
:root{
  --ink:#14142B; --paper:#FFF8EE; --ground:#FFF8EE; --fg:#14142B;
  /* accent follows the calculator's result; Ink until then */
  --acc:#14142B; --acc-on:#FFF8EE; --acc-safe:#14142B;
  --display:"Unbounded", Heebo, sans-serif;
  --body:"Manrope", Heebo, sans-serif;
  --gut:clamp(16px, 3.4vw, 56px);
  --col-gap:clamp(16px, 2vw, 32px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
html,body{margin:0}
body{background:var(--ground); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.45; overflow-x:clip}
::selection{background:var(--ink); color:var(--paper)}
.wrap{padding-inline:var(--gut)}
.grid12{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap)}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.025em; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a:focus-visible, button:focus-visible{outline:3px solid var(--acc-safe); outline-offset:4px; border-radius:6px}

.body{font-size:clamp(18px, 1.4vw, 20px); line-height:1.6; max-width:60ch}

/* colour blocks, as in the home How section */
.chain{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.part{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.cb{width:52px; height:52px; border-radius:18%; display:grid; place-items:center; flex:none;
  font-family:var(--display); font-weight:800; font-size:23px; line-height:1;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent)}
.cb.two{font-size:18px}
.cb.zero{box-shadow:inset 0 0 0 2px currentColor; background:transparent}
.cb.kept{outline:3px solid currentColor; outline-offset:4px}
.on-ink .cb.kept{outline-color:var(--paper)}
.chain .cb.kept{outline-offset:2px; margin-inline:5px}
.op{font-family:var(--display); font-weight:700; font-size:18px; width:14px; text-align:center}
.arw{width:24px; height:24px; flex:none}
.arw *{stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* hero: the question, then the example date already standing as blocks */
.hero{display:flex; flex-direction:column; gap:clamp(24px,3vw,40px); padding-block:clamp(40px,6vw,96px) clamp(56px,7vw,112px)}
.hero h1{font-size:clamp(36px, 5.6vw, 84px); line-height:1; max-width:15ch}
.hero .intro{max-width:56ch}
.datebar{display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,48px); margin-top:clamp(16px,2vw,32px)}
.datebar .grp{display:flex; flex-direction:column; gap:10px}
.datebar .blocks{display:flex; gap:8px}
.datebar .cb{width:clamp(52px,6vw,88px); height:clamp(52px,6vw,88px); font-size:clamp(24px,2.8vw,40px)}
.datebar .lab{font-weight:800; font-size:15px}

/* steps: Ink band, one row per step, the words left and the chain right */
.steps{background:var(--ink); color:var(--paper); padding-block:clamp(40px,5vw,72px); list-style:none; margin:0}
.step{padding-block:clamp(32px,4vw,56px); align-items:center; border-top:1px solid color-mix(in srgb, var(--paper) 18%, transparent)}
.step:first-child{border-top:0}
.step .words{grid-column:1 / span 5; display:flex; flex-direction:column; gap:16px}
.step h3{font-size:clamp(22px, 2.2vw, 32px)}
.step .chain{grid-column:7 / span 6}
.step.total .cb.res:last-child{width:72px; height:72px; font-size:32px}

/* master numbers: text left, the three kept numbers large right, then the worked date across */
.master{padding-block:clamp(72px,9vw,136px); row-gap:clamp(40px,5vw,72px)}
.master .words{grid-column:1 / span 5; display:flex; flex-direction:column; gap:24px}
.master h2{font-size:clamp(30px, 3.8vw, 56px); line-height:1}
.master .trio{grid-column:7 / span 6; display:flex; gap:clamp(10px,1.4vw,20px); align-self:center}
.master .trio .cb{width:clamp(72px,9vw,140px); height:clamp(72px,9vw,140px); font-size:clamp(26px,3.2vw,50px); border-radius:22%}
.worked{grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px clamp(24px,4vw,64px);
  padding-top:clamp(32px,4vw,56px); border-top:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
.worked .row{display:flex; flex-direction:column; gap:12px}
.worked .rl{font-weight:800; font-size:16px}

/* why separately: a warm band, the heading large across, the text set in from the right */
.why{display:flex; flex-direction:column; gap:clamp(28px,3vw,44px); background:#F2E9DC; padding-block:clamp(72px,9vw,136px)}
.why h2{font-size:clamp(34px, 5vw, 76px); line-height:1; max-width:16ch}
/* the text starts on the fifth of the twelve columns */
.why .words{margin-left:calc((100% - 11 * var(--col-gap)) / 12 * 4 + 4 * var(--col-gap))}

/* the calculator: the check sentence, the form, the result beside it */
.calc{padding-block:clamp(72px,9vw,136px); row-gap:32px; align-items:start}
.calc .left{grid-column:1 / span 6; display:flex; flex-direction:column; gap:28px}
.calc .check{font-size:clamp(20px, 1.8vw, 26px); font-weight:800; line-height:1.3; max-width:30ch}
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}
input{font:700 18px/1 var(--body); color:var(--fg); background:#FFFFFF; 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}
input::placeholder{color:var(--fg); opacity:.78}
input:focus{outline:none}
input:focus-visible{border-color:var(--acc-safe); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc-safe) 30%, transparent)}
input:active{border-color:var(--fg)}
input[aria-invalid="true"]{border-style:dashed}
@media (hover:hover){ input:hover{border-color:var(--fg)} }
.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);
  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}
.date{font-weight:800; font-size:15px}
.result{grid-column:8 / span 5; display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.result .big{width:clamp(120px,13vw,180px); height:clamp(120px,13vw,180px); font-size:clamp(52px,6vw,84px); border-radius:22%}
.result .big.two{font-size:clamp(42px,4.6vw,64px)}
.result h2{font-size:clamp(26px, 2.6vw, 38px)}
.result .rows{display:flex; flex-direction:column; gap:10px; width:100%}
.result .rows .row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.result .rows .rl{width:96px; font-weight:800; font-size:14px}
.result .rows .cb{width:36px; height:36px; font-size:16px}
.result .rows .cb.two{font-size:13px}
.result .rows .op{font-size:14px; width:10px}
.result .rows .arw{width:18px; height:18px}
.result .rows .chain, .result .rows .part{gap:5px}
.read{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}
.read svg{width:18px; height:18px; transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.read svg *{stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover){ .read:hover{background:var(--acc); border-color:var(--acc); color:var(--acc-on)} .read:hover svg{transform:translateX(4px)} }
.read:active{transform:scale(.97)}

@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}
  .step .words, .step .chain, .master .words, .master .trio, .calc .left, .result{grid-column:1 / -1}
  .why .words{margin-left:0}
  .hero h1{font-size:clamp(30px, 8.4vw, 44px)}
  .step{row-gap:24px}
  .cb{width:36px; height:36px; font-size:16px}
  .cb.two{font-size:13px}
  .op{font-size:14px; width:8px}
  .arw{width:18px; height:18px}
  .chain, .part{gap:4px}
  .step.total .cb.res:last-child{width:52px; height:52px; font-size:24px}
  .worked{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr 1fr 1.35fr; gap:8px}
  .go{grid-column:1 / -1; height:52px}
  input{height:48px; padding:0 10px; font-size:17px}
  .result{margin-top:16px}
  .foot-row{flex-direction:column; align-items:flex-start}
}
@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} }