/* ------------------------------------------------------------------------
   Tachylog landing page — "One Wednesday" (2026-09-23)
   Fonts: Newsreader, Public Sans, Fragment Mono — SIL Open Font License 1.1,
   self-hosted in assets/fonts/. No external font requests (no Google Fonts).
   ------------------------------------------------------------------------ */

@font-face{
  font-family:"Newsreader";
  src:url("assets/fonts/Newsreader-normal-400to600.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("assets/fonts/Newsreader-italic-400to600.woff2") format("woff2");
  font-weight:400 600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("assets/fonts/PublicSans-normal-400.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Fragment Mono";
  src:url("assets/fonts/FragmentMono-normal-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

  /* ---------- tokens: cream is the ground, forest is ink, lime means "a person marked this" ---------- */
  :root{
    --cream:#F4F0E3; --card:#FBF9F1; --cream-2:#EAE4D0; --cream-3:#F7F4E8;
    --ink:#14261C; --ink-2:#3B5044; --ink-3:#586B60;
    --hair:#D6CEB4; --hair-2:#BDB397;
    --lime:#D9EE8A; --lime-2:#BFDC5A; --lime-ink:#2A4212;
    --plan:#E4EBD8; --plan-line:#C3D1B4; --plan-ink:#213A2A;
    --forest:#11201A; --forest-2:#1A2F25; --forest-line:#2E4A3C; --forest-text:#EEF2E4; --forest-quiet:#AEC2B4;
    --serif:"Newsreader",Georgia,"Times New Roman",serif;
    --sans:"Public Sans","Segoe UI",Helvetica,Arial,sans-serif;
    --mono:"Fragment Mono",Consolas,"Courier New",monospace;
    --max:1120px;
    color-scheme:light;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important}}
  a{color:inherit}
  h1,h2,h3,p{margin:0}
  h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;text-wrap:balance}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
  .skip{position:absolute;left:16px;top:-80px;z-index:20;padding:10px 14px;background:var(--ink);color:var(--cream);border-radius:4px;font-weight:600}
  .skip:focus{top:12px}
  a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .hl{background:linear-gradient(transparent 50%,var(--lime) 50%,var(--lime) 92%,transparent 92%);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

  /* buttons: solid forest stamps; lime never sits on a button */
  .stamp{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:var(--forest);color:var(--cream);font-weight:600;font-size:15px;text-decoration:none;border-radius:4px;border:1px solid var(--forest);transition:background .15s ease,transform .15s ease}
  .stamp:hover{background:var(--forest-2);transform:translateY(-1px)}
  .stamp.inv{background:var(--cream);color:var(--forest);border-color:var(--cream)}
  .stamp.inv:hover{background:#fff}
  .tlink{font-weight:500;text-decoration:none;border-bottom:1px solid var(--hair-2);padding-bottom:2px;color:var(--ink)}
  .tlink:hover{border-color:var(--ink)}
  .cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
  .fine{font-size:13px;color:var(--ink-3);line-height:1.5}

  .pv{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--ink);border-radius:999px;font:600 10.5px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--card);vertical-align:middle;white-space:nowrap}
  .epi .pv{border-color:var(--lime);color:var(--lime);background:transparent}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px}

  /* ---------- masthead ---------- */
  .mast{padding-top:24px}
  .dateline{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  .dateline .brand{font-family:var(--serif);font-size:26px;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
  .dateline .brand svg{width:22px;height:22px}
  .dateline nav{display:flex;gap:22px}
  .dateline nav a{text-decoration:none}
  .dateline nav a:hover{color:var(--ink)}
  .mast h1{font-size:clamp(44px,7.2vw,96px);line-height:.97;margin-top:44px;max-width:12.5em;font-variation-settings:"opsz" 72}
  .mast .sub{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:40em;margin-top:28px}
  .mast .fine{margin-top:14px}
  @media (max-width:760px){.dateline{flex-wrap:wrap}.dateline nav{flex-basis:100%;flex-wrap:wrap;gap:8px 16px;order:3}.dateline nav a{white-space:nowrap}.mast h1{margin-top:30px}}

  /* ---------- the day: a rail with clock stamps ---------- */
  .day{position:relative;margin-top:64px;padding-bottom:24px}
  .day::before{content:"";position:absolute;left:47px;top:0;bottom:0;border-left:1px solid var(--hair-2)}
  .rail-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 28px;align-items:start}
  .bead{justify-self:center;position:relative;z-index:1;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;background:var(--cream);border:1px solid var(--hair-2);border-radius:4px;padding:3px 8px;color:var(--ink-2);white-space:nowrap}
  .bead.strong{background:var(--ink);border-color:var(--ink);color:var(--cream)}
  .rail-note{font-size:14px;color:var(--ink-2);padding-top:3px;max-width:44em}
  .rail-note b{color:var(--ink);font-weight:600}
  .moment{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 28px;padding:52px 0 6px;align-items:start}
  .moment > .bead{margin-top:10px}
  .m-head h2{font-size:clamp(30px,3.7vw,46px);line-height:1.05;font-variation-settings:"opsz" 48;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .m-head .lede{margin-top:14px;color:var(--ink-2);font-size:17px;line-height:1.6;max-width:40em}
  .ex-row{display:grid;grid-template-columns:minmax(0,1fr) 224px;gap:28px;margin-top:26px;align-items:start}
  .annot{list-style:none;margin:0;padding:6px 0 0;display:grid;gap:14px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
  .annot li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
  .annot li::before{content:"";border-top:1px solid var(--ink-2);margin-top:9px}
  .caption{font-size:12.5px;color:var(--ink-3);margin-top:12px}
  @media (max-width:960px){
    .day::before{display:none}
    .rail-row,.moment{grid-template-columns:1fr;gap:10px}
    .bead{justify-self:start}
    .moment{padding-top:40px}
    .ex-row{grid-template-columns:1fr;gap:16px}
  }

  /* ---------- interface exhibits: light software on paper ---------- */
  .app{background:var(--card);border:1px solid var(--hair);border-radius:10px;box-shadow:0 1px 0 rgba(20,38,28,.04),0 20px 44px -34px rgba(20,38,28,.45);overflow:hidden}
  .app-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--hair);font-size:13px;color:var(--ink-2)}
  @media (max-width:560px){.app-bar{flex-direction:column;align-items:flex-start;gap:6px}.tabs{flex-wrap:wrap}}
  .tabs{display:flex;gap:2px}
  .tabs span{padding:6px 10px;border-radius:6px}
  .tabs span[aria-current]{background:var(--cream-2);color:var(--ink);font-weight:600}
  .app-bar .who{font-family:var(--mono);font-size:12px}
  .timer{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:16px;border-bottom:1px solid var(--hair);background:var(--cream-3)}
  .live{width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px rgba(20,38,28,.12);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(20,38,28,.12)}50%{box-shadow:0 0 0 8px rgba(20,38,28,.05)}}
  .timer .what{font-size:15px;line-height:1.35;min-width:0}
  .timer .what small{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
  .timer .what small .chip{margin:0}
  .clock{font-family:var(--mono);font-size:24px;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.01em}
  .stopbtn{font:600 13px/1 var(--sans);padding:10px 14px;border-radius:4px;border:1px solid var(--ink);background:var(--card);color:var(--ink)}
  .chip{display:inline-block;padding:1px 7px;border:1px solid var(--hair-2);border-radius:5px;font-size:11px;color:var(--ink-2);margin-left:8px;letter-spacing:.03em;white-space:nowrap;vertical-align:1px}
  .chip.soft{border-style:dashed}
  .row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;padding:11px 16px;border-bottom:1px dashed var(--hair);font-size:14px;align-items:baseline}
  .row + .app-foot,.row + .hist{border-top:0}
  .row .t{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
  .row .d{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:13px}
  .app-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--hair);font-size:13px;color:var(--ink-2);flex-wrap:wrap}
  .act{padding:7px 11px;border:1px solid var(--hair-2);border-radius:4px;font-weight:600;font-size:12px;color:var(--ink);background:var(--card)}
  .act.solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  .acts{display:flex;gap:8px;flex-wrap:wrap}
  @media (max-width:560px){.timer{grid-template-columns:auto minmax(0,1fr)}.timer .clock,.timer .stopbtn{grid-column:2;justify-self:start}}

  /* calendar column with a pinned note */
  .cal{display:grid;grid-template-columns:56px minmax(0,1fr) 220px}
  .cal .hours{display:grid;grid-template-rows:repeat(5,60px);font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:0 8px 0 14px}
  .cal .hours span{transform:translateY(-7px)}
  .cal .col{position:relative;display:grid;grid-template-rows:repeat(5,60px);border-left:1px solid var(--hair);border-right:1px solid var(--hair)}
  .cal .slot{border-top:1px dashed var(--hair)}
  .cal .block{position:absolute;left:10px;right:10px;top:30px;min-height:240px;background:var(--plan);border:1px solid var(--plan-line);border-radius:8px;padding:10px 12px;color:var(--plan-ink);font-size:12.5px;line-height:1.35}
  .cal .block b{display:block;font-weight:600;font-size:13px;padding-right:72px}
  .cal .block small{display:block;font-family:var(--mono);font-size:11px;margin-top:3px;opacity:.85}
  .cal .block .pv{position:absolute;right:8px;top:8px}
  .note{position:absolute;left:22px;right:16px;top:160px;min-height:72px;background:var(--lime);border:1px solid var(--lime-2);border-radius:6px;padding:9px 11px 26px 12px;color:var(--lime-ink);font-size:12px;line-height:1.3;z-index:2;transform:rotate(-1.6deg);box-shadow:0 10px 20px -12px rgba(20,38,28,.6)}
  .note::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.35)}
  .note b{display:block;font-weight:600;font-size:12.5px}
  .note b::before{content:"\2197\00a0";}
  .note small{display:block;font-family:var(--mono);font-size:10.5px;margin-top:3px}
  .note .pv{position:absolute;right:7px;bottom:7px;background:transparent;border-color:var(--lime-ink);color:var(--lime-ink)}
  .cal .ledger{padding:14px 16px;font-size:13px;color:var(--ink-2);display:grid;gap:10px;align-content:start}
  .cal .ledger .k{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--hair);padding-bottom:8px}
  .cal .ledger .k b{font-family:var(--mono);font-weight:400;color:var(--ink)}
  .cal .ledger .act{justify-self:start;margin-top:2px}
  .cal .ledger .who{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:4px}
  @media (max-width:960px){.cal{grid-template-columns:44px minmax(0,1fr)}.cal .hours{padding:0 4px 0 6px;font-size:10px}.cal .ledger{grid-column:1/-1;border-top:1px solid var(--hair)}}

  /* attributed edit */
  .hist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px 16px;background:var(--cream-3);border-top:1px solid var(--hair);font-size:13px;color:var(--ink-2);align-items:start}
  .hist .who{font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap}
  @media (max-width:560px){.hist{grid-template-columns:1fr;gap:6px}.hist .who{white-space:normal}}

  /* split: today + batch panel */
  .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .split > div{display:flex;flex-direction:column}
  .split .app-foot,.split .panel-f{margin-top:auto}
  .split > div + div{border-left:1px solid var(--hair)}
  .panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hair);font-size:13px;font-weight:600}
  .panel-h span{font-family:var(--mono);font-weight:400;color:var(--ink-3);font-size:12px}
  @media (max-width:560px){.panel-h{flex-direction:column;align-items:flex-start;gap:4px}}
  .brow{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:12px;padding:11px 16px;border-bottom:1px dashed var(--hair);font-size:13.5px;align-items:baseline}
  .brow .t{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
  .brow .t.empty{border:1px dashed var(--hair-2);border-radius:4px;padding:2px 6px;font-size:10.5px;justify-self:start}
  .brow .d{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
  .brow .chip{margin-left:0;margin-right:6px;margin-top:5px;display:inline-block}
  .panel-f{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
  @media (max-width:960px){.split{grid-template-columns:1fr}.split > div + div{border-left:0;border-top:1px solid var(--hair)}}

  /* day report */
  .report{padding:18px 18px 8px}
  .report .big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .report .big strong{font-family:var(--serif);font-weight:400;font-size:54px;line-height:1;letter-spacing:-.02em;font-variation-settings:"opsz" 72}
  .report .big span{color:var(--ink-2);font-size:14px}
  .cats{margin-top:16px;display:grid;gap:0;border-top:1px solid var(--hair)}
  .cat{display:grid;grid-template-columns:170px minmax(0,1fr) 84px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--hair);font-size:14px}
  .cat .bar{height:10px;background:var(--cream-2);border-radius:3px;overflow:hidden}
  .cat .bar i{display:block;height:100%;background:var(--ink)}
  .cat .bar i.soft{background:#7E9B3C}
  .cat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink-2);font-size:13px}
  .cats .cat:last-child{border-bottom:0}
  @media (max-width:560px){.cat{grid-template-columns:1fr 84px}.cat .bar{grid-column:1/-1}}

  /* ---------- getting in ---------- */
  .access{padding:96px 0 88px;border-top:1px solid var(--hair-2);margin-top:40px}
  .access .grid{max-width:44em}
  .access h2{font-size:clamp(34px,4.2vw,54px);line-height:1.02;margin-top:14px;font-variation-settings:"opsz" 48}
  .access .lede{font-size:17px;line-height:1.6;color:var(--ink-2);margin-top:18px;max-width:34em}
  .access .fine{margin-top:16px}

  /* ---------- epilogue: the one dark band ---------- */
  .epi{background:var(--forest);color:var(--forest-text);padding:96px 0 0}
  .epi .eyebrow{color:var(--forest-quiet)}
  .epi h2{font-size:clamp(36px,4.6vw,64px);line-height:1;margin-top:16px;font-variation-settings:"opsz" 72}
  .epi h2 em{font-style:italic;font-weight:400;color:var(--lime)}
  .epi .lede{font-size:17px;line-height:1.6;color:var(--forest-quiet);max-width:40em;margin-top:22px}
  .dcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
  .dcard{background:var(--forest-2);border:1px solid var(--forest-line);border-radius:10px;overflow:hidden}
  .dcard .h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--forest-line);font-size:13px;color:var(--forest-quiet)}
  .dcard .h b{color:var(--forest-text);font-weight:600}
  .drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 16px;border-bottom:1px dashed var(--forest-line);font-size:14px;align-items:baseline}
  .dcard .drow + .f{border-top:0}
  .drow b{display:block;font-weight:600}
  .drow small{display:block;color:var(--forest-quiet);font-size:12.5px;margin-top:2px}
  .drow .v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--forest-quiet);font-size:13px;white-space:nowrap}
  .dcard .f{padding:12px 16px;border-top:1px solid var(--forest-line);font-size:12.5px;color:var(--forest-quiet)}
  .epi .caption{color:var(--forest-quiet)}
  .epi .close{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;padding:72px 0 64px;margin-top:64px;border-top:1px solid var(--forest-line)}
  .epi .close h2{font-size:clamp(32px,4vw,52px)}
  .epi .close .fine{color:var(--forest-quiet);margin-top:12px}
  .epi .tlink{color:var(--forest-text);border-color:var(--forest-line)}
  .epi .tlink:hover{border-color:var(--forest-text)}
  .epi a:focus-visible{outline-color:var(--lime)}
  footer{background:var(--forest);color:var(--forest-quiet);border-top:1px solid var(--forest-line);padding:24px 0 36px;font-size:13px}
  footer .wrap{display:flex;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;align-items:center}
  footer nav{display:flex;gap:20px}
  footer a{text-decoration:none}
  footer a:hover{color:var(--forest-text)}
  footer a:focus-visible{outline-color:var(--lime)}
  @media (max-width:760px){.dcards{grid-template-columns:1fr}.epi .close{grid-template-columns:1fr;gap:20px}}