/* ============ TOKENS ============ */
  :root{
    --ground:#ECE9E1;
    --surface:#F6F4EE;
    --surface-2:#E1DCCE;
    --ink:#171F1A;
    --ink-soft:#4B564E;
    --ink-faint:#7C8579;
    --line:#C9C2AC;
    --line-soft:#DAD4C2;
    --brass:#93712F;
    --brass-strong:#6E5522;
    --brass-tint:#EFE4C7;
    --verdigris:#4E6459;
    --shadow: 0 1px 0 rgba(23,31,26,0.06);

    --font-display:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0F1512;
      --surface:#161D18;
      --surface-2:#1E2620;
      --ink:#ECE7DA;
      --ink-soft:#AEB6A8;
      --ink-faint:#79847A;
      --line:#2C352E;
      --line-soft:#232B25;
      --brass:#CDA664;
      --brass-strong:#E4C186;
      --brass-tint:#2A2416;
      --verdigris:#8CA396;
      --shadow: 0 1px 0 rgba(0,0,0,0.4);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0F1512;
    --surface:#161D18;
    --surface-2:#1E2620;
    --ink:#ECE7DA;
    --ink-soft:#AEB6A8;
    --ink-faint:#79847A;
    --line:#2C352E;
    --line-soft:#232B25;
    --brass:#CDA664;
    --brass-strong:#E4C186;
    --brass-tint:#2A2416;
    --verdigris:#8CA396;
    --shadow: 0 1px 0 rgba(0,0,0,0.4);
  }

  /* ============ RESET-ish ============ */
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    letter-spacing:-0.006em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-0.025em; margin:0; text-wrap:balance;}
  p{margin:0;}
  a{color:inherit;}
  button{font-family:inherit;}
  ::selection{background:var(--brass); color:var(--surface);}
  :focus-visible{outline:2px solid var(--brass); outline-offset:3px;}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--brass-strong);
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding-inline:clamp(20px, 5vw, 64px);
  }

  section{position:relative;}

  /* ============ RAIL (section index) ============ */
  .rail{
    position:fixed;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:22px;
    z-index:40;
  }
  .rail a{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-family:var(--font-mono);
    font-size:0.68rem;
    color:var(--ink-faint);
    letter-spacing:0.04em;
  }
  .rail .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--line);
    transition:background 0.25s ease, transform 0.25s ease;
    flex:none;
  }
  .rail .label{
    max-width:0;
    overflow:hidden;
    white-space:nowrap;
    opacity:0;
    transition:max-width 0.3s ease, opacity 0.25s ease;
  }
  .rail a:hover .label,
  .rail a.active .label{ max-width:140px; opacity:1; }
  .rail a.active .dot{ background:var(--brass); transform:scale(1.5); }
  .rail a.active{ color:var(--brass-strong); }
  @media (max-width: 860px){ .rail{ display:none; } }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-top:120px;
  }
  .hero-canvas-holder{
    position:absolute;
    inset:0;
    z-index:0;
  }
  #horizon{
    width:100%; height:100%; display:block;
  }
  .hero-fade{
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 0%, var(--ground) 92%);
    z-index:1;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    padding-bottom:clamp(48px, 8vw, 96px);
  }
  .brand-mark{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    padding:28px clamp(20px,5vw,64px) 0;
  }
  .brand-name{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.02rem, 2.6vw, 1.35rem);
    letter-spacing:-0.02em;
    white-space:nowrap;
  }
  .brand-tag{
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.08em;
    color:var(--ink-faint);
    display:none;
  }
  @media (min-width:640px){ .brand-tag{ display:block; } }

  .hero-headline{
    font-size:clamp(2.4rem, 6vw, 5rem);
    font-weight:700;
    letter-spacing:-0.035em;
    line-height:1.04;
    max-width:16ch;
  }
  .hero-headline em{
    font-style:normal;
    font-weight:800;
    color:var(--brass-strong);
  }
  .hero-sub{
    margin-top:28px;
    max-width:46ch;
    font-size:clamp(1rem, 1.6vw, 1.15rem);
    color:var(--ink-soft);
  }
  .hero-actions{
    margin-top:40px;
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 28px;
    background:var(--ink);
    color:var(--surface);
    text-decoration:none;
    border:1px solid var(--ink);
    border-radius:2px;
    font-size:0.92rem;
    letter-spacing:0.01em;
    cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .btn:hover{ background:var(--brass-strong); border-color:var(--brass-strong); color:var(--surface); transform:translateY(-1px); }
  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line);
  }
  .btn-ghost:hover{ background:var(--surface); border-color:var(--ink); transform:none; }

  .scroll-cue{
    font-family:var(--font-mono);
    font-size:0.68rem;
    color:var(--ink-faint);
    letter-spacing:0.08em;
  }

  /* ============ THESIS ============ */
  .thesis{
    padding:clamp(70px,12vw,140px) 0 clamp(50px,8vw,90px);
    border-top:1px solid var(--line-soft);
  }
  .thesis .grid{
    display:grid;
    grid-template-columns: minmax(0,0.4fr) minmax(0,1fr);
    gap:clamp(24px,5vw,80px);
    align-items:start;
  }
  @media (max-width:760px){ .thesis .grid{ grid-template-columns:1fr; } }
  .thesis h2{
    font-size:clamp(1.5rem,2.6vw,2rem);
    font-style:normal;
    font-weight:700;
    letter-spacing:-0.02em;
    color:var(--brass-strong);
  }
  .thesis p{
    font-size:clamp(1.15rem, 2vw, 1.55rem);
    font-family:var(--font-body);
    font-weight:400;
    letter-spacing:-0.012em;
    line-height:1.45;
    color:var(--ink);
  }

  /* ============ STANDARD (spec rows) ============ */
  .standard{
    padding:clamp(50px,8vw,90px) 0;
    border-top:1px solid var(--line-soft);
  }
  .standard-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:clamp(28px,5vw,48px);
    flex-wrap:wrap;
  }
  .standard-head h2{
    font-size:clamp(1.6rem,3vw,2.3rem);
  }
  .spec-row{
    display:grid;
    grid-template-columns: 64px minmax(0,1fr) minmax(0,1.6fr);
    gap:20px;
    padding:26px 0;
    border-top:1px solid var(--line-soft);
    align-items:baseline;
  }
  .spec-row:last-child{ border-bottom:1px solid var(--line-soft); }
  @media (max-width:700px){
    .spec-row{ grid-template-columns: 40px 1fr; }
    .spec-row .spec-desc{ grid-column:1 / -1; margin-top:6px; }
  }
  .spec-num{
    font-family:var(--font-mono);
    color:var(--ink-faint);
    font-size:0.85rem;
  }
  .spec-label{
    font-family:var(--font-mono);
    font-size:0.82rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--ink);
    font-weight:500;
  }
  .spec-desc{
    color:var(--ink-soft);
    font-size:1.02rem;
    max-width:56ch;
  }

  /* ============ NEIGHBORHOODS ============ */
  .where{
    padding:clamp(50px,8vw,90px) 0;
    border-top:1px solid var(--line-soft);
    background:var(--surface);
  }
  .where-head{ margin-bottom:clamp(28px,5vw,48px); }
  .where-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); }
  .nb-list{
    display:flex;
    flex-direction:column;
  }
  .nb-row{
    display:grid;
    grid-template-columns: 100px minmax(0,1fr) 220px;
    gap:20px;
    padding:22px 0;
    border-top:1px solid var(--line);
    align-items:center;
  }
  .nb-row:last-child{ border-bottom:1px solid var(--line); }
  @media (max-width:760px){
    .nb-row{ grid-template-columns:1fr; gap:6px; padding:20px 0; }
  }
  .nb-code{
    font-family:var(--font-mono);
    font-size:0.78rem;
    color:var(--verdigris);
  }
  .nb-name{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:-0.015em;
    font-size:clamp(1.15rem,2vw,1.5rem);
  }
  a.nb-name{
    color:var(--ink);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  a.nb-name:hover{ color:var(--brass-strong); border-color:var(--brass); }
  .nb-note{
    font-size:0.9rem;
    color:var(--ink-soft);
    text-align:right;
  }
  @media (max-width:760px){ .nb-note{ text-align:left; } }

  /* ============ ACCESS / FORM ============ */
  .access{
    padding:clamp(60px,10vw,110px) 0;
    border-top:1px solid var(--line-soft);
  }
  .access-grid{
    display:grid;
    grid-template-columns: minmax(0,0.9fr) minmax(0,1.3fr);
    gap:clamp(30px,6vw,90px);
  }
  @media (max-width:860px){ .access-grid{ grid-template-columns:1fr; } }
  .access-intro h2{
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    max-width:14ch;
  }
  .access-intro p{
    margin-top:20px;
    color:var(--ink-soft);
    max-width:40ch;
  }
  .access-list{
    margin-top:32px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .access-list li{
    list-style:none;
    display:flex;
    gap:12px;
    align-items:baseline;
    font-size:0.92rem;
    color:var(--ink-soft);
  }
  .access-list .mk{ color:var(--brass); font-family:var(--font-mono); font-size:0.8rem; }

  form{
    background:var(--surface);
    border:1px solid var(--line);
    padding:clamp(24px,4vw,40px);
  }
  .f-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }
  @media (max-width:520px){ .f-row{ grid-template-columns:1fr; } }
  .field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
  }
  .field label{
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .field input,
  .field select,
  .field textarea{
    font-family:var(--font-body);
    font-size:0.98rem;
    color:var(--ink);
    background:var(--ground);
    border:1px solid var(--line);
    padding:12px 14px;
    border-radius:2px;
    width:100%;
  }
  .field textarea{ resize:vertical; min-height:88px; }
  .field input:focus,
  .field select:focus,
  .field textarea:focus{
    outline:none;
    border-color:var(--brass);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--brass) 20%, transparent);
  }

  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{
    position:relative;
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.03em;
    padding:8px 12px;
    border:1px solid var(--line);
    background:var(--ground);
    cursor:pointer;
    user-select:none;
    transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .chip:hover{ border-color:var(--ink-faint); }
  .chip.active{
    background:var(--brass-tint);
    border-color:var(--brass);
    color:var(--brass-strong);
  }
  .chip input{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .chip:has(input:focus-visible){
    outline:2px solid var(--brass);
    outline-offset:2px;
  }

  .field-error{
    font-size:0.78rem;
    color:#B4553B;
    min-height:1em;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .field-error{ color:#E08768; }
  }
  :root[data-theme="dark"] .field-error{ color:#E08768; }

  .submit-row{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:8px;
    flex-wrap:wrap;
  }
  .disclosure{
    font-size:0.76rem;
    color:var(--ink-faint);
    max-width:34ch;
  }

  .form-status{
    display:none;
    padding:20px;
    border:1px solid var(--brass);
    background:var(--brass-tint);
    color:var(--brass-strong);
    font-size:0.92rem;
  }
  .form-status.show{ display:block; }
  form.submitted .field-set{ display:none; }

  /* ============ FOOTER ============ */
  footer{
    padding:48px 0 60px;
    border-top:1px solid var(--line-soft);
  }
  .foot-grid{
    display:flex;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }
  .foot-contact{
    font-family:var(--font-mono);
    font-size:0.82rem;
    color:var(--ink-soft);
  }
  .foot-contact a{ text-decoration:none; border-bottom:1px solid var(--line); }
  .foot-contact a:hover{ border-color:var(--brass); color:var(--brass-strong); }

  /* ============ INTERIOR PAGES (neighborhood hub + detail pages) ============ */
  .top-bar{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    padding:26px clamp(20px,5vw,64px);
    border-bottom:1px solid var(--line-soft);
  }
  .top-bar .back-link{
    font-family:var(--font-mono);
    font-size:0.78rem;
    color:var(--ink-soft);
    text-decoration:none;
    border-bottom:1px solid var(--line);
  }
  .top-bar .back-link:hover{ color:var(--brass-strong); border-color:var(--brass); }

  .breadcrumb{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.03em;
    color:var(--ink-faint);
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:22px;
  }
  .breadcrumb a{ color:var(--ink-faint); text-decoration:none; border-bottom:1px solid transparent; }
  .breadcrumb a:hover{ color:var(--brass-strong); border-color:var(--brass); }
  .breadcrumb .sep{ opacity:0.5; }

  .page-head{
    padding:clamp(56px,10vw,96px) 0 clamp(36px,6vw,56px);
    border-bottom:1px solid var(--line-soft);
  }
  .page-head h1{
    font-size:clamp(2rem,5vw,3.2rem);
    max-width:20ch;
  }
  .page-head .dek{
    margin-top:18px;
    max-width:58ch;
    color:var(--ink-soft);
    font-size:clamp(1rem,1.6vw,1.15rem);
  }

  .section-plain{
    padding:clamp(48px,8vw,84px) 0;
    border-top:1px solid var(--line-soft);
  }
  .section-plain h2{
    font-size:clamp(1.5rem,2.8vw,2.1rem);
    margin-bottom:clamp(20px,4vw,32px);
  }
  .section-plain > .wrap > p.lead{
    font-size:clamp(1.05rem,1.8vw,1.3rem);
    font-family:var(--font-display);
    font-weight:400;
    letter-spacing:-0.012em;
    line-height:1.5;
    max-width:68ch;
    color:var(--ink);
    margin-bottom:clamp(28px,5vw,44px);
  }

  .why-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:28px;
  }
  .why-item .num{
    font-family:var(--font-mono);
    color:var(--brass);
    font-size:0.8rem;
  }
  .why-item h3{
    font-size:1.05rem;
    margin-top:10px;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .why-item p{
    margin-top:8px;
    color:var(--ink-soft);
    font-size:0.95rem;
  }

  .faq-list{
    display:flex;
    flex-direction:column;
    max-width:74ch;
  }
  .faq-item{ border-top:1px solid var(--line-soft); }
  .faq-item:last-child{ border-bottom:1px solid var(--line-soft); }
  .faq-item summary{
    cursor:pointer;
    padding:20px 0;
    font-weight:600;
    letter-spacing:-0.01em;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:'+';
    font-family:var(--font-mono);
    color:var(--brass);
    font-size:1.15rem;
    flex:none;
    transition:transform 0.2s ease;
  }
  .faq-item[open] summary::after{ transform:rotate(45deg); }
  .faq-item .faq-a{
    padding:0 0 22px;
    color:var(--ink-soft);
    max-width:60ch;
  }

  .related-list{ display:flex; flex-wrap:wrap; gap:12px; }
  .related-list a{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.02em;
    padding:10px 16px;
    border:1px solid var(--line);
    text-decoration:none;
    color:var(--ink);
    transition:border-color 0.15s ease, color 0.15s ease;
  }
  .related-list a:hover{ border-color:var(--brass); color:var(--brass-strong); }

  .mono-link{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:0.8rem;
    letter-spacing:0.02em;
    color:var(--brass-strong);
    text-decoration:none;
    border-bottom:1px solid var(--brass);
  }
  .mono-link:hover{ color:var(--ink); border-color:var(--ink); }

  .hub-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
    gap:1px;
    background:var(--line-soft);
    border:1px solid var(--line-soft);
  }
  .hub-card{
    background:var(--ground);
    padding:28px;
    display:flex;
    flex-direction:column;
    gap:10px;
    text-decoration:none;
    color:inherit;
    transition:background 0.15s ease;
    min-height:150px;
  }
  .hub-card:hover{ background:var(--surface); }
  .hub-card h3{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:-0.015em;
    font-size:1.2rem;
  }
  .hub-card p{ color:var(--ink-soft); font-size:0.9rem; }
  .hub-card .status{
    margin-top:auto;
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .hub-card.is-open .status{ color:var(--brass-strong); }
  .hub-card.is-soon{ cursor:default; }
  .hub-card.is-soon:hover{ background:var(--ground); }