:root {
    --black:#000; --white:#fff; --gray-90:#141414; --gray-70:#545454;
    --gray-50:#6b6b6b; --gray-30:#afafaf; --gray-15:#e2e2e2;
    --gray-08:#eee; --gray-04:#f6f6f6; --green:#06c167;
    --rust:#c4441f; --radius:8px;
    /* horizontal page gutter — 100px on desktop, shrinks on smaller screens */
    --gutter:100px;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html,body { background:var(--gray-04);
    font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
    color:var(--black); -webkit-font-smoothing:antialiased; }
  #app { width:100%; min-height:100vh; background:var(--white); }

  .topbar { background:var(--black); color:var(--white); display:flex;
    align-items:center; justify-content:space-between;
    padding:0 var(--gutter); height:64px; position:relative; }
  .brand { display:flex; align-items:center; gap:2px; font-weight:800;
    font-size:22px; letter-spacing:-0.04em; }
  .brand .brand-icon { width:36px; height:36px; display:block; }
  .brand .o { font-weight:900; letter-spacing:-0.05em; }
  .brand .tag-pill { font-family:'Roboto Mono',monospace; font-size:9px;
    font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
    border:1px solid var(--gray-70); color:var(--gray-30);
    padding:3px 7px; border-radius:4px; margin-left:12px; align-self:center; }
  .navlinks { display:flex; gap:4px; }
  .navlinks button { background:none; border:none; cursor:pointer;
    color:var(--white); font-family:inherit; font-weight:600; font-size:15px;
    padding:9px 16px; border-radius:999px; transition:background .15s; }
  .navlinks button:hover { background:rgba(255,255,255,.12); }
  .navlinks button.active { background:var(--white); color:var(--black); }

  /* ---- hamburger button (hidden on desktop, shown on narrow screens) ---- */
  .menu-toggle { display:none; background:none; border:none; cursor:pointer;
    padding:8px; border-radius:8px; transition:background .15s; }
  .menu-toggle:hover { background:rgba(255,255,255,.12); }
  .menu-toggle .bar { display:block; width:22px; height:2px;
    background:var(--white); border-radius:2px; transition:all .2s ease; }
  .menu-toggle .bar + .bar { margin-top:5px; }
  /* animate the three bars into an X when the menu is open */
  .menu-toggle.open .bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .menu-toggle.open .bar:nth-child(2) { opacity:0; }
  .menu-toggle.open .bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  .hero { background:var(--black); color:var(--white);
    padding:60px var(--gutter) 72px; display:flex; align-items:center; gap:48px; }
  .hero-text { flex:1; min-width:0; }
  .hero-art { flex:1; min-width:0; max-width:560px; }
  .hero-art img { width:100%; height:auto; display:block;
    border-radius:14px; }
  .hero h1 { font-size:clamp(38px,5vw,64px); font-weight:800;
    letter-spacing:-0.045em; line-height:1.02; }
  .hero p { margin-top:20px; font-size:18px; color:var(--gray-30);
    max-width:540px; line-height:1.5; }
  .hero .cta { margin-top:30px; background:var(--white); color:var(--black);
    border:none; font-family:inherit; font-weight:600; font-size:16px;
    padding:14px 26px; border-radius:var(--radius); cursor:pointer;
    transition:opacity .15s; }
  .hero .cta:hover { opacity:.85; }

  main { padding:40px var(--gutter) 80px; }
  .sec-head { display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:24px; flex-wrap:wrap; gap:12px; }
  .sec-head h2 { font-size:26px; font-weight:700; letter-spacing:-0.03em; }
  .sec-head .count { font-family:'Roboto Mono',monospace; font-size:13px;
    color:var(--gray-50); }

  .filters { margin-bottom:28px; }
  .filter-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    margin-bottom:12px; }
  .filter-row .lbl { font-size:13px; font-weight:600; color:var(--gray-50);
    margin-right:6px; min-width:52px; }
  .pill { font-family:inherit; font-size:13.5px; font-weight:500;
    padding:8px 15px; border-radius:999px; cursor:pointer;
    border:1px solid var(--gray-15); background:var(--white);
    color:var(--black); transition:all .13s; }
  .pill:hover { border-color:var(--gray-30); background:var(--gray-04); }
  .pill.on { background:var(--black); color:var(--white); border-color:var(--black); }
  .filter-row.daterange { padding:4px 0 8px; }
  .datefield { display:flex; align-items:center; gap:7px; font-size:13px;
    font-weight:600; color:var(--gray-50); }
  .datefield input[type=date] { font-family:inherit; font-size:13.5px;
    padding:7px 11px; border:1px solid var(--gray-15);
    border-radius:var(--radius); background:var(--white); color:var(--black);
    cursor:pointer; }
  .datefield input[type=date]:focus { outline:none; border-color:var(--black);
    box-shadow:0 0 0 3px rgba(0,0,0,.08); }

  .grid { display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
  .card { background:var(--white); border:1px solid var(--gray-15);
    border-radius:12px; padding:22px; display:flex; flex-direction:column;
    transition:box-shadow .18s,transform .18s; }
  .card:hover { box-shadow:0 8px 28px rgba(0,0,0,.1); transform:translateY(-2px); }
  .who-row { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
  .avatar { width:34px; height:34px; border-radius:50%; background:var(--black);
    color:var(--white); display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; flex-shrink:0; }
  .avatar.driver { background:var(--green); color:var(--black); }
  .who-text .role { font-weight:600; font-size:14px; }
  .who-text .sub { font-size:12px; color:var(--gray-50); }
  .card .body { font-size:18px; line-height:1.45; color:var(--gray-90); flex:1;
    white-space:pre-wrap; }
  /* collapsed cards clamp the body to 4 lines */
  .card .body.clamped {
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .readmore { align-self:flex-start; margin-top:8px; padding:2px 0;
    background:none; border:none; cursor:pointer; font-family:inherit;
    font-size:13.5px; font-weight:600; color:var(--rust); }
  .readmore:hover { text-decoration:underline; }
  .readmore[hidden] { display:none; }
  .card .tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
  .card .tag { font-size:11.5px; font-weight:500; background:var(--gray-08);
    color:var(--gray-70); padding:4px 10px; border-radius:999px; }
  .footer-row { display:flex; justify-content:space-between; align-items:center;
    margin-top:16px; padding-top:14px; border-top:1px solid var(--gray-08);
    font-family:'Roboto Mono',monospace; font-size:11.5px; color:var(--gray-50); }
  .route-badge { display:flex; align-items:center; gap:5px; font-weight:500; }
  .dot { width:6px; height:6px; border-radius:50%; background:var(--black); }
  .dot.sq { border-radius:1px; }

  /* ---- like button ---- */
  .like-row { display:flex; align-items:center; gap:9px; margin-top:12px; }
  .like-btn { display:inline-flex; align-items:center; gap:7px;
    font-family:inherit; font-size:14px; font-weight:600;
    padding:7px 14px; border-radius:999px; cursor:pointer;
    border:1px solid var(--gray-15); background:var(--white);
    color:var(--gray-70); transition:all .14s; }
  .like-btn:hover { border-color:var(--gray-30); background:var(--gray-04); }
  .like-btn .heart { font-size:15px; line-height:1; color:var(--gray-30);
    transition:color .14s, transform .14s; }
  .like-btn .like-count { font-variant-numeric:tabular-nums; }
  .like-btn.liked { border-color:var(--rust); color:var(--rust);
    background:#fdeee9; }
  .like-btn.liked .heart { color:var(--rust); }
  .like-btn:active .heart { transform:scale(1.35); }
  .like-label { font-family:'Roboto Mono',monospace; font-size:11px;
    color:var(--gray-30); }

  .empty { grid-column:1/-1; text-align:center; padding:70px 20px;
    color:var(--gray-50); font-size:16px; }

  .formwrap { max-width:560px; }
  .form-intro { font-size:15px; color:var(--gray-50); line-height:1.55;
    margin-bottom:24px; }
  /* submission form: wide, centered container; fields stay readable inside */
  .formwrap-wide { width:100%; min-width:min(1000px,100%); max-width:1100px;
    margin:0 auto; }
  .formwrap-wide .field,
  .formwrap-wide .row2,
  .formwrap-wide > .toast,
  .formwrap-wide > p,
  .formwrap-wide > .hint { max-width:620px; margin-left:auto; margin-right:auto; }
  /* the submit button is width:100% — give it the column width explicitly
     so auto margins have room to centre it */
  .formwrap-wide .submit { width:620px; max-width:100%;
    margin-left:auto; margin-right:auto; display:block; }
  .toast { display:flex; align-items:center; gap:10px; background:#e7f9f0;
    border:1px solid var(--green); color:#04361f; padding:14px 16px;
    border-radius:var(--radius); font-size:14.5px; font-weight:500;
    margin-bottom:26px; }
  .toast .check { width:20px; height:20px; border-radius:50%;
    background:var(--green); color:var(--white); display:flex;
    align-items:center; justify-content:center; font-size:12px;
    font-weight:800; flex-shrink:0; }

  /* ---- submission confirmation modal ---- */
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center; z-index:1000;
    padding:24px; animation:fade .2s ease; }
  .modal { background:var(--white); border-radius:14px; max-width:400px;
    width:100%; padding:36px 32px 30px; text-align:center;
    box-shadow:0 24px 60px rgba(0,0,0,.3); animation:pop .25s ease; }
  .modal .bigcheck { width:60px; height:60px; border-radius:50%;
    background:var(--green); color:var(--white); font-size:30px;
    font-weight:800; display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px; }
  .modal h3 { font-size:21px; font-weight:800; letter-spacing:-0.02em;
    margin-bottom:8px; }
  .modal p { font-size:14.5px; color:var(--gray-50); line-height:1.5;
    margin-bottom:22px; }
  .modal .modal-btn { background:var(--black); color:var(--white); border:none;
    font-family:inherit; font-size:15px; font-weight:600; padding:13px 24px;
    border-radius:var(--radius); cursor:pointer; transition:opacity .15s;
    width:100%; }
  .modal .modal-btn:hover { opacity:.85; }
  .modal .redirect-note { font-size:12px; color:var(--gray-30);
    margin-top:14px; }
  .modal .progress { height:3px; background:var(--gray-08);
    border-radius:2px; margin-top:16px; overflow:hidden; }
  .modal .progress span { display:block; height:100%; background:var(--green);
    width:100%; transform-origin:left; animation:drain 4s linear forwards; }
  @keyframes fade { from{opacity:0;} to{opacity:1;} }
  @keyframes pop { from{opacity:0;transform:scale(.94) translateY(8px);}
    to{opacity:1;transform:none;} }
  @keyframes drain { from{transform:scaleX(1);} to{transform:scaleX(0);} }
  .field { margin-bottom:22px; }
  .field label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
  .field label .req { color:var(--gray-50); font-weight:400; }
  .field textarea,.field input,.field select { width:100%; font-family:inherit;
    font-size:15px; padding:13px 14px; border:1px solid var(--gray-30);
    background:var(--white); color:var(--black); border-radius:var(--radius);
    resize:vertical; }
  .field textarea { min-height:128px; line-height:1.45; }
  .field textarea:focus,.field input:focus,.field select:focus { outline:none;
    border-color:var(--black); box-shadow:0 0 0 3px rgba(0,0,0,.08); }
  .field select { appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; }
  .field .hint { font-size:12px; color:var(--gray-50); margin-top:6px; }
  .row2 { display:flex; gap:14px; }
  .row2 .field { flex:1; }
  .tagpick { display:flex; flex-wrap:wrap; gap:8px; }
  .customtags { margin-top:14px; }
  .customtags-input { display:flex; gap:8px; }
  .customtags-input input { flex:1; font-family:inherit; font-size:14px;
    padding:10px 13px; border:1px solid var(--gray-30);
    border-radius:var(--radius); background:var(--white); }
  .customtags-input input:focus { outline:none; border-color:var(--black);
    box-shadow:0 0 0 3px rgba(0,0,0,.08); }
  .addtag-btn { font-family:inherit; font-size:14px; font-weight:600;
    padding:10px 18px; border-radius:var(--radius); cursor:pointer;
    border:1px solid var(--black); background:var(--black); color:var(--white);
    transition:opacity .15s; }
  .addtag-btn:hover { opacity:.85; }
  .proposed-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
  .proposed-chip { display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:600; padding:6px 8px 6px 12px;
    border-radius:999px; background:#fdeee9; color:var(--rust);
    border:1px solid var(--rust); }
  .chip-x { border:none; background:none; cursor:pointer; color:var(--rust);
    font-size:16px; line-height:1; padding:0 2px; }
  .chip-x:hover { opacity:.6; }
  .submit { width:100%; background:var(--black); color:var(--white); border:none;
    font-family:inherit; font-size:16px; font-weight:600; padding:16px;
    border-radius:var(--radius); cursor:pointer; transition:opacity .15s;
    margin-top:4px; }
  .submit:hover { opacity:.85; }
  .submit:disabled { opacity:.5; cursor:default; }
  .err { color:#c70000; font-size:12.5px; font-weight:500; margin-top:6px; }

  footer { background:var(--black); color:var(--gray-50);
    padding:40px var(--gutter); font-size:12.5px; line-height:1.7; }
  footer .frow { display:flex; justify-content:space-between;
    flex-wrap:wrap; gap:16px; }
  footer .brand-sm { color:var(--white); font-weight:800; font-size:18px;
    letter-spacing:-0.04em; }
  footer .disclaimer { margin-top:20px; padding-top:20px;
    border-top:1px solid #2a2a2a; max-width:620px; }
  footer a { color:var(--gray-30); }

  @keyframes rise { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
  .card { animation:rise .4s ease backwards; }
  @keyframes slidedown { from{opacity:0;transform:translateY(-8px);}
    to{opacity:1;transform:none;} }

  /* ---- responsive: shrink the gutter, then switch to the mobile menu ---- */
  @media (max-width:1100px){ :root{ --gutter:48px; } }
  @media (max-width:760px){
    :root{ --gutter:24px; }
    .hero { flex-direction:column; gap:32px; align-items:flex-start; }
    .hero-art { max-width:100%; width:100%; }
    /* mobile menu kicks in: hide inline links, show the hamburger */
    .menu-toggle { display:block; }
    .navlinks { display:none; }
    .navlinks.open {
      display:flex; flex-direction:column; gap:0;
      position:absolute; top:64px; left:0; right:0; z-index:900;
      background:var(--black); border-top:1px solid rgba(255,255,255,.12);
      padding:8px var(--gutter) 14px;
      animation:slidedown .18s ease;
      box-shadow:0 12px 28px rgba(0,0,0,.35);
    }
    .navlinks.open button {
      width:100%; text-align:left; border-radius:8px;
      padding:14px 14px; font-size:16px;
    }
    /* on mobile the submission/idea form fills the screen width:
       drop the centred 620px cap and let everything go full-width */
    .formwrap-wide .field,
    .formwrap-wide .row2,
    .formwrap-wide > .toast,
    .formwrap-wide > p,
    .formwrap-wide > .hint,
    .formwrap-wide .submit {
      max-width:100%; width:100%;
      margin-left:0; margin-right:0;
    }
  }
  @media (max-width:480px){
    :root{ --gutter:16px; }
    .row2{ flex-direction:column; gap:0; }
  }