/* DePadrez — the Pozi. Black and white. The wordmark does the heavy lifting.

   TYPE SCALE: fluid modular scale between 375px and 1440px wide.
   Phone: base 17px, ratio 1.333 (perfect fourth).
   Desktop: base 20px, ratio 1.618 (golden ratio).
   Signage is fixed at 13px (step -1).

   SPACING: every value sits on an 8px grid. Fluid values travel between two
   grid steps, from the phone width to the desktop width.
*/

@font-face{font-family:Instrument;src:url('/assets/fonts/InstrumentSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Instrument;src:url('/assets/fonts/InstrumentSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}

:root{
  --red:#d62525;
  --blue:#0b3280;
  --yellow:#ffd731;
  /* Pozi palette */
  --ink:#000000;
  --paper:#F1F1F1;
  --stone:#62625E;
  --rule:#C7C7C3;

  /* Live colours (the room can turn the lights down) */
  --bg:var(--paper);
  --fg:var(--ink);
  --muted:var(--stone);
  --line:var(--rule);
  --copy:#1d1d1b;

  /* Type scale */
  --t-sign:13px;
  --t-0:clamp(17px, 15.94px + .282vw, 20px);
  --t-1:clamp(22.67px, 19.26px + .91vw, 32.36px);
  --t-2:clamp(30.22px, 22.42px + 2.079vw, 52.36px);
  --t-3:clamp(40.28px, 24.63px + 4.173vw, 84.72px);
  --t-4:clamp(53.7px, 24.34px + 7.829vw, 137.08px);
  --t-5:clamp(71.6px, 18.71px + 14.103vw, 221.8px);

  /* Spacing: 8px grid */
  --s-1:8px;
  --s-2:16px;
  --s-3:24px;
  --s-4:32px;
  --s-6:48px;
  --s-8:64px;
  --s-edge:clamp(16px, 10.37px + 1.502vw, 32px);
  --s-gutter:clamp(16px, 6.009vw - 6.53px, 80px);
  --s-col:clamp(16px, 10.37px + 1.502vw, 32px);
  --s-block:clamp(24px, 15.55px + 2.254vw, 48px);
  --s-stack:clamp(32px, 20.73px + 3.005vw, 64px);
  --s-section:clamp(96px, 73.47px + 6.009vw, 160px);
  --s-hero:clamp(96px, 62.2px + 9.014vw, 192px);

  --ease:cubic-bezier(.2,.7,.1,1);
  --night:.9s;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Instrument,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:var(--t-0);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color var(--night) var(--ease),color var(--night) var(--ease)}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid currentColor;outline-offset:var(--s-1)}

.skip{position:fixed;left:var(--s-edge);top:-64px;z-index:50;background:var(--fg);color:var(--bg);padding:var(--s-1) var(--s-2);font-size:var(--t-sign)}
.skip:focus{top:var(--s-edge)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Edge signage: tiny, plain words ---------- */

.edge{font-size:var(--t-sign);font-weight:500;line-height:1.35;letter-spacing:.005em}
.edge a{position:relative}
.edge a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.edge a:hover::after,.edge a[aria-current="page"]::after{transform:scaleX(1)}
.edge-nav,.edge-links{display:flex;gap:var(--s-3)}
.edge-cta{white-space:nowrap}
.arrow{display:inline-block;transition:transform .45s var(--ease)}
.edge-cta:hover .arrow{transform:translateX(4px)}

/* ---------- The door: the first screen is only the house ---------- */

.home{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.door{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr}
.edge--top,.home .edge--bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3);padding:var(--s-edge)}
.home .edge--bottom{align-items:flex-end}
.stage{display:grid;place-items:center;padding:0 var(--s-edge) var(--s-hero)}
.stage-mark{width:min(80vw,1180px);line-height:0}
.stage-mark img{width:100%}
.mark-img{transition:filter var(--night) var(--ease)}

/* ---------- Inner pages (Newsletter) ---------- */

.page-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-3);padding:var(--s-edge)}
.page-head .edge-cta{justify-self:end}
.page-mark{width:clamp(112px, 87.23px + 6.61vw, 152px);line-height:0}

/* ---------- The words: one column, nothing else ---------- */

.opener,.chapter,.activate{padding:0 var(--s-gutter) var(--s-section)}
.opener h2,.chapter-title{font-size:var(--t-sign);font-weight:500;letter-spacing:.005em;color:var(--muted);margin-bottom:var(--s-stack);transition:color var(--night) var(--ease)}
.statement{font-size:var(--t-4);font-weight:500;line-height:.96;letter-spacing:-.045em;max-width:13ch}
.chapter > p + p{margin-top:var(--s-3)}
.lead{font-size:var(--t-3);font-weight:500;line-height:1;letter-spacing:-.04em;max-width:15ch;margin-bottom:var(--s-stack)}
.chapter p:not(.lead):not(.coda){line-height:1.5;max-width:34em;color:var(--copy);transition:color var(--night) var(--ease)}
.chapter p.coda{font-size:var(--t-1);font-weight:500;line-height:1.15;letter-spacing:-.02em;max-width:22em;margin-top:var(--s-stack)}

/* ---------- The turn: what doesn't last passes, what lasts stays ----------
   "Consumed", "audiences" and "2am" are read, then fade.
   "Inherited", "Familia" and "culture doesn't" are handed down and stay. */

.turn span{display:block}
.turn.lead{max-width:none}
.turn .passes{transition:color 2.4s var(--ease)}
.js .turn .stays{opacity:0;transform:translateY(-.22em);transition:opacity 1.4s var(--ease),transform 1.8s var(--ease)}
.js .turn.is-turned .stays{opacity:1;transform:none;transition-delay:.6s}
.js .turn.is-turned .passes{color:var(--muted);transition-delay:2s}

/* ---------- Bringing the heat: the lights go down ----------
   Without JavaScript the section is simply dark.
   With JavaScript the whole page goes dark while the heat is in view. */

.chapter--heat{background:var(--ink);color:var(--paper);--copy:#d9d9d6;--muted:#9a9a95;padding-top:var(--s-section)}
.chapter--heat .lead{font-size:var(--t-5);line-height:.9;letter-spacing:-.055em;max-width:none}
.js .chapter--heat{background:transparent;color:inherit;--copy:inherit;--muted:inherit;padding-top:0}
.lights-down{--bg:var(--ink);--fg:var(--paper);--muted:#9a9a95;--line:#2a2a28;--copy:#d9d9d6}
.lights-down .mark-img{filter:invert(1) brightness(.94)}

/* ---------- Let's activate your Qhwa. ---------- */

.activate{padding-top:var(--s-section)}
.activate h2{font-size:var(--t-4);font-weight:500;line-height:.94;letter-spacing:-.045em;max-width:12ch}
.activate-sub{font-size:var(--t-1);font-weight:500;letter-spacing:-.015em;margin-top:var(--s-3);color:var(--muted)}

.qhwel-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-4);max-width:880px;margin-top:var(--s-section)}
.letter-form{display:grid;gap:var(--s-4);margin-top:var(--s-6)}
.field{display:grid;gap:var(--s-1)}
.field--wide{grid-column:1 / -1}
.field label{font-size:var(--t-sign);font-weight:500;color:var(--muted)}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--fg);border-radius:0;padding:var(--s-1) 0 var(--s-2);font-size:var(--t-0);outline:none}
.field textarea{resize:vertical;min-height:7.5em;line-height:1.5}
.field input:focus,.field textarea:focus{border-bottom-width:2px;padding-bottom:15px}
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--bg) inset}
.form-actions{grid-column:1 / -1;display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.qhwel-it{appearance:none;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-size:var(--t-0);font-weight:500;letter-spacing:-.005em;padding:var(--s-2) var(--s-4);cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)}
.qhwel-it:hover{background:transparent;color:var(--fg)}
.form-status{font-size:var(--t-sign);color:var(--muted);min-height:1.35em}

/* ---------- Footer ---------- */

.page-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);padding:var(--s-stack) var(--s-edge) var(--s-edge);border-top:1px solid var(--line)}

/* ---------- Newsletter: a letter, not a popup ---------- */

.letter{width:min(100vw - 2 * var(--s-edge), 640px);max-height:calc(100svh - 2 * var(--s-edge));margin:auto;padding:var(--s-stack);border:0;background:var(--paper);color:var(--ink);overflow:auto}
.letter::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(2px)}
.letter[open]{animation:letter-in .7s var(--ease)}
@keyframes letter-in{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
.letter-close{position:absolute;top:var(--s-3);right:var(--s-3);font-size:var(--t-sign);font-weight:500;background:none;border:0;padding:var(--s-1);cursor:pointer}
.letter-label{font-size:var(--t-sign);font-weight:500;color:var(--stone);margin-bottom:var(--s-4)}
.letter h2,.letter-page h1{font-size:var(--t-2);font-weight:500;line-height:1;letter-spacing:-.035em;max-width:14ch}
.letter-body{font-size:var(--t-0);line-height:1.5;margin-top:var(--s-3);max-width:28em}
.letter-sign{font-size:var(--t-sign);font-weight:500;margin-top:var(--s-6)}

.letter-page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
.letter-page main{padding:var(--s-hero) var(--s-gutter);max-width:calc(640px + 2 * var(--s-gutter))}

/* ---------- Not open yet (404) ---------- */

.closed main{display:grid;place-items:center;text-align:center;padding:var(--s-edge)}
.closed h1{font-size:var(--t-3);font-weight:500;line-height:1;letter-spacing:-.04em}
.closed p{margin-top:var(--s-3);font-size:var(--t-sign);font-weight:500}

/* ---------- Arrival: handed down ----------
   Nothing on the Pozi rises. Everything settles from above, the way
   culture comes to you: passed down. */

.js .stage-mark{opacity:0;transform:translateY(-16px);transition:opacity 1.6s var(--ease),transform 2s var(--ease),filter var(--night) var(--ease)}
.js .door .edge{opacity:0;transition:opacity 1s ease .9s}
.is-in .stage-mark{opacity:1;transform:none}
.is-in .door .edge{opacity:1}

.js .rise{opacity:0;transform:translateY(-16px);transition:opacity 1.2s var(--ease),transform 1.6s var(--ease),color var(--night) var(--ease)}
.js .rise.is-seen{opacity:1;transform:none}

/* ---------- Phone ---------- */

@media (max-width:760px){
  .edge-nav{flex-direction:column;gap:var(--s-1)}
  .edge-links{gap:var(--s-2)}
  .edge--top .edge-cta{white-space:normal;text-align:right;max-width:12ch}
  .stage-mark{width:88vw}

  .page-head{grid-template-columns:1fr auto;grid-template-areas:"mark cta" "nav nav";row-gap:var(--s-3)}
  .page-head .page-mark{grid-area:mark}
  .page-head .edge-cta{grid-area:cta;white-space:normal;text-align:right;max-width:13ch}
  .page-head .edge-nav{grid-area:nav;flex-direction:row;flex-wrap:wrap;gap:var(--s-1) var(--s-3)}

  .qhwel-form{grid-template-columns:1fr}
  .page-foot{flex-direction:column;align-items:flex-start}
  .letter{padding:var(--s-6) var(--s-3) var(--s-4)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;transition-delay:0s !important;animation:none !important}
  .js .stage-mark,.js .door .edge,.js .rise,.js .turn .stays{opacity:1;transform:none}
  .js .turn .passes{color:var(--muted)}
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}

/* Shared house colours: paper and ink, blue emphasis, yellow signals, red hospitality. */
.door{position:relative}
.scroll-invitation{position:absolute;bottom:var(--s-edge);left:var(--s-edge);right:var(--s-edge);display:flex;justify-content:space-between;font-size:var(--t-sign);font-weight:500}
.scroll-invitation span{color:var(--blue)}
.edge-cta:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);border:1px solid #0004;margin-right:10px;vertical-align:1px}
.turn.is-turned .stays{color:var(--blue)}
.lights-down .turn.is-turned .stays{color:var(--paper)}
.chapter[aria-labelledby="chori"] .lead{font-size:var(--t-2);max-width:25ch;color:var(--blue);line-height:1.08}
.lights-down .chapter[aria-labelledby="chori"] .lead{color:var(--paper)}
.lights-down #heat{color:var(--yellow)}
.qhwel-it:hover{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.site-footer{--bg:var(--red);--fg:var(--paper);background:var(--red);color:var(--paper);padding:60px clamp(24px,4.5vw,80px) 35px}
.site-footer .letters{display:grid;grid-template-columns:1fr 1fr;gap:12vw;margin:0 0 75px;padding-bottom:55px;border-bottom:1px solid #ffffff45;align-items:end}
.footer-eyebrow{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.site-footer .letters h2{font-size:clamp(36px,4vw,64px);line-height:1.03;letter-spacing:-.05em;font-weight:500;margin:22px 0}
.site-footer .letters>div>p:last-child{font-size:12px}
.footer-letter-form>label{font-size:12px}
.letter-field{display:flex;border-bottom:1px solid #fff9;margin-top:8px;align-items:center}
.letter-field input{width:100%;min-width:0;border:0;background:none;outline:none;padding:15px 0;color:white;font-size:16px;border-radius:0}
.letter-field input::placeholder{color:#ffd3d3}
.letter-field input:focus{box-shadow:0 2px 0 white}
.letter-field button{white-space:nowrap;font-size:12px;padding:15px 0 15px 15px;border:0;background:none;cursor:pointer}
.letter-field button span{margin-left:20px}
.footer-preview,.site-footer .form-status{font-size:10px;line-height:1.5;margin-top:12px;color:var(--paper);opacity:.85}
.footer-brand{display:block;width:260px;max-width:100%}
.footer-brand img{width:100%;filter:invert(1)}
.footer-meta{display:flex;justify-content:space-between;margin-top:36px;font-size:12px;gap:24px}
.footer-legal{display:flex;justify-content:space-between;gap:24px;font-size:10px;line-height:1.5;border-top:1px solid #ffffff45;padding-top:25px;margin-top:45px}
.footer-legal nav{display:flex;gap:24px;flex-wrap:wrap}
.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer :focus-visible{outline-color:var(--yellow)}
@media(max-width:600px){.site-footer{padding-top:40px}.site-footer .letters{grid-template-columns:1fr;gap:35px;margin-bottom:45px;padding-bottom:40px}.site-footer .letters h2{font-size:42px}.footer-brand{width:220px}.footer-meta{font-size:10px}.footer-legal{flex-direction:column;margin-top:35px}}