/* CASTILLOWORKS SITE 1-B : THE COURTYARD
   A casa in the Barragan tradition: six rooms around one courtyard,
   flat painted walls, heavy doors, and real weather: the site runs on
   San Antonio's actual sun. Light theme = the courtyard at noon,
   dark theme = the courtyard at night. System preference by default,
   header toggle to override.
   Radius: sharp everywhere; the arch is the single sanctioned curve.
   Rule: one wall color per room. Never all colors in a band. */

@font-face{font-family:'Tanker';src:url(/assets/fonts/tanker-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Supreme';src:url(/assets/fonts/supreme-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Supreme';src:url(/assets/fonts/supreme-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Supreme';src:url(/assets/fonts/supreme-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --plaster:#f2e6d3;
  --plaster2:#e9d9bf;
  --paper:#f9efe0;
  --ink:#221d28;
  --night:#16121e;
  --night2:#1f1a29;
  --iron:#2b4cc4;
  --gc:#c05e7a;
  --nn:#177f9b;
  --bro:#a83c22;
  --prod:#146c4b;
  --cfmmw:#c08a0c;
  --c:var(--ink);
  --ease:cubic-bezier(.65,0,.25,1);

  /* day tokens */
  --bg:var(--plaster);
  --bg2:var(--plaster2);
  --tx:var(--ink);
  --dim:#63596a;
  --line:rgba(34,29,40,.35);
  --shadowc:rgba(34,29,40,.85);
  --wallshade:0deg, transparent, transparent;
}
html[data-theme="dark"]{
  --bg:var(--night);
  --bg2:var(--night2);
  --tx:#efe3cf;
  --dim:#a99db4;
  --line:rgba(239,227,207,.3);
  --shadowc:rgba(0,0,0,.7);
  --wallshade:0deg, rgba(10,7,14,.34), rgba(10,7,14,.34);
}
body.t-iron{--c:var(--iron)} body.t-gc{--c:var(--gc)} body.t-nn{--c:var(--nn)}
body.t-bro{--c:var(--bro)} body.t-prod{--c:var(--prod)} body.t-cfmmw{--c:var(--cfmmw)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--tx);
  font:400 1.03rem/1.66 'Supreme',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .45s ease,color .45s ease;
}
::selection{background:var(--tx);color:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Tanker',sans-serif;font-weight:400;line-height:.98;letter-spacing:.005em;text-transform:uppercase}
button{font:inherit;cursor:pointer}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px}

/* room pages: the whole page is the wall */
body.room{background:color-mix(in srgb,var(--c) 88%,var(--bg));color:var(--paper)}
html[data-theme="dark"] body.room{background:color-mix(in srgb,var(--c) 55%,var(--night))}

/* ---------- the sun / the moon (hard light across the walls) ---------- */
#sun{position:fixed;inset:-22%;z-index:6;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(var(--sunang,113deg),transparent 54%,rgba(34,29,40,.09) 54.4%);transition:opacity .5s}
html[data-theme="dark"] #sun{mix-blend-mode:screen;
  background:linear-gradient(var(--sunang,113deg),transparent 55%,rgba(214,222,255,.05) 55.4%)}
html.flat #sun{display:none}

/* ---------- header ---------- */
header.bar{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--tx);transition:background .45s ease}
body.room header.bar{background:color-mix(in srgb,var(--c) 88%,var(--bg));border-color:var(--paper)}
html[data-theme="dark"] body.room header.bar{background:color-mix(in srgb,var(--c) 55%,var(--night))}
header.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:'Tanker',sans-serif;font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase}
.brand .tile{width:30px;height:30px}
.brand .lite{opacity:.55}
.blinks{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.blinks a{text-decoration:none;font-weight:500;font-size:.95rem;opacity:.78;transition:opacity .2s}
.blinks a:hover{opacity:1}

/* theme toggle */
#themer{width:42px;height:42px;border:2px solid currentColor;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
#themer:hover{transform:rotate(20deg)}
#themer svg{width:20px;height:20px;fill:currentColor}
#themer .moon{display:none}
html[data-theme="dark"] #themer .moon{display:block}
html[data-theme="dark"] #themer .sunico{display:none}

/* buttons */
.cta{display:inline-block;background:var(--tx);color:var(--bg) !important;text-decoration:none;font-weight:700;font-size:.93rem;padding:13px 26px;border:2px solid var(--tx);transition:background .2s,color .2s,box-shadow .25s var(--ease),transform .25s var(--ease);cursor:pointer}
.cta:hover{background:transparent;color:var(--tx) !important;box-shadow:6px 6px 0 var(--tx);transform:translate(-2px,-2px)}
.cta:active{transform:none;box-shadow:none}
.cta.line{background:transparent;color:var(--tx) !important}
.cta.line:hover{background:var(--tx);color:var(--bg) !important}
body.room .cta{background:var(--paper);color:#221d28 !important;border-color:var(--paper)}
body.room .cta:hover{background:transparent;color:var(--paper) !important;box-shadow:6px 6px 0 var(--paper)}
body.room .cta.line{background:transparent;color:var(--paper) !important}
body.room .cta.line:hover{background:var(--paper);color:#221d28 !important}

.tile{display:block}
.tile svg{width:100%;height:100%;display:block}

/* ---------- hub masthead ---------- */
.masthead{padding:88px 0 64px;border-bottom:2px solid var(--tx)}
.masthead h1{font-size:clamp(3.2rem,12.4vw,10.6rem);line-height:.92;margin:20px 0 26px}
.masthead h1 .ch{display:inline-block}
.masthead .top{display:flex;align-items:center;gap:18px}
.masthead .top .tile{width:54px;height:54px}
.masthead .kick{font-weight:700;font-size:.92rem;letter-spacing:.14em;text-transform:uppercase}
.masthead .lead{font-size:1.16rem;color:var(--dim);max-width:52ch;margin-bottom:32px}
.mrow{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* ---------- the courtyard ---------- */
.courtyard{padding:74px 0 44px}
.cgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;perspective:1400px}
.wall{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  padding:32px;min-height:440px;background:var(--c);color:var(--paper);text-decoration:none;
  background-image:linear-gradient(var(--wallshade));
  transition:box-shadow .3s var(--ease);transform-style:preserve-3d;will-change:transform}
.wall::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(249,239,224,.26),transparent);
  transform:translateX(-170%);transition:transform .85s var(--ease);pointer-events:none}
.wall:hover{box-shadow:16px 16px 0 var(--shadowc)}
.wall:hover::after{transform:translateX(540%)}
.wall .tile{width:64px;height:64px}
.wall h3{font-size:clamp(2.1rem,3.9vw,3.6rem);margin:10px 0 8px}
.wall .whatis{font-weight:700;font-size:.84rem;letter-spacing:.13em;text-transform:uppercase;opacity:.85}
.wall p.one{opacity:.92;max-width:40ch;font-size:.99rem}
.wall .enter{display:inline-flex;align-items:center;gap:10px;font-weight:700;margin-top:14px}
.wall .enter svg{width:22px;height:22px;transition:transform .25s var(--ease)}
.wall:hover .enter svg{transform:translateX(6px)}
.w7{grid-column:span 7}.w5{grid-column:span 5}.w6{grid-column:span 6}
.wtall{min-height:520px}

/* ---------- the sky dial ---------- */
.sky{padding:100px 0}
.skybox{border:2px solid var(--tx);padding:0;overflow:hidden;position:relative;background:var(--bg2);transition:background .45s ease}
.skybox svg{display:block;width:100%;height:auto}
.sky .readouts{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--tx)}
.sky .ro{padding:22px 20px;border-right:2px solid var(--tx)}
.sky .ro:last-child{border-right:none}
.sky .ro b{display:block;font-family:'Tanker',sans-serif;font-weight:400;font-size:clamp(1.15rem,2vw,1.7rem);font-variant-numeric:tabular-nums;min-height:1.3em}
.sky .ro span{font-size:.85rem;font-weight:500;opacity:.6}
@media (max-width:760px){.sky .readouts{grid-template-columns:1fr 1fr}.sky .ro:nth-child(2){border-right:none}.sky .ro:nth-child(1),.sky .ro:nth-child(2){border-bottom:2px solid var(--tx)}}

/* ---------- manifesto ---------- */
.manifesto{padding:120px 0 110px}
.manifesto p{font-family:'Tanker',sans-serif;text-transform:uppercase;font-size:clamp(1.75rem,4.2vw,3.4rem);line-height:1.1;max-width:24ch}
.manifesto .ln{display:block;overflow:hidden}
.manifesto em{font-style:normal;border-bottom:6px solid var(--tx)}
body.room .manifesto em{border-color:var(--paper)}

/* ---------- sections ---------- */
.sect{padding:100px 0}
.sect h2{font-size:clamp(2.2rem,5vw,3.8rem);max-width:22ch}
.sect h2 em{font-style:normal;opacity:.5}
.sub{color:var(--dim);max-width:62ch;margin-top:18px}
body.room .sub{color:var(--paper);opacity:.88}
.dimtxt{color:var(--dim)}
body.room .dimtxt{color:var(--paper);opacity:.78}

/* ---------- ledger (room pages: one quiet live line) ---------- */
.ledger{display:flex;gap:26px;flex-wrap:wrap;border-top:2px solid rgba(249,239,224,.4);margin-top:56px;padding:16px 0 0;font-size:.88rem;font-weight:500;opacity:.92}
.ledger b{font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- niches ---------- */
.niches{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:46px}
.niche{background:rgba(20,15,25,.2);border:2px solid rgba(249,239,224,.3);padding:30px 26px;position:relative;transition:border-color .25s,transform .25s var(--ease)}
.niche:hover{border-color:var(--paper);transform:translate(-3px,-3px)}
.niche .tag{display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;background:var(--paper);color:#221d28;padding:4px 10px;margin-bottom:16px}
.niche h3{font-size:1.45rem;margin-bottom:12px}
.niche p{opacity:.92;font-size:.98rem}
.niche .price{font-family:'Tanker',sans-serif;font-size:1.9rem;margin-bottom:10px}
.niche .stamp{position:absolute;top:18px;right:18px;font-size:.78rem;font-weight:700;letter-spacing:.08em;border:2px solid rgba(249,239,224,.5);padding:4px 10px}

/* plaster variants (hub/about/legal pages) */
body:not(.room) .niche,body:not(.room) .stat,body:not(.room) .rstop{background:var(--bg2);border-color:var(--tx)}
body:not(.room) .niche .tag{background:var(--tx);color:var(--bg)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:46px 0 26px}
.stat{background:rgba(20,15,25,.2);border:2px solid rgba(249,239,224,.3);padding:26px 22px}
.stat b{display:block;font-family:'Tanker',sans-serif;font-weight:400;font-size:2.3rem;font-variant-numeric:tabular-nums}
.stat span{font-size:.88rem;font-weight:500;opacity:.75}

/* ---------- route ---------- */
.route{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:46px}
.rstop{background:rgba(20,15,25,.2);border:2px solid rgba(249,239,224,.3);padding:26px 22px}
.rstop .tile{width:44px;height:44px;margin-bottom:16px}
.rstop h3{font-size:1.2rem;margin-bottom:8px}
.rstop p{opacity:.9;font-size:.95rem}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:10px}
.fact{background:var(--bg2);border:2px solid var(--tx);padding:30px 26px;transition:background .45s ease}
.fact .k{font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.fact h3{font-size:1.35rem;margin-bottom:10px}
.fact p{color:var(--dim);font-size:.97rem}

/* ---------- faq ---------- */
.faq{max-width:840px;margin-top:40px}
.faq details{border-top:2px solid rgba(249,239,224,.4)}
body:not(.room) .faq details{border-color:var(--line)}
.faq details:last-child{border-bottom:2px solid rgba(249,239,224,.4)}
body:not(.room) .faq details:last-child{border-color:var(--line)}
.faq summary{cursor:pointer;font-family:'Tanker',sans-serif;text-transform:uppercase;font-size:1.15rem;padding:20px 0;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Supreme',sans-serif;font-size:1.5rem;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;opacity:.9;max-width:70ch}

/* ---------- builder ---------- */
.builder{border:2px solid rgba(249,239,224,.4);padding:34px 30px;max-width:880px;margin-top:42px;background:rgba(20,15,25,.16)}
body:not(.room) .builder{border-color:var(--tx);background:var(--bg2)}
.bgroup{margin-bottom:22px}
.bgroup::before{content:attr(data-label);display:block;font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:10px}
.chip{background:transparent;border:2px solid rgba(249,239,224,.45);color:var(--paper);padding:9px 18px;margin:0 8px 8px 0;font-size:.92rem;font-weight:500;transition:all .18s}
body:not(.room) .chip{border-color:var(--line);color:var(--tx)}
.chip:hover{border-color:var(--paper)}
body:not(.room) .chip:hover{border-color:var(--tx)}
.chip.on{background:var(--paper);border-color:var(--paper);color:#221d28;font-weight:700}
body:not(.room) .chip.on{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.bsummary{border-top:2px solid rgba(249,239,224,.3);padding:18px 0;font-size:.94rem;min-height:2.4em;opacity:.95}
body:not(.room) .bsummary{border-color:var(--line)}
.bsummary span::before{content:"Your selection: ";font-weight:700}

/* ---------- band ---------- */
.band{padding:120px 0;border-top:2px solid var(--tx)}
body.room .band{border-color:rgba(249,239,224,.5)}
.band blockquote{font-family:'Tanker',sans-serif;text-transform:uppercase;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.08;max-width:22ch}
.band blockquote em{font-style:normal;opacity:.5}
.band .after{margin-top:24px;max-width:60ch;color:var(--dim)}
body.room .band .after{color:var(--paper);opacity:.9}

/* ---------- legal ---------- */
.legal{background:var(--bg);color:var(--tx);padding:100px 0;border-top:8px solid var(--tx)}
body.room .legal{background:var(--bg);border-top-color:rgba(20,15,25,.6)}
.legal h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:34px}
.legal h3{font-family:'Supreme',sans-serif;text-transform:none;font-weight:700;font-size:1.1rem;margin:28px 0 10px}
.legal p{color:var(--dim);max-width:76ch;margin-bottom:14px}
.legal a{color:var(--tx)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:44px}
.lgrid a{display:block;background:var(--c);color:var(--paper);padding:26px;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.lgrid a:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--shadowc)}
.lgrid h3{font-size:1.3rem;margin-bottom:8px}
.lgrid p{opacity:.92;font-size:.93rem}

/* ---------- hero (room pages) ---------- */
.hero{padding:92px 0 0}
.hero .wrap{display:grid;grid-template-columns:7fr 4fr;gap:60px;align-items:end}
.hero h1{font-size:clamp(2.8rem,7vw,5.8rem);margin:16px 0 24px}
.kick{font-weight:700;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.lead{font-size:1.13rem;opacity:.92;max-width:54ch;margin-bottom:32px}
.hero .tile.big{width:min(220px,44vw);height:auto;margin:0 auto 12px}
.portrait{position:relative;padding-bottom:10px}
.portrait img{width:100%;height:auto;border:3px solid var(--tx);border-radius:50% 50% 0 0 / 32% 32% 0 0}
.portrait figcaption{font-size:.88rem;color:var(--dim);margin-top:12px}
.mrow2{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:#171220;color:#efe3cf;padding:80px 0 40px;position:relative;overflow:hidden}
footer .rook-mark{position:absolute;right:-40px;bottom:-70px;width:360px;opacity:.06;pointer-events:none}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;position:relative}
.fbrand p{opacity:.7;font-size:.95rem;margin-top:16px;max-width:34ch}
footer h4{font-family:'Tanker',sans-serif;font-weight:400;text-transform:uppercase;font-size:1.05rem;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer li a{text-decoration:none;opacity:.72;font-size:.95rem;transition:opacity .2s}
footer li a:hover{opacity:1}
.fbase{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(239,227,207,.22);margin-top:50px;padding-top:26px;opacity:.55;font-size:.88rem;position:relative}

/* ---------- reveals: hard upward wipe ---------- */
.rv{clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)}
.rv.on{clip-path:inset(0 0 -10% 0)}
html.flat .rv,html.nojs .rv{clip-path:none}
@media (prefers-reduced-motion:reduce){.rv{clip-path:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cgrid{grid-template-columns:1fr 1fr}
  .w7,.w5,.w6{grid-column:auto}
  .wall,.wtall{min-height:380px}
  .hero .wrap{grid-template-columns:1fr;gap:36px;align-items:start}
  .hero .tile.big{margin:0}
  .stats{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .cgrid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .masthead{padding:56px 0 44px}
  .blinks{gap:14px}
}
html.flat .masthead,html.flat .hero{padding-top:60px}

/* theme flip: view-transition circle wipe */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.hero h1 em,.masthead h1 em{font-style:normal;opacity:.55}