:root{
    --stone:#ECE7DB; --stone-2:#E4DECF; --panel:#F3EFE6;
    --ink:#24271E; --ink-soft:#565845; --sage:#6C7052; --sage-deep:#565A3F;
    --brass:#9C7C4A; --line:rgba(36,39,30,.16); --line-soft:rgba(36,39,30,.09);
    --over:rgba(20,22,15,.42);
    --font-display:'Didot','Bodoni 72','Hoefler Text',Georgia,'Times New Roman',serif;
    --font-serif:'Hoefler Text','Baskerville','Iowan Old Style',Georgia,serif;
    --font-sans:'Avenir Next','Avenir','Segoe UI',system-ui,-apple-system,sans-serif;
    --maxw:1180px;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --stone:#14150F; --stone-2:#1C1E14; --panel:#1A1C12;
      --ink:#ECE7DB; --ink-soft:#B4B2A0; --sage:#A9AE86; --sage-deep:#BFC49B;
      --brass:#C8A972; --line:rgba(236,231,219,.16); --line-soft:rgba(236,231,219,.08);
      --over:rgba(10,11,7,.5);
    }
  }
  :root[data-theme="dark"]{
    --stone:#14150F; --stone-2:#1C1E14; --panel:#1A1C12;
    --ink:#ECE7DB; --ink-soft:#B4B2A0; --sage:#A9AE86; --sage-deep:#BFC49B;
    --brass:#C8A972; --line:rgba(236,231,219,.16); --line-soft:rgba(236,231,219,.08);
    --over:rgba(10,11,7,.5);
  }
  :root[data-theme="light"]{
    --stone:#ECE7DB; --stone-2:#E4DECF; --panel:#F3EFE6;
    --ink:#24271E; --ink-soft:#565845; --sage:#6C7052; --sage-deep:#565A3F;
    --brass:#9C7C4A; --line:rgba(36,39,30,.16); --line-soft:rgba(36,39,30,.09);
    --over:rgba(20,22,15,.42);
  }

  *{box-sizing:border-box}
  body{margin:0}
  .doc{
    background:var(--stone); color:var(--ink);
    font-family:var(--font-sans); font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased; letter-spacing:.005em;
    overflow-x:hidden;
  }
  .doc img{display:block; max-width:100%}

  /* ---- type ---- */
  .eyebrow{font-family:var(--font-sans); font-size:.72rem; font-weight:600;
    letter-spacing:.32em; text-transform:uppercase; color:var(--sage);}
  h1,h2,h3{font-family:var(--font-display); font-weight:400; text-wrap:balance;
    line-height:1.04; letter-spacing:.005em; margin:0;}
  .serif{font-family:var(--font-serif);}
  .num{font-variant-numeric:tabular-nums;}

  /* ---- shell / layout ---- */
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(22px,5vw,64px);}
  section{position:relative}
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease;}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* ---- fixed chrome ---- */
  .brandbar{position:fixed; top:0; left:0; right:0; z-index:40; display:flex;
    justify-content:space-between; align-items:center; padding:18px clamp(22px,5vw,44px);
    mix-blend-mode:difference; pointer-events:none;}
  .brandbar .wm{font-family:var(--font-display); font-size:1.05rem; letter-spacing:.14em;
    color:#fff; text-transform:uppercase;}
  .brandbar .wm small{font-family:var(--font-sans); font-size:.6rem; letter-spacing:.34em;
    display:block; margin-top:2px; opacity:.85; font-weight:600;}
  .brandbar .tag{font-family:var(--font-sans); font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:#fff; font-weight:600;}

  nav.index{position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:35;
    display:flex; flex-direction:column; gap:13px; align-items:flex-end;}
  nav.index a{display:flex; align-items:center; gap:9px; text-decoration:none;
    font-family:var(--font-sans); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-soft); opacity:.5; transition:opacity .3s, color .3s;}
  nav.index a .dot{width:6px; height:6px; border-radius:50%; background:currentColor;
    transition:transform .3s, background .3s;}
  nav.index a .lbl{opacity:0; transform:translateX(6px); transition:opacity .3s, transform .3s;}
  nav.index a:hover{opacity:1; color:var(--ink)}
  nav.index a:hover .lbl{opacity:1; transform:none}
  nav.index a.active{opacity:1; color:var(--sage)}
  nav.index a.active .dot{transform:scale(1.7); background:var(--sage)}
  nav.index a.active .lbl{opacity:1; transform:none; color:var(--sage)}
  @media (max-width:820px){
    nav.index{display:none}
    .brandbar{position:absolute; mix-blend-mode:normal}
    .brandbar .wm,.brandbar .tag{color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.5)}
  }
  @media (max-width:640px){
    .brandbar{padding:13px 18px}
    .brandbar .wm{font-size:.88rem; letter-spacing:.1em}
    .brandbar .wm small{font-size:.5rem; letter-spacing:.26em}
    .brandbar .tag{font-size:.52rem; letter-spacing:.22em}
    .cover h1{font-size:clamp(2.5rem,12vw,4rem)}
    .cover .sub{font-size:1rem}
    .cover .meta{font-size:.62rem; gap:9px 16px}
    .intention .lede,.notes .lede,.planintro{font-size:1.08rem}
    .chapmark .rn{font-size:1rem}
    .moves .mn{font-size:1.15rem}

    .spread.caplay .cap{position:static; background:none; padding:16px 22px 6px; color:var(--ink)}
    .spread.caplay .cap .eyebrow{color:var(--sage); font-size:.58rem; letter-spacing:.22em}
    .spread.caplay .cap h2{color:var(--ink); font-size:clamp(1.55rem,7.2vw,2.1rem); margin:.1em 0 .26em}
    .spread.caplay .cap p{color:var(--ink-soft); font-family:var(--font-serif); font-size:.98rem; line-height:1.5; max-width:100%}
  }

  /* ---- COVER ---- */
  .cover{height:100svh; min-height:600px; position:relative; display:flex; align-items:flex-end;
    overflow:hidden;}
  .cover .bg{position:absolute; inset:0; background-size:cover; background-position:center 40%;}
  .cover .bg::after{content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(15,17,11,.28) 0%, rgba(15,17,11,.05) 30%, rgba(15,17,11,.55) 78%, rgba(15,17,11,.8) 100%);}
  .cover .inner{position:relative; z-index:2; width:100%; color:#F4F1E8;
    padding:0 clamp(22px,5vw,64px) clamp(40px,7vh,84px); max-width:var(--maxw); margin:0 auto;}
  .cover .kick{color:#E7DFC8; opacity:.95}
  .cover h1{font-size:clamp(2.9rem,8.2vw,7rem); color:#F6F2E9; margin:.18em 0 .16em;
    letter-spacing:.01em;}
  .cover h1 em{font-style:italic; color:#EBE3CC}
  .cover .sub{font-family:var(--font-serif); font-size:clamp(1.05rem,2.3vw,1.5rem);
    color:#EDE7D7; max-width:34ch; line-height:1.4;}
  .cover .meta{margin-top:26px; display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center;
    font-family:var(--font-sans); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
    color:#E4DDC9;}
  .cover .meta .b{width:1px; height:13px; background:rgba(244,241,232,.4)}
  .scrollcue{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3;
    font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:#EDE7D7; opacity:.8;
    display:flex; flex-direction:column; align-items:center; gap:7px;}
  .scrollcue .ln{width:1px; height:34px; background:linear-gradient(#EDE7D7, transparent);
    animation:cue 2.4s ease-in-out infinite;}
  @keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}
  @media (prefers-reduced-motion:reduce){.scrollcue .ln{animation:none}}

  /* ---- generic section spacing ---- */
  .band{padding:clamp(76px,12vh,150px) 0;}
  .band.tight{padding:clamp(54px,8vh,96px) 0;}
  .chapmark{display:flex; align-items:baseline; gap:16px; margin-bottom:30px;}
  .chapmark .rn{font-family:var(--font-display); font-size:1.2rem; color:var(--brass);
    letter-spacing:.1em;}
  .chapmark .rule{flex:1; height:1px; background:var(--line);}

  /* ---- intention ---- */
  .intention{max-width:920px}
  .intention h2{font-size:clamp(2rem,4.6vw,3.4rem); margin-bottom:.5em}
  .intention .lede{font-family:var(--font-serif); font-size:clamp(1.15rem,2.4vw,1.5rem);
    line-height:1.55; color:var(--ink); max-width:40ch;}
  .intention .cols{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:40px;
    max-width:760px;}
  .intention .cols p{margin:0; color:var(--ink-soft); font-size:.98rem; line-height:1.7}
  @media (max-width:680px){.intention .cols{grid-template-columns:1fr; gap:20px}}

  /* ---- plan section ---- */
  .planwrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:start}
  @media (max-width:900px){.planwrap{grid-template-columns:1fr; gap:34px}}
  .planfig{background:var(--panel); border:1px solid var(--line); padding:clamp(16px,3vw,30px);
    border-radius:2px; position:relative;}
  .planfig img{width:100%}
  .planfig figcaption{margin-top:14px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-soft); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
  .plabel{position:absolute; top:0; left:0; display:inline-flex; align-items:center; gap:10px;
    background:var(--ink); color:var(--stone); font-family:var(--font-sans); font-weight:600;
    font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; padding:9px 15px; border-radius:0 0 3px 0; z-index:2}
  .plabel .pn{font-family:var(--font-display); font-size:1rem; letter-spacing:.05em; color:var(--brass);}

  .incl h3{font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.6em}
  .incl p{color:var(--ink-soft); max-width:44ch; line-height:1.7; margin:0 0 22px}
  .incl ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0}
  .incl li{font-size:.92rem; color:var(--ink); border-top:1px solid var(--line); padding:11px 2px;
    display:flex; align-items:baseline; gap:12px}
  .incl li:last-child{border-bottom:1px solid var(--line)}
  .incl li .n{font-family:var(--font-display); color:var(--brass); font-size:.85rem; min-width:22px;
    font-variant-numeric:tabular-nums}

  .moves{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:26px}
  .moves li{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start}
  .moves .mn{font-family:var(--font-display); font-size:1.35rem; color:var(--sage); line-height:1;
    padding-top:2px; font-variant-numeric:tabular-nums;}
  .moves h3{font-family:var(--font-sans); font-weight:600; font-size:.86rem; letter-spacing:.03em;
    text-transform:uppercase; margin-bottom:6px; color:var(--ink)}
  .moves p{margin:0; color:var(--ink-soft); font-size:.96rem; line-height:1.62}
  .moves .flag{display:inline-block; margin-top:8px; font-size:.66rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--brass); border:1px solid var(--line); padding:3px 9px;
    border-radius:2px;}
  .moveshead{font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.1rem);
    margin:clamp(46px,7vh,84px) 0 0; padding-top:clamp(30px,4vh,40px); border-top:1px solid var(--line);}
  .moves.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:34px clamp(30px,4vw,56px); margin-top:clamp(30px,5vh,54px);}
  .moves.grid li{gap:14px}

  /* ---- full-bleed image spreads ---- */
  .spread{position:relative; width:100vw; left:50%; margin-left:-50vw; margin-right:-50vw;}
  .spread img{width:100%; height:auto}
  .spread.tall img{max-height:92svh; object-fit:cover; width:100%}
  .caplay{position:relative}
  .caplay .cap{position:absolute; left:0; bottom:0; right:0;
    padding:clamp(28px,6vw,72px) clamp(22px,5vw,64px);
    background:linear-gradient(0deg, rgba(14,16,10,.82) 0%, rgba(14,16,10,.35) 55%, transparent 100%);
    color:#F3EFE6;}
  .caplay .cap .wrapc{max-width:var(--maxw); margin:0 auto}
  .caplay .cap .eyebrow{color:#D9D2BB}
  .caplay .cap h2{font-size:clamp(2rem,5vw,3.6rem); color:#F6F2E9; margin:.14em 0 .3em}
  .caplay .cap p{max-width:52ch; color:#ECE6D6; font-family:var(--font-serif);
    font-size:clamp(1rem,1.9vw,1.22rem); line-height:1.5; margin:0}

  /* ---- room chapters with boards ---- */
  .roomhead{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,5vw,60px); align-items:start;
    margin-bottom:clamp(26px,4vh,44px)}
  @media (max-width:760px){.roomhead{grid-template-columns:1fr; gap:12px}}
  .roomhead .rn{font-family:var(--font-display); color:var(--brass); font-size:1.1rem; white-space:nowrap}
  .roomhead h2{font-size:clamp(1.9rem,4.4vw,3rem)}
  .roomhead p{margin:.5em 0 0; color:var(--ink-soft); max-width:56ch; font-size:1rem; line-height:1.7}
  .roomhead p.serif{font-family:var(--font-serif); color:var(--ink); font-size:1.12rem; line-height:1.55}

  .board{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px)}
  .board figure{margin:0}
  .board img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); background:var(--panel)}
  .board.tallcards img{aspect-ratio:3/4}
  .board.two{grid-template-columns:1fr 1fr}
  @media (max-width:820px){.board{grid-template-columns:1fr 1fr}}
  @media (max-width:520px){.board{grid-template-columns:1fr}
    .board img{aspect-ratio:4/3}
    .board.tallcards{grid-template-columns:1fr 1fr}
  }

  /* ---- notes / next steps ---- */
  .notes{background:var(--stone-2)}
  .notes .grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:start}
  @media (max-width:780px){.notes .grid{grid-template-columns:1fr; gap:34px}}
  .notes h2{font-size:clamp(2rem,4.6vw,3rem); margin-bottom:.5em}
  .notes .lede{font-family:var(--font-serif); font-size:1.2rem; line-height:1.55; color:var(--ink); max-width:38ch}
  .notes dl{margin:0; display:flex; flex-direction:column; gap:20px}
  .notes dt{font-family:var(--font-sans); font-weight:600; font-size:.8rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--sage-deep); margin-bottom:4px}
  .notes dd{margin:0; color:var(--ink-soft); font-size:.96rem; line-height:1.62}
  .notes dd + dt{border-top:1px solid var(--line); padding-top:20px}

  /* ---- closing ---- */
  .closing{text-align:center; padding:clamp(80px,14vh,170px) 0}
  .closing .mono{font-family:var(--font-display); font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.06;
    text-wrap:balance; max-width:16ch; margin:0 auto .5em}
  .closing .mono em{font-style:italic; color:var(--sage)}
  .closing .sig{margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:6px}
  .closing .sig .wm{font-family:var(--font-display); font-size:1.4rem; letter-spacing:.16em; text-transform:uppercase}
  .closing .sig small{font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); font-weight:600}
  .closing .fine{margin-top:30px; font-size:.72rem; color:var(--ink-soft); letter-spacing:.04em; max-width:44ch; margin-left:auto;margin-right:auto; line-height:1.6}

  hr.hair{border:0; height:1px; background:var(--line); max-width:var(--maxw); margin:0 auto}

  /* ---- presupuesto ---- */
  .budintro{font-family:var(--font-serif); font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.55;
    color:var(--ink-soft); max-width:56ch; margin:0 0 clamp(10px,2vh,20px)}
  .budroom{margin-top:clamp(34px,5vh,52px)}
  .budroom h3{font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.8rem);
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    border-bottom:1px solid var(--line); padding-bottom:10px}
  .budroom h3 .rsub{font-family:var(--font-display); font-size:.95rem; color:var(--brass);
    white-space:nowrap; font-variant-numeric:tabular-nums}
  .budgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:clamp(14px,2vw,22px); margin-top:20px}
  .budcard{background:var(--panel); border:1px solid var(--line); border-radius:2px;
    display:flex; flex-direction:column; overflow:hidden}
  .budcard img{width:100%; aspect-ratio:1/1; object-fit:contain; border-bottom:1px solid var(--line-soft);
    background:#FBFAF6; padding:8px; box-sizing:border-box}
  .budcard .bi{padding:13px 15px 15px; display:flex; flex-direction:column; gap:5px; flex:1}
  .budcard .nm{font-size:.89rem; line-height:1.38; color:var(--ink)}
  .budcard .meta{font-size:.74rem; color:var(--ink-soft); line-height:1.4}
  .budcard .qty{font-size:.72rem; color:var(--ink-soft); letter-spacing:.04em}
  .budcard .amt{font-family:var(--font-display); font-size:1.18rem; margin-top:auto; padding-top:8px;
    font-variant-numeric:tabular-nums}
  .badge{display:inline-block; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
    border:1px solid var(--line); color:var(--sage-deep); padding:3px 9px; border-radius:2px; font-weight:600}
  .budcard .badge{margin-top:auto; align-self:flex-start}
  @media (max-width:520px){.budgrid{grid-template-columns:1fr 1fr}}
  .noimg{width:100%; aspect-ratio:1/1; background:var(--stone-2); border-bottom:1px solid var(--line-soft)}
  .budnote{margin-top:18px; font-family:var(--font-serif); color:var(--ink-soft); font-size:1rem;
    max-width:62ch; line-height:1.6}
  .budsum{margin-top:clamp(44px,6vh,64px); border-top:1px solid var(--line); max-width:560px; margin-left:auto}
  .budsum .row{display:flex; justify-content:space-between; align-items:baseline; gap:20px;
    padding:12px 2px; border-bottom:1px solid var(--line-soft)}
  .budsum .row .k{color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase; font-size:.74rem; font-weight:600}
  .budsum .row .v{font-family:var(--font-display); font-size:1.15rem; font-variant-numeric:tabular-nums}
  .budtotal{margin-top:clamp(20px,3vh,30px); background:var(--ink); color:var(--stone);
    padding:clamp(24px,4vw,44px); display:flex; justify-content:space-between; align-items:baseline;
    gap:16px 30px; flex-wrap:wrap}
  .budtotal .t{font-family:var(--font-display); font-size:clamp(1.3rem,3vw,2rem)}
  .budtotal .t small{display:block; font-family:var(--font-sans); font-size:.66rem; letter-spacing:.24em;
    text-transform:uppercase; opacity:.7; margin-top:6px; font-weight:600}
  .budtotal .n{font-family:var(--font-display); font-size:clamp(2rem,5vw,3.2rem); color:var(--brass);
    font-variant-numeric:tabular-nums}
  .exgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:18px 16px; margin-top:22px}
  .exgrid figure{margin:0}
  .exgrid img{width:100%; aspect-ratio:1; object-fit:contain; border:1px solid var(--line); background:#FBFAF6; padding:6px; box-sizing:border-box}
  .exgrid figcaption{font-size:.72rem; color:var(--ink-soft); margin-top:6px; line-height:1.35}

  .wrap-wide{max-width:1560px; margin:0 auto; padding:0 clamp(22px,5vw,64px);}

  @media print{
    nav.index,.brandbar,.scrollcue{display:none!important}
    .reveal{opacity:1!important;transform:none!important}
    .cover{height:92vh}
    section{break-inside:avoid}
    .spread{page-break-before:auto}
  }