/* Number pages */
:root{
  --ink:#14142B;
  --paper:#FFF8EE;
  --ground:#FFF8EE;
  --fg:#14142B;
  /* the number's colour and its roles; set from PAGE.n in JS */
  --acc:#2B59C3; --acc-on:#FFF8EE; --acc-safe:#2B59C3; --acc-num:#2B59C3; --acc-deep:#1B2F64;
  --acc-tint:#B5C0DF; --acc-soft:#E7E8EC;
  --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(--acc); color:var(--acc-on)}
a{color:inherit}
.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}

/* hero: the name on the left, the numeral whole and in full colour on the right */
.hero{min-height:min(calc(100svh - 76px), 860px); align-items:center; padding-block:16px 48px}
.hero-text{grid-column:1 / span 6; display:flex; flex-direction:column; align-items:flex-start; gap:28px; position:relative; z-index:1}
.hero h1{font-size:clamp(34px, 4.6vw, 68px); line-height:1.02; max-width:12ch}
.hero .line{font-size:clamp(18px, 1.5vw, 21px); font-weight:500; max-width:38ch}
.line:empty{display:none}
.back{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:800; font-size:15px; text-decoration:none;
  border-bottom:2px solid var(--acc-safe); transition:gap .2s ease}
.back svg{width:18px; height:18px; transition:transform .2s cubic-bezier(.16,1,.3,1)}
.back svg *, .arrow *{stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.back:active{opacity:.7}
@media (hover:hover){ .back:hover svg{transform:translateX(-4px)} }
.stage{grid-column:7 / span 6; position:relative; height:min(72svh, 700px); min-height:360px}
.stage svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
#glyph, #glyphClipText{font-family:var(--display); font-weight:800}
#glyph{fill:var(--acc-num); stroke:var(--acc-num); stroke-width:2; paint-order:stroke}
.geo *{fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke}
.geo-in *{stroke:var(--acc-deep)}
.geo-in .gdot{fill:var(--acc-deep); stroke:none}
.geo-out *{stroke:var(--acc-safe); opacity:.45}

/* the four sections: three different shapes, colour carrying the weight */
.sec{padding-block:clamp(72px, 9vw, 136px)}
.sec h2{font-size:clamp(30px, 3.8vw, 56px); line-height:1}
.body{font-size:clamp(18px, 1.45vw, 21px); line-height:1.55; max-width:62ch}
.strengths{background:var(--acc); color:var(--acc-on)}
.strengths h2{grid-column:1 / span 5; font-size:clamp(40px, 6vw, 96px); line-height:.95}
.strengths .content{grid-column:7 / span 6; align-self:end}

/* set in by two of the twelve columns, so it lines up with the grid without being one */
.challenges{display:flex; flex-direction:column; padding-left:calc(var(--gut) + (100vw - 2 * var(--gut) - 11 * var(--col-gap)) / 12 * 2 + 2 * var(--col-gap)); padding-right:calc(var(--gut) + (100vw - 2 * var(--gut) - 11 * var(--col-gap)) / 12 * 2 + 2 * var(--col-gap))}
.challenges h2{color:var(--acc-safe)}
.challenges .content{margin-top:clamp(28px,3vw,44px)}
.challenges .body{font-size:clamp(20px, 1.8vw, 26px); max-width:none}

.pair{display:grid; grid-template-columns:1fr 1fr}
.pair > section{padding:clamp(56px,7vw,112px) var(--gut); display:flex; flex-direction:column; gap:28px}
.love{background:var(--acc-tint)}
.work{background:var(--acc-soft)}
.pair h2{font-size:clamp(28px, 3.2vw, 48px)}

/* questions: one at a time, large, each can be kept */
.questions h2{max-width:14ch; margin-bottom:clamp(24px,4vw,56px)}
.qs{list-style:none; margin:0; padding:0}
.qs li{border-top:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
.qs li:last-child{border-bottom:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
.q{
  width:100%; min-height:clamp(180px, 26vh, 280px); padding:clamp(28px,4vw,56px) 0;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px;
  background:none; border:0; color:var(--fg); text-align:left; cursor:pointer; font:inherit;
}
.qt{font-family:var(--body); font-weight:800; font-size:clamp(24px, 3vw, 44px); line-height:1.2; letter-spacing:-.01em; max-width:26ch}
.qmark{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border-radius:999px;
  border:2px solid var(--acc-safe); font-weight:800; font-size:15px; color:var(--fg); white-space:nowrap;
  transition:transform .15s ease}
.qmark svg{width:18px; height:18px}
.qmark svg path{fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round}
.q[aria-pressed="true"] .qmark{background:var(--acc); border-color:var(--acc); color:var(--acc-on)}
.q[aria-pressed="true"] .qmark svg path{fill:currentColor}
.q:active .qmark{transform:scale(.95)}
@media (hover:hover){ .q:hover .qmark{transform:translateY(-2px)} .q:hover .qt{text-decoration:underline; text-decoration-color:var(--acc-safe); text-decoration-thickness:3px; text-underline-offset:8px} }

/* one thing to try: the closing room, in full colour */
.try{background:var(--acc); color:var(--acc-on); position:relative; overflow:hidden}
.try .inner{grid-column:2 / span 10; display:flex; flex-direction:column; gap:clamp(28px,3vw,44px); position:relative; z-index:1}
.try h2{font-size:clamp(20px, 1.7vw, 26px); letter-spacing:-.01em}
.try .big{font-family:var(--display); font-weight:800; font-size:clamp(28px, 4.2vw, 64px); line-height:1.08; letter-spacing:-.025em; max-width:22ch}
.try .echo{position:absolute; right:var(--gut); bottom:clamp(24px,3vw,48px); font-family:var(--display); font-weight:800; font-size:clamp(120px, 17vw, 280px); line-height:.78;
  color:var(--acc-deep); opacity:.28; pointer-events:none; z-index:0; letter-spacing:-.05em}

/* other numbers */
.others{display:grid; gap:28px}
.others h2{font-size:clamp(24px, 2.4vw, 34px)}
.row12{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:10px}
.row12 a{display:flex; flex-direction:column; gap:10px; text-decoration:none; min-height:44px; border-radius:14px; padding:6px}
.row12 .sq{display:grid; place-items:center; aspect-ratio:1; border-radius:12px; font-family:var(--display); font-weight:800; font-size:clamp(16px,1.6vw,24px); transition:transform .18s cubic-bezier(.16,1,.3,1)}
.row12 .nm{font-size:14px; font-weight:700; line-height:1.25}
.row12 a[aria-current="page"]{outline:3px solid var(--ink); outline-offset:0}
.row12 a:active .sq{transform:scale(.95)}
@media (hover:hover){ .row12 a:hover .sq{transform:translateY(-4px)} }

@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}
  /* compact on the phone, so the first screen reaches the top of the colour field */
  .hero{min-height:0; padding-block:6px 28px; row-gap:14px}
  .hero-text{display:contents}
  .hero h1{grid-column:1 / -1; order:1; font-size:clamp(28px, 8vw, 40px); max-width:16ch}
  .stage{grid-column:1 / -1; order:2; height:clamp(150px, 21svh, 176px); min-height:0}
  .hero .line{grid-column:1 / -1; order:3; font-size:17px}
  .back{grid-column:1 / -1; order:4; justify-self:start}
  .strengths h2, .strengths .content, .try .inner{grid-column:1 / -1}
  .challenges{padding-inline:var(--gut)}
  .strengths .content{margin-top:28px}
  .pair{grid-template-columns:1fr}
  .q{grid-template-columns:1fr; gap:18px; min-height:0}
  .qmark{justify-self:start}
  .row12{grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
  .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} .row12{grid-template-columns:repeat(2, minmax(0,1fr))} }