:root{
  --paper:#f4f1ea;
  --paper-2:#ece8df;
  --ink:#1c1a16;
  --ink-soft:#6f685c;
  --line:#d8d2c6;
  --accent:#bd5a3d;
  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-body:"Spectral", Georgia, serif;
  --font-mono:"Spline Sans Mono", ui-monospace, monospace;
  --measure:66ch;
  --gutter:clamp(22px,5vw,90px);
  --block-gap:clamp(58px,11vh,150px);
}
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:18px; line-height:1.7;}
img{display:block; max-width:100%;}

/* ---------------- quiet corner breadcrumb ---------------- */
.crumb{position:fixed; top:24px; left:var(--gutter); z-index:40; display:flex; align-items:center; gap:11px; white-space:nowrap;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--ink); transition:color .5s ease;}
.crumb a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s, color .5s;}
.crumb a:hover{border-color:currentColor;}
.crumb .sep{opacity:.42;}
.crumb .cur{opacity:.7;}
body.crumb-light .crumb{color:#fff;}
body.crumb-light .crumb a{color:#fff;}
body.crumb-light .crumb .cur{color:rgba(255,255,255,.78);}
.crumb-back{position:fixed; top:24px; right:var(--gutter); z-index:40; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); text-decoration:none; display:flex; align-items:center; gap:8px; white-space:nowrap; transition:color .5s, opacity .3s;}
.crumb-back:hover{opacity:.6;}
body.crumb-light .crumb-back{color:#fff;}

/* ---------------- masthead ---------------- */
.mast{padding:clamp(94px,15vh,168px) var(--gutter) clamp(28px,5vh,52px); max-width:1500px; margin:0 auto;}
.mast .kicker{font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:13px; margin:0 0 24px;}
.mast .kicker::before{content:""; width:34px; height:1px; background:var(--accent);}
.mast h1{font-family:var(--font-display); font-weight:600; font-size:clamp(46px,9vw,124px); line-height:.92; letter-spacing:-.02em; margin:0; text-wrap:balance;}
.mast .standfirst{font-family:var(--font-body); font-size:clamp(19px,2.1vw,25px); line-height:1.5; color:var(--ink); max-width:46ch; margin:28px 0 0; font-style:italic;}
.meta{display:flex; flex-wrap:wrap; gap:18px clamp(28px,5vw,72px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:clamp(32px,6vh,56px); padding:22px 0;}
.meta .cell{display:flex; flex-direction:column; gap:6px;}
.meta .k{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);}
.meta .v{font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--ink);}

/* ---------------- block scaffold ---------------- */
.blocks{display:flex; flex-direction:column; gap:var(--block-gap); padding-bottom:var(--block-gap);}
.wrap{max-width:1500px; margin:0 auto; padding:0 var(--gutter); width:100%;}
.measure{max-width:var(--measure); margin:0 auto; padding:0 var(--gutter);}
.cap{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-soft); margin-top:14px; display:flex; gap:10px; width:100%; max-width:1500px; margin-left:auto; margin-right:auto; padding:0 var(--gutter);}
.cap .i{color:var(--accent);}

/* image-slot baseline */
image-slot{display:block; width:100%; height:100%;}
image-slot::part(frame){background:var(--paper-2); background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 11px, transparent 11px 22px);}
image-slot::part(empty){color:var(--ink-soft); font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;}

/* block: full-bleed image */
.b-bleed .frame{position:relative; width:100%; height:clamp(380px,86vh,1000px); overflow:hidden; background:var(--paper-2);}
.b-bleed.lead .frame{height:clamp(460px,98vh,1140px);}
.b-bleed .frame .scrim{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(14,12,9,.34) 0%, transparent 26%);}
.b-bleed.lead .frame .scrim{background:linear-gradient(to bottom, rgba(14,12,9,.4) 0%, transparent 34%, transparent 70%, rgba(14,12,9,.22) 100%);}

/* block: heading */
.b-heading{padding:0 var(--gutter); max-width:1500px; margin:0 auto; width:100%;}
.b-heading .eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 18px;}
.b-heading h2{font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4.6vw,60px); line-height:1.02; letter-spacing:-.015em; margin:0; text-wrap:balance; max-width:20ch;}

/* block: text */
.b-text p{margin:0 0 1.3em; font-size:clamp(17px,1.4vw,20px);}
.b-text p:last-child{margin-bottom:0;}
.b-text .dropcap::first-letter{font-family:var(--font-display); font-size:3.4em; line-height:.8; float:left; padding:6px 12px 0 0; color:var(--accent); font-weight:600;}
.b-pull{max-width:var(--measure); margin:0 auto; padding:0 var(--gutter);}
.b-pull blockquote{font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.4vw,44px); line-height:1.16; font-style:italic; margin:0; border-left:2px solid var(--accent); padding-left:clamp(20px,2.4vw,36px); text-wrap:balance;}

/* block: image_text */
.b-imgtext .grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,72px); align-items:center;}
.b-imgtext.flip .grid{grid-template-columns:.92fr 1.08fr;}
.b-imgtext.flip .media{order:2;}
.b-imgtext .media{position:relative; height:clamp(340px,62vh,660px); overflow:hidden; background:var(--paper-2);}
.b-imgtext .body .tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:16px;}
.b-imgtext .body h3{font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3vw,40px); line-height:1.05; letter-spacing:-.01em; margin:0 0 18px;}
.b-imgtext .body p{margin:0 0 1.1em; font-size:clamp(16px,1.3vw,19px);}
.b-imgtext .body p:last-child{margin-bottom:0;}

/* block: image_grid */
.b-grid .grid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.5vw,22px); grid-auto-flow:dense;}
.b-grid .cell{position:relative; overflow:hidden; background:var(--paper-2); grid-column:span 2; aspect-ratio:4/5;}
.b-grid .cell.wide{grid-column:span 4; aspect-ratio:16/10;}
.b-grid .cell.tall{grid-column:span 2; aspect-ratio:3/4;}
.b-grid .cell.half{grid-column:span 3; aspect-ratio:3/2;}

/* full-bleed variant: edge-to-edge, tighter gaps, no caption/no max-width */
.b-grid.bleed{padding:0; max-width:none;}
.b-grid.bleed .grid{gap:clamp(6px,0.7vw,12px); max-width:none;}
.b-grid.bleed .cell{aspect-ratio:1/1;}
.b-grid.bleed .cell.wide{aspect-ratio:16/9;}
.b-grid.bleed .cell.tall{aspect-ratio:3/4;}
.b-grid.bleed .cell.half{aspect-ratio:1/1;}

/* block: carousel */
.caro-track{display:flex; gap:clamp(14px,2vw,30px); overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth; padding:0 var(--gutter); margin:0 auto; max-width:1500px; scrollbar-width:none;}
.caro-track::-webkit-scrollbar{display:none;}
.caro-slide{flex:0 0 min(80%,920px); scroll-snap-align:center; position:relative;}
.caro-slide .frame{position:relative; height:clamp(360px,70vh,760px); overflow:hidden; background:var(--paper-2);}
.caro-slide .cap{margin-top:12px; padding:0;}
.caro-foot{display:flex; align-items:center; justify-content:space-between; max-width:1500px; margin:20px auto 0; padding:0 var(--gutter);}
.caro-arrows{display:flex; gap:10px;}
.caro-arrows button{width:46px; height:46px; border:1px solid var(--line); background:transparent; border-radius:50%; color:var(--ink); font-family:var(--font-mono); font-size:15px; cursor:pointer; transition:background .25s, color .25s, border-color .25s;}
.caro-arrows button:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.caro-dots{display:flex; gap:7px;}
.caro-dots i{width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .3s, width .3s;}
.caro-dots i.on{background:var(--accent); width:22px; border-radius:4px;}

/* ============================================================
   block: SLIDESHOW — auto-playing crossfade of images.
   Regular (.b-slideshow) + full-bleed (.b-slideshow.bleed).
   Also used as a lander media layer (see .b-impact .ss-stage).
   ============================================================ */
.b-slideshow{max-width:1500px; margin:0 auto; width:100%; padding:0 var(--gutter);}
.b-slideshow.bleed{max-width:none; padding:0;}
.ss-stage{position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:var(--paper-2);}
.b-slideshow.bleed .ss-stage{aspect-ratio:auto; height:clamp(420px,86vh,1000px);}
.ss-frame{position:absolute; inset:0; opacity:0; transition:opacity 1s ease; pointer-events:none;}
.ss-frame.on{opacity:1; pointer-events:auto;}
.ss-frame image-slot{display:block; width:100%; height:100%;}
.ss-dots{display:flex; gap:8px; justify-content:center; margin-top:14px;}
.b-slideshow.bleed .ss-dots{position:absolute; left:0; right:0; bottom:18px; margin:0; z-index:4;}
.ss-dots i{width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .3s, width .3s;}
.b-slideshow.bleed .ss-dots i{background:rgba(255,255,255,.55); box-shadow:0 1px 6px rgba(0,0,0,.3);}
.ss-dots i.on{background:var(--accent); width:24px; border-radius:4px;}
.ss-arrows{position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:space-between; padding:0 14px; z-index:4; opacity:0; transition:opacity .25s;}
.ss-stage:hover .ss-arrows{opacity:1;}
.ss-arrows button{pointer-events:auto; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:rgba(20,17,12,.34); color:#fff; font-family:var(--font-mono); font-size:16px; cursor:pointer; backdrop-filter:blur(4px); transition:background .25s;}
.ss-arrows button:hover{background:rgba(189,90,61,.8);}

/* block: video embed */
.b-video .frame{position:relative; width:100%; max-width:1500px; margin:0 auto; aspect-ratio:16/9; background:#111; overflow:hidden;}
.b-video .frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ============================================================
   block: IMPACT — full-viewport, full-bleed image/video with an
   overlaid title. The headline act of the full-bleed template;
   also insertable into any page via the composer.
   ============================================================ */
.b-impact{position:relative; width:100%; height:100svh; min-height:560px; overflow:hidden; background:#15130f; display:block; color:#fff;}
.b-impact.tall{height:118svh;}
.b-impact.short{height:74svh; min-height:440px;}
.b-impact .media{position:absolute; inset:0; overflow:hidden;}
.b-impact .media .scale{position:absolute; inset:-6% 0; will-change:transform;}
.b-impact image-slot{display:block; width:100%; height:100%;}
.b-impact image-slot::part(frame){background:#15130f; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px);}
.b-impact image-slot::part(empty){color:rgba(255,255,255,.45); font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;}
.b-impact video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; transition:opacity .8s ease;}
.b-impact.has-video video{opacity:1;}
/* lander as a slideshow: stage fills the media layer, dots sit over the image */
.b-impact .ss-stage{position:absolute; inset:0; aspect-ratio:auto; height:100%; background:transparent;}
.b-impact .ss-frame .scale{position:absolute; inset:-6% 0; will-change:transform;}
.b-impact .ss-dots{position:absolute; left:0; right:0; bottom:clamp(18px,3vh,30px); margin:0; z-index:5;}
.b-impact .ss-dots i{background:rgba(255,255,255,.55); box-shadow:0 1px 6px rgba(0,0,0,.3);}
.b-impact .ss-dots i.on{background:#fff; width:24px; border-radius:4px;}
.b-impact .scrim{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(12,10,7,.7) 0%, rgba(12,10,7,.16) 42%, transparent 66%, rgba(12,10,7,.3) 100%);}
.b-impact .ovl{position:absolute; left:var(--gutter); bottom:clamp(46px,8vh,104px); z-index:3; width:min(640px, calc(100% - 2 * var(--gutter)));}
.b-impact.center .ovl{top:50%; bottom:auto; left:0; right:0; transform:translateY(-50%); text-align:center; width:auto; max-width:none; padding:0 var(--gutter);}
.b-impact .ovl .k{font-family:var(--font-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:#fff; opacity:.9; margin:0 0 20px; display:inline-flex; align-items:center; gap:13px;}
.b-impact .ovl .k::before{content:""; width:34px; height:1px; background:var(--accent);}
.b-impact.center .ovl .k::before{display:none;}
.b-impact .ovl h2{font-family:var(--font-display); font-weight:600; font-size:clamp(46px,8.5vw,124px); line-height:.92; letter-spacing:-.02em; margin:0; text-shadow:0 3px 50px rgba(0,0,0,.4);}
.b-impact .ovl .sub{font-family:var(--font-body); font-size:clamp(16px,1.5vw,20px); line-height:1.5; color:rgba(255,255,255,.86); margin:22px 0 0; max-width:42ch; text-shadow:0 1px 18px rgba(0,0,0,.35);}
.b-impact.center .ovl .sub{margin-left:auto; margin-right:auto;}

/* breathing-room blocks for the full-bleed template */
.b-passage{max-width:var(--measure); margin:0 auto; padding:0 var(--gutter); text-align:center;}
.b-passage .eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 20px;}
.b-passage p{font-family:var(--font-display); font-weight:500; font-size:clamp(23px,3vw,38px); line-height:1.32; letter-spacing:-.008em; margin:0; color:var(--ink); text-wrap:balance;}
.b-passage .small{font-family:var(--font-body); font-weight:400; font-size:clamp(16px,1.3vw,19px); line-height:1.65; color:var(--ink-soft); letter-spacing:0; max-width:60ch; margin:18px auto 0;}

/* small inset image (NOT full bleed — deliberate breathing room) */
.b-inset{max-width:980px; margin:0 auto; padding:0 var(--gutter); width:100%;}
.b-inset .frame{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--paper-2);}
.b-inset.portrait .frame{aspect-ratio:4/5; max-width:560px; margin:0 auto;}
.b-inset .cap{margin-top:13px;}

/* a small two-up of inset images */
.b-pair{max-width:1180px; margin:0 auto; padding:0 var(--gutter); width:100%;}
.b-pair .grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.5vw,40px);}
.b-pair .frame{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2);}
@media (max-width:720px){ .b-pair .grid{grid-template-columns:1fr;} }
.b-video .poster{position:absolute; inset:0; cursor:pointer;}
.b-video .poster .play{position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%; border:1.5px solid #fff; background:rgba(20,17,12,.32); display:grid; place-items:center; transition:background .3s, transform .3s;}
.b-video .poster:hover .play{background:rgba(189,90,61,.82); transform:scale(1.06);}
.b-video .poster .play::after{content:""; border-left:22px solid #fff; border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:5px;}

/* next-project footer */
.next{border-top:1px solid var(--line); margin-top:var(--block-gap);}
.next a{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,44px); align-items:center; text-decoration:none; color:inherit;
  max-width:1500px; margin:0 auto; padding:clamp(40px,7vh,84px) var(--gutter);}
.next .lbl{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);}
.next .nt{font-family:var(--font-display); font-weight:600; font-size:clamp(30px,5vw,68px); line-height:1; letter-spacing:-.018em; transition:color .3s;}
.next a:hover .nt{color:var(--accent);}
.next .ar{font-family:var(--font-mono); font-size:24px; color:var(--accent); transition:transform .35s;}
.next a:hover .ar{transform:translateX(8px);}

/* reveal-on-scroll (transform only — opacity-safe for capture clocks) */
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
  .rise.in{opacity:1; transform:none;}
}

@media (max-width:820px){
  .b-imgtext .grid, .b-imgtext.flip .grid{grid-template-columns:1fr;}
  .b-imgtext.flip .media{order:0;}
  .b-grid .grid{grid-template-columns:repeat(2,1fr);}
  .b-grid .cell, .b-grid .cell.wide, .b-grid .cell.tall, .b-grid .cell.half{grid-column:span 1; aspect-ratio:4/5;}
  .next a{grid-template-columns:1fr; gap:10px;}
}