/* Home: the inscription is the only name. Suppositions roll through a window; under them, what the
   question means for each product, and one line on how the three are tied together.
   Layouts: desktop (over 1100px), small laptop 901-1100 (products as rows), one question at a time
   at 900 and below (narrow tablets and phones), phone sizes at 700 and below. */
:root{
  /* Warm grey ground (OKLCH 0.935 0.004 85): nearly neutral, so the cool product tiles don't fight a yellow cast.
     brand/colour_v2/ has the analysis. Greys below share its hue. */
  --stone:#EBE9E6; --ink:#1E1F21; --soft:#646361; --rule:#CFCDCA; --wash:#E1DFDD;
  --l1:#9E9D9A; --l2:#B7B6B3; --l3:#CAC9C6;          /* reel lines, one, two and three steps from centre */
  --f:"Newsreader",Georgia,serif; --cap:"Cinzel",Georgia,serif;
  --ease:cubic-bezier(.45,.05,.2,1);
  --qs:clamp(30px,3.4vw,58px);                         /* question and "Suppose" size; JS may lower it to fit */
  --ind:clamp(0px,6vw,110px);                          /* the content's left edge, shared by the inscription */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stone);color:var(--ink);font:400 18px/1.5 var(--f);min-height:100svh}
.w{max-width:1440px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:30px 0 30px var(--ind)}
.insc{font:500 16px/1.4 var(--cap);letter-spacing:.3em;color:var(--ink);text-decoration:none;white-space:nowrap}
.insc span{color:var(--soft)}
.top nav{display:flex;gap:14px;align-items:center}
.top nav a{display:block;line-height:0;transition:transform .2s var(--ease)}
.top nav a:hover{transform:translateY(-2px)}
.top nav img{width:26px;height:26px}
.top nav .t{line-height:1.4;font-size:17px;color:var(--soft);text-decoration:none;margin-left:10px}
.top nav .t:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,.win:focus-visible{outline:2px solid var(--soft);outline-offset:6px;border-radius:2px}

/* On tall screens the page sits in the middle of the window rather than leaving a band at the bottom */
main{min-height:calc(100svh - 92px);display:flex;flex-direction:column;justify-content:center;padding-bottom:16px}

/* The reel. "Suppose" and the centred question share one size and one line box, so their baselines meet. */
.stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.42em;align-items:center;
  font-size:var(--qs);margin:clamp(24px,5vh,72px) 0 0;padding-left:var(--ind)}
.kk{position:relative}
.k{font-style:italic;color:var(--soft);line-height:1.3;white-space:nowrap}
/* Play/pause: invisible while the questions move, unless it has keyboard focus; shown once paused. */
.pp{position:absolute;right:100%;top:50%;margin:-15px 14px 0 0;width:30px;height:30px;padding:5px;border:1px solid var(--l1);
  border-radius:50%;background:none;color:var(--soft);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.pp svg{display:block;width:100%;height:100%}
.pp:focus-visible,.paused .pp{opacity:1;pointer-events:auto}
.pp:hover{color:var(--ink);border-color:var(--soft)}
.win{position:relative;height:calc(5 * 1.3em);overflow:clip;
  -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.reel{list-style:none;margin:0;padding:0;will-change:transform;transition:transform 1.1s var(--ease)}
.reel li{line-height:1.3;letter-spacing:-.012em;white-space:nowrap;cursor:pointer;color:var(--l3);transition:color 1.1s var(--ease),opacity .6s var(--ease)}
.reel li.d0{color:var(--ink)}
.reel li.d1{color:var(--l1)}
.reel li.d2{color:var(--l2)}
.reel li:not(.d0):hover{color:var(--soft)}
.reel.snap,.reel.snap li{transition:none!important}

/* What the question means for each product */
.ans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(36px,6vh,80px);border-top:1px solid var(--rule);margin-left:var(--ind)}
.ans a{display:block;padding:28px 32px 36px;text-decoration:none;color:var(--ink);border-right:1px solid var(--rule);transition:background .3s}
.ans a:last-child{border-right:0}
.ans a:hover{background:var(--wash)}
.ans .hd{display:flex;align-items:center;gap:16px}
.ans img{width:56px;height:56px;flex:none}
.ans .nm{font-size:24px;line-height:1.2;white-space:nowrap}.ans .nm b{font-weight:500}.ans .nm span{color:var(--soft)}
.ans .txt{position:relative;display:grid;margin-top:18px}
.ans .txt p{grid-area:1/1;margin:0;font-size:22px;line-height:1.38}
.ans .txt .wd{white-space:nowrap}
.ans .txt .c{transition:opacity .2s ease-out}
.ans .txt p.pre .c{opacity:0}
.ans .txt p.leave{opacity:0;transition:opacity .26s ease-in}

/* One line under the products: they are one system */
.tie{margin:0 0 clamp(32px,6vh,80px) var(--ind);text-align:center}
/* a bracket under the three columns gathers them into the sentence */
.tie .brace{display:block;height:18px;margin:0 32px;border:1px solid var(--l1);border-top:0;position:relative}
.tie .brace::after{content:"";position:absolute;left:50%;top:100%;height:18px;border-left:1px solid var(--l1)}
.tie p{margin:30px auto 0;font-size:clamp(19px,1.5vw,23px);line-height:1.3;color:var(--ink);white-space:nowrap}
@media (max-width:1180px){.tie p{white-space:normal;text-wrap:balance;max-width:30em}}

/* Small laptops and landscape tablets: the products become rows, so their names never wrap */
@media (max-width:1100px){
  .ans{grid-template-columns:1fr}
  .ans a{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:32px;align-items:center;
    border-right:0;border-bottom:1px solid var(--rule);padding:20px 8px}
  .ans .txt{margin-top:0}
  .ans img{width:48px;height:48px}
  .ans .nm{font-size:22px}
  .ans .txt p{font-size:20px}
  .tie .brace{display:none}
  .tie p{margin-top:28px}
}

/* Narrow tablets and phones: one question at a time, "Suppose" above it */
@media (max-width:900px){
  :root{--qs:34px}
  .stage{grid-template-columns:1fr;row-gap:4px;margin-top:clamp(20px,5vh,56px)}
  .kk{justify-self:start}
  .k{font-size:.8em}
  .pp{right:auto;left:100%;margin:-15px 0 0 14px}
  .win{-webkit-mask-image:none;mask-image:none}
  .reel li{white-space:normal;text-wrap:balance;line-height:1.2;padding:0 0 .1em}
  .reel li:not(.d0){opacity:0}
  .reel li.d0{transition:color 1.1s var(--ease),opacity .6s .35s var(--ease)}
}

/* Phones */
@media (max-width:700px){
  :root{--qs:27px;--ind:0px}
  main{min-height:0;display:block}
  .top{padding:20px 0}
  .stage{margin-top:24px}
  .ans{margin-top:24px}
  .ans a{grid-template-columns:1fr;padding:14px 0 16px}
  .ans .hd{gap:12px}
  .ans img{width:40px;height:40px}
  .ans .nm{font-size:19px}
  .ans .txt{margin-top:8px}.ans .txt p{font-size:17px}
  .tie{margin:6px 0 36px}.tie p{margin-top:14px;font-size:19px}
  .top nav{gap:10px}.top nav .t{font-size:16px;margin-left:4px}
}
@media (max-width:420px){.insc{font-size:13px;letter-spacing:.24em}.insc span{display:none}}
@media (prefers-reduced-motion:reduce){.reel,.reel li,.ans .txt p,.ans .txt .c,.pp{transition:none!important}}

/* Not yet released (Tributary, Highwater): no link; "Coming soon" under the mark on hover or keyboard focus */
.top nav .soon{position:relative;display:block;line-height:0;cursor:default;border-radius:8px;outline-offset:3px}
.top nav .soon img{opacity:.85}
.soon[data-tip]::after{content:attr(data-tip);position:absolute;z-index:5;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  white-space:nowrap;font:400 14px/1.3 "Newsreader",Georgia,serif;letter-spacing:0;color:#fff;background:#1E1F21;padding:5px 9px;
  border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s}
.soon[data-tip]:hover::after,.soon[data-tip]:focus-visible::after{opacity:1}
.ans a.soon{position:relative;cursor:default}
.ans a.soon:hover{background:none}
.ans a.soon[data-tip]::after{left:32px;top:auto;bottom:6px;transform:none}