/* Layout: one afternoon, read top to bottom. The page starts at 16:30 and ends at 22:00.
   Scrolling moves the clock: the paper warms to gold, goes violet at dusk and dark at night;
   type and photographs cast one flat shadow that lengthens as the sun, fixed in the left rail,
   sinks to its horizon. The grade of every photograph follows the same hour. Fraunces (the
   Windsor family that titled Annie Hall and Manhattan) carries all the words; Plex Mono keeps
   the record. The colour tokens below are the 16:30 state; the script moves them. */
:root{
  --paper:#F1E0C4; --ink:#2A2420; --ink-2:#6E6257; --rule:rgba(42,36,32,.18);
  --ambar:#C98B45; --sello:#A2481F; --teja:#A4552F; --sun:rgba(201,139,69,.30);
  --sx:10px; --sy:10px;
  --tint:rgba(201,139,69,0); --sat:1; --bri:1; --sep:0;
  --serif:"Fraunces","Iowan Old Style","Georgia",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gut-l:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-variation-settings:"opsz" 12,"SOFT" 100,"WONK" 1;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--teja);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--teja)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
img,video{display:block;max-width:100%;height:auto}
p{margin:0}
h1,h2,h3{font-weight:400;margin:0;line-height:1;letter-spacing:0;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
.mono{font-family:var(--mono);font-size:13px;line-height:1.45;color:var(--ink-2)}
.wordmark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--wm,var(--sello))}
.wordmark .wm{font-family:"IM Fell English",Georgia,serif;font-size:22px;line-height:1;white-space:nowrap}
.wordmark .wm small{font-size:.5em;letter-spacing:.3em;margin-left:.55em}
.wordmark:hover{color:var(--wm,var(--sello))}
/* the mark: real stamp layers; the sun sets behind the crack, then the moon rises (driven by scroll) */
.mk{position:relative;width:36px;aspect-ratio:1/1;overflow:hidden;background:#983400;flex:none}
.mk img{position:absolute;display:block;max-width:none}
.mk .sky{left:0;top:0;width:100%;height:auto}
.mk .fg{left:0;top:0;width:100%;height:100%}
.mk .sun{width:43%;left:28.8%;top:4%}
.mk .moon{width:38.5%;left:50%;top:62%}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;max-width:1280px;margin:0 auto;padding-left:calc(var(--gut-l) + 40px);padding-right:var(--gut-r)}
@media (max-width:760px){.grid{padding-left:calc(var(--gut-l) + 22px)}.grid > *{grid-column:1/13 !important}}

#site[data-lang="es"] [lang="en"]:not(.lang-btn){display:none}
#site[data-lang="en"] [lang="es"]:not(.lang-btn){display:none}

/* the sun, in a rail at the left edge */
.rail{position:fixed;left:calc(var(--gut-l) + 4px);top:0;bottom:0;width:28px;pointer-events:none;z-index:5}
.rail .horizon{position:absolute;left:0;width:28px;top:84vh;height:1px;background:var(--ink);opacity:.6}
.rail .clock{position:absolute;left:-2px;top:calc(84vh + 8px);white-space:nowrap;font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.04em}
@media (max-width:760px){.rail{left:calc(var(--gut-l) - 4px);width:20px}.rail .horizon{width:20px}}

/* shadows */
.cast{text-shadow:var(--sx) var(--sy) 0 var(--sun)}
.frame{position:relative;filter:drop-shadow(calc(var(--sx)*1.6) calc(var(--sy)*1.6) 0 var(--sun))}
.frame img{width:100%;aspect-ratio:2.39/1;object-fit:cover;filter:saturate(var(--sat)) brightness(var(--bri)) sepia(var(--sep))}
.frame::after{content:"";position:absolute;inset:0;background:var(--tint);mix-blend-mode:multiply;pointer-events:none}
.frame video{filter:none}


/* split hero */
.split{display:grid;grid-template-columns:min(66%,calc((100svh - 120px)*4/3)) minmax(0,1fr);margin-left:calc(var(--gut-l) + 40px)}
.split .vid{aspect-ratio:4/3}
.split .vid{position:relative;overflow:hidden;background:#000}
.split .vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .panel{background:rgba(164,85,47,.10);padding:clamp(28px,4vw,56px) clamp(24px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.split .ttl{font-size:clamp(30px,2.9vw,42px);line-height:1.08;max-width:14ch}
.split .blurb{font-size:17px;line-height:1.45;max-width:34ch;color:var(--ink)}
.btn{display:inline-block;background:none;border:1px solid var(--ink);padding:12px 18px;font-family:var(--mono);font-size:13px;color:var(--ink);cursor:pointer;border-radius:0}
.btn:hover{background:var(--ink);color:var(--paper)}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr);margin-left:calc(var(--gut-l) + 22px)}.split .vid{aspect-ratio:4/3}.split .panel{padding:28px 20px 36px}}


/* custom player: one round button, no browser chrome (as The Modern House) */
/* player: hidden while the film plays; on hover, tap or pause a thin horizon line appears at the foot,
   with a small sun that travels along it (the elapsed part warms) and a play/pause and time beside it */
.filmcol{min-width:0}
.ctrl{display:flex;align-items:center;gap:12px;padding:10px 0 0;color:var(--ink-2)}
.ctrl .pp{opacity:0;transition:opacity .35s ease}
.filmcol:hover .ctrl .pp,.filmcol.show .ctrl .pp,.filmcol.paused .ctrl .pp,.ctrl:focus-within .pp{opacity:1}
.pp{flex:none;width:28px;height:28px;border:0;background:none;color:inherit;cursor:pointer;display:grid;place-items:center;padding:0}
.pp svg{width:13px;height:13px;fill:currentColor;display:block}
.pp .ic-pause{display:none}.pp[data-playing="1"] .ic-play{display:none}.pp[data-playing="1"] .ic-pause{display:block}
.pp:focus-visible,.scrub:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.scrub{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:16px;margin:0;background:transparent;cursor:pointer;--p:0%}
.scrub::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,var(--sello) var(--p),var(--rule) var(--p))}
.scrub::-moz-range-track{height:1px;background:var(--rule)}
.scrub::-moz-range-progress{height:1px;background:var(--sello)}
.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--sello);border:0;margin-top:-5px}
.scrub::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--sello);border:0}
.snd .ic-off{display:none}.snd[data-muted="1"] .ic-on{display:none}.snd[data-muted="1"] .ic-off{display:block}
.pp svg{fill:currentColor}
.vwrap{position:relative;cursor:pointer}

/* header */
header{position:sticky;top:0;z-index:6;background:var(--paper);padding-block:18px 14px}
header .grid.tmh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lang-btn{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--ink-2)}
.lang-btn[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--teja);text-underline-offset:4px}
@media (max-width:760px){header{padding-block:12px 10px}.wordmark .wm{font-size:20px}.mk{width:32px}}


section{padding-block:clamp(64px,9vw,120px)}
.lead{font-variation-settings:"opsz" 72,"SOFT" 100,"WONK" 1;font-size:clamp(20px,2.2vw,26px);font-style:italic;color:var(--ink-2)}
.title{font-size:clamp(44px,8.2vw,112px);line-height:.95;margin:6px 0 10px;text-wrap:balance}
.lede{font-size:clamp(22px,2.6vw,30px);line-height:1.3;max-width:30ch;font-variation-settings:"opsz" 72,"SOFT" 100,"WONK" 1}
.text{max-width:56ch}
.text p + p{margin-top:1em}
.quote{margin-bottom:clamp(40px,6vw,72px)}
.quote .q{font-style:italic;font-size:clamp(24px,3vw,38px);line-height:1.25;font-variation-settings:"opsz" 96,"SOFT" 100,"WONK" 1;max-width:28ch}
.quote .mono{margin-top:12px}
.h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:14px}
.sitio{margin-top:clamp(40px,5vw,64px)}
h2.sec{font-size:clamp(30px,3.6vw,48px);margin-bottom:22px}

/* film */
.control{margin-top:12px;display:inline-block;background:none;border:0;border-bottom:1px solid var(--teja);padding:4px 0;cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--ink);border-radius:0}
.control:hover{color:var(--teja)}
.player{--r:min(36px,2.6vw)}
.player video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.player::after{border-radius:var(--r)}
.langs{display:inline-flex;gap:14px}
.player.opening video{clip-path:inset(49.6% 0 49.6% 0 round var(--r));animation:open 1.8s cubic-bezier(.2,.7,.2,1) .35s forwards}
@keyframes open{to{clip-path:inset(0 0 0 0 round var(--r))}}
@media (prefers-reduced-motion:reduce){.player.opening video{animation:none;clip-path:none}}

/* ledger */
.ledger{width:100%;border-collapse:collapse}
.ledger th,.ledger td{text-align:left;vertical-align:top;padding:10px 0;border-top:1px solid var(--rule)}
.ledger tr:last-child th,.ledger tr:last-child td{border-bottom:1px solid var(--rule)}
.ledger th{font-weight:400;font-family:var(--mono);font-size:13px;color:var(--ink-2);width:36%;padding-right:16px}
.ledger td{font-size:16px}

/* plates */
.plate{margin:0;padding-block:clamp(28px,4vw,56px)}
.plate figcaption{padding-top:10px}
.plate img{width:100%;aspect-ratio:2.39/1;object-fit:cover}
.plate .frame.pair img{aspect-ratio:3/2}
@media (max-width:760px){.plate .frame + .frame{margin-top:16px}}

/* steps */
.steps{list-style:none;margin:28px 0 0;padding:0}
.steps li{padding:12px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:9rem minmax(0,1fr);gap:16px}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps b{font-weight:400;font-size:20px;font-variation-settings:"opsz" 30,"SOFT" 100,"WONK" 1}
.steps p{color:var(--ink-2);font-size:16px}
@media (max-width:480px){.steps li{grid-template-columns:1fr;gap:2px}}

/* one form */
form{display:grid;gap:22px;max-width:440px;margin-top:28px}
.field{display:grid;gap:4px}
.field label,.choice legend{font-family:var(--mono);font-size:13px;color:var(--ink-2);padding:0}
.field input{border:0;border-bottom:1px solid var(--rule);background:none;font:inherit;font-size:18px;padding:6px 0;border-radius:0;width:100%;min-width:0;color:var(--ink)}
.field input:focus{border-color:var(--ink);outline:0}
.choice{border:0;padding:0;margin:0;display:grid;gap:8px}
.choice label{display:flex;gap:10px;align-items:baseline;font-size:18px;cursor:pointer}
.choice input{accent-color:var(--teja)}
button.send{font-family:var(--mono);font-size:13px;background:none;border:0;border-bottom:1px solid var(--teja);padding:4px 0;cursor:pointer;color:var(--ink);justify-self:start}
button.send:hover{color:var(--teja)}
.thanks{font-size:22px;font-variation-settings:"opsz" 72,"SOFT" 100,"WONK" 1}
.thanks small{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:6px}

/* night: the credits */
.credits{padding-block:clamp(48px,7vw,96px) 80px;text-align:center}
.crack{display:block;width:100%;max-width:640px;height:auto;margin-inline:auto;margin-bottom:clamp(48px,7vw,96px)}
.credits .card{font-size:clamp(34px,5vw,64px);line-height:1;margin-bottom:28px}
.credits .row{font-family:var(--mono);font-size:13px;color:var(--ink-2);padding:5px 0}
.credits .row span:last-child{color:var(--ink);margin-left:12px}
.credits .foot{margin-top:48px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap}

/* night plates: the same view by day and by night; the lit version fades in as the plate rises up the screen */
.swap{overflow:hidden}
.swap img.n{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--n,0)}

/* gallery: one horizontal strip per area, so the page doesn't become a wall of thumbnails */
.gal-h{margin:32px 0 10px;font-weight:400;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gal-wrap{position:relative}
.gal{list-style:none;margin:0;padding:0 0 10px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.gal li{flex:0 0 auto;scroll-snap-align:start}
.gal-i{display:block;padding:0;border:0;background:none;cursor:zoom-in}
.gal-i img{display:block;height:180px;width:auto;max-width:none}
.gal-nav{display:inline-flex;gap:4px}
.gal-nav button{background:none;border:0;font:inherit;font-size:18px;line-height:1;color:var(--ink-2);cursor:pointer;padding:2px 8px}
.gal-nav button:hover{color:var(--ink)}
@media (max-width:760px){.gal-i img{height:140px}.gal-nav{display:none}}
.lb{border:0;padding:0;max-width:none;max-height:none;width:100vw;height:100dvh;background:rgba(20,16,14,.96);color:#F3E6CC}
.lb::backdrop{background:rgba(20,16,14,.96)}
.lb[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.lb img{max-width:min(92vw,1800px);max-height:82dvh;object-fit:contain}
.lb-cap{color:#D8C9B4;padding:0 16px;text-align:center}
.lb-b{position:absolute;background:none;border:0;color:#F3E6CC;cursor:pointer;padding:12px}
.lb-x{top:10px;right:12px;font-size:13px}
.lb-p,.lb-n{top:50%;transform:translateY(-50%);font-size:34px;line-height:1}
.lb-p{left:6px}.lb-n{right:6px}
/* the day-to-night plates keep their own colour: the page's evening grade would darken the night shots */
.frame.swap img{filter:none}
.frame.swap::after{display:none}

/* the home by area and by room: each block opens with a short introduction; each zone has its words on the left
   and at most three photographs on the right, kept to a modest size */
.block{padding-top:clamp(56px,8vw,104px)}
.block-intro{max-width:52ch;font-size:clamp(19px,1.8vw,22px);line-height:1.45;margin-bottom:8px}
.zone{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px 40px;margin-top:clamp(40px,5vw,64px);align-items:start;max-width:1080px}
.zone-h{font-size:clamp(20px,2vw,24px);margin-bottom:8px}
.zone-t{max-width:34ch;color:var(--ink-2);font-size:16px}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;align-items:start}
.shot{margin:0}
.shot.lead{grid-column:1/-1}
.shot .gal-i{cursor:zoom-in}
.shot img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}
.shot:not(.lead) img{aspect-ratio:4/3;object-fit:cover}
.shot figcaption{padding-top:8px}
@media (max-width:760px){.zone{grid-template-columns:minmax(0,1fr)}.zone-t{max-width:none}}
.hero-photo{padding-top:clamp(24px,4vw,48px)}

/* coming next: two soft fields of colour, no pictures, since those homes haven't been filmed yet */
.prox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:760px}
.prox-i{aspect-ratio:3/2;filter:blur(18px) saturate(.9);transform:scale(.94);opacity:.85}
.prox-c{overflow:hidden}
.prox-i.a{background:radial-gradient(circle at 30% 40%,#d7b48e,transparent 60%),radial-gradient(circle at 75% 70%,#7d8a8f,transparent 55%),#b9a48e}
.prox-i.b{background:radial-gradient(circle at 65% 35%,#e3c9a0,transparent 60%),radial-gradient(circle at 25% 75%,#8e9b74,transparent 55%),#c4b394}
.prox-c p{margin-top:10px}
@media (max-width:760px){.prox{grid-template-columns:minmax(0,1fr)}}
/* on touch screens there is no hover, so the play, sound and full-screen buttons stay visible */
@media (hover:none){.ctrl .pp{opacity:1}}
.fsb svg{fill:none}