/* ============================================================================
   Your website — THE PHONE STANDS STILL, THE YEAR PASSES.  website.html only.

   An outcome page, so it stays quieter than the module pages (MOTION-CHARTER
   §3). Its one idea: a phone showing an invented carpentry firm's site holds
   its place on the left while a year of plain-English asks scrolls past on the
   right. As each ask crosses the reading line, the site on the phone changes
   — new hours, a new photo, a new page, a new address, a holiday notice.
   Nothing flies in, nothing assembles, nothing types itself. The site simply
   keeps up. js/fx-website.js decides the state as a pure function of scroll.

   Without JS (or under reduced motion) the phone shows the site with every
   ask already done, and the asks read as a plain list.
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */
.wy-hero{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; }
/* the headline shares the screen with a photo now, so it sits a size down */
.wy-hero .t-display{ font-size:clamp(2.5rem,4.8vw,4.4rem); max-width:14ch; }
.wy-hero-fig{ margin:0; }
.wy-hero-fig .tilt-plate{ border-radius:16px; overflow:hidden; }
.wy-hero-fig .tilt-plate > img{ aspect-ratio:4/5; object-fit:cover; }

/* --------------------------------------------------------- three across --- */
.wy-three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; }
.wy-num{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; margin-bottom:16px;
  font:800 16px/1 var(--font-display); color:var(--primary);
  background:rgba(var(--primary-rgb),.08); border:1px solid rgba(var(--primary-rgb),.28);
}
.wy-three h3{ margin-bottom:8px; }
.wy-three p{ margin:0; }
.sec--tintlight a{ color:var(--primary); }

/* --------------------------------------------------------- two columns --- */
.wy-two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
.wy-two .tilt-plate{ border-radius:16px; overflow:hidden; }
.wy-two .tilt-plate > img{ aspect-ratio:4/3; object-fit:cover; }
.wy-two--tight .tilt-plate > img{ aspect-ratio:5/4; }

/* --------------------------------------------------------- the readout --- */
.wy-read{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:18px 0 0; padding:10px 14px;
  width:max-content; max-width:100%;
  border:1px solid rgba(var(--primary-rgb),.22); border-radius:8px; background:rgba(var(--primary-rgb),.04);
  font:600 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
}
.wy-read b{ color:var(--primary); font-weight:700; font-variant-numeric:tabular-nums; }
.wy-read i{ font-style:normal; opacity:.55; }
.wy-read span{ white-space:nowrap; }

/* ============================================================ THE STAGE == */
.wy-stage{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,6vw,96px);
  margin-top:48px; align-items:start;
}
.wy-hold{
  position:sticky; top:max(84px, calc(50vh - 340px));
  display:flex; flex-direction:column; align-items:center;
}

/* ------------------------------------------------------------ the phone -- */
.ph{ position:relative; }
.ph-frame{
  --w: min(300px, 78vw);
  width:var(--w); aspect-ratio:9/18.2; container-type:inline-size;
  border-radius:calc(var(--w) * .11); padding:calc(var(--w) * .035);
  background:linear-gradient(160deg, #163d58, #071b29);
  box-shadow:0 40px 70px -32px rgba(7,27,41,.7), inset 0 0 0 1px rgba(var(--accent-rgb),.18);
  display:flex; flex-direction:column; overflow:hidden;
}
/* one white screen; the frame is the bezel around it */
.ph-screen{ flex:1; display:flex; flex-direction:column; background:#fff; border-radius:calc(var(--w) * .08); overflow:hidden; }

.ph-bar{
  display:flex; justify-content:space-between; align-items:center; gap:4cqw;
  padding:7cqw 6cqw 5cqw; color:var(--text);
}
.ph-bar b{ font:800 4.6cqw/1 var(--font-display); letter-spacing:-.02em; white-space:nowrap; }
.ph-bar b i{ font-style:normal; color:var(--primary); }
.ph-nav{ display:flex; gap:3cqw; font-size:3cqw; color:var(--text-muted); }
.ph-nav em{ font-style:normal; }

.ph-hero{ position:relative; margin:0 5cqw; aspect-ratio:4/3; border-radius:3cqw; overflow:hidden; display:grid; }
.ph-hero img{ grid-area:1/1; width:100%; height:100%; object-fit:cover; }
.ph-hero p{
  grid-area:1/1; align-self:end; margin:0; padding:5cqw;
  font:700 3.9cqw/1.25 var(--font-display); color:#fff; letter-spacing:-.01em;
  background:linear-gradient(transparent, rgba(4,18,28,.85));
}
.ph-notice{
  margin:4cqw 5cqw 0; padding:3cqw 4cqw; border-radius:2.5cqw;
  font:600 3.2cqw/1.35 var(--font-body); color:var(--primary-dark);
  background:var(--bg-tint); border:1px solid rgba(var(--primary-rgb),.22);
}
.ph-row{ display:grid; grid-template-columns:auto 1fr; gap:0 4cqw; align-items:baseline; padding:4.5cqw 5cqw 0; }
.ph-k{ font:600 2.7cqw/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.ph-v{ display:block; font-size:3.5cqw; line-height:1.4; color:var(--text); }
.ph-v--pair{ display:grid; }
.ph-v > b{ font-weight:600; }
.ph-foot{
  display:grid; margin-top:auto; padding:6cqw 5cqw 7cqw;
  font-size:3.1cqw; color:var(--text-muted); border-top:1px solid var(--border);
}
.ph-foot b{ font-weight:500; }

/* a swap pair shares one cell, so nothing reflows when the state changes */
.ph-v--pair > b, .ph-foot > b, .ph-hero > img{ grid-area:1/1; }
.ph-v .ph-swap{ transition:opacity .45s var(--ease-out), background-color .6s var(--ease-out); }
.ph-swap{ transition:opacity .45s var(--ease-out); }
/* the default (no JS, reduced motion) is the finished year: every ask done */
.ph-swap[data-until]{ opacity:0; }

/* --- with JS: js/fx-website.js sets data-state and toggles .is-on/.is-off */
.js .ph .ph-swap[data-from]:not(.is-on){ opacity:0; }
.js .ph .ph-swap[data-until]{ opacity:1; }
.js .ph .ph-swap[data-until].is-off{ opacity:0; }
/* the ask that just landed gets a brief wash so the eye finds the change */
.js .ph .ph-swap.is-new{ background:rgba(var(--accent-rgb),.55); border-radius:2px; }
.js .ph .ph-swap.is-new.ph-notice{ background:rgba(var(--accent-rgb),.45); }
.ph-swap.is-new{ transition:opacity .45s var(--ease-out), background-color 0s; }

/* -------------------------------------------------------------- the asks -- */
.wy-asks{ list-style:none; margin:0; padding:0; }
.wy-asks li{
  position:relative; padding:0 0 0 30px; margin:0 0 clamp(44px,8vh,90px);
  border-left:1px solid rgba(var(--primary-rgb),.18);
}
.wy-asks li:last-child{ margin-bottom:0; }
.wy-asks li::before{
  content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px; border-radius:50%;
  background:#fff; border:1px solid rgba(var(--primary-rgb),.5);
  transition:background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.wy-when{ display:block; font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--primary); }
.wy-asks blockquote{
  margin:12px 0 0; font:600 clamp(1.15rem,1.7vw,1.4rem)/1.3 var(--font-display); letter-spacing:-.012em; color:var(--text);
  max-width:24ch;
}
.wy-asks .copy{ margin:12px 0 0; font-size:1rem; max-width:44ch; }
/* the ask being read is lit; the ones already done settle back */
.js .wy-asks li{ transition:opacity .4s var(--ease-out); }
.js .wy-asks li.is-done::before{ background:var(--primary); box-shadow:0 0 0 4px rgba(var(--primary-rgb),.14); }
.js .wy-asks li.is-done:not(.is-now){ opacity:.62; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .wy-hero{ grid-template-columns:1fr; gap:36px; }
  .wy-hero-fig{ max-width:420px; }
  .wy-hero-fig .tilt-plate > img{ aspect-ratio:4/3; }
  .wy-three{ grid-template-columns:1fr; gap:28px; }
  .wy-two{ grid-template-columns:1fr; gap:32px; }
  .wy-two > figure{ order:2; }

  /* the phone parks under the header; the asks pass beneath it */
  .wy-stage{ grid-template-columns:1fr; gap:26px; margin-top:34px; }
  .wy-hold{
    top:70px; z-index:3; padding:10px 0 18px;
    background:linear-gradient(#fff 90%, rgba(255,255,255,0));
  }
  .ph-frame{ --w: min(46vw, calc((42svh - 80px) * 9 / 18.2)); }
  .wy-read{ display:none; }   /* the phone itself is the readout on a small screen */
  .wy-asks li{ padding-left:22px; margin-bottom:44px; }
  .wy-asks blockquote{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .wy-hold{ position:static; }
  .ph-swap{ transition:none; }
}