/* On Purpose - the front door.
   Same marks as clientcaptor.com, a different room. The shop is an instrument;
   this is a building at dusk. One added color, lamplight, does all the work. */

:root{
  --paper:#F7F7F4; --ink:#16181A; --read:#0F5C4E; --read-soft:#5FBFA8;
  --lamp:#F3C36A; --lamp-deep:#E8A94A;
  --night:#101214; --night-2:#1B1E21; --line:#2A2F33; --dim:#8A9195;
  --muted:#5E6468; --rule:#DADBD5;
  --wrap:1180px; --font:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  line-height:1.5;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(var(--wrap),calc(100% - 2.5rem));margin-inline:auto}

/* ───────── masthead ───────── */
.mast{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem 1.25rem;background:rgba(247,247,244,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.cal-mark{width:22px;height:22px;color:var(--ink);align-self:center;flex:none}
.brand-word{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.brand-by{font-size:.82rem;color:var(--muted)}
.mast-nav{display:flex;gap:1.3rem;align-items:center;font-size:.92rem;font-weight:500}
.mast-nav a{text-decoration:none;color:var(--muted)}
.mast-nav a:hover{color:var(--ink)}
.mast-nav .to-shop{color:var(--read);font-weight:600}
@media(max-width:700px){.mast-nav a:not(.to-shop){display:none}.brand-by{display:none}}

/* ───────── hero ───────── */
.hero{position:relative;background:var(--night);color:var(--paper);min-height:88vh;
  display:grid;align-items:end;overflow:hidden}
.hero-scene{position:absolute;inset:0}
.hero-svg{width:100%;height:100%;display:block}
.hero-copy{position:relative;padding:4rem 0 4.5rem;max-width:44rem}
.hero h1{font-size:clamp(2.2rem,5.4vw,4.4rem);font-weight:800}
.lede{margin-top:1.3rem;font-size:clamp(1.05rem,1.6vw,1.28rem);color:#C9CDCB;max-width:38rem;line-height:1.55}
.hero-meta{margin-top:1.6rem;font-size:.88rem;color:var(--dim)}

.doors{display:grid;gap:.8rem;margin-top:2rem;max-width:40rem}
@media(min-width:640px){.doors{grid-template-columns:1fr 1fr}}
.door{display:grid;gap:.25rem;padding:1.1rem 1.25rem;text-decoration:none;border:2px solid transparent;
  transition:transform .18s ease,border-color .18s ease,background .18s ease}
.door-title{font-weight:700;font-size:1.05rem}
.door-sub{font-size:.88rem;opacity:.8;line-height:1.4}
.door-rooms{background:var(--lamp);color:var(--ink);border-color:var(--lamp)}
.door-rooms:hover{background:#F7CE7E;transform:translateY(-2px)}
.door-shop{background:transparent;color:var(--paper);border-color:#3A4045}
.door-shop:hover{border-color:var(--read-soft);transform:translateY(-2px)}
.door:focus-visible{outline:3px solid var(--read-soft);outline-offset:3px}

/* the lit window breathes, once, on load */
.lit{animation:ignite 1.6s ease-out .4s both}
@keyframes ignite{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.lit{animation:none}}

/* ───────── the rooms (scroll world) ───────── */
.rooms{background:var(--night);color:var(--paper)}
.rooms-intro{padding:5rem 0 1.5rem;max-width:40rem}
.rooms-intro h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.rooms-intro p{margin-top:.8rem;color:var(--dim)}

.world{position:relative;width:min(1440px,calc(100% - 2.5rem));margin-inline:auto}
.world-stage{position:sticky;top:64px;height:calc(100vh - 64px);display:grid;
  grid-template-columns:1.55fr 1fr;gap:3rem;align-items:center}
@media(max-width:880px){.world-stage{grid-template-columns:1fr;grid-template-rows:auto auto;
  align-content:start;padding-top:1rem;gap:1.2rem}}
.building{width:100%;max-height:calc(100vh - 110px);display:block;margin-inline:auto}

/* rooms: dark until the worker arrives */
.room-fill{transition:fill .7s ease}
.room-glow,.worker,.arrival{opacity:0;transition:opacity .7s ease}
.room-furn{transition:stroke .7s ease}
.room.is-lit .room-fill{fill:#33291A}
.room.is-lit .room-glow{opacity:1}
.room.is-lit .room-furn{stroke:#8A7346}
.room.is-lit .worker{opacity:1;transition-delay:.35s}
.room.is-lit .arrival{opacity:1;animation:knock 1.4s ease-in-out .4s 2}
@keyframes knock{0%,100%{transform:translate(146px,520px) scale(1)}50%{transform:translate(146px,520px) scale(1.6)}}
.room.was-lit .room-fill{fill:#1C1A16}
.room.was-lit .room-furn{stroke:#4A4535}
.room.was-lit .room-glow{opacity:.35}
.room.was-lit .worker{opacity:.55}

.beam-fill,.jaw-r{transition:width .5s ease,x .5s ease}

.room-copy{color:var(--paper)}
.room-where{font-size:.9rem;color:var(--lamp);font-weight:600;margin-bottom:.6rem}
.room-copy h3{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:800}
.room-copy p{margin-top:.9rem;color:#C9CDCB;line-height:1.55}
.room-does{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem}
.room-does li{padding-left:1.4rem;position:relative;color:#DADDDB}
.room-does li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;
  background:var(--read-soft);border-radius:50%}
.room-copy.is-changing{animation:swap .5s ease}
@keyframes swap{0%{opacity:.2;transform:translateY(6px)}100%{opacity:1;transform:none}}

.steps{list-style:none;margin:0;padding:0}
.step{height:90vh}
.step:last-child{height:60vh}

/* ───────── the shift ───────── */
.shift{padding:6rem 0}
.shift h2{font-size:clamp(1.9rem,3.8vw,3rem)}
.shift-grid{display:grid;gap:1.2rem;margin-top:2rem}
@media(min-width:760px){.shift-grid{grid-template-columns:1fr 1fr;gap:1.6rem}}
.shift-col{padding:1.6rem;border:2px solid var(--rule)}
.shift-col h3{font-size:1.3rem}
.shift-col p{margin-top:.7rem;color:var(--muted);line-height:1.6}
.shift-col.is-on{border-color:var(--read);background:#EEF5F2}
.shift-col.is-on p{color:#2E3A36}
.shift-note{margin-top:1.6rem;max-width:46rem;color:var(--muted)}

/* ───────── the leak ───────── */
.leak{background:var(--night);color:var(--paper);padding:6rem 0}
.leak-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.leak-grid{grid-template-columns:1fr 1.1fr 1fr;gap:2rem}}
.leak-say h2{font-size:clamp(1.9rem,3.8vw,3rem)}
.leak-say p{margin-top:.9rem;color:var(--dim);line-height:1.55}

.leak-loop{position:relative;aspect-ratio:1;max-width:440px;margin-inline:auto;width:100%}
.loop-svg{position:absolute;inset:0;width:100%;height:100%}
.loop-progress{transition:stroke-dashoffset .6s ease}
.loop-nodes{position:absolute;inset:0}
.node{position:absolute;left:50%;top:50%;--r:150px;
  transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  background:var(--night-2);color:var(--paper);border:2px solid var(--line);
  font:inherit;font-weight:600;font-size:.88rem;padding:.55rem .9rem;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.node:hover{border-color:var(--read-soft)}
.node.is-on{background:var(--read-soft);color:var(--ink);border-color:var(--read-soft)}
.node:focus-visible{outline:3px solid var(--lamp);outline-offset:2px}
@media(max-width:480px){.node{--r:118px;font-size:.78rem;padding:.45rem .7rem}}
.loop-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.55}
.loop-center .cal-mark{width:38px;height:38px;color:var(--read-soft)}

.leak-detail h3{font-size:1.7rem}
.leak-line{margin-top:.4rem;color:var(--lamp);font-weight:500}
.leak-detail ul{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem}
.leak-detail li{padding-left:1.3rem;position:relative;color:#DADDDB;line-height:1.45}
.leak-detail li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;
  background:var(--read-soft);border-radius:50%}
.leak-cost{margin-top:1.1rem;color:var(--dim);font-size:.95rem;line-height:1.5}
.leak-shop{display:inline-block;margin-top:1.2rem;color:var(--read-soft);font-weight:600;text-decoration:none;
  border-bottom:2px solid var(--read-soft);padding-bottom:.1rem}
.leak-shop:hover{color:var(--paper);border-color:var(--paper)}
.leak-detail.is-changing{animation:swap .45s ease}

/* ───────── the brief ───────── */
.brief{padding:6rem 0}
.brief-grid{display:grid;gap:2.5rem;align-items:start}
@media(min-width:900px){.brief-grid{grid-template-columns:1.1fr 1fr;gap:3.5rem}}
.brief-say h2{font-size:clamp(1.9rem,3.8vw,3rem)}
.brief-say>p{margin-top:.9rem;color:var(--muted);max-width:40rem;line-height:1.55}
.brief-form{margin-top:1.8rem;display:grid;gap:1.4rem}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:700;margin-bottom:.6rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:.5rem .85rem;border:2px solid var(--rule);
  font-weight:500;font-size:.92rem;transition:border-color .15s,background .15s,color .15s}
.chips input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips input:focus-visible+span{outline:3px solid var(--read-soft);outline-offset:2px}
.chips span:hover{border-color:var(--ink)}

.brief-card{position:sticky;top:90px;background:var(--night);color:var(--paper);padding:1.8rem;
  border-left:6px solid var(--lamp)}
.brief-kicker{color:var(--lamp);font-weight:600;font-size:.9rem}
.brief-text{margin-top:.8rem;font-size:1.12rem;line-height:1.6;min-height:7rem}
.brief-text.is-changing{animation:swap .4s ease}
.brief-fine{margin-top:1.2rem;font-size:.85rem;color:var(--dim);line-height:1.5}
.btn-primary{display:inline-block;margin-top:1.3rem;background:var(--lamp);color:var(--ink);
  font-weight:700;text-decoration:none;padding:.9rem 1.3rem;border:2px solid var(--lamp)}
.btn-primary:hover{background:#F7CE7E}
.btn-quiet{display:block;margin-top:.8rem;color:var(--read-soft);text-decoration:none;font-weight:500;font-size:.92rem}
.btn-quiet:hover{text-decoration:underline}
.btn-primary:focus-visible,.btn-quiet:focus-visible{outline:3px solid var(--read-soft);outline-offset:3px}

/* ───────── the shop ───────── */
.shop{padding:6rem 0;background:#EEF5F2}
.shop-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:860px){.shop-grid{grid-template-columns:1.3fr 1fr;gap:4rem}}
.shop h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.shop p{margin-top:1rem;color:#2E3A36;line-height:1.6;max-width:40rem}
.shop .btn-primary{background:var(--read);color:#fff;border-color:var(--read)}
.shop .btn-primary:hover{background:#0B4A3F}
.shop-lockup{justify-self:center;max-width:320px}

/* ───────── close ───────── */
.close{background:var(--night);color:var(--paper);padding:6rem 0 5rem}
.close h2{font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:30ch}
.close p{margin-top:.9rem;color:var(--dim)}
.doors-close{margin-top:1.8rem}
.doors-close .door-rooms{background:transparent;color:var(--paper);border-color:#3A4045}
.doors-close .door-rooms:hover{border-color:var(--lamp)}
.doors-close .door-shop{background:var(--read-soft);color:var(--ink);border-color:var(--read-soft)}

/* ───────── footer ───────── */
.foot{background:#0B0D0F;color:var(--dim);padding:2.5rem 0}
.foot-grid{display:grid;gap:1rem;align-items:center;font-size:.9rem;line-height:1.6}
@media(min-width:640px){.foot-grid{grid-template-columns:auto 1fr;gap:2rem}}
.foot a{color:var(--read-soft);text-decoration:none}
.foot img{width:120px}

/* ───────── motion + a11y ───────── */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}