/* The Album — three prototype layouts. On-brand; structurally different.
   Throwaway. Shared tokens follow concept-Dv3. Prefixes: a- Chapters, b- Vitrine, c- Drawers. */

@font-face{
  font-family:"Bickham";
  src:url("../../ds/fonts/BickhamScriptPro-Regular.woff2") format("woff2");
  font-weight:400; font-display:swap;
}

:root{
  --maroon:#6C131E; --maroon-deep:#51161B; --maroon-900:#3D0F15;
  --gold:#B38C45; --gold-soft:#D5B471; --champagne:#F3D8B4; --champagne-50:#FBEEDB;
  --gold-ink:#856327;
  --ivory:#FFFAF1; --ivory-shade:#F5ECDD; --paper:#FFFDF8;
  --taupe:#CCC0B2; --taupe-soft:#E4DCD0; --plum-black:#2A1E28; --gold-tint:#E7D3A8;
  --grad-gold:linear-gradient(135deg,#E7D3A8 0%,#D5B471 32%,#B38C45 64%,#8A6A30 100%);
  --text-primary:var(--plum-black); --text-body:#45323D; --text-muted:#736570;
  --text-on-dark:var(--ivory); --text-on-dark-muted:#E0CFC0;
  --line:var(--taupe-soft); --line-gold:var(--gold-tint); --line-on-dark:rgba(243,216,180,.28);
  --font-display:'arpona','Cormorant Garamond',Georgia,serif;
  --font-body:'Montserrat',system-ui,-apple-system,Arial,sans-serif;
  --font-script:'Bickham',cursive;
  --fs-h1:clamp(38px,4.6vw,60px); --fs-h2:clamp(30px,3.4vw,44px);
  --fs-lead:18px; --fs-body:16px; --fs-small:14px; --fs-caption:12.5px;
  --lh-body:1.7; --fs-eyebrow:12.5px; --tracking-eyebrow:.28em;
  --fs-meta:11px; --tracking-meta:.18em; --tracking-label:.16em;
  --gutter:clamp(20px,5vw,64px); --container:1200px;
  --radius-md:12px; --radius-lg:18px;
  --shadow-sm:0 2px 10px rgba(42,30,40,.06);
  --shadow-md:0 10px 30px -12px rgba(42,30,40,.16);
  --shadow-lg:0 26px 60px -22px rgba(42,30,40,.26);
  --shadow-gold:0 18px 44px -20px rgba(138,106,48,.30);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:180ms; --dur-base:340ms; --dur-slow:560ms;
  --hero-maroon:linear-gradient(157deg,#51161B 0%,#390F13 100%);
  --z-sticky:20; --z-top:40; --z-proto:55; --z-lb:100;
}

*{box-sizing:border-box;}
/* Standalone proto owns the page chrome. When embedded, Dv3 already sets these. */
body.album-page{
  margin:0; padding:0;
  font-family:var(--font-body); color:var(--text-body); background:var(--ivory);
  font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
/* room for the prototype switcher bar — standalone only; inside Dv3 there is no bar, and the
   reserve showed as an ivory band between the closing card and the footer */
body.album-page{padding-bottom:88px;}
.album-page img, #view-work img, .lb img{max-width:100%; display:block;}
body.album-page a{color:inherit; text-decoration:none;}
body.album-page button{font-family:inherit; cursor:pointer;}
body.album-page h1, body.album-page h2, body.album-page h3{
  font-family:var(--font-display); font-weight:300; margin:0; line-height:1.12; color:var(--text-primary); text-wrap:balance;
}
body.album-page p{margin:0;}
body.album-page .wrap, #view-work .wrap{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
.wrap.is-wide{max-width:1520px;}
body.album-page .eyebrow{
  font-family:var(--font-body); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; font-weight:600; color:#8A6A30;
}
body.album-page .eyebrow.on-dark{color:var(--champagne);}
.i-tail{font-family:var(--font-display); font-style:italic; font-weight:300;}
.skip{
  position:absolute; left:-999px; top:0; background:var(--maroon); color:var(--ivory); padding:8px 14px; z-index:100;
}
.skip:focus{left:12px; top:12px;}
::selection{background:var(--champagne); color:var(--maroon);}

.motif{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 8px;}
.motif .ln{height:1px; width:56px; background:linear-gradient(90deg,transparent,var(--gold));}
.motif .ln.r{background:linear-gradient(90deg,var(--gold),transparent);}
.motif .dia{width:6px; height:6px; background:var(--grad-gold); transform:rotate(45deg); flex:0 0 auto;}

/* ── shell ── */
.shell-top{
  position:sticky; top:0; z-index:var(--z-top);
  display:flex; align-items:center; gap:18px;
  padding:16px var(--gutter);
  background:rgba(255,250,241,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-gold);
}
.shell-logo{position:relative; display:block; height:36px; width:220px; flex:0 0 auto;}
.shell-logo img{position:absolute; inset:0; height:100%; width:100%; object-fit:contain; object-position:left center;}
.shell-logo .cream{opacity:0;}
.shell-note{
  margin-left:auto; font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--gold-ink);
}
.shell-back{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--maroon);
  border-bottom:1px solid var(--gold-tint); padding-bottom:2px;
}
.shell-back:hover{border-color:var(--gold);}
.shell-foot{
  padding:48px var(--gutter) 28px; text-align:center; color:var(--text-muted); font-size:var(--fs-caption);
  max-width:62ch; margin:0 auto;
}
body.variation-C{
  background:var(--maroon-900);
}
body.variation-C .shell-top{
  background:rgba(61,15,21,.94); border-bottom-color:var(--line-on-dark);
}
body.variation-C .shell-logo .maroon{opacity:0;}
body.variation-C .shell-logo .cream{opacity:1;}
body.variation-C .shell-note, body.variation-C .shell-back{color:var(--champagne);}
body.variation-C .shell-back{border-bottom-color:rgba(243,216,180,.35);}
body.variation-C .shell-foot{color:var(--text-on-dark-muted);}

.var[hidden]{display:none !important;}

/* ════════════ A · CHAPTERS ════════════ */
.a-hero{
  background:var(--maroon); background-image:var(--hero-maroon); color:var(--ivory);
  text-align:center; padding:clamp(28px,4vh,44px) var(--gutter) clamp(28px,4vh,40px);
}
.a-hero .eyebrow{color:var(--champagne);}
.a-hero h1{color:var(--ivory); font-size:clamp(32px,4vw,48px); margin-top:12px;}
.a-hero h1 .i-tail{color:var(--gold-soft);}
.a-hero .lede{max-width:52ch; margin:16px auto 0; color:var(--text-on-dark-muted); font-size:var(--fs-lead); line-height:1.7;}
.a-body{padding-bottom:clamp(96px,12vw,152px);}
/* Dv3's shared .wrap rule has higher specificity than the standalone prototype.
   Restore the gallery's closing breathing room before the maroon reply section. */
#view-work .a-body{padding-bottom:clamp(96px,12vw,152px);}
.a-toolbar, .b-toolbar{
  display:flex; flex-direction:column; align-items:center; padding:28px 0 8px; gap:0;
}
.filts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 2px;
  width:100%; padding-bottom:4px;
  border-bottom:1px solid var(--line-gold);
}
#view-work .filts{border-bottom:0;}
.filt{
  background:none; border:0; border-bottom:1px solid transparent;
  padding:10px 14px 12px; margin-bottom:-1px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--text-muted); position:relative;
  transition:color var(--dur-fast) var(--ease-soft);
}
.filt:hover{color:var(--maroon);}
.filt.is-on{color:var(--maroon);}
.filt.is-on::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px;
  height:1px; background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
}
.toolbar-below{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:100%; padding-top:18px;
}
.count{font-size:var(--fs-caption); color:var(--text-muted); text-align:center;}
.count b{color:var(--maroon); font-weight:600;}
.look{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:0 auto 2px;
}
.look button{
  background:none; border:0; padding:6px 4px 8px;
  font-family:var(--font-display); font-size:clamp(22px,2.4vw,28px);
  font-style:italic; font-weight:400; color:var(--text-muted);
  position:relative; line-height:1;
}
.look button:hover{color:var(--maroon);}
.look button.is-on{color:var(--maroon);}
.look button.is-on::after{
  content:""; display:block; width:28px; height:1px; margin:8px auto 0; background:var(--gold);
}
.look__dia{
  width:6px; height:6px; background:var(--grad-gold); transform:rotate(45deg); flex:0 0 auto;
}
.a-hint{margin-top:2px; font-size:17px; color:var(--gold-ink); font-style:italic; font-family:var(--font-display); text-align:center;}

.a-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px); padding:22px 0 0;
}
.a-card{
  display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--gold-tint);
  border-radius:6px; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.a-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-gold);}
.a-card__img{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  padding:0; border:0; width:100%; display:block; cursor:pointer; background:var(--ivory-shade); color:inherit;
}
.a-card__img img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-soft);}
.a-card:hover .a-card__img img{transform:scale(1.02);}
.a-card__word{
  position:absolute; left:12px; top:12px; background:rgba(61,15,21,.72); color:var(--champagne);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; padding:5px 11px; border-radius:999px;
}
.a-card__body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1;}
.a-card__nm{font-family:var(--font-display); font-weight:300; font-size:21px; color:var(--maroon); line-height:1.12;}
.a-card__place{margin-top:4px; font-size:var(--fs-meta); letter-spacing:var(--tracking-meta); text-transform:uppercase; color:var(--text-muted);}
.a-card__view{margin-top:auto; padding-top:14px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--maroon);}

.a-chapters{display:flex; flex-direction:column; gap:0; padding:10px 0 0;}
.a-spread{
  display:grid; grid-template-columns:minmax(300px,.52fr) 1fr;
  grid-template-areas:
    "cover copy"
    "cover pieces"
    "cover cta";
  gap:clamp(12px,2vw,18px) clamp(22px,4vw,48px);
  align-items:center; padding:clamp(28px,4vw,48px) 0;
  border-bottom:1px solid var(--line-gold);
}
.a-spread__cover{
  grid-area:cover;
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:4px;
  border:1px solid var(--gold-tint); box-shadow:var(--shadow-md); background:var(--ivory-shade);
  padding:0; width:100%; display:block; cursor:pointer; color:inherit;
}
.a-spread__copy{grid-area:copy; min-width:0;}
.a-spread__pieces{grid-area:pieces; display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
.a-spread__cta{grid-area:cta; justify-self:start;}
.a-spread__cover img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-soft);}
.a-spread:hover .a-spread__cover img{transform:scale(1.02);}
.a-spread__copy{min-width:0;}
.a-spread__word{font-size:var(--fs-meta); letter-spacing:var(--tracking-meta); text-transform:uppercase; font-weight:600; color:var(--gold-ink);}
.a-spread__nm{
  font-family:var(--font-script); font-size:clamp(36px,4.4vw,58px); line-height:.9;
  color:var(--maroon); margin-top:6px;
}
.a-spread__meta{margin-top:8px; font-size:var(--fs-meta); letter-spacing:var(--tracking-meta); text-transform:uppercase; color:var(--text-muted);}
.a-spread__pieces{display:flex; gap:10px; margin-top:22px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
.a-spread__pieces::-webkit-scrollbar{display:none;}
.a-thumb{
  flex:0 0 auto; width:118px; aspect-ratio:4/5; border:0; padding:0; background:var(--ivory-shade);
  border-radius:3px; overflow:hidden; border:1px solid var(--gold-tint); position:relative;
}
.a-thumb img{width:100%; height:100%; object-fit:cover;}
.a-thumb.is-video::after{
  content:""; position:absolute; left:8px; bottom:8px; width:18px; height:18px; border-radius:50%;
  background:rgba(61,15,21,.72);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><polygon fill='%23F3D8B4' points='4,3 9,6 4,9'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:10px;
}
.a-spread__cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--maroon);
  border-bottom:1px solid transparent;
}
.a-spread__cta:hover{border-bottom-color:var(--gold);}

.a-pieces{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); padding:22px 0 0;
}
.a-piece{background:none; border:0; padding:0; text-align:left; color:inherit;}
.a-piece__mat{
  background:var(--paper); border:1px solid var(--gold-tint); padding:10px 10px 14px;
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.a-piece:hover .a-piece__mat{transform:translateY(-2px); box-shadow:var(--shadow-gold);}
.a-piece__img{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ivory-shade);}
.a-piece__img.is-wide{aspect-ratio:16/10;}
.a-piece__img img{width:100%; height:100%; object-fit:cover;}
.a-piece__cap{margin-top:10px; padding:0 4px;}
.a-piece__type{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold-ink);}
.a-piece__who{font-family:var(--font-script); font-size:22px; line-height:.95; color:var(--maroon); margin-top:4px;}
.a-piece__sample{font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-top:4px;}

@media (max-width:900px){
  .a-grid, .a-pieces{grid-template-columns:repeat(2,1fr);}
  .a-spread{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "cover"
      "pieces"
      "cta";
  }
  .a-spread__cover{max-width:none;}
}
@media (max-width:600px){
  .shell-note{display:none;}
  .shell-logo{width:168px; height:28px;}
  .a-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto;}
}

/* ════════════ B · VITRINE ════════════ */
.b-hero{
  padding:clamp(28px,5vh,48px) var(--gutter) 8px;
  background:var(--ivory);
}
.b-hero__inner{max-width:var(--container); margin:0 auto;}
.b-kicker{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(42px,7vw,92px); line-height:.92; color:var(--maroon);
  margin-top:8px; letter-spacing:-0.02em; text-wrap:balance;
}
.b-hero .lede{margin-top:14px; max-width:48ch; color:var(--text-muted); font-size:var(--fs-small);}
.b-wall{
  background:
    radial-gradient(1200px 400px at 50% -10%, color-mix(in srgb, var(--champagne) 35%, transparent), transparent 70%),
    var(--ivory-shade);
  padding:8px 0 88px; min-height:60vh;
}
.b-toolbar{padding:18px 0 8px;}

.b-couples{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,22px); padding-top:18px;
}
.b-plate{
  position:relative; aspect-ratio:4/5; overflow:hidden; display:block; color:var(--ivory);
  background:var(--maroon-900);
}
.b-plate img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-soft), filter .6s var(--ease-soft);}
.b-plate:hover img{transform:scale(1.02); filter:saturate(1.05);}
.b-plate__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(30,12,16,.78) 100%);
  pointer-events:none;
}
.b-plate__copy{position:absolute; left:22px; right:22px; bottom:22px;}
.b-plate__word{font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--champagne);}
.b-plate__nm{font-family:var(--font-script); font-size:clamp(28px,3vw,40px); line-height:.9; margin-top:6px;}

.b-rooms{display:flex; flex-direction:column; gap:0; padding-top:12px;}
.b-room{padding:clamp(40px,6vw,80px) 0;}
.b-room + .b-room{position:relative;}
.b-room + .b-room::before{
  content:""; position:absolute; top:0; left:50%; z-index:1;
  width:7px; height:7px; margin-left:-3.5px; margin-top:-3.5px;
  background:var(--grad-gold); transform:rotate(45deg);
  box-shadow:-48px 3px 0 -2.5px var(--gold-tint), 48px 3px 0 -2.5px var(--gold-tint);
}
.b-room + .b-room::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-tint) 18%, var(--gold-tint) 82%, transparent);
}
.b-room__label{
  display:flex; flex-direction:row; align-items:baseline; justify-content:space-between;
  gap:16px 28px; margin-bottom:22px;
}
.b-room__who{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; min-width:0;
}
.b-room__nm{
  font-family:var(--font-script); font-size:clamp(44px,5.8vw,76px);
  color:var(--maroon); line-height:.88; font-weight:400;
}
.b-room__place{font-size:var(--fs-meta); letter-spacing:var(--tracking-meta); text-transform:uppercase; color:var(--text-muted);}
.b-room__cta{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--maroon);
  margin-left:auto; flex:0 0 auto; white-space:nowrap;
}
.b-room__cta:hover{color:var(--gold-ink);}
.b-room__row{
  display:flex; gap:14px; align-items:stretch;
}
.b-mat{
  background:var(--paper); padding:12px 12px 16px; border:1px solid var(--gold-tint);
  box-shadow:var(--shadow-sm); text-align:left; flex:1 1 0; min-width:0;
  transition:transform var(--dur-base) var(--ease-soft);
}
.b-mat:hover{transform:translateY(-2px);}
.b-mat__img{position:relative; overflow:hidden; background:#1e0c10;}
.b-mat__img img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5;}
.b-mat__img.is-wide img{aspect-ratio:16/10;}
.b-mat__cap{margin-top:10px; font-size:11px; letter-spacing:.04em; color:var(--text-muted);}

.b-masonry{
  column-count:3; column-gap:16px; padding-top:22px;
}
.b-tile{
  break-inside:avoid; margin:0 0 16px; width:100%;
  background:none; border:0; padding:0; text-align:left; color:inherit;
}
.b-tile__mat{
  background:var(--paper); padding:11px 11px 14px; border:1px solid var(--gold-tint); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-soft);
}
.b-tile:hover .b-tile__mat{transform:translateY(-2px);}
.b-tile__img{position:relative; overflow:hidden; background:#1e0c10;}
.b-tile__img img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;}
.b-tile.is-wide .b-tile__img img{aspect-ratio:16/10;}
.b-tile.is-lead .b-tile__img img{aspect-ratio:5/6;}
.b-tile__who{margin-top:9px; font-family:var(--font-script); font-size:22px; color:var(--maroon); line-height:.9;}
.b-tile__type{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold-ink); margin-top:4px;}
.b-play{
  position:absolute; left:10px; bottom:10px; width:28px; height:28px; border-radius:50%;
  background:rgba(61,15,21,.78); display:grid; place-items:center;
}
.b-play i{display:block; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--champagne); margin-left:2px;}

@media (max-width:900px){
  .b-masonry{column-count:2;}
}
@media (max-width:600px){
  .b-couples{grid-template-columns:1fr;}
  .b-masonry{column-count:1;}
}

/* ════════════ C · DRAWERS ════════════ */
.c-cabinet{
  display:grid; grid-template-columns:minmax(240px,280px) 1fr; min-height:calc(100vh - 69px);
  background:var(--maroon-900);
}
.c-index{
  background:var(--hero-maroon); color:var(--ivory);
  padding:28px 22px 40px; position:sticky; top:69px; align-self:start; height:calc(100vh - 69px);
  overflow:auto; border-right:1px solid var(--line-on-dark);
}
.c-index__head h1{color:var(--ivory); font-size:clamp(28px,3vw,38px); margin-top:10px;}
.c-index__head p{margin-top:12px; color:var(--text-on-dark-muted); font-size:var(--fs-small); line-height:1.6;}
.c-drawers{margin-top:28px; display:flex; flex-direction:column;}
.c-drawer{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  width:100%; background:none; border:0; border-top:1px solid var(--line-on-dark);
  padding:13px 4px; color:var(--text-on-dark-muted); text-align:left;
  transition:color var(--dur-fast) var(--ease-soft), padding-left var(--dur-base) var(--ease-soft);
}
.c-drawer:last-child{border-bottom:1px solid var(--line-on-dark);}
.c-drawer:hover{color:var(--champagne); padding-left:4px;}
.c-drawer.is-on{color:var(--ivory);}
.c-drawer.is-on .c-drawer__name{border-bottom:1px solid var(--gold-soft);}
.c-drawer__name{font-family:var(--font-display); font-size:18px; font-weight:400;}
.c-drawer__n{font-size:10px; letter-spacing:.14em; font-weight:600;}

.c-tray{
  background:linear-gradient(180deg, var(--ivory) 0%, var(--ivory-shade) 100%);
  min-height:calc(100vh - 69px);
  padding:28px clamp(20px,3vw,40px) 80px;
}
.c-tray.is-fresh{animation:cOpen .7s var(--ease-out);}
@keyframes cOpen{
  from{opacity:0; transform:translateX(-18px);}
  to{opacity:1; transform:none;}
}
.c-toolbar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.c-tray__title{
  font-family:var(--font-display); font-style:italic; font-size:clamp(26px,3vw,36px); color:var(--maroon);
}
.c-count{font-size:var(--fs-caption); color:var(--text-muted); margin-top:4px;}
.c-layout{
  display:inline-flex; background:var(--paper); border:1px solid var(--line-gold); border-radius:4px; overflow:hidden;
}
.c-layout button{
  background:none; border:0; padding:9px 14px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--text-muted);
}
.c-layout button.is-on{background:var(--maroon); color:var(--ivory);}

.c-couples{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.c-cover{
  position:relative; aspect-ratio:4/5; overflow:hidden; display:block; background:var(--maroon-900);
}
.c-cover img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-soft);}
.c-cover:hover img{transform:scale(1.02);}
.c-cover__cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 16px 14px;
  background:linear-gradient(transparent, rgba(30,12,16,.82));
  color:var(--ivory);
}
.c-cover__nm{font-family:var(--font-script); font-size:28px; line-height:.9;}
.c-cover__mt{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--champagne); margin-top:6px;}

.c-stacks{display:flex; flex-direction:column; gap:22px;}
.c-stack{
  display:grid; grid-template-columns:72px 1fr; min-height:280px;
  background:var(--paper); border:1px solid var(--gold-tint); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.c-spine{
  writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 0; color:var(--ivory); text-align:center;
}
.c-spine__word{font-size:10px; letter-spacing:.28em; text-transform:uppercase; font-weight:600; opacity:.8;}
.c-spine__nm{font-family:var(--font-script); font-size:26px; line-height:.9;}
.c-film{
  display:flex; gap:10px; overflow-x:auto; padding:14px 14px 14px 8px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
}
.c-shot{
  flex:0 0 auto; width:min(220px, 42vw); scroll-snap-align:start;
  background:none; border:0; padding:0; position:relative;
}
.c-shot img{width:100%; height:252px; object-fit:cover; display:block;}
.c-shot.is-wide{width:min(320px, 70vw);}
.c-end{
  flex:0 0 auto; width:160px; scroll-snap-align:start;
  display:grid; place-items:center; text-align:center; padding:18px;
  background:var(--ivory-shade); color:var(--maroon);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.c-end:hover{background:var(--champagne-50);}

.c-loose{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px;
}
.c-loose > button{
  background:var(--paper); border:1px solid var(--gold-tint); padding:8px; text-align:left;
}
.c-loose img{width:100%; aspect-ratio:4/5; object-fit:cover;}
.c-loose button.is-wide img{aspect-ratio:16/10;}
.c-loose .c-who{display:block; margin-top:8px; font-family:var(--font-script); font-size:20px; color:var(--maroon); line-height:.9;}
.c-loose .c-k{font-family:var(--font-body); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold-ink); display:block; margin-top:4px;}

@media (max-width:900px){
  .c-cabinet{grid-template-columns:1fr;}
  .c-index{
    position:relative; top:0; height:auto; padding:24px var(--gutter) 12px;
  }
  .c-drawers{
    flex-direction:row; overflow-x:auto; gap:0; margin-top:16px;
    margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) 8px;
    scrollbar-width:none;
  }
  .c-drawer{
    flex:0 0 auto; border:1px solid var(--line-on-dark); border-radius:999px; margin-right:8px;
    padding:8px 14px; min-width:max-content;
  }
  .c-drawer:last-child{border-bottom-color:var(--line-on-dark);}
  .c-drawer.is-on{background:rgba(243,216,180,.12);}
}
@media (max-width:600px){
  .c-couples{grid-template-columns:1fr;}
  .c-stack{grid-template-columns:52px 1fr;}
}

/* ── lightbox ── */
.lb{
  position:fixed; inset:0; z-index:var(--z-lb);
  background:rgba(30,12,16,.94);
  display:flex; align-items:center; justify-content:center;
  padding:8vh 8vw 18vh;
}
.lb[hidden]{display:none !important;}
.lb__frame{position:relative; max-width:min(92vw,1100px); max-height:76vh;}
.lb__frame img{max-width:92vw; max-height:76vh; object-fit:contain; border-radius:2px; box-shadow:var(--shadow-lg);}
.lb__close{
  position:absolute; top:18px; right:24px; background:none; border:0; color:var(--ivory);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
}
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.08); border:1px solid var(--line-on-dark); color:var(--ivory);
  width:46px; height:46px; border-radius:50%; font-size:22px; display:grid; place-items:center;
}
.lb__nav.prev{left:18px;} .lb__nav.next{right:18px;}
.lb__meta{
  position:absolute; left:0; right:0; bottom:0; padding:18px var(--gutter) 22px;
  text-align:center; color:var(--champagne);
}
.lb__count{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft);}
.lb__cap{margin-top:8px; font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--ivory);}
.lb__who{margin-top:4px; font-size:var(--fs-caption); letter-spacing:.08em;}
.lb__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:11px 17px 11px 19px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--champagne); border:1px solid rgba(213,180,113,.52); border-radius:999px;
  background:linear-gradient(180deg,rgba(213,180,113,.10),rgba(213,180,113,.035));
  box-shadow:0 12px 30px -18px rgba(213,180,113,.7),inset 0 1px rgba(255,255,255,.05);
  transition:color var(--dur-fast) var(--ease-soft),border-color var(--dur-fast) var(--ease-soft),background var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft),box-shadow var(--dur-fast) var(--ease-soft);
}
.lb__cta span{font-size:14px;line-height:0;transition:transform var(--dur-fast) var(--ease-soft);}
.lb__cta:hover{color:var(--ivory);border-color:var(--gold-soft);background:rgba(213,180,113,.15);transform:translateY(-2px);box-shadow:0 18px 34px -18px rgba(213,180,113,.8);}
.lb__cta:hover span{transform:translateX(3px);}
.lb__cta:focus-visible{outline:2px solid var(--champagne);outline-offset:4px;}
.lb__cta:active{transform:translateY(0);}
.lb__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:rgba(61,15,21,.55);
  border:1px solid var(--gold-soft); pointer-events:none;
}
.lb__play::after{
  content:""; position:absolute; left:26px; top:20px;
  border-style:solid; border-width:12px 0 12px 18px; border-color:transparent transparent transparent var(--champagne);
}

/* ── back to the top ── */
.totop{
  position:fixed; right:max(16px, var(--gutter)); bottom:88px;
  z-index:var(--z-sticky);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,250,241,.88); border:1px solid var(--gold-tint);
  padding:12px 10px 10px; min-width:44px; min-height:44px;
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--maroon);
}
.totop[hidden]{display:none !important;}
.totop:hover{border-color:var(--gold); color:var(--gold-ink);}
.totop__mark{
  width:8px; height:8px; border-top:1px solid var(--gold); border-left:1px solid var(--gold);
  transform:rotate(45deg); margin-bottom:2px;
}
body.is-lb .totop{display:none !important;}

/* ── prototype switcher (not part of the design) ── */
.proto-switch{
  display:none;
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:var(--z-proto);
  align-items:center; gap:4px;
  background:#1a1014; color:#f6efe4;
  border:1px solid rgba(243,216,180,.28);
  border-radius:999px; padding:6px 8px 6px 6px;
  min-width:min(92vw, 420px);
  font-family:ui-sans-serif, system-ui, sans-serif;
}
body.album-page .proto-switch, body.on-work .proto-switch{display:flex;}
.proto-switch button{
  width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:inherit; font-size:18px;
}
.proto-switch button:hover{background:rgba(255,255,255,.16);}
.proto-switch__mid{flex:1; text-align:center; line-height:1.2; padding:0 8px;}
.proto-switch__mid strong{display:block; font-size:12px; letter-spacing:.04em;}
.proto-switch__mid span{display:block; font-size:10px; opacity:.65; margin-top:2px;}

@media (pointer:fine){ a,button{cursor:pointer;} }

/* ── Phone pass (A + B) — the Album's own rules: 44px rail, count first, work in view ── */
@media (max-width:600px){
  .shell-note{display:none;}
  .shell-logo{width:168px; height:28px;}
  .shell-top{padding:12px var(--gutter); gap:12px;}

  .a-hero{padding:20px var(--gutter) 18px;}
  .a-hero h1{font-size:clamp(28px,8vw,36px); margin-top:8px;}
  .a-hero .lede, .b-hero .lede{display:none;}
  .a-hint{display:none;}
  .a-toolbar{padding:16px 0 4px;}
  .toolbar-below{padding-top:14px; gap:8px;}
  .look{
    width:100%; gap:12px; margin:0;
  }
  .look button{
    min-height:44px; padding:8px 10px; font-size:22px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .filts{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    min-width:0; border-bottom-color:var(--line-gold);
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);
  }
  .filts::-webkit-scrollbar{display:none;}
  .filt{
    flex:0 0 auto; white-space:nowrap; scroll-snap-align:start;
    min-height:44px; padding:0 16px; display:inline-flex; align-items:center;
    font-size:11px;
  }

  /* the album as a phone browses a collection: the newest celebration opens full-width, the
     rest fall two to a row. One card per row ran fifteen 650px cards into ~9,000px — twelve
     screens of scrolling before the page's own closing invitation. */
  .a-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; max-width:none; padding-top:16px;}
  .a-grid > .a-card:first-child{grid-column:1 / -1;}
  .a-grid > .a-card:not(:first-child) .a-card__body{padding:12px 12px 6px;}
  .a-grid > .a-card:not(:first-child) .a-card__nm{font-size:17px; line-height:1.18;}
  .a-grid > .a-card:not(:first-child) .a-card__place{font-size:11px; letter-spacing:.1em;}
  .a-grid > .a-card:not(:first-child) .a-card__view{padding-top:6px; letter-spacing:.1em;}
  .a-grid > .a-card:not(:first-child) .a-card__word{left:8px; top:8px; max-width:calc(100% - 16px); padding:4px 9px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.1em;}
  .a-pieces{grid-template-columns:repeat(2,1fr); gap:10px; max-width:none;}
  .a-card__word, .a-piece__type, .a-card__view, .a-spread__cta{font-size:11px; letter-spacing:.12em;}
  .a-card__view, .a-spread__cta, .b-room__cta{
    min-height:44px; display:inline-flex; align-items:center;
  }

  .a-spread{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "cover"
      "pieces"
      "cta";
    gap:14px; padding:28px 0;
  }
  .a-spread__cover{max-width:none; height:min(46vh, 340px); aspect-ratio:auto;}
  .a-spread__cover img{height:100%;}
  .a-spread__nm{font-size:clamp(32px,10vw,44px);}
  .a-spread__pieces{
    margin-top:0;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  .a-spread__cta{margin-top:0;}
  .a-thumb{width:108px; min-height:44px; scroll-snap-align:start;}

  .b-hero{padding:16px var(--gutter) 4px;}
  .b-kicker{font-size:clamp(32px,9vw,44px);}
  .b-toolbar{padding:10px 0 4px; gap:10px;}
  .b-couples{grid-template-columns:1fr;}
  .b-plate{aspect-ratio:4/5; max-height:62vh;}
  .b-room{padding:36px 0;}
  .b-room__nm{font-size:clamp(36px,11vw,52px);}
  .b-room__label{flex-direction:column; align-items:flex-start; gap:6px;}
  .b-room__cta{min-height:44px; margin-left:0; white-space:normal;}
  .b-room__row{
    display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);
  }
  .b-room__row::-webkit-scrollbar{display:none;}
  .b-mat{flex:0 0 72vw; max-width:280px; scroll-snap-align:start;}
  .b-masonry{column-count:2; column-gap:10px;}
  .b-tile__who{font-size:20px;}
  .b-tile__type, .b-mat__cap, .count{font-size:11px;}

  .lb{padding:10vh 4vw 22vh;}
  .lb__close{
    top:12px; right:12px; min-width:44px; min-height:44px;
    display:grid; place-items:center; font-size:11px;
  }
  .lb__nav{width:44px; height:44px;}
  .lb__nav.prev{left:8px;} .lb__nav.next{right:8px;}
  .lb__meta{padding:14px var(--gutter) 28px;}
  .lb__cta{min-height:44px; align-items:center; font-size:11px;}
  .lb__cap{font-size:18px;}

  body.is-lb .proto-switch, body.is-lb .totop{display:none;}

  /* a paper disc, like the site's arrow controls — the labelled box covered the corner of
     whichever card sat under it */
  .totop{right:14px; bottom:18px; width:44px; height:44px; padding:0; border-radius:50%; justify-content:center; gap:0;
    font-size:0; letter-spacing:0; background:rgba(255,253,248,.94); box-shadow:0 10px 24px -12px rgba(42,30,40,.45);}
  .totop__mark{width:9px; height:9px; margin:4px 0 0;}
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none !important; transition:none !important;}
  .a-card:hover, .a-piece:hover .a-piece__mat, .b-mat:hover, .b-tile:hover .b-tile__mat{transform:none;}
  .a-card:hover .a-card__img img, .a-spread:hover .a-spread__cover img,
  .b-plate:hover img, .c-cover:hover img{transform:none;}
}