:root{
    --bg:#0b0a14; --ink:#efe9df; --gold:#e7c874; --violet:#b4a0ff;
    --dim:rgba(239,233,223,.62); --faint:rgba(239,233,223,.38);
    --line:rgba(255,255,255,.12);
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--serif);background:var(--bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;line-height:1.75;
    padding:0 24px env(safe-area-inset-bottom,0px)}
  .col{max-width:660px;margin:0 auto}
  a{color:inherit}

  /* ---------- masthead ---------- */
  header{padding:clamp(5rem,16vh,10rem) 0 clamp(3rem,8vh,5rem)}
  .mark{width:38px;height:38px;margin-bottom:1.4rem;opacity:.8}
  .parent{display:inline-block;font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
    color:var(--faint);text-decoration:none;margin-bottom:1.5rem;
    border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease}
  .parent:hover{color:var(--gold);border-bottom-color:rgba(231,200,116,.4)}
  .parent::before{content:"\2190";margin-right:.7em;opacity:.6}
  h1{font-weight:400;font-size:clamp(2.1rem,6vw,3.1rem);letter-spacing:.14em;
     text-transform:uppercase;line-height:1.2}
  .lede{margin-top:1.6rem;font-size:clamp(1.1rem,2.6vw,1.4rem);font-style:italic;
     color:var(--dim);max-width:30ch}
  .standfirst{margin-top:1.9rem;font-size:1.06rem;color:var(--dim);max-width:54ch}

  /* ---------- sections ---------- */
  section{padding:clamp(3rem,8vh,5rem) 0;border-top:1px solid var(--line)}
  h2{font-weight:400;font-size:.74rem;letter-spacing:.42em;text-transform:uppercase;
     color:var(--gold);opacity:.85;margin-bottom:2rem}
  h3{font-weight:400;font-size:1.18rem;letter-spacing:.02em;margin:2.4rem 0 .6rem}
  p{margin-bottom:1.2rem;max-width:62ch}
  p.wide{max-width:none}
  strong{font-weight:400;color:var(--gold);opacity:.92}
  em{font-style:italic;color:var(--dim)}
  .num{color:var(--gold);opacity:.5;font-variant-numeric:tabular-nums;margin-right:.5rem}

  /* ---------- the claims ---------- */
  .claim{margin:2.6rem 0;padding-left:1.6rem;border-left:1px solid rgba(231,200,116,.28)}
  .claim h3{margin-top:0}

  /* ---------- interpretation table ---------- */
  .tbl{width:100%;border-collapse:collapse;margin:1.4rem 0 .6rem;font-size:.94rem}
  .tbl th{text-align:left;font-weight:400;font-size:.68rem;letter-spacing:.24em;
    text-transform:uppercase;color:var(--faint);padding:0 1rem .8rem 0;
    border-bottom:1px solid var(--line)}
  .tbl td{padding:.95rem 1rem .95rem 0;border-bottom:1px solid rgba(255,255,255,.06);
    vertical-align:top;color:var(--dim)}
  .tbl td:first-child{color:var(--ink);white-space:nowrap}
  .tbl tr[data-ours] td{color:var(--ink)}
  .tbl tr[data-ours] td:first-child::after{content:"←  ours";color:var(--gold);
    font-size:.68rem;letter-spacing:.2em;margin-left:.9rem;opacity:.8;white-space:nowrap}
  .scroll{overflow-x:auto;margin:0 -24px;padding:0 24px}
  /* Three columns of prose do not fit a phone. Below 640px the rows become
     stacked cards with their column names carried down as labels. */
  @media (max-width:640px){
    .scroll{overflow-x:visible;margin:0;padding:0}
    .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
    .tbl thead{display:none}
    .tbl tr{padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,.09)}
    .tbl tr:last-child{border-bottom:0}
    .tbl td{border:0;padding:0 0 1rem;white-space:normal}
    .tbl td:last-child{padding-bottom:0}
    .tbl td:first-child,
    .tbl tr[data-ours] td:first-child{font-size:1.12rem;color:var(--gold);opacity:.9;
      margin-bottom:.9rem}
    .tbl td:nth-child(3){font-size:.92rem}
    .tbl td[data-l]::before{content:attr(data-l);display:block;font-size:.58rem;
      letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
      margin-bottom:.4rem;opacity:.8}
    .tbl tr[data-ours] td:first-child::after{display:block;margin:.4rem 0 0}
  }
  .tbl td:nth-child(3){color:var(--faint);font-size:.88rem}
  .note{font-size:.9rem;color:var(--faint);border-left:1px solid rgba(231,200,116,.22);
    padding-left:1.2rem;margin:2rem 0}

  /* ---------- figure ---------- */
  figure{margin:2.6rem 0}
  figure svg{width:100%;height:auto;display:block;max-width:520px;margin:0 auto}
  figcaption{margin-top:1.2rem;font-size:.86rem;color:var(--faint);text-align:center;
    font-style:italic;max-width:46ch;margin-left:auto;margin-right:auto}

  /* ---------- the grover readout ---------- */
  .readout{margin:2rem 0;font-family:var(--mono);font-size:.82rem;
    border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .readout div{display:flex;justify-content:space-between;gap:1rem;
    padding:.72rem 1rem;border-bottom:1px solid rgba(255,255,255,.06)}
  .readout div:last-child{border-bottom:0}
  .readout span:first-child{color:var(--dim)}
  .readout b{font-weight:400;color:var(--gold);font-variant-numeric:tabular-nums}
  .readout div:first-child b{color:#fff}
  .bar{height:1px;background:var(--gold);opacity:.32;align-self:center;flex:0 0 auto}

  /* ---------- project card ---------- */
  .project{display:block;text-decoration:none;border:1px solid var(--line);
    border-radius:10px;overflow:hidden;transition:border-color .4s ease,transform .4s ease;
    background:rgba(255,255,255,.02)}
  .project:hover{border-color:rgba(231,200,116,.45);transform:translateY(-2px)}
  .project:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .project img{width:100%;height:auto;display:block;aspect-ratio:1200/630;object-fit:cover}
  .project .meta{padding:1.5rem 1.6rem 1.7rem}
  .project .kicker{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;
    color:var(--gold);opacity:.75}
  .project h3{margin:.7rem 0 .5rem;font-size:1.45rem;letter-spacing:.04em}
  .project p{color:var(--dim);font-size:.98rem;margin:0}
  .project .enter{display:inline-block;margin-top:1.2rem;font-size:.72rem;
    letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.85}

  .soon{list-style:none;margin-top:2rem}
  .soon li{padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.06);
    color:var(--faint);font-size:.95rem;display:flex;gap:1.2rem;align-items:baseline}
  .soon li:last-child{border-bottom:0}
  .soon span{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
    color:var(--gold);opacity:.5;flex:0 0 3.6rem}
  .soon b{font-weight:400;color:var(--dim);flex:0 0 7rem}
  .soon em{font-style:italic}
  @media (max-width:520px){
    .soon li{flex-wrap:wrap}
    .soon b{flex:0 0 auto;margin-right:.6rem}
    .soon em{flex:1 1 100%;margin-top:.25rem}
  }

  /* ---------- footer ---------- */
  footer{padding:clamp(3rem,8vh,5rem) 0 5rem;border-top:1px solid var(--line);
    font-size:.8rem;color:var(--faint)}
  footer p{max-width:58ch;margin-bottom:.9rem}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{transition-duration:.001ms !important}
  }

/* ---------- notes pages ---------- */
.spoiler{border:1px solid rgba(231,200,116,.34);border-radius:8px;
  background:rgba(231,200,116,.05);padding:1.4rem 1.5rem;margin:2.6rem 0}
.spoiler p{margin:0;color:var(--dim);max-width:none}
.spoiler p + p{margin-top:.7rem}
.spoiler b{font-weight:400;color:var(--gold);display:block;font-size:.68rem;
  letter-spacing:.28em;text-transform:uppercase;margin-bottom:.8rem}
.spoiler a{color:var(--gold)}
blockquote{margin:1.8rem 0;padding-left:1.4rem;border-left:1px solid rgba(231,200,116,.3);
  font-style:italic;color:var(--dim)}
blockquote cite{display:block;margin-top:.7rem;font-style:normal;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
pre{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;
  padding:1.1rem 1.2rem;overflow-x:auto;font-family:var(--mono);font-size:.8rem;
  line-height:1.7;color:var(--dim);margin:1.6rem 0}
code{font-family:var(--mono);font-size:.86em;color:var(--gold);opacity:.9}
pre code{color:inherit;opacity:1}
.finding{margin:2.4rem 0;padding-left:1.6rem;border-left:1px solid rgba(180,160,255,.3)}
.finding h3{margin-top:0}
.finding .num{color:var(--violet);opacity:.6}
.notes-link{margin-top:1.4rem;font-size:.9rem;color:var(--faint);max-width:none}
.notes-link a{color:var(--gold);opacity:.85;text-decoration:none;
  border-bottom:1px solid rgba(231,200,116,.3)}
.notes-link a:hover{opacity:1}
.rights{color:var(--faint);opacity:.75}