/* AUQUA — The Digital House. Light, not colour, carries meaning: each room has its hour. */

@font-face{font-family:"Archivo";src:url("fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s;animation-timing-function:cubic-bezier(.3,.6,.2,1)}

:root{--line:color-mix(in srgb,var(--fg) 17%,transparent);--soft:color-mix(in srgb,var(--fg) 6%,transparent);--side:300px;--pad:clamp(20px,4vw,40px);--sans:"Archivo",ui-sans-serif,system-ui,sans-serif;--mono:"Plex Mono",ui-monospace,Menlo,monospace}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body.auqua{margin:0;background:var(--bg);color:var(--fg);font:400 16.5px/1.65 var(--sans)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:8px 12px;z-index:99}.skip:focus{left:8px}

.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.dim{opacity:.58}
.label{margin:0 0 14px}
.wide{max-width:60ch}

/* ---------- House frame ---------- */
.house{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:32px 28px;border-right:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-stretch:125%;letter-spacing:.34em;font-size:15px;text-transform:uppercase}
.brand-mark{width:28px;height:28px}
.brand-line{margin:12px 0 0;font-size:13px;opacity:.6}
.room-list{list-style:none;margin:22px 0 0;padding:0;font-size:13.5px}
.room-list li+li{margin-top:5px}
.room-list a{display:flex;align-items:baseline;gap:8px;opacity:.55;transition:opacity .3s}
.room-list a:hover,.room-list a[aria-current]{opacity:1}
.room-list .hour{margin-left:auto}
.lang{display:flex;gap:8px;align-items:center}
.lang a{opacity:.5}.lang a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}

.plan{width:100%;display:block;overflow:visible}
.plan-wall{fill:none;stroke:var(--fg);stroke-width:2}
.plan-room rect{fill:transparent;stroke:var(--fg);stroke-opacity:.55;stroke-width:.8;transition:fill .4s}
.plan-room:hover rect{fill:var(--soft)}
.plan-room.is-here rect{fill:color-mix(in srgb,var(--fg) 10%,transparent)}
.plan-room .hatch{stroke:var(--fg);stroke-opacity:.22;stroke-width:.5}
.plan-n{font:6px var(--mono);fill:var(--fg);fill-opacity:.5;letter-spacing:.06em}
.plan-name{font:600 7.4px var(--sans);font-stretch:112%;fill:var(--fg);fill-opacity:.75}
.plan-room.is-here .plan-name,.plan-room.is-here .plan-n{fill-opacity:1}
.plan-here{fill:var(--accent)}
.plan-door{stroke:var(--bg);stroke-width:2.6}

.room{min-width:0;display:flex;flex-direction:column}
.room-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 var(--pad);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(3px)}
.room-bar .brand-small{display:none}
.room-id{margin:0;display:flex;gap:14px;align-items:baseline}
.room-id strong{font-weight:600;font-stretch:118%;text-transform:uppercase;letter-spacing:.24em;font-size:13px}
.room-light{margin:0;display:flex;gap:14px;align-items:center}
.plan-toggle,.show-s{display:none}
.room-body{flex:1;padding:clamp(40px,6vw,64px) var(--pad) 96px;max-width:1240px;width:100%}
.room-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px var(--pad);border-top:1px solid var(--line)}

/* ---------- Type ---------- */
.room-title{margin-bottom:clamp(48px,7vw,80px)}
.room-title p{margin:0 0 8px}
.room-title p a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.display{margin:0;font-weight:600;font-stretch:125%;text-transform:uppercase;font-size:clamp(2.3rem,7.4vw,7.2rem);line-height:.86;letter-spacing:-.02em;overflow-wrap:anywhere}
.display-m{font-size:clamp(2rem,5vw,4.6rem);line-height:.92}
.statement{margin:0;font-weight:300;font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.03;letter-spacing:-.02em;max-width:18ch}
.lede{max-width:46ch;font-size:16.5px;opacity:.78;margin:20px 0 0}
.headline{margin:8px 0 0;font-weight:400;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.08;letter-spacing:-.018em;max-width:26ch}
.summary{max-width:58ch;font-size:18px;line-height:1.6;opacity:.85}
.section-title{margin:6px 0 0;font-weight:500;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15;letter-spacing:-.01em}
.body-text{max-width:62ch;font-size:17px;line-height:1.72;opacity:.88}
.body-text p{margin:0 0 1em}
.enter{display:inline-flex;align-items:center;gap:16px;margin-top:32px;font-stretch:118%;text-transform:uppercase;letter-spacing:.18em;font-size:14px}
.enter span{display:block;height:1px;width:48px;background:currentColor;transition:width .5s}
.enter:hover span{width:96px}
.dir-up{color:color-mix(in srgb,var(--fg) 55%,#3f7a64)}
.dir-down{color:color-mix(in srgb,var(--fg) 55%,#8a4b3b)}

/* ---------- Threshold ---------- */
.signature{padding-top:32px}
.bays{position:relative;display:grid;grid-template-columns:repeat(5,1fr)}
.bay{border-left:1px solid var(--line);text-align:center;padding:8px 0}.bay:last-of-type{border-right:1px solid var(--line)}
.bay span{font-weight:500;font-stretch:125%;font-size:clamp(3rem,11vw,10rem);line-height:1}
.axis{position:absolute;left:50%;top:-32px;bottom:-32px;width:1px;background-image:linear-gradient(var(--fg) 60%,transparent 0);background-size:1px 14px;opacity:.45}
.axis-label{position:absolute;left:50%;top:-34px;margin-left:8px;opacity:.6}
.bay-labels{display:grid;grid-template-columns:repeat(5,1fr);margin-top:12px}.bay-labels span{padding-left:8px}
.threshold{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,80px);margin-top:clamp(64px,10vw,120px);align-items:start}
.today{margin-top:clamp(72px,10vw,128px);padding-top:28px;border-top:1px solid var(--line)}
.directions{list-style:none;padding:0;margin:28px 0 0;max-width:640px}
.directions a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}

/* ---------- Apertures (photographs as openings) ---------- */
.aperture{margin:0}
.aperture-frame{position:relative;display:block;width:100%;padding:clamp(10px,1.6vw,20px);box-shadow:inset 0 0 0 1px var(--line);background:var(--soft);text-align:left}
.aperture-frame img{width:100%;height:100%;object-fit:cover;box-shadow:inset 0 10px 24px rgba(0,0,0,.25)}
.aperture-note{position:absolute;inset:auto clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px);padding:56px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#efe9dd;font-size:17px;line-height:1.35;opacity:0;transition:opacity .7s}
.aperture-frame[aria-pressed="true"] .aperture-note{opacity:1}
.aperture figcaption{margin-top:8px;text-align:right}
.intro-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,80px);align-items:start;margin-bottom:clamp(56px,8vw,96px)}
.intro-grid:not(:has(figure)){grid-template-columns:1fr}

/* ---------- Observatory ---------- */
.windows{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.window{display:flex;flex-direction:column;gap:18px;padding:22px;background:var(--bg);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .4s}
.window:hover{background:color-mix(in srgb,var(--fg) 4%,var(--bg))}
.window-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.window-title{font-weight:600;font-stretch:118%;text-transform:uppercase;letter-spacing:.06em;font-size:17px}
.window-chart{display:block}.window-chart .mono{display:block;margin-bottom:6px}
.window-text{font-size:14.5px;line-height:1.55;opacity:.85}.window-text strong{display:block;font-weight:500;margin-bottom:4px;opacity:1}
.window-foot{margin-top:auto}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart-bar{fill:color-mix(in srgb,var(--fg) 35%,transparent)}.chart-bar.is-last{fill:var(--accent)}
.chart-line{fill:none;stroke:var(--fg);stroke-width:1.3}
.chart-dot{fill:var(--accent)}
.chart-zero{stroke:var(--fg);stroke-opacity:.2;stroke-dasharray:2 4}
.sentiment{margin-top:clamp(72px,10vw,120px)}
.tone-scale{margin-top:32px;max-width:860px}
.tone-axis{display:grid;grid-template-columns:repeat(3,1fr);margin-left:calc(200px + 16px);margin-right:72px}.tone-axis span:nth-child(2){text-align:center}.tone-axis span:last-child{text-align:right}
.tone-row{display:grid;grid-template-columns:200px 1fr 56px;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.tone-track{position:relative;height:18px;background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
.tone-track::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.tone-now,.tone-avg{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%}
.tone-now{background:var(--accent)}
.tone-avg{border:1px solid var(--fg);opacity:.5}
.tone-val{text-align:right}
.tone-legend{margin-top:14px}.tone-now-key,.tone-avg-key{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);vertical-align:middle}.tone-avg-key{background:none;border:1px solid var(--fg)}

/* ---------- Topic ---------- */
.instruments{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.instrument{background:var(--bg);padding:18px}.instrument p{margin:0 0 10px}
.reading{margin-top:clamp(56px,8vw,88px);max-width:760px}
.split{display:grid;grid-template-columns:7fr 4fr;gap:clamp(32px,5vw,64px);margin-top:clamp(56px,8vw,88px)}
.signals{list-style:none;margin:0;padding:0}
.signals li{padding:16px 0;border-top:1px solid var(--line)}
.signals a{font-size:17px;line-height:1.35;font-weight:500}
.signals a:hover{text-decoration:underline;text-underline-offset:3px}
.signals p{margin:6px 0 0;font-size:14.5px;opacity:.8}
.sent.pos{color:#3f7a64}.sent.neg{color:#8a4b3b}
.companies{list-style:none;padding:0;margin:0 0 40px}
.companies li{display:grid;grid-template-columns:1fr 80px 28px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:14px}
.companies .bar{height:4px;background:var(--accent);opacity:.7}
.companies .mono{text-align:right}
.related{list-style:none;padding:0;margin:0}.related li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}

/* ---------- Library ---------- */
.shelf{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.book{display:grid;grid-template-columns:120px 1fr 200px;gap:24px;align-items:center;padding:24px;background:var(--bg);transition:background .4s}
.book:hover{background:color-mix(in srgb,var(--fg) 4%,var(--bg))}
.book-prob .num,.thesis-gauge .num{display:block;font-weight:300;font-size:40px;line-height:1;letter-spacing:-.02em}
.book-title{font-size:19px;line-height:1.35}
.book-meta{grid-column:2;grid-row:2;margin-top:-12px}
.book-chart{grid-row:1/span 2;grid-column:3}
.scale{position:relative;display:block;height:14px;background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
.scale span{position:absolute;top:0;bottom:0;width:2px;background:var(--accent)}
.thesis-statement{margin:8px 0 0;font-weight:300;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.08;letter-spacing:-.02em;max-width:26ch}
.thesis-gauge{display:grid;grid-template-columns:auto auto auto 1fr;gap:clamp(20px,4vw,56px);align-items:end;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.thesis-gauge .num-s{display:block;font-size:20px;line-height:1.2}
.thesis-gauge .mono{display:block;margin-top:6px}
.pages{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(48px,7vw,80px);border-top:1px solid var(--line)}
.page{padding:28px 40px 28px 0}
.page-against{padding:28px 0 28px 40px;border-left:1px solid var(--line)}
.q{font-size:20px;line-height:1.3;margin:24px 0 8px}
.conditions{padding-left:18px;font-size:16px}
.history{list-style:none;padding:0;margin:14px 0 0;line-height:2}
.evidence{margin-top:clamp(56px,8vw,88px)}
.stance-supports{color:#3f7a64}.stance-contradicts{color:#8a4b3b}

/* ---------- Workshop ---------- */
.room-workshop .room-body{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}
.method{list-style:none;padding:0;margin:clamp(48px,7vw,80px) 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--fg);border:2px solid var(--fg)}
.method li{background:var(--bg);padding:18px}
.method strong{display:block;margin:10px 0 6px;font-stretch:118%;text-transform:uppercase;letter-spacing:.08em}
.method p{margin:0;font-size:14px;line-height:1.5;opacity:.85}
.titleblock{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:clamp(48px,7vw,80px);border:2px solid var(--fg);background:var(--bg)}
.tb-cell{padding:14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tb-cell ul{list-style:none;padding:0;margin:8px 0 0;font-size:14px;line-height:1.5}

/* ---------- Memory ---------- */
.corridor{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.corridor li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.corridor a{display:flex;flex-direction:column;gap:12px;height:100%;padding:24px;background:var(--bg);transition:background .4s}
.corridor a:hover{background:color-mix(in srgb,var(--fg) 5%,var(--bg))}
.corridor-title{font-size:19px;line-height:1.3}
.corridor-dirs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:auto;opacity:.75}
.pager{display:flex;justify-content:space-between;margin-top:32px}
.brief-section{margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--line);max-width:780px}
.brief-section p.mono a{text-decoration:underline;text-underline-offset:3px}
.refs{list-style:none;padding:0;margin:16px 0 0;text-transform:none;letter-spacing:.02em;font-size:12px;line-height:1.9}
.refs a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.note{margin-top:56px}

/* ---------- Control Room ---------- */
.control{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,80px)}
.key{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:12px 16px;border:1px solid var(--line)}
.key-mark{width:16px;height:16px}
.frosted{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);align-self:start}
.frosted>span{position:relative;aspect-ratio:1;padding:12px;background:var(--bg)}
.frosted em{position:absolute;left:12px;bottom:12px;font-style:normal;font-size:14px;filter:blur(1.6px);opacity:.8}

/* ---------- Doorway ---------- */
.doorway{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:clamp(80px,10vw,144px);padding-top:20px;border-top:1px solid var(--line)}
.doorway-name{display:block;margin-top:8px;font-weight:600;font-stretch:118%;text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.01em}
.doorway-meta{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.doorway-line{display:block;height:1px;width:40px;background:currentColor;transition:width .5s}
.doorway:hover .doorway-line{width:80px}

/* ---------- Plan sheet (mobile) ---------- */
.plan-sheet{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,.3)}
.plan-sheet[hidden]{display:none}
.plan-sheet-inner{background:var(--bg);color:var(--fg);padding:22px 20px 28px}
.plan-sheet-head{display:flex;justify-content:space-between;margin-bottom:14px}

/* ---------- Small screens ---------- */
@media (max-width:1000px){
  .instruments{grid-template-columns:1fr}
  .method{grid-template-columns:1fr 1fr}
  .book{grid-template-columns:90px 1fr}.book-chart{grid-column:2;grid-row:auto}.book-meta{margin-top:0}
}
@media (max-width:860px){
  .house{grid-template-columns:1fr}
  .side{display:none}
  .room-bar .brand-small{display:inline-flex;font-size:12px;letter-spacing:.3em}.room-bar .brand-mark{width:20px;height:20px}
  .room-id{display:none}
  .plan-toggle,.show-s{display:inline-flex}
  .plan-toggle{text-decoration:underline;text-underline-offset:4px}
  .hide-s{display:none}
  .threshold,.intro-grid,.split,.control,.pages{grid-template-columns:1fr}
  .page,.page-against{padding:24px 0;border-left:0}
  .page-against{border-top:1px solid var(--line)}
  .thesis-gauge{grid-template-columns:1fr 1fr}.thesis-gauge .scale{grid-column:1/-1}
  .tone-row{grid-template-columns:1fr 56px}.tone-name{grid-column:1/-1}.tone-axis{margin-left:0;margin-right:72px}
  .method{grid-template-columns:1fr}
  .frosted{grid-template-columns:repeat(2,1fr)}
  .axis-label{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}@view-transition{navigation:none}}

/* ---------- AUQUA blocks inside Oxygen (shortcodes) ---------- */
.auqua-block{--line:color-mix(in srgb,var(--fg) 17%,transparent);--soft:color-mix(in srgb,var(--fg) 6%,transparent);--sans:"Archivo",ui-sans-serif,system-ui,sans-serif;--mono:"Plex Mono",ui-monospace,Menlo,monospace;color:var(--fg);font:400 16.5px/1.65 var(--sans)}
.auqua-block *,.auqua-block *::before,.auqua-block *::after{box-sizing:border-box}
.auqua-block a{color:inherit;text-decoration:none}
.auqua-lang{display:inline-flex;gap:8px;font-family:"Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em}

/* ---------- No sideways scrolling on narrow screens ---------- */
.room{overflow-x:clip}
.doorway-name,.display,.window-title{overflow-wrap:anywhere}
@media (max-width:860px){.doorway-name{font-size:clamp(1.6rem,8vw,2.4rem)}.doorway{flex-wrap:wrap}}
@media (max-width:860px){.display{font-size:clamp(1.7rem,7.6vw,3rem);line-height:.92}.display-m{font-size:clamp(1.6rem,7vw,2.6rem)}}
@media (max-width:860px){.display{font-stretch:100%;overflow-wrap:normal;hyphens:manual}}
@media (max-width:420px){.display{font-size:clamp(1.6rem,8.4vw,2.4rem)}}

/* ---------- Field notes, observations, about ---------- */
.note-title{margin:8px 0 0;font-weight:300;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1;letter-spacing:-.02em;max-width:20ch}
.note-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,80px);align-items:start}
.note-grid.no-photo{grid-template-columns:minmax(0,640px)}
.note-body p{margin:0 0 1.1em;font-size:18px;line-height:1.75;opacity:.88;max-width:60ch}
.note-coda{margin-top:2em!important;padding-top:20px;border-top:1px solid var(--line);font-style:italic;font-size:21px!important;line-height:1.4!important;opacity:1!important}
.notes{margin-bottom:clamp(56px,8vw,88px)}
.note-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.note-list a,.note-teaser{display:grid;grid-template-columns:160px 1fr;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--line)}
.note-list-title{font-size:22px;line-height:1.2}
.note-list-coda{grid-column:2;font-style:italic;opacity:.7;font-size:15.5px}
.threshold-notes{margin-top:clamp(56px,8vw,96px);padding-top:8px}
.note-teaser{border-top:1px solid var(--line)}
.observations{margin-top:clamp(72px,10vw,120px)}
.obs-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);margin-top:32px}
.aperture-meta{display:block;margin-top:10px;opacity:.75;font-size:10px}
@media (max-width:860px){.note-grid{grid-template-columns:1fr}.note-list a,.note-teaser{grid-template-columns:1fr}.note-list-coda{grid-column:1}.obs-strip{grid-template-columns:1fr 1fr}}

/* Photograph fills its opening */
.aperture-frame{--ap:clamp(10px,1.6vw,20px);padding:0;overflow:hidden}
.aperture-frame img{position:absolute;top:var(--ap);left:var(--ap);width:calc(100% - var(--ap)*2);height:calc(100% - var(--ap)*2);max-width:none;object-fit:cover;box-shadow:none}
.aperture-frame::after{content:"";position:absolute;top:var(--ap);left:var(--ap);right:var(--ap);bottom:var(--ap);box-shadow:inset 0 14px 28px -12px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.aperture-note{z-index:2;left:var(--ap);right:var(--ap);bottom:var(--ap)}

/* ---------- Room titles always on one line, in every language ---------- */
.room-body{container-type:inline-size}
.display:not(.display-m){white-space:nowrap;font-stretch:125%;overflow-wrap:normal;font-size:min(7.2rem,8.2cqi);line-height:.9}
.doorway-name{white-space:nowrap;font-size:min(3.5rem,5.6cqi)}
@media (max-width:860px){.display:not(.display-m){font-size:min(3.4rem,8.2cqi)}.doorway-name{font-size:min(2.4rem,8.2cqi)}}

/* Look twice: caption is a real control */
.aperture figcaption{margin-top:8px;text-align:right}
.look-toggle{opacity:.6;padding:4px 0;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s}
.look-toggle:hover,.look-toggle[aria-expanded="true"]{opacity:1;border-bottom-color:var(--accent)}
.aperture-frame{cursor:pointer}

/* Bay labels: one line, or hidden where there is no room */
.bay-labels span{white-space:nowrap;overflow:hidden}
@media (max-width:640px){.bay-labels{display:none}}

.obs-strip{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.obs-strip{grid-template-columns:1fr 1fr}}
.room-observatory .intro-grid .aperture-frame img{object-position:50% 80%}
.room-observatory .intro-grid .aperture-frame img{object-position:50% 45%}

/* ---------- Full screen photographs ---------- */
.aperture{position:relative;--ap:clamp(10px,1.6vw,20px)}
.ap-zoom{position:absolute;top:calc(var(--ap) + 10px);right:calc(var(--ap) + 10px);z-index:3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(12,12,12,.5);color:#f2ede4;opacity:.75;transition:opacity .3s,background .3s,transform .3s;backdrop-filter:blur(2px)}
.ap-zoom svg{width:19px;height:19px}
.aperture:hover .ap-zoom,.ap-zoom:focus-visible{opacity:1}
.ap-zoom:hover{background:rgba(12,12,12,.75);transform:scale(1.06)}
.lightbox{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0c0c0c;color:#efe9dd;overflow:hidden}
.lightbox::backdrop{background:#0c0c0c}
.lightbox[open]{animation:lb-in .35s ease}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 20px;font-family:"Plex Mono",ui-monospace,monospace}
.lb-actions{display:flex;gap:22px}
.lightbox .mono{font-family:"Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#efe9dd}
.lb-look,.lb-close{opacity:.75;padding:6px 0;border-bottom:1px solid transparent}
.lb-look:hover,.lb-close:hover,.lb-look[aria-pressed="true"]{opacity:1;border-bottom-color:var(--accent,#a08a5c)}
.lb-count{opacity:.5}
.lb-img{position:absolute;top:56px;left:16px;width:calc(100% - 32px);height:calc(100% - 72px);object-fit:contain;cursor:zoom-out}
.lb-nav{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:rgba(255,255,255,.08);color:#efe9dd;font-size:20px;opacity:.6;transition:opacity .3s}
.lb-nav:hover{opacity:1}
.lb-prev{left:16px}.lb-next{right:16px}
.lightbox.single .lb-nav{display:none}
.lb-note{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:96px max(24px,6vw) 28px;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transition:opacity .5s;pointer-events:none}
.lightbox.show-note .lb-note{opacity:1}
.lb-text{max-width:46ch;margin:0;font-family:"Archivo",system-ui,sans-serif;font-size:clamp(18px,2vw,24px);line-height:1.35}
.lb-where{margin:10px 0 0;opacity:.7}
@media (max-width:860px){.ap-zoom{opacity:.9;width:34px;height:34px}.lb-nav{display:none}.lb-img{left:0;width:100%}}
@media (prefers-reduced-motion:reduce){.lightbox[open]{animation:none}}
html:has(dialog.lightbox[open]){overflow:hidden}

/* Sun shadow on the signature (set by script; none at night) */
.signature .bay span{text-shadow:var(--sx,0) var(--sy,0) .012em rgba(0,0,0,var(--so,0));transition:text-shadow 3s ease}
.signature .bay span{text-shadow:var(--sx,0) var(--sy,0) .03em rgba(0,0,0,var(--so,0))}

/* Structural grid bubbles and the centre-line mark on the signature */
.signature{padding-top:56px;padding-bottom:28px}
.grid-tag{position:absolute;top:-46px;width:22px;height:22px;margin-left:-11px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:10px;letter-spacing:0;opacity:.5}
.grid-tag::after{content:"";position:absolute;top:21px;left:50%;width:1px;height:12px;background:currentColor;opacity:.6}
.cl-mark{position:absolute;left:50%;bottom:-54px;width:18px;height:18px;margin-left:-9px;opacity:.55}
.axis{bottom:-34px}
@media (max-width:640px){.grid-tag{width:18px;height:18px;margin-left:-9px;font-size:9px;top:-40px}.grid-tag::after{top:17px;height:10px}.cl-mark{width:15px;height:15px;margin-left:-7.5px}}
.grid-tag::after{height:24px}
@media (max-width:640px){.grid-tag::after{height:22px}}
.bays .bay:nth-child(5){border-right:1px solid var(--line)}

/* ---------- The AUQUA Q ---------- */
.q-mark{display:inline-block;height:.72em;width:auto;aspect-ratio:150/100;overflow:visible;vertical-align:baseline}
.wm{display:inline-flex;align-items:baseline;white-space:nowrap}
.wm .q-mark{margin:0 .34em 0 .04em}
.brand{gap:0}
.brand .brand-mark{display:none}
.bay .bay-q{margin:0 .02em;filter:drop-shadow(var(--sx,0) var(--sy,0) .03em rgba(0,0,0,var(--so,0)));transition:filter 3s ease}
.key .q-mark{font-size:16px;margin-right:2px}
/* Grid lines: dashed, like the centre axis, with numbered bubbles above */
.bay{position:relative;border-left:0!important;border-right:0!important}
.bay::before,.bays .bay:nth-child(5)::after{content:"";position:absolute;top:-24px;bottom:0;left:0;width:1px;background-image:linear-gradient(var(--fg) 60%,transparent 0);background-size:1px 14px;opacity:.3}
.bays .bay:nth-child(5)::after{left:auto;right:0}
.grid-tag::after{display:none}
.brand{gap:12px}
.brand .brand-mark{display:inline-block}

/* Plan in the shape of the mark */
.plan-room polygon{fill:transparent;stroke:var(--fg);stroke-opacity:.55;stroke-width:.8;transition:fill .4s}
.plan-room:hover polygon{fill:var(--soft)}
.plan-room.is-here polygon{fill:color-mix(in srgb,var(--fg) 10%,transparent)}
.plan-wall{fill:none;stroke:var(--fg);stroke-width:2.4;stroke-linecap:square}
.plan-front{stroke:var(--accent);stroke-width:2.4;stroke-linecap:square}
.plan-swing{fill:none;stroke:var(--accent);stroke-width:.8;stroke-dasharray:3 3}

/* Doors on the plan */
.plan-door{stroke:var(--bg);stroke-width:3}
.plan-leaf{stroke:var(--fg);stroke-opacity:.55;stroke-width:.9;stroke-linecap:round}
.plan-arc{fill:none;stroke:var(--fg);stroke-opacity:.3;stroke-width:.6}
.plan-door-g.is-front .plan-leaf{stroke:var(--accent);stroke-opacity:1;stroke-width:1.8}
.plan-door-g.is-front .plan-arc{stroke:var(--accent);stroke-opacity:.8;stroke-width:.7}
.plan-door-g.is-front .plan-door{stroke-width:4}
.plan-lock{fill:none;stroke:var(--fg);stroke-opacity:.65;stroke-width:.7}
.plan-front,.plan-swing{display:none}

/* Full screen: edge to edge, never stretched */
.lightbox,.lightbox::backdrop{background:#000}
.lb-img{top:0;left:0;width:100%;height:100%;object-fit:contain;cursor:pointer}
.lightbox.fill .lb-img{object-fit:cover}
.lb-bar{background:linear-gradient(rgba(0,0,0,.55),transparent);height:72px;align-items:flex-start;padding-top:18px}
@media (max-width:860px){.lb-img{left:0;width:100%}}

/* ---------- Centre line label (readable) ---------- */
.cl-mark{display:none}
.cl-tag{position:absolute;left:50%;bottom:-58px;transform:translateX(-50%);font-size:10px;letter-spacing:.16em;opacity:.55;padding:2px 6px;background:var(--bg)}

/* ---------- Observe. Think. Move. (the three crafts) ---------- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(72px,10vw,120px);border-top:1px solid var(--line)}
.triad-col{padding:24px 28px 8px 0}
.triad-col+.triad-col{padding-left:28px;border-left:1px solid var(--line)}
.triad-verb{margin:10px 0 0;font-weight:600;font-stretch:125%;text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1;letter-spacing:-.01em}
.triad-col p:last-child{margin:14px 0 0;max-width:30ch;font-size:16px;line-height:1.6;opacity:.82}
.triad-note{grid-column:1/-1;margin:28px 0 0}
@media (max-width:860px){.triad{grid-template-columns:1fr}.triad-col,.triad-col+.triad-col{padding:22px 0;border-left:0;border-top:1px solid var(--line)}}

/* ---------- A portrait: black and white, colour when you look closer ---------- */
.aperture.is-portrait{max-width:380px}
.is-portrait .aperture-frame img{filter:grayscale(1) contrast(1.06);transition:filter 1.2s ease}
.is-portrait:hover .aperture-frame img,.is-portrait .aperture-frame:focus-visible img{filter:none}
.is-portrait .aperture-frame{cursor:default}

/* ---------- Footer ---------- */
.room-foot{display:none}
.house-foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr);gap:28px 40px;padding:44px var(--pad) 26px;border-top:1px solid var(--line)}
.hf-brand .brand{font-size:13px}
.hf-brand .brand-mark{width:24px;height:24px}
.hf-line{margin:12px 0 0;max-width:30ch;font-size:14px;opacity:.7}
.hf-rooms{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;align-content:start;font-size:14px}
.hf-rooms a{opacity:.75;transition:opacity .3s}.hf-rooms a:hover{opacity:1}
.hf-sky{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:0;align-content:start}
.hf-sky dt{font-size:10px}
.hf-sky dd{margin:4px 0 0;font-size:12px;letter-spacing:.06em;text-transform:none}
.hf-moon{display:flex;align-items:center;gap:8px}
.moon{width:16px;height:16px;flex:none}
.moon-disc{fill:none;stroke:var(--fg);stroke-opacity:.45;stroke-width:.8}
.moon-lit{fill:var(--fg);fill-opacity:.7}
.hf-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;padding-top:18px;border-top:1px solid var(--line)}
.hf-bottom .lang{margin-left:auto}
@media (max-width:860px){.house-foot{grid-template-columns:1fr}.hf-bottom .lang{margin-left:0}}

/* ---------- The gate ---------- */
.is-gated .side>*:not(:first-child),.is-gated .brand-line,.is-gated .room-bar>*:not(.brand),.is-gated .gate-blur,.is-gated .house-foot{filter:blur(9px);opacity:.55;pointer-events:none;user-select:none}
.gate-blur{margin-top:clamp(64px,10vw,120px)}
.gate-photo{aspect-ratio:3/2;background:linear-gradient(135deg,color-mix(in srgb,var(--fg) 25%,var(--bg)),color-mix(in srgb,var(--fg) 55%,var(--bg)))}
.gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;pointer-events:none}
.gate-card{pointer-events:auto;width:min(420px,100%);padding:32px 30px 26px;background:color-mix(in srgb,var(--bg) 92%,transparent);border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.gate-title{margin:10px 0 24px;font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.08;letter-spacing:-.015em}
.gate-field{display:block;margin-top:16px}
.gate-field input{display:block;width:100%;margin-top:6px;padding:10px 0;border:0;border-bottom:1px solid color-mix(in srgb,var(--fg) 40%,transparent);background:transparent;color:var(--fg);font:400 17px var(--sans);outline:none}
.gate-field input:focus{border-bottom-color:var(--accent)}
.gate-error{margin:16px 0 0;font-size:14px;color:#8a4b3b}
.gate-card .enter{margin-top:26px}
.is-gated .signature{position:relative;z-index:41}
@media (max-width:860px){.gate{align-items:end;padding-bottom:28px}}
.gate{align-items:end;padding-bottom:max(28px,5vh)}
.is-gated .signature{z-index:auto}
@media (min-width:861px){.gate{padding-left:300px}}

.triad-head{grid-column:1/-1;padding:28px 0 8px}
.triad-title{margin:0;font-weight:300;font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.05;letter-spacing:-.02em}
.triad-head .lede{margin-top:14px;max-width:52ch}
.triad-head+.triad-col{border-left:0}
.triad-col{border-top:1px solid var(--line);margin-top:20px}
.triad-note{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:28px 0 0}
.triad-more{border-bottom:1px solid var(--accent);padding-bottom:3px}
@media (max-width:860px){.triad-col{margin-top:0}}