:root{
    --ink:#0E2429;
    --ink-soft:#173339;
    --ink-line: rgba(246,242,233,0.14);
    --paper:#F6F2E9;
    --paper-soft:#ECE5D3;
    --paper-line: rgba(14,36,41,0.12);
    --lake:#4FA598;
    --lake-dim:#2E6A61;
    --stone:#C5854B;
    --flag:#D0402E;
    --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --serif: 'Fraunces', Georgia, serif;
    --mono: 'IBM Plex Mono', 'Courier New', monospace;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--serif);
    font-size:17px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  ::selection{background:var(--stone);color:var(--ink);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--stone);outline-offset:3px;}

  /* top bar: waterline + table of contents */
  .top-bar{position:fixed; top:0; left:0; width:100%; z-index:100;}
  .waterline{width:100%; height:4px; background:var(--ink-line);}
  .waterline-fill{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--lake-dim), var(--lake));
    transition:width .08s linear;
  }
  .toc{
    display:flex; align-items:center; gap:1.4rem;
    height:48px; padding:0 20px;
    background:rgba(14,36,41,0.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--ink-line);
  }
  .toc-brand{
    flex:0 0 auto; background:none; border:none; cursor:pointer;
    font-family:var(--display); font-weight:900; font-size:.95rem; letter-spacing:-0.01em;
    color:var(--paper); padding:0; opacity:.9;
  }
  .toc-scroll{
    flex:1 1 auto; display:flex; gap:1.5rem; overflow-x:auto; scrollbar-width:none;
    padding:0 1.75rem;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }
  .toc-scroll::-webkit-scrollbar{display:none;}
  .toc-item{
    flex:0 0 auto; background:none; border:none; cursor:pointer;
    font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
    color:rgba(246,242,233,0.55); white-space:nowrap;
    padding:.4em 0 .5em; border-bottom:2px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  .toc-item.is-active{color:var(--lake); border-bottom-color:var(--lake);}

  section[id]{scroll-margin-top:58px;}
  section{position:relative; overflow:hidden;}
  .band-ink{background:var(--ink); color:var(--paper);}
  .band-paper{background:var(--paper); color:var(--ink);}

  .wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

  .ghost-title{
    position:absolute; top:.4em; right:-0.02em; left:1.2em;
    font-family:var(--display); font-weight:900; text-transform:uppercase;
    line-height:.92; letter-spacing:-0.03em; text-align:right;
    color:transparent; -webkit-text-stroke:1.5px currentColor;
    opacity:.10; pointer-events:none; user-select:none; white-space:nowrap;
  }
  .band-ink .ghost-title{color:var(--paper);}
  .band-paper .ghost-title{color:var(--ink);}

  .eyebrow{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
    text-transform:uppercase; opacity:.65; margin:0 0 .6em;
  }
  h1,h2,h3{font-family:var(--display); font-weight:900; margin:0; letter-spacing:-0.01em;}
  .section-title{font-size:clamp(2rem, 4.4vw, 3.4rem); line-height:1.02; margin-bottom:.4em;}
  .section-intro{font-size:1.15rem; max-width:640px; opacity:.92;}
  .section-intro em{font-style:italic; color:var(--stone);}

  /* HERO */
  .hero{min-height:100svh; display:flex; align-items:center; background-size:cover; background-position:center 38%; background-repeat:no-repeat;}
  .hero .wrap{padding-top:5.5rem; padding-bottom:4rem;}
  .hero-kicker{font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lake); margin-bottom:1.4em;}
  .hero h1{font-size:clamp(3.6rem, 12vw, 8rem); line-height:.86;}
  .hero-sub{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.3rem,2.6vw,1.7rem); max-width:560px; margin:1em 0 1.3em; color:var(--paper); opacity:.95;}
  .hero-lead{max-width:560px; opacity:.75; font-size:1.02rem;}
  .hero-note{margin-top:2.2em; font-family:var(--mono); font-size:.85rem; color:var(--stone); border-left:2px solid var(--stone); padding-left:1em;}
  .scroll-cue{margin-top:3rem; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; opacity:.5; text-transform:uppercase;}

  /* QUICK PICKS */
  .quickpicks{padding:5rem 0;}
  .qp-head{margin-bottom:2.2rem;}
  .qp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
  .qp-card{background:var(--paper-soft); border:1px solid var(--paper-line); border-radius:2px; padding:1.6rem 1.5rem;}
  .qp-label{font-family:var(--display); font-weight:900; font-size:1.15rem; margin-bottom:.5em; display:block;}
  .qp-label::before{content:"— "; color:var(--flag);}
  .qp-steps{font-size:.95rem; opacity:.85;}

  /* SECTION generic */
  .section-pad{padding:6rem 0;}
  .section-head{margin-bottom:2.6rem; max-width:760px;}
  .callout{
    font-family:var(--mono); font-size:.86rem; line-height:1.6;
    background:var(--ink-soft); color:var(--paper);
    border-left:3px solid var(--lake);
    padding:1.1em 1.3em; margin:2.4rem 0; max-width:640px;
  }
  .band-paper .callout{background:var(--paper-soft); color:var(--ink); border-left-color:var(--stone);}
  .callout-title{display:block; text-transform:uppercase; letter-spacing:.08em; color:var(--stone); margin-bottom:.6em; font-size:.75rem;}
  .callout ul{margin:.4em 0 0; padding-left:1.1em;}
  .callout li{margin-bottom:.5em;}

  .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin-top:1rem;}
  .place{
    display:block; text-decoration:none;
    border:1px solid var(--paper-line); border-radius:2px;
    padding:1.35rem 1.4rem; transition:transform .18s ease, border-color .18s ease;
  }
  .band-ink .place{border-color:var(--ink-line);}
  .place:hover{transform:translateY(-3px); border-color:var(--lake);}
  .place-top{display:flex; gap:.6em; align-items:center; margin-bottom:.55em; flex-wrap:wrap;}
  .price{font-family:var(--mono); font-size:.78rem; color:var(--flag); font-weight:600;}
  .tag{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.6;}
  .place h3{font-family:var(--display); font-weight:700; font-size:1.12rem; margin-bottom:.35em;}
  .place p{margin:0; font-size:.92rem; opacity:.82; line-height:1.5;}
  .place-link{font-family:var(--mono); font-size:.7rem; opacity:.5; margin-top:.6em; display:block;}

  /* tip cards, section 09 */
  .tip{border:1px solid var(--paper-line); padding:1.3rem 1.4rem; border-radius:2px;}
  .band-ink .tip{border-color:var(--ink-line);}
  .tip-eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lake); display:block; margin-bottom:.5em;}
  .tip h3{font-size:1.05rem; margin-bottom:.4em;}
  .tip p{margin:0; font-size:.92rem; opacity:.82;}
  .qr-row{display:flex; gap:1.6rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--paper-line);}
  .band-ink .qr-row{border-top-color:var(--ink-line);}
  .qr-item{display:flex; flex-direction:column; align-items:center; gap:.4em;}
  .qr-item img{display:block; border-radius:3px; background:#fff; padding:4px;}
  .qr-item span{font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; opacity:.65; text-align:center;}

  /* FOOTER */
  .footer{padding:6rem 0 4rem; background-size:cover; background-position:center 38%; background-repeat:no-repeat;}
  .section-photo{margin:1.9rem 0 2.3rem; border-radius:3px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.18);}
  .section-photo img{width:100%; height:380px; object-fit:cover; display:block;}
  .footer h2{font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:.5em;}
  .footer p{max-width:560px; opacity:.85;}
  .cta-btn{
    display:inline-flex; align-items:center; gap:.5em;
    margin-top:1.8rem; padding:.85em 1.6em;
    background:var(--lake); color:var(--ink); text-decoration:none;
    font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
    border-radius:2px; transition:background .18s ease, transform .18s ease;
  }
  .cta-btn:hover{background:var(--paper); transform:translateY(-2px);}
  .emergency{
    margin-top:2.4rem; font-family:var(--mono); font-size:.92rem;
    border:1px solid var(--ink-line); padding:1.1em 1.4em; display:inline-block;
    color:var(--stone);
  }
  .footer-credit{margin-top:3.5rem; font-family:var(--mono); font-size:.75rem; opacity:.45; letter-spacing:.05em;}

  /* reveal mechanics */
  .reveal{opacity:0; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);}
  .reveal[data-dir="up"]{transform:translateY(28px);}
  .reveal[data-dir="left"]{transform:translateX(-34px);}
  .reveal[data-dir="right"]{transform:translateX(34px);}
  .reveal.is-visible{opacity:1; transform:none;}

  @media (max-width:760px){
    .qp-grid{grid-template-columns:1fr;}
    .grid{grid-template-columns:1fr;}
    .section-pad{padding:4rem 0;}
    .ghost-title{opacity:.07;}
    .section-photo img{height:240px;}
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{transition:none; opacity:1; transform:none;}
    html{scroll-behavior:auto;}
  }