/* Halden & Roe — stacking sections, Home (index.html) only.
   A few full-height panels slide up over the section before them; that section stays put,
   sinks back slightly and dims as it's covered. Everything else scrolls normally. */

:root {
  --sage: #8E9A7E;
  --feature-bg: #0F0F0E;
  --slate: #1F2A35;
}

/* Header sits on a slightly deeper paper so it reads apart from the hero */
.site-header { background: var(--paper-deep); }

/* Hero fills the first screen (header is 77px) */
.hero { min-height: calc(100svh - 77px); display: grid; align-items: center; }

/* Introduction and Scope: same layout, less air */
.sheet-tight { padding-block: clamp(3rem, 2.25rem + 3vw, 5.5rem); }
.sheet-tight .sheet-head { margin-bottom: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.sheet-tight + .sheet-tight, .stack > .sheet-tight { border-top: 0; }

/* ---------- Panels ---------- */
.panel {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  border-bottom: 0;
}

/* Featured project: the Orchard Lane living room fills the panel behind centred copy
   (Eric 2026-10-26). Black (#0F0F0E) shows while the photo loads. */
.panel-feature { background: var(--feature-bg); color: var(--paper); min-height: 100svh; display: grid; align-items: center;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; }
.panel-feature .label { color: #D8D2C6; }
.feature-photo { position: absolute; inset: 0; overflow: hidden; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* Darkens the middle, where the text sits, more than the edges, so the room still reads round it */
.feature-photo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(15, 15, 14, .72), rgba(15, 15, 14, .38) 100%); }
.panel-feature .wrap { position: relative; }
.feature-grid { display: grid; justify-items: center; text-align: center; }
.feature-copy { max-width: 40rem; }
.feature-copy h2 { font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem); line-height: 1.02; letter-spacing: -.02em; margin: 1.25rem 0 .9rem; }
.feature-meta { margin-bottom: 1.5rem; }
.feature-text { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 32em; margin: 0 auto 2rem; }
.feature-copy, .feature-copy .label { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.panel-feature .btn-solid { background: var(--paper); color: var(--feature-bg); border-color: var(--paper); }
.panel-feature .btn-solid:hover { background: transparent; color: var(--paper); }

/* Closing CTA styles (.panel-study, .ib-sheet, .ib-copy) and the stacking basics (.stack-under / .stack-over,
   .panel-first and its lift shadow) live in styles.css, shared with the project pages. */


.first-work { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }

/* First section (Introduction, Scope, Recent work): the office building drawing fixed to the screen,
   centre right, while the section scrolls past it. .first-art's clip-path keeps it inside the section
   (on the section itself it would also clip the upward shadow). The section is never transformed
   (stack.js scales .first-inner instead), because a transform would turn position: fixed back into scrolling. */
.work-bg { isolation: isolate; }
.stack-anim .work-bg.stack-under { will-change: auto; }
.first-art { position: absolute; inset: 0; z-index: -1; clip-path: inset(0); pointer-events: none; }
.work-art {
  position: fixed; inset: 0;
  background: url("../images/officebuilding.webp") right center / contain no-repeat;
  background-image: image-set(url("../images/officebuilding.avif") type("image/avif"), url("../images/officebuilding.webp") type("image/webp"));
  opacity: .07; mix-blend-mode: multiply;
}
.stack-anim .first-inner { will-change: transform; }

/* ---------- Hero on deep green ---------- */
/* Strong break from the paper section that slides over it. The drawing keeps a paper ground
   (like the Study sheet on slate), so the trace and the multiply-blended pencil still read;
   the crop's feather fades that paper into the green. */
:root { --forest: #1F2E44; --forest-ink: #D6DEE9; }
.hero { background: var(--forest); color: var(--paper); border-bottom: 0; }
/* Plan linework turned light: invert, then screen instead of multiply */
.hero::before { filter: invert(1); mix-blend-mode: screen; opacity: .07; }
.hero .label { color: var(--forest-ink); }
.hero .label .tick { color: #E58A6B; }
.hero-sub { color: var(--forest-ink); }
.hero .btn-solid { background: var(--paper); color: var(--forest); border-color: var(--paper); }
.hero .btn-solid:hover { background: transparent; color: var(--paper); }
.hero .btn-line { color: var(--paper); border-color: var(--paper); }
.hero .btn-line:hover { background: var(--paper); color: var(--forest); border-color: var(--paper); }
.hero :focus-visible { outline-color: var(--paper); }
.hero-crop { --edge: 30%; } /* wider feather than the paper hero (18%) so the photo melts into the green */
/* Every stage draws straight onto the green, so nothing reads as a pale box: light trace,
   the pencil inverted to light lines (screen), and the photo develops out of a green cover. */
.hero .trace { stroke: var(--paper); }
.hero-art .hero-sketch { filter: invert(1); mix-blend-mode: screen; }
.hero-cover { background: var(--forest); }
/* The photo's pale sky still edged out against the green, so it gets an extra oval fade on top of the crop's feather */
.hero-art img {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 74%);
          mask-image: radial-gradient(ellipse at center, #000 38%, transparent 74%);
}
.hero-figure::before, .hero-figure::after { border-color: #E58A6B; }


/* Sheet 02 Scope: heading on the left, vertically centred, with a rule close to its right;
   the four services as a 2×2 grid taking the rest of the width. */
.scope {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.scope-title {
  display: flex; align-items: center;
  border-right: 1px solid var(--rule); padding-right: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.scope-title h2 { margin: 0; }
.scope .services { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
.scope .services li { padding: 0 clamp(1rem, 2vw, 2rem) 1.75rem 0; border-right: 1px solid var(--rule); border-bottom: 0; }
.scope .services li:nth-child(2n) { padding-left: clamp(1rem, 2vw, 2rem); padding-right: 0; border-right: 0; }
.scope .services li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
.scope .services li:nth-child(n+3) { padding-top: 1.75rem; padding-bottom: 0; }
.scope .services .label { margin-bottom: 1rem; }
@media (max-width: 820px) {
  .scope { grid-template-columns: 1fr; }
  .scope-title { display: block; border-right: 0; padding-right: 0; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
}
@media (max-width: 560px) {
  .scope .services { grid-template-columns: 1fr; }
  .scope .services li, .scope .services li:nth-child(2n), .scope .services li:nth-child(n+3) {
    padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .scope .services li:first-child { padding-top: 0; }
  .scope .services li:last-child { border-bottom: 0; }
}

/* Hold before the Orchard panel arrives: the first section stays stuck with Recent work in view for
   ~75% of a screen of scrolling before the panel starts to cover it (Eric: it was covered too fast).
   The margin is transparent, so the stuck section shows through it. */
.stack-anim .panel-feature { margin-top: 75svh; }
/* With a bloom/corner entrance the hold moves onto the marker in front of the panel (js/stack.js) */
.stack-anim .enter-mark { height: 75svh; }
/* ...and the panel is pulled up a screen so it is already stuck at the top (it is one screen tall, so
   sticky top is 0) for the whole entrance, while it is still invisible */
.stack-anim .enter-mark + .panel-feature { margin-top: -100svh; }

/* Orchard panel entrance (js/stack.js, data-stack-enter): held at the top of the screen (sticky, above)
   while it fades in and a circle (--bloom radius) opens it, centred on the screen rather than the panel.
   The mask fades the outer 12% of the radius (30% read as too soft, Eric 2026-10-24) so the edge is soft; the clip-path at the same radius
   backs it up, because Chrome has let the panel's blended drawings slip outside a mask-image. */
.stack-anim .enter-bloom {
  -webkit-mask-image: radial-gradient(circle var(--bloom, 150vmax) at 50% 50svh, #000 88%, transparent 100%);
          mask-image: radial-gradient(circle var(--bloom, 150vmax) at 50% 50svh, #000 88%, transparent 100%);
  clip-path: circle(var(--bloom, 150vmax) at 50% 50svh);
}
.stack-anim .enter-corner {
  -webkit-mask-image: radial-gradient(circle var(--bloom, 150vmax) at 100% 100svh, #000 88%, transparent 100%);
          mask-image: radial-gradient(circle var(--bloom, 150vmax) at 100% 100svh, #000 88%, transparent 100%);
  clip-path: circle(var(--bloom, 150vmax) at 100% 100svh);
}
/* Same soft circle on the content blocks (js/stack.js sets --mx / --my to the screen centre in each box) */
.stack-anim .enter-bloom .feature-grid > * {
  -webkit-mask-image: radial-gradient(circle var(--bloom, 150vmax) at var(--mx, 50%) var(--my, 50%), #000 88%, transparent 100%);
          mask-image: radial-gradient(circle var(--bloom, 150vmax) at var(--mx, 50%) var(--my, 50%), #000 88%, transparent 100%);
}
/* The upward shadow belongs to the slide; a masked panel has no edge to cast it */
.stack-anim .enter-bloom::before, .stack-anim .enter-corner::before { display: none; }

/* Hold after the Orchard panel has fully opened: it stays stuck for ~75% of a screen of scrolling before
   the Study panel starts to cover it (Eric 2026-10-24: Study came in too soon). Transparent, like the hold above. */
.stack-anim .panel-study { margin-top: 75svh; }
/* The bloom entrance pulls the Orchard panel up a screen (above), so add that screen back here */
.stack-anim .stack:has(.enter-mark) .panel-study { margin-top: 175svh; }