/* ============================================================================
   ALDesign Studio — site styles (Architecture & Landscape)
   Depends on tokens.css + base.css. Body uses .theme-studio (blue accent).
   ========================================================================== */

/* ---- Sub-page hero ------------------------------------------------------- */
.page-hero { padding-block: calc(var(--space-32) + 2vh) var(--space-16); position:relative; overflow:hidden; }
.page-hero__bg { position:absolute; inset:0; z-index:-1;
  background: radial-gradient(55% 60% at 80% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.page-hero h1 { font-size: var(--step-5); max-width: 16ch; }
.page-hero .lede { margin-top: var(--space-6); }

/* ---- Filter bar --------------------------------------------------------- */
.filters { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom: var(--space-12);
  border-bottom: var(--hairline); padding-bottom: var(--space-4); }
.filter { padding:.5em 1.1em; border-radius:var(--radius-pill); font-size:var(--step--1);
  color:var(--text-muted); border:1px solid transparent; transition: var(--dur-2) var(--ease-out); }
.filter:hover { color:var(--text); }
.filter[aria-pressed="true"] { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.filter .count { opacity:.7; font-variant-numeric:tabular-nums; margin-left:.3em; }

/* ---- Category group ----------------------------------------------------- */
.proj-group { margin-bottom: var(--space-20); }
.proj-group__head { display:flex; align-items:baseline; gap:var(--space-4);
  margin-bottom: var(--space-8); padding-bottom: var(--space-3); border-bottom: var(--hairline); }
.proj-group__head h2 { font-size: var(--step-3); }
.proj-group__head .n { font-size:var(--step--1); color:var(--text-faint); font-variant-numeric:tabular-nums; }

/* ---- Project grid / cards ----------------------------------------------- */
.proj-grid { display:grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width:640px){ .proj-grid{ grid-template-columns: repeat(2,1fr);} }
@media (min-width:1040px){ .proj-grid{ grid-template-columns: repeat(3,1fr);} }

.proj { position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  transition: transform var(--dur-3) var(--ease-emph), border-color var(--dur-2); }
.proj:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.proj__thumb { aspect-ratio: 4/3; background:
  linear-gradient(135deg, color-mix(in srgb,var(--accent) 14%, var(--n-100)), var(--n-100));
  display:flex; align-items:flex-end; justify-content:space-between; padding: var(--space-4);
  color:var(--text-faint); font-size:var(--step--1); }
.proj__thumb .idx { font-family:var(--font-display); font-size:var(--step-2); color:color-mix(in srgb,var(--accent) 50%, var(--n-300)); }
.proj__thumb .ph { letter-spacing:var(--tracking-wide); text-transform:uppercase; font-size:.7rem; }
.proj__thumb--img { padding:0; overflow:hidden; position:relative; display:block; }
.proj__thumb--img picture { position:absolute; inset:0; display:block; }
.proj__thumb--img img { width:100%; height:100%; object-fit:cover; display:block;
  transition: transform var(--dur-3) var(--ease-emph); }
.proj:hover .proj__thumb--img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){ .proj:hover .proj__thumb--img img { transform:none; } }
.proj__thumb--img .idx { position:absolute; left:var(--space-4); bottom:var(--space-3); z-index:1;
  color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.proj__body { padding: var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); flex:1; }
.proj__type { font-size:var(--step--1); letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); }
.proj__name { font-family:var(--font-display); font-size:var(--step-1); line-height:1.15; color:var(--text); }
.proj__meta { margin-top:auto; display:flex; flex-wrap:wrap; gap:.4rem var(--space-4);
  font-size:var(--step--1); color:var(--text-muted); }
.proj__meta .area { color:var(--text); font-variant-numeric:tabular-nums; }
.proj__region { position:absolute; top:var(--space-4); right:var(--space-4); z-index:1;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:.25em .6em;
  border-radius:var(--radius-pill); background:color-mix(in srgb,var(--bg) 70%, transparent);
  border:1px solid var(--border); color:var(--text-muted); backdrop-filter:blur(4px); }

/* hidden by filter */
.proj[hidden], .proj-group[hidden] { display:none !important; }

/* ---- Results meta ------------------------------------------------------- */
.results-note { color:var(--text-muted); font-size:var(--step--1); margin-bottom: var(--space-8); }

/* ---- Clickable project card (stretched link) ---------------------------- */
.proj { position:relative; }
.proj__link { color:inherit; text-decoration:none; }
.proj__link::after { content:""; position:absolute; inset:0; z-index:2; }
.proj:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.proj__link:focus-visible { outline:none; }
.proj:has(.proj__link:focus-visible) { outline:var(--focus-ring); outline-offset:3px; }

/* ======================================================================== */
/* Project detail page                                                      */
/* ======================================================================== */
.pd-hero { position:relative; min-height:clamp(360px, 62vh, 640px); display:flex; align-items:flex-end; overflow:hidden; }
.pd-hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pd-hero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.80), rgba(0,0,0,.12) 55%, rgba(0,0,0,.40)); }
.pd-hero__inner { position:relative; z-index:1; padding-block:var(--space-8); color:#fff; }
.pd-hero__eyebrow { letter-spacing:var(--tracking-wide); text-transform:uppercase;
  font-size:var(--step--1); color:rgba(255,255,255,.85); margin-bottom:var(--space-3); }
.pd-hero h1 { color:#fff; max-width:18ch; }
.pd-back { display:inline-flex; align-items:center; gap:.4em; color:var(--accent-ink);
  font-size:var(--step--1); letter-spacing:.04em; text-decoration:none; }
.pd-back:hover { text-decoration:underline; }
.pd-layout { display:grid; grid-template-columns: 1.55fr .85fr; gap:var(--space-8); align-items:start; }
.pd-overview { font-size:var(--step-1); line-height:1.5; color:var(--text); }
.pd-facts { display:grid; gap:var(--space-3); padding:var(--space-6);
  border:1px solid var(--border); border-radius:var(--radius-2); background:var(--n-100); }
.pd-facts dt { font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.pd-facts dd { font-size:var(--step-0); color:var(--text); margin:0 0 var(--space-2); }
.pd-facts dd.area { font-variant-numeric:tabular-nums; }
.pd-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:var(--space-4); }
.pd-figure { margin:0; border-radius:var(--radius-2); overflow:hidden; border:1px solid var(--border);
  background:var(--n-100); display:block; position:relative; }
.pd-figure img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition: transform var(--dur-3) var(--ease-emph); }
.pd-figure:hover img { transform:scale(1.04); }
@media (prefers-reduced-motion: reduce){ .pd-figure:hover img { transform:none; } }
.pd-figure figcaption { position:absolute; left:0; right:0; bottom:0; padding:var(--space-3) var(--space-4);
  font-size:var(--step--1); color:#fff; background:linear-gradient(to top, rgba(0,0,0,.65), transparent); }
@media (max-width:760px){ .pd-layout { grid-template-columns:1fr; gap:var(--space-6); } }

/* hero entrance + depth (reuses the .hero motion pattern) */
.pd-hero__eyebrow .accent-rule { width:48px; display:inline-block; height:1px; background:currentColor; vertical-align:middle; margin-right:.7rem; }
html.js .pd-hero [data-hero] { opacity:0; transform:translateY(26px); }
html.js body.is-loaded .pd-hero [data-hero] { opacity:1; transform:none;
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-emph); }
html.js body.is-loaded .pd-hero [data-hero][data-d="1"] { transition-delay:.12s; }
html.js body.is-loaded .pd-hero [data-hero][data-d="2"] { transition-delay:.26s; }

/* gallery affordance */
.pd-figure { cursor:zoom-in; }

/* ---- Lightbox (shared; opt-in via [data-gallery]) ----------------------- */
.lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  padding:clamp(var(--space-5), 5vw, var(--space-10)); background:color-mix(in srgb, #000 88%, transparent); }
.lightbox.is-open { display:flex; }
.lightbox__img { max-width:min(1280px, 92vw); max-height:86vh; width:auto; height:auto;
  border-radius:var(--radius-2); box-shadow:0 30px 90px rgba(0,0,0,.55); }
html.js .lightbox.is-open .lightbox__img { animation:lb-in var(--dur-2) var(--ease-out); }
@keyframes lb-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
.lightbox__cap { position:absolute; left:0; right:0; bottom:var(--space-6); text-align:center;
  color:rgba(255,255,255,.92); font-size:var(--step--1); letter-spacing:.02em; }
.lightbox__btn { position:absolute; display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; cursor:pointer; color:#fff; font-size:1.6rem; line-height:1;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.32); }
.lightbox__btn:hover { background:rgba(255,255,255,.22); }
.lightbox__btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.lightbox__close { top:var(--space-5); right:var(--space-5); }
.lightbox__prev { left:clamp(var(--space-3),3vw,var(--space-8)); top:50%; transform:translateY(-50%); }
.lightbox__next { right:clamp(var(--space-3),3vw,var(--space-8)); top:50%; transform:translateY(-50%); }
@media (prefers-reduced-motion: reduce){ html.js .lightbox.is-open .lightbox__img { animation:none; } }

/* ============================================================================
   B2 SIGNATURE HERO — "concept to completion" (studio homepage only)
   Load: construction line-drawing strokes itself on. Scroll: the built
   photograph dissolves in over it (--photoP set by app.js). Reduced-motion:
   static photo only. The single signature moment; nothing else is ambient.
   ========================================================================== */
.sighero{position:relative;height:150vh}   /* 1.5x viewport: dissolve plays over ~50vh, minimal dead tail */
.sighero__stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.sighero__photo{position:absolute;inset:0;z-index:-3;opacity:var(--photoP,0);
  transform:scale(calc(1.07 - .07*var(--photoP,0)));will-change:opacity,transform}
.sighero__photo img{width:100%;height:100%;object-fit:cover;display:block}
.sighero__draw{position:absolute;inset:0;z-index:-2;display:grid;place-items:center;
  opacity:calc(1 - .80*var(--photoP,0))}
.sighero__draw svg{width:min(1180px,86vw);height:auto;overflow:visible}
.sighero .depthscene__scrim{position:absolute;inset:0;z-index:-1}
.sig-ln{fill:none;stroke:var(--accent-ink);stroke-width:1.1;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
.sig-ln--faint{stroke:#4f7ea6;opacity:.5;stroke-width:.9}
.sig-ln--grid{stroke:#2f4a5e;opacity:.4;stroke-width:.8}
.sig-tick{stroke:var(--accent-ink);stroke-width:1;opacity:0}
.sig-dot{fill:var(--accent-ink);opacity:0}
html.js body.is-loaded .sighero .sig-ln{animation:sig-draw 1.5s var(--ease-emph) forwards}
html.js body.is-loaded .sighero .sig-ln--grid{animation-duration:1.9s}
html.js body.is-loaded .sighero .sig-tick{animation:sig-fade 1s ease .9s forwards}
html.js body.is-loaded .sighero .sig-dot{animation:sig-fade 1s ease 1.1s forwards}
@keyframes sig-draw{to{stroke-dashoffset:0}}
@keyframes sig-fade{to{opacity:.7}}
@media (prefers-reduced-motion: reduce){
  .sighero{height:auto}
  .sighero__stage{position:relative;height:100svh}
  .sighero__photo{opacity:1;transform:none}
  .sighero__draw{display:none}
  .sig-ln{stroke-dashoffset:0}
}

/* B2 hero copy: centered within a header-safe area so it clears the fixed nav
   at the top AND never clips the intro/CTA at the bottom. Headline trimmed to
   --step-5 on the homepage so the full block fits short viewports. */
.sighero__stage.hero{ align-items:center;
  padding-top:clamp(7rem, 6rem + 6vh, 10rem);
  padding-bottom:clamp(5rem, 4rem + 4vh, 8rem); }
.sighero .hero__inner h1{ font-size:var(--step-5); }
/* tighten the gap between the hero runway and the first content section */
.sighero + .section{ padding-top:var(--space-8); }

/* ---- B4/B6 polish: project cards ---------------------------------------- */
.proj { transition: transform var(--dur-2) var(--ease-emph),
  border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.proj:hover { box-shadow: var(--shadow-2); }                 /* depth pairs with the lift */
.proj:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }  /* clear keyboard focus */
.proj__name { transition: color var(--dur-2) var(--ease-out); }
.proj:hover .proj__name { color: var(--accent-ink); }       /* subtle "this is a link" cue */
@media (prefers-reduced-motion: reduce){ .proj:hover { transform: none; } }