/*
   * Paper and ember.
   *
   * The ground is warm paper rather than #FFFFFF and the cards are pure white,
   * which is the wrong way round until you remember what this site is mostly
   * showing: white email previews. On a white page they glow and their edges
   * dissolve. On paper they sit down and read as documents.
   *
   * One accent, an ember, and it is spent only on things you can act on: a
   * link, a primary button, a section's "see all". Nothing decorative wears it,
   * so the eye learns in one screen that ember means clickable. Per product
   * colour arrives on the character rather than as another token.
   *
   * The greens are the one exception and they are semantic, not decorative:
   * "Live" and the shipped dot mean go, and an ember "Live" chip beside an
   * ember button would read as another thing to press.
   */
  :root{--bg:#FAF9F7;--soft:#F3F2EF;--panel:#FFFFFF;--panel-2:#EFEDE9;
    --line:#E0DED8;--line-soft:#EAE8E3;--edge:#C6C3BB;
    --ink:#191817;--ink-dim:#4A4741;--ink-faint:#5E5A53;
    --link:#A8380F;--accent:#B4400F;
    /* The ember ramp, for the one gradient the site uses. These were called
       --iris, --azure and --mint when the palette was violet to teal, which
       made every use of them a lie about what colour was coming out. */
    --g1:#8A2E0B;--g2:#B4400F;--g3:#C2691E;
    /* Green is semantic here, not decorative: it means live, shipped, yes. It
       is deliberately not on the ramp so a heading can never come out green. */
    --go:#4E7A46;--go-ink:#3D6236;--rose-ink:#A8380F;
    --radius:16px;--shadow:0 10px 30px rgba(25,24,23,.07)}
  *{box-sizing:border-box}
  /* The page commits to light, so form controls must be told as well, or a
     reader whose OS is dark gets a dark select in the middle of a white row. */
  html{scroll-behavior:smooth;color-scheme:light}
  body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
    font:16px/1.68 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
  .field{position:fixed;inset:0;pointer-events:none;z-index:0}
  .field::before{content:'';position:absolute;inset:0;
    background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
    background-size:64px 64px;opacity:.5;
    mask-image:radial-gradient(760px 340px at 50% 0%,#000 4%,transparent 66%);
    -webkit-mask-image:radial-gradient(760px 340px at 50% 0%,#000 4%,transparent 66%)}
  .field::after{content:'';position:absolute;top:-300px;left:50%;width:1100px;height:620px;transform:translateX(-50%);
    background:radial-gradient(closest-side,rgba(180,64,15,.06),rgba(194,90,30,.03) 46%,transparent 72%)}
  .wrap{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 24px}
  .wrap.wide{max-width:1240px}
  a{color:var(--link)}

  header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);
    backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
    border-bottom:1px solid var(--line-soft)}
  .bar{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
  .brand{display:inline-flex;align-items:center;gap:10px;font-weight:680;font-size:17px;letter-spacing:-.35px;color:var(--ink);text-decoration:none}
  .brand-mark{display:block;width:34px;height:34px}
  .brand-mark svg{display:block;width:34px;height:34px;image-rendering:pixelated}
  .bar nav{display:flex;align-items:center;gap:8px}
  .bar nav a{color:var(--ink-dim);text-decoration:none;font-size:14.5px;padding:8px 12px;border-radius:9px}
  .bar nav a:hover{color:var(--ink);background:var(--panel-2)}
  .bar nav a.btn{color:#fff}
  .bar nav a.btn:hover{color:#fff;background-color:var(--accent)}
  @media(max-width:640px){.bar nav a.nav-hide{display:none}}

  .crumbs{font-size:13.5px;color:var(--ink-faint);padding-top:24px}
  .crumbs a{color:var(--ink-dim);text-decoration:none}
  .crumbs a:hover{color:var(--ink)}
  main{padding:2px 0 92px}
  h1{margin:16px 0 14px;font-size:clamp(30px,4.2vw,42px);line-height:1.1;letter-spacing:-1.3px;font-weight:720}
  h2{margin:42px 0 14px;font-size:22px;letter-spacing:-.55px;font-weight:680;line-height:1.28}
  h3{margin:0 0 8px;font-size:17px;font-weight:660}
  p{margin:0 0 16px;color:var(--ink-dim)}
  .lede{font-size:18px;color:var(--ink-dim);margin-bottom:24px}
  .intro{max-width:760px}
  .prose{max-width:760px}
  .answer{border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 32px;
    background-color:var(--panel-2);position:relative;overflow:hidden}
  .answer::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(180deg,var(--g1),var(--g2),var(--g3))}
  .answer p{margin:0;color:var(--ink);font-size:16.5px}
  table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
  th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
  th{color:var(--ink);font-weight:640;width:34%}
  td{color:var(--ink-dim)}
  ul{margin:0 0 16px;padding-left:22px;color:var(--ink-dim)}
  li{margin-bottom:10px}
  code{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:13.5px;color:var(--ink-dim)}
  .subjects{list-style:none;padding:0;margin:0 0 24px}
  .subjects li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:9px;color:var(--ink);font-size:15px}
  .preview{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#f4f5f7;margin:0 0 14px}
  .preview iframe{width:100%;height:460px;border:0;display:block;background:#f4f5f7}
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;
    font-size:15px;font-weight:640;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit}
  .btn-primary{background-color:var(--accent);background-image:linear-gradient(96deg,var(--g1),var(--g2));color:#fff}
  .btn-primary:hover{filter:brightness(1.08)}
  .btn-quiet{border-color:var(--line);color:var(--ink);background-color:var(--panel)}
  .btn-quiet:hover{border-color:var(--edge);background-color:var(--panel-2)}
  .btn-sm{padding:8px 14px;font-size:14px}

  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 30px}
  @media(max-width:700px){.grid{grid-template-columns:1fr}}
  .grid>*{min-width:0}
  .card{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
    background-color:var(--panel);text-decoration:none;color:inherit}
  .card:hover{border-color:var(--edge);box-shadow:var(--shadow)}
  .card h3{color:var(--ink)}
  .card p{margin:0;font-size:14.6px;line-height:1.6}

  /* ---- shop ---- */
  .shop{display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;align-items:start;margin-top:6px}
  .side{position:sticky;top:90px}
  .side h2{margin:0 0 10px;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);font-weight:750}
  .side-nav{display:flex;flex-direction:column;gap:2px;margin:0 0 24px}
  .side-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;
    border-radius:10px;text-decoration:none;color:var(--ink-dim);font-size:14.5px;border:1px solid transparent}
  .side-nav a:hover{background-color:var(--panel-2);color:var(--ink)}
  .side-nav a[aria-current]{background-color:var(--panel-2);border-color:var(--line);color:var(--ink);font-weight:640}
  .side-nav em{font-style:normal;font-size:12.5px;color:var(--ink-faint)}
  .side-card{border:1px solid var(--line);border-radius:14px;padding:16px 17px;background-color:var(--panel-2)}

  /* On a phone the rail becomes a scrolling chip row above the grid, and the
     extension card drops below it. Reaching the templates should not mean
     scrolling past a sidebar that only makes sense beside them. */
  @media(max-width:900px){
    .shop{display:flex;flex-direction:column;gap:0}
    .side{display:contents}
    .side h2{order:1}
    /* width and min-width are both needed: as a flex item the chip row would
       otherwise take its min-content size, which is every chip laid end to end,
       and push the page sideways instead of scrolling inside itself. */
    .side-nav{order:2;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 0 18px;
       width:100%;min-width:0;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .side-nav::-webkit-scrollbar{display:none}
    .side-nav a{flex:0 0 auto;border-color:var(--line);border-radius:100px;padding:8px 15px;white-space:nowrap}
    .shop-main{order:3}
    .side-card{order:4;margin-top:26px}
  }
  .side-card h3{font-size:14.5px;margin:0 0 6px}
  .side-card p{margin:0 0 12px;font-size:13.4px;line-height:1.55}

  .tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
  .search{position:relative;flex:1 1 240px;min-width:0}
  .search input{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line);border-radius:11px;
    font:inherit;font-size:15px;color:var(--ink);background-color:var(--panel);appearance:none}
  .search input::placeholder{color:var(--ink-faint)}
  .search input:focus{outline:2px solid var(--accent);outline-offset:1px}
  .search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none}
  .tools select{padding:11px 12px;border:1px solid var(--line);border-radius:11px;font:inherit;
    font-size:14.5px;color:var(--ink);background-color:var(--panel)}
  .count{font-size:13.6px;color:var(--ink-faint);white-space:nowrap;margin:0}

  .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:18px}
  .tiles>*{min-width:0}
  .tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;
    background-color:var(--panel);text-decoration:none;color:inherit;
    transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
  .tile:hover{border-color:var(--edge);transform:translateY(-2px);box-shadow:var(--shadow)}
  .tile[hidden]{display:none}
  .tile-shot{display:block;background:#f4f5f7;border-bottom:1px solid var(--line-soft)}
  .tile-shot img{width:100%;height:auto;display:block}
  .tile-b{padding:14px 16px 16px}
  .tile-cat{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:750;
    color:var(--ink-faint);margin:0 0 6px}
  .tile h3{margin:0 0 5px;font-size:15.5px;letter-spacing:-.2px;color:var(--ink)}
  .tile p{margin:0;font-size:13.8px;line-height:1.55;color:var(--ink-dim)}
  .empty{border:1px dashed var(--edge);border-radius:14px;padding:38px 24px;text-align:center;color:var(--ink-faint)}

  /* ---- shared trim, used by the hand written pages too ---- */
  .pill{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 10px;border:1px solid var(--line);
    border-radius:100px;background-color:var(--panel-2);color:var(--ink-dim);font-size:13px;font-weight:500;margin-bottom:24px}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--go);box-shadow:0 0 0 4px rgba(78,122,70,.15)}
  .grad{background:linear-gradient(96deg,var(--g1),var(--g2) 48%,var(--g3));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .rule{display:flex;align-items:center;gap:14px;margin:0 0 20px;font-size:11.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ink-faint);font-weight:750}
  .rule::after{content:'';flex:1 1 auto;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
  .rule.center{justify-content:center}
  .rule.center::before{content:'';flex:1 1 auto;height:1px;background:linear-gradient(270deg,var(--line),transparent)}
  .section-lede{margin:0 0 32px;max-width:68ch;color:var(--ink-dim);font-size:17px}
  .note{border:1px solid var(--line);border-radius:var(--radius);background-color:var(--panel-2);padding:22px 26px;margin:28px 0}
  .note h3{margin:0 0 9px;font-size:16.5px;font-weight:660}
  .note p{margin:0;color:var(--ink-dim);font-size:15px;max-width:70ch}
  .note p+p{margin-top:12px}
  .chip{padding:4px 11px;border-radius:100px;border:1px solid #C6D6C0;background-color:#EDF3EA;
    color:var(--go-ink);font-size:11.5px;font-weight:720;letter-spacing:.3px;white-space:nowrap}

  details{border-bottom:1px solid var(--line);padding:17px 0}
  details summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:'+';color:var(--ink-faint);font-size:20px;line-height:1}
  details[open] summary::after{content:'-'}
  details p{margin:12px 0 2px;font-size:15.2px}
  .cta{border:1px solid var(--line);border-radius:var(--radius);background-color:var(--panel-2);padding:22px 24px;margin:40px 0 32px;max-width:760px}
  .cta p{margin:0 0 16px}
  footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:26px 0 44px;font-size:13.5px;background-color:var(--soft)}
  .foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .foot span{color:var(--ink-faint)}
  .foot nav{display:flex;gap:20px;flex-wrap:wrap}
  .foot a{color:var(--ink-dim);text-decoration:none}
  .foot a:hover{color:var(--ink)}

  /* ---- the cast: rig figures. The one person, restyled per tool, appears on
     more than one page, so the base rules are global and only the placement of
     each instance is page-local. A clip is a strip of frames behind a one-frame
     window; steps() scrolls it, overflow clips it, and a reader who asked for no
     motion gets frame one. ---- */
  .cast{display:block;image-rendering:pixelated;pointer-events:none}
  .cast svg{display:block;width:100%;height:100%}
  /* The footer wave is in the global footer, so its placement is global too. A
     page-local size here would leave every non-home page with a block .cast at
     full width, which is a figure the height of the page. */
  .cast-foot{width:22px;height:30px;display:inline-block;vertical-align:-11px;margin-right:8px}
  .clip{overflow:hidden;display:block}
  .clip>.strip{display:block;height:100%}
  .clip>.strip svg{display:block;width:100%;height:100%;image-rendering:pixelated}
  @media(prefers-reduced-motion:no-preference){
    .cast:not(.clip) svg{animation:idle 3.4s ease-in-out infinite;transform-origin:50% 100%}
    .clip>.strip{animation-name:clipplay;animation-iteration-count:infinite}
  }
  @keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5%)}}
  @keyframes clipplay{to{transform:translate3d(-100%,0,0)}}
  @media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}