@font-face { font-family:"Space Grotesk"; src:url("fonts/SpaceGrotesk-wght.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }
  @font-face { font-family:"Newsreader"; src:url("fonts/newsreader.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
  @font-face { font-family:"Newsreader"; src:url("fonts/newsreader-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

  /* tokens: same warm neutrals as Days Until. Dark by default, light follows the system */
  :root {
    --bg:#121110; --surface:#1c1b19; --surface-2:#282622; --line:#363330; --line-strong:#837b72;
    --ink:#f4f1ec; --ink-2:#bdb6ad; --ink-3:#9b948b; --on-ink:#121110;
    --banner-bg:#f4f2ee; --banner-ink:#1b1a19;
    --e-1:0 1px 2px rgb(0 0 0/.4),0 10px 28px rgb(0 0 0/.35);
    --e-3:0 2px 4px rgb(0 0 0/.5),0 24px 64px rgb(0 0 0/.6);
    --font-ui:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
    --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
    --ease:cubic-bezier(.23,1,.32,1);
    --gutter:48px; --header-h:64px;
    color-scheme:dark;
  }
  @media (prefers-color-scheme:light) {
    :root:not([data-theme=dark]) { --bg:#f4f2ee; --surface:#fff; --surface-2:#ebe8e2; --line:#dedad3; --line-strong:#857d73;
      --ink:#1b1a19; --ink-2:#55504a; --ink-3:#6e675f; --on-ink:#fff;
      --banner-bg:#1b1a19; --banner-ink:#f4f1ec;
      --e-1:0 1px 2px rgb(27 26 25/.06),0 10px 28px rgb(27 26 25/.07);
      --e-3:0 2px 4px rgb(27 26 25/.1),0 24px 64px rgb(27 26 25/.2); color-scheme:light; }
  }
  :root[data-theme=light] { --bg:#f4f2ee; --surface:#fff; --surface-2:#ebe8e2; --line:#dedad3; --line-strong:#857d73;
      --ink:#1b1a19; --ink-2:#55504a; --ink-3:#6e675f; --on-ink:#fff;
      --banner-bg:#1b1a19; --banner-ink:#f4f1ec;
      --e-1:0 1px 2px rgb(27 26 25/.06),0 10px 28px rgb(27 26 25/.07);
      --e-3:0 2px 4px rgb(27 26 25/.1),0 24px 64px rgb(27 26 25/.2); color-scheme:light; }
  @media (max-width:639px) { :root { --gutter:16px; --header-h:56px; } }

  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.5 var(--font-ui); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
  a { color:inherit; }
  :focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
  .wrap { max-width:1272px; margin:0 auto; padding:0 var(--gutter); width:100%; }

  /* header */
  header.top { height:var(--header-h); border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5; }
  .bar { height:100%; display:flex; align-items:center; gap:20px; }
  .brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:20px; letter-spacing:-.01em; }
  .brand svg { width:30px; height:30px; }
  .today { font:italic 400 15px var(--font-serif); color:var(--ink-3); border-left:1px solid var(--line); padding-left:16px; white-space:nowrap; }
  nav { display:flex; gap:4px; margin-left:auto; height:100%; align-items:center; }
  nav a.link { height:100%; display:flex; align-items:center; padding:0 14px; text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-2); position:relative; transition:color .18s var(--ease); }
  nav a.link:hover { color:var(--ink); }
  nav a.link.on { color:var(--ink); font-weight:600; }
  nav a.link.on::after { content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--ink); }
  nav .btn { margin-left:8px; }

  /* buttons */
  .btn { font:500 14px/1 var(--font-ui); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); text-decoration:none; white-space:nowrap; transition:background .18s var(--ease),transform .12s var(--ease),opacity .18s; }
  .btn:hover { background:var(--surface-2); }
  .btn:active { transform:scale(.97); }
  .btn.primary { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
  .btn.primary:hover { opacity:.88; background:var(--ink); }
  .btn.lg { height:48px; padding:0 24px; font-size:15px; }
  .btn.sm { height:34px; padding:0 14px; font-size:13px; }
  .btn svg { width:16px; height:16px; flex:none; }
  .btn.block { width:100%; }

  main { flex:1; padding-bottom:96px; }
  h1,h2,h3 { margin:0; letter-spacing:-.02em; }
  .page-h { font-size:clamp(2.125rem,5vw,3rem); line-height:1.12; font-weight:600; padding-top:48px; }
  .page-sub { color:var(--ink-3); margin:8px 0 32px; font-size:17px; }

  /* home hero */
  .hero { text-align:center; padding:112px 0 56px; }
  .display { font:italic 400 clamp(2.75rem,8vw,4.5rem)/1.04 var(--font-serif); letter-spacing:-.01em; margin:0 0 36px; }
  .search { max-width:760px; margin:0 auto; display:flex; align-items:center; gap:10px; border:1px solid var(--line-strong); border-radius:999px; height:64px; padding:0 8px 0 22px; background:transparent; transition:border-color .18s,background .18s; }
  .search:focus-within { border-color:var(--ink); background:var(--surface); }
  .search svg { width:20px; height:20px; color:var(--ink-3); flex:none; }
  .search input { flex:1; min-width:0; height:100%; border:0; background:transparent; color:var(--ink); font:400 17px var(--font-ui); outline:none; }
  .search input::placeholder { color:var(--ink-3); }
  .hero .note { color:var(--ink-2); font-size:14px; margin:18px 0 6px; }
  .hero .note a { text-underline-offset:3px; }
  .progress { display:inline-flex; align-items:center; gap:12px; color:var(--ink-2); font-size:14px; margin-top:22px; }
  .progress i { display:block; width:120px; height:4px; border-radius:99px; background:var(--line); overflow:hidden; }
  .progress i b { display:block; height:100%; background:var(--ink); border-radius:99px; }

  .banner { background:var(--banner-bg); color:var(--banner-ink); border-radius:8px; padding:16px 20px; margin:24px 0 56px; }
  .banner strong { display:block; margin-bottom:6px; }
  .banner .items { margin:0 0 10px; }
  .banner .items a { text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .banner .more { display:flex; justify-content:flex-end; }
  .banner .more a { font-weight:500; text-decoration:none; }

  .sec-h { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 20px; }
  .sec-h h2 { font-size:22px; font-weight:600; line-height:1.2; }
  .sec-h p { margin:2px 0 0; color:var(--ink-3); font-size:14px; }
  .section { margin-bottom:64px; }

  /* filters */
  .filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
  .filters .search { flex:1 1 320px; max-width:none; height:48px; padding:0 18px; }
  .filters .search input { font-size:15px; }
  .pill-select { position:relative; }
  select { appearance:none; -webkit-appearance:none; font:500 14px var(--font-ui); height:48px; padding:0 40px 0 18px; border-radius:999px; border:1px solid var(--line-strong); background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; color:var(--ink); cursor:pointer; max-width:100%; }
  select:hover { background-color:var(--surface-2); }
  select option { background:var(--surface); color:var(--ink); }
  .chip { display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 18px; border:1px solid var(--line-strong); border-radius:999px; cursor:pointer; font-size:14px; font-weight:500; user-select:none; transition:background .18s; }
  .chip:hover { background:var(--surface-2); }
  .chip input { position:absolute; opacity:0; pointer-events:none; }
  .chip:has(input:checked) { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
  .chip:has(input:focus-visible) { outline:2px solid var(--ink); outline-offset:3px; }
  .count { color:var(--ink-3); font-size:14px; margin-bottom:16px; }

  /* cards */
  .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--e-1); transition:transform .22s var(--ease),border-color .22s; animation:rise .52s var(--ease) both; animation-delay:calc(var(--i,0)*60ms); }
  .card:hover { transform:translateY(-3px); border-color:var(--line-strong); }
  @keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  .card .top { height:176px; background:var(--surface-2); border-bottom:3px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .card .top img { width:100%; height:100%; object-fit:cover; display:block; }
  .card .top .k { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:500; max-width:80%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card .top .big { font:400 72px/1 var(--font-serif); margin-top:4px; }
  .card .top .stamp { position:absolute; top:12px; left:12px; font-size:12px; font-weight:500; padding:4px 10px; border-radius:999px; background:rgb(18 17 16/.72); color:#f4f1ec; backdrop-filter:blur(6px); }
  .card .body { padding:20px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .card h3 { font:italic 400 1.5rem/1.2 var(--font-serif); letter-spacing:-.005em; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .card .meta { font-size:14px; color:var(--ink-3); }
  .card .status { font-size:14px; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
  .card .status::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ink); flex:none; }
  .card .status.open::before { background:transparent; border:1.5px solid var(--ink-2); }
  .card .foot { margin-top:auto; padding-top:10px; }
  .empty { grid-column:1/-1; text-align:center; padding:64px 16px; color:var(--ink-3); border:1px dashed var(--line); border-radius:16px; }
  .empty .display { font-size:2rem; margin:0 0 8px; color:var(--ink); }

  /* create */
  .tabs { display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; margin-bottom:32px; background:var(--surface); }
  .tabs button { font:500 14px var(--font-ui); border:0; background:transparent; color:var(--ink-2); height:38px; padding:0 20px; border-radius:999px; cursor:pointer; transition:background .18s,color .18s; }
  .tabs button:hover { color:var(--ink); }
  .tabs button.on { background:var(--ink); color:var(--on-ink); }
  .form { max-width:640px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--e-1); }
  label { display:block; font-weight:600; font-size:14px; margin:20px 0 8px; }
  label:first-child { margin-top:0; }
  label small { font-weight:400; color:var(--ink-3); }
  input[type=text], input:not([type]), textarea, input[type=file] { font:400 16px var(--font-ui); width:100%; min-height:52px; padding:0 16px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); transition:border-color .18s; }
  input[type=file] { padding:12px 16px; cursor:pointer; font-size:14px; color:var(--ink-2); }
  input[type=file]::file-selector-button { font:500 13px var(--font-ui); border:1px solid var(--line-strong); background:transparent; color:var(--ink); border-radius:999px; padding:6px 14px; margin-right:12px; cursor:pointer; }
  textarea { padding:14px 16px; min-height:130px; resize:vertical; line-height:1.5; }
  .form select { width:100%; border-radius:12px; height:52px; background-color:var(--bg); border-color:var(--line); }
  input:focus, textarea:focus, select:focus { outline:none; border-color:var(--ink); }
  ::placeholder { color:var(--ink-3); }
  .preview { margin-top:12px; display:flex; gap:12px; align-items:flex-end; }
  .preview img { max-width:220px; max-height:150px; border-radius:12px; border:1px solid var(--line); }
  .qbox { border:1px solid var(--line); border-radius:12px; padding:16px; margin-top:12px; background:var(--bg); }
  .qbox .q { font:italic 400 1.375rem/1.25 var(--font-serif); margin-top:8px; }
  .qbox img { max-width:100%; max-height:200px; margin-top:12px; display:block; border-radius:10px; }
  .err { display:none; margin-top:16px; padding:10px 14px; border-radius:10px; border:1px solid var(--line-strong); font-size:14px; }
  .actions { margin-top:28px; display:flex; gap:10px; flex-wrap:wrap; }
  .tag { display:inline-block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }

  /* modal */
  .overlay { position:fixed; inset:0; background:rgb(0 0 0/.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:20; animation:fade .22s var(--ease); }
  .modal { background:var(--surface); border:1px solid var(--line); border-radius:20px; max-width:680px; width:100%; max-height:90vh; overflow:auto; padding:36px; position:relative; box-shadow:var(--e-3); animation:pop .3s var(--ease); }
  .modal .x { position:absolute; top:14px; right:14px; width:40px; height:40px; padding:0; }
  .modal h2 { font:italic 400 clamp(1.75rem,4vw,2.25rem)/1.15 var(--font-serif); margin:14px 0 18px; padding-right:36px; letter-spacing:-.01em; }
  .modal img { max-width:100%; border-radius:12px; border:1px solid var(--line); margin:4px 0 8px; display:block; }
  .lbl { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin:24px 0 8px; font-weight:500; }
  .answer { font:400 1.375rem/1.4 var(--font-serif); white-space:pre-wrap; border-left:2px solid var(--ink); padding:2px 0 2px 18px; }
  .modal .meta { color:var(--ink-2); font-size:14px; }
  @keyframes fade { from { opacity:0; } }
  @keyframes pop { from { opacity:0; transform:translateY(12px) scale(.98); } }
  .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--on-ink); padding:12px 22px; border-radius:999px; font-size:14px; font-weight:500; z-index:30; box-shadow:var(--e-3); animation:rise .3s var(--ease); }

  footer { border-top:1px solid var(--line); padding:28px 0; color:var(--ink-3); font-size:14px; }
  footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

  @media (max-width:1023px) { .grid { grid-template-columns:repeat(2,1fr); } .today { display:none; } }
  @media (max-width:767px) { nav a.link { padding:0 8px; } nav .btn span { display:none; } nav .btn { padding:0; width:40px; } }
  @media (max-width:639px) {
    .grid { grid-template-columns:1fr; gap:16px; } .hero { padding:56px 0 40px; } .search { height:56px; }
    .brand span { display:none; } .form { padding:20px; } .modal { padding:24px; } .bar { gap:8px; }
    .sec-h { align-items:flex-start; flex-direction:column; }
  }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:0ms !important; animation-delay:0ms !important; transition-duration:0ms !important; } }

  /* ---- v2 additions ---- */
  .icon-btn { width:40px; height:40px; padding:0; flex:none; }
  .icon-btn svg { width:18px; height:18px; }
  .card .votes { font-size:14px; color:var(--ink-2); }
  .card .meta-row { display:flex; gap:14px; flex-wrap:wrap; font-size:14px; color:var(--ink-3); }
  .skel { height:380px; border-radius:16px; background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%); background-size:200% 100%; animation:sh 1.4s linear infinite; border:1px solid var(--line); }
  @keyframes sh { to { background-position:-200% 0; } }
  .more-wrap { display:flex; justify-content:center; margin-top:32px; }
  .banner-err { background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; padding:14px 18px; margin:24px 0; display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
  .counter { text-align:right; font-size:12px; color:var(--ink-3); margin-top:4px; }
  .counter.warn { color:var(--ink); font-weight:600; }
  .modal .head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .modal .tools { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
  .ans { border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:10px; display:flex; gap:14px; background:var(--bg); }
  .ans.best { border-color:var(--line-strong); }
  .ans .vote { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:46px; }
  .ans .vote button { width:40px; height:36px; border-radius:10px; border:1px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; font:600 14px var(--font-ui); display:flex; align-items:center; justify-content:center; transition:background .18s,transform .12s var(--ease); }
  .ans .vote button:hover { background:var(--surface-2); }
  .ans .vote button:active { transform:scale(.94); }
  .ans .vote button[aria-pressed=true] { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
  .ans .vote span { font-size:13px; color:var(--ink-2); font-weight:600; }
  .ans .txt { flex:1; min-width:0; }
  .ans .txt p { font:400 1.25rem/1.4 var(--font-serif); margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
  .ans .by { font-size:13px; color:var(--ink-3); margin-top:8px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .badge { font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border:1px solid var(--ink); border-radius:999px; padding:1px 8px; color:var(--ink); }
  .linkbtn { background:none; border:0; padding:0; font:inherit; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .linkbtn:hover { color:var(--ink); }
  .modal form textarea { min-height:100px; }
  .modal .none { color:var(--ink-3); border:1px dashed var(--line); border-radius:14px; padding:20px; text-align:center; margin-top:10px; }
  .modal h2, .card h3, .qbox .q, .ans .txt p { overflow-wrap:anywhere; }
  body.lock { overflow:hidden; }
  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .draft { font-size:13px; color:var(--ink-3); margin-top:12px; }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
  @media (max-width:639px) { nav { gap:0; } nav a.link { padding:0 8px; font-size:13px; } .modal .tools .btn { flex:1; } }
  .sr:focus { position:fixed; left:12px; top:12px; width:auto; height:auto; clip:auto; z-index:50; background:var(--ink); color:var(--on-ink); padding:10px 16px; border-radius:999px; overflow:visible; }
  .overlay.static, .overlay.static .modal { animation:none; }
  footer .rtx { font-weight:600; color:var(--ink-2); letter-spacing:.03em; }
  @media (max-width:639px) { footer .wrap { flex-direction:column; gap:6px; } }