:root{
    --paper:#EFE7D8;
    --paper-deep:#E4D8C1;
    --paper-edge:#D8C9AE;
    --ink:#262119;
    --ink-soft:#5E5548;
    --verdigris:#2E4A42;
    --verdigris-lift:#3B5F55;
    --gold:#B08A3E;

    --display:'Fraunces','Hoefler Text','Iowan Old Style',Georgia,serif;
    --text:'Newsreader','Iowan Old Style',Georgia,serif;

    --col:min(31rem, 100% - 2.5rem);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--text);
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    padding-bottom:5rem;
  }

  .wrap{width:var(--col);margin-inline:auto}

  h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0;letter-spacing:-.012em}
  h1{font-size:clamp(2.6rem,11vw,3.6rem)}
  h2{font-size:clamp(1.75rem,7vw,2.15rem)}
  h3{font-size:1.12rem;line-height:1.3}
  p{margin:0 0 1rem}
  .lede{font-size:1.1rem;color:var(--ink-soft);max-width:34ch}
  #s-done .lede{max-width:none}
  .fine{font-size:.9rem;color:var(--ink-soft);line-height:1.55}

  /* ---------- screens ---------- */
  .screen{display:none;padding-top:2.4rem}
  .screen.on{display:block}

  /* ---------- masthead ---------- */
  .mast{
    display:flex;align-items:baseline;gap:.6rem;
    padding:1.1rem 0 0;
  }
  .mast .mark{font-family:var(--display);font-size:1rem;letter-spacing:.005em}
  .mast .where{font-size:.85rem;color:var(--ink-soft);margin-left:auto}

  /* ---------- hero ---------- */
  .hero-art{margin:1.6rem 0 1.9rem;color:var(--ink)}
  .hero-art svg{width:100%;height:auto;max-height:230px;display:block}
  .hero-art path,.hero-art circle,.hero-art ellipse,.hero-art line{
    stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);
    animation:draw 1.9s cubic-bezier(.5,.1,.2,1) forwards;
  }
  @keyframes draw{to{stroke-dashoffset:0}}
  .hero-art .under *{animation:none;stroke-dashoffset:0}
  @media (prefers-reduced-motion:reduce){
    .hero-art path,.hero-art circle,.hero-art ellipse,.hero-art line{animation:none;stroke-dashoffset:0}
  }

  /* ---------- buttons ---------- */
  button{font:inherit;cursor:pointer}
  .go{
    display:inline-block;background:var(--verdigris);color:var(--paper);
    border:none;border-radius:2rem;padding:.85rem 1.9rem;
    font-family:var(--text);font-size:1.02rem;letter-spacing:.005em;
    transition:background .15s ease;
  }
  .go:hover{background:var(--verdigris-lift)}
  .go:disabled{background:var(--paper-edge);color:#8B8271;cursor:not-allowed}
  .quiet{
    background:none;border:none;color:var(--ink-soft);
    text-decoration:underline;text-underline-offset:3px;
    padding:.6rem 0;font-size:.95rem;
  }
  .quiet:hover{color:var(--ink)}
  :focus-visible{outline:2px solid var(--verdigris);outline-offset:3px;border-radius:4px}

  .foot{
    position:fixed;left:0;right:0;bottom:0;
    background:linear-gradient(to top,var(--paper) 62%,rgba(239,231,216,0));
    padding:1.5rem 0 1.15rem;
  }
  .foot .wrap{display:flex;align-items:center;gap:1rem}
  .foot .go{margin-left:auto}


  /* ---------- how it works ---------- */
  .how{list-style:none;margin:2rem 0 0;padding:0;position:relative}
  .how::before{content:"";position:absolute;left:26px;top:28px;bottom:28px;width:1px;background:var(--paper-edge)}
  .how li{display:flex;align-items:center;gap:1.1rem;padding:.9rem 0;position:relative}
  .how .ic{width:52px;height:52px;flex:0 0 auto;background:var(--paper);border:1px solid var(--paper-edge);border-radius:50%;display:grid;place-items:center;color:var(--ink)}
  .how .ic svg{width:34px;height:34px}
  .how .t{font-family:var(--display);font-size:1.35rem;line-height:1.2}
  .how .d{display:block;font-family:var(--text);font-size:.92rem;color:var(--ink-soft);margin-top:.15rem}

  /* ---------- step head ---------- */
  .step-count{font-size:.85rem;color:var(--ink-soft);margin-bottom:.5rem}
  .step-head{margin-bottom:.4rem}
  .step-note{font-size:.95rem;color:var(--ink-soft);margin:0 0 1.5rem;max-width:36ch}

  /* ---------- option grid ---------- */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}
  .opt{
    position:relative;background:none;border:1px solid var(--paper-edge);
    border-radius:.55rem;padding:.9rem .7rem .75rem;text-align:center;
    color:var(--ink);transition:border-color .15s ease,background .15s ease;
  }
  .opt:hover{border-color:var(--ink-soft)}
  .opt svg{width:76px;height:76px;display:block;margin:0 auto .45rem}
  .opt .nm{font-size:.95rem;line-height:1.25;display:block}
  .opt .sub{font-size:.78rem;color:var(--ink-soft);display:block;margin-top:.1rem}
  .opt[aria-pressed="true"]{border-color:var(--verdigris);background:rgba(46,74,66,.055)}
  .grid.full .opt[aria-pressed="false"]{opacity:.42}
  .rank{
    position:absolute;top:.45rem;right:.55rem;
    font-family:var(--display);font-size:1.15rem;color:var(--gold);
    opacity:0;transform:scale(.7);transition:all .18s ease;
  }
  .opt[aria-pressed="true"] .rank{opacity:1;transform:scale(1)}

  /* wide rows (metal, no-go) */
  .rows{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1rem}
  .row{
    display:flex;align-items:center;gap:.8rem;text-align:left;
    background:none;border:1px solid var(--paper-edge);border-radius:.55rem;
    padding:.75rem .9rem;color:var(--ink);width:100%;
    transition:border-color .15s ease,background .15s ease;
  }
  .row:hover{border-color:var(--ink-soft)}
  .row[aria-pressed="true"]{border-color:var(--verdigris);background:rgba(46,74,66,.055)}
  .swatch{width:26px;height:26px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(38,33,25,.18)}
  .row .tx{font-size:1rem}
  .row .tick{margin-left:auto;color:var(--verdigris);opacity:0;font-size:1.1rem}
  .row[aria-pressed="true"] .tick{opacity:1}

  /* ---------- size ---------- */
  .field{margin-bottom:1.15rem}
  .field label{display:block;font-size:.92rem;color:var(--ink-soft);margin-bottom:.35rem}
  select,input[type=text]{
    font:inherit;color:var(--ink);background:var(--paper);
    border:1px solid var(--paper-edge);border-radius:.45rem;
    padding:.65rem .7rem;width:100%;
  }
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  .aside{
    border-left:2px solid var(--paper-edge);padding:.15rem 0 .15rem .95rem;
    margin:1.4rem 0;font-size:.93rem;color:var(--ink-soft);line-height:1.55;
  }
  .aside p{margin:0 0 .5rem}
  .aside p:last-child{margin:0}

  textarea{
    font:inherit;color:var(--ink);background:var(--paper);width:100%;
    border:1px solid var(--paper-edge);border-radius:.45rem;padding:.7rem;
    min-height:6.5rem;resize:vertical;line-height:1.5;
  }
  .count{font-size:.83rem;color:var(--ink-soft);text-align:right;margin-top:.3rem}

  /* ---------- done ---------- */
  .linkbox{
    background:var(--paper-deep);border-radius:.55rem;padding:.85rem;
    font-size:.86rem;word-break:break-all;color:var(--ink-soft);
    line-height:1.4;margin:1.2rem 0 .9rem;
  }
  .actions{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.6rem}
  .actions .go{text-align:center;width:100%;border-radius:.55rem}
  .ghost{
    background:none;border:1px solid var(--verdigris);color:var(--verdigris);
    border-radius:.55rem;padding:.85rem;width:100%;font-size:1.02rem;text-align:center;
  }
  .ghost:hover{background:rgba(46,74,66,.06)}

  /* ---------- brief (his page) ---------- */
  .brief-top{padding-top:2.6rem;margin-bottom:2rem}
  .brief-top h1{margin-bottom:.7rem}
  .rule{height:1px;background:var(--paper-edge);border:0;margin:2rem 0}
  .block{margin-bottom:2rem}
  .block h3{margin-bottom:.85rem}
  .ranked{list-style:none;margin:0;padding:0}
  .ranked li{
    display:flex;align-items:center;gap:.9rem;
    padding:.7rem 0;border-bottom:1px solid rgba(216,201,174,.6);
  }
  .ranked li:last-child{border-bottom:0}
  .ranked .n{font-family:var(--display);font-size:1.05rem;color:var(--gold);width:2rem;flex:0 0 auto}
  .ranked svg{width:52px;height:52px;flex:0 0 auto;color:var(--ink)}
  .ranked .nm{font-size:1.05rem}
  .ranked .sub{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.4}
  .flat{margin:0;padding:0;list-style:none}
  .flat li{padding:.45rem 0;border-bottom:1px solid rgba(216,201,174,.6)}
  .flat li:last-child{border-bottom:0}
  .size-big{font-family:var(--display);font-size:2.4rem;line-height:1}
  .size-sys{font-size:.95rem;color:var(--ink-soft);margin-top:.3rem}
  .note-q{
    font-family:var(--display);font-size:1.25rem;line-height:1.45;
    padding-left:1rem;border-left:2px solid var(--gold);margin:0;
  }
  .closing{font-size:1rem;color:var(--ink-soft);max-width:36ch}
  .backlink{margin-top:2.5rem}

  @media (max-width:360px){
    .grid{gap:.5rem}
    .opt svg{width:64px;height:64px}
  }