/* ============================================================
   WOLF CASA — DESCRIPTION + STORYBOARD
   The four directives (light → material → form → furniture) as a
   numbered board: the plate on one side, the directive on the other.
   ============================================================ */
.desc{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.375rem,3.4vw,4.5rem);align-items:start}
.desc .body+.body{margin-top:1.05em}
@media (max-width:900px){.desc{grid-template-columns:1fr;gap:1.125rem}}

.seqrail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-08);
  border-top:var(--rule);border-bottom:var(--rule);margin-top:clamp(1.25rem,2.6vw,2.25rem)}
.seqrail>div{background:var(--paper);padding:0.8125rem clamp(0.625rem,1.4vw,1.125rem);display:flex;flex-direction:column;gap:0.3125rem}
.seqrail .n{font-variant-numeric:tabular-nums;font-size:0.6563rem;color:var(--ink-46)}
.seqrail .t{font-size:0.7813rem;letter-spacing:.14em;text-transform:uppercase}
.seqrail .g{font-size:0.6875rem;color:var(--ink-46)}
@media (max-width:620px){.seqrail{grid-template-columns:repeat(2,1fr)}}

.story{border-top:var(--rule)}
.story .bd{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.25rem,3vw,4rem);
  align-items:center;padding:clamp(1.5rem,3.4vw,3.75rem) 0;border-bottom:var(--hair)}
.story .bd:nth-child(even) .fr{order:2}
.story .fr{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border:var(--hair)}
.story .fr.wide{aspect-ratio:21/9}
.story .fr img,.story .fr image-slot{width:100%;height:100%;object-fit:cover}
.story .tx{display:flex;flex-direction:column;gap:0.75rem}
.story .kn{display:flex;align-items:baseline;gap:0.75rem;padding-bottom:0.5625rem;border-bottom:var(--hair)}
.story .kn .n{font-variant-numeric:tabular-nums;font-size:0.6875rem;color:var(--ink-46)}
.story .kn .t{font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase}
.story .kn .y{margin-left:auto;font-size:0.6875rem;color:var(--ink-46)}
.story h3{font-family:var(--disp);font-weight:200;font-variation-settings:'wdth' 118;
  letter-spacing:-.022em;line-height:1.02;font-size:clamp(1.3125rem,2.4vw,2.125rem);text-wrap:balance}
.story .fix{display:flex;flex-direction:column;border-top:var(--hair);margin-top:0.375rem}
.story .fix span{display:grid;grid-template-columns:5.5rem 1fr;gap:0.875rem;align-items:baseline;
  padding:0.5625rem 0;border-bottom:var(--hair);font-size:0.8125rem}
.story .fix b{font-size:0.6563rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-46);font-weight:400}
@media (max-width:820px){.story .bd{grid-template-columns:1fr;gap:1rem}
  .story .bd:nth-child(even) .fr{order:0}}

/* the ten-composition index */
.tenq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.125rem),1fr));gap:clamp(0.75rem,1.8vw,1.625rem)}
.tenq .plate .fr{aspect-ratio:3/4}
.tenq .plate .fr img{width:100%;height:100%;object-fit:cover}

/* ---- Kage Ma gallery: two-up frames, wide plates break the grid ---- */
.kmgal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(0.5rem,1.2vw,1.125rem)}
.kmgal figure{margin:0;display:flex;flex-direction:column;gap:0.5625rem}
.kmgal .w{grid-column:1/-1}
.kmgal img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border:var(--hair);background:var(--paper-2)}
/* a custom element with height:100% + aspect-ratio derives its WIDTH from the
   height and overflows the grid track — width drives height here instead */
.kmgal image-slot{display:block;width:100%;height:auto;aspect-ratio:4/3;border:var(--hair);background:var(--paper-2)}
.kmgal .w image-slot{aspect-ratio:21/9}
.kmgal figure,.kmgal .w{min-width:0}
.kmgal .w img{aspect-ratio:21/9}
.kmgal figcaption{color:var(--ink-46)}
@media (max-width:640px){.kmgal{grid-template-columns:1fr}.kmgal .w img{aspect-ratio:16/9}}

/* ---- static room index (replaces the 360 walk) ---- */
.rmgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.125rem,2.6vw,2.625rem)}
.rmblk{display:flex;flex-direction:column;gap:0.6875rem;padding-top:clamp(0.875rem,1.8vw,1.375rem);border-top:var(--rule)}
.rmblk .kn{display:flex;gap:clamp(0.625rem,1.4vw,1.125rem);align-items:baseline}
.rmblk .kn .n{font-variant-numeric:tabular-nums;font-size:0.6875rem;color:var(--ink-46)}
.rmblk .kn .t{font-family:var(--disp);font-size:clamp(1.1875rem,1.8vw,1.625rem)}
.rmblk .kn .y{font-size:0.6563rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-46);margin-left:auto}
.rmblk .fr{aspect-ratio:4/3;overflow:hidden;border:var(--hair);background:var(--paper-2);margin-bottom:0.25rem}
.rmblk .fr img{width:100%;height:100%;object-fit:cover}
.rmblk .speclist{margin-top:0.25rem}
.rmblk .speclist .r{grid-template-columns:1fr auto auto}
@media (max-width:760px){.rmgrid{grid-template-columns:1fr}}
@media (max-width:620px){.rmblk .speclist .r{grid-template-columns:1fr auto}.rmblk .speclist .r .m{display:none}.rmblk .speclist .r .d{display:block}}