/* RAM Office Interiors — shared */
:root{
  --ink:#14110F;
  --ink-mid:#3A3531;
  --ink-soft:#6F6A63;
  --bone:#F6F4F0;
  --stone:#EDEAE4;
  --ash:#D9D4CB;
  --deep:#1A1714;
  --night:#100E0C;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--serif); font-weight:300; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:300; font-family:var(--serif); text-wrap:balance}
p{margin:0}

.micro{font-family:var(--sans); font-weight:300; font-size:.63rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft)}
.micro-quiet{color:var(--ash)}
.micro-light{color:rgba(255,255,255,.74)}

/* masthead */
.mast{position:sticky; top:0; z-index:60; background:var(--bone); border-bottom:1px solid var(--ash)}
.mast-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:14px 40px}
.mast nav{display:flex; gap:30px}
.mast nav.right{justify-content:flex-end}
.mast nav a{font-family:var(--sans); font-weight:300; font-size:.61rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-soft); padding-bottom:3px; border-bottom:1px solid transparent}
.mast nav a:hover,.mast nav a:focus-visible{color:var(--ink); border-bottom-color:var(--ink)}
.mast nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}
.brand img{width:104px; height:auto}
@media (max-width:900px){
  .mast-in{grid-template-columns:1fr; justify-items:center; gap:10px; padding:12px 18px}
  .mast nav{display:none}
  .brand img{width:88px}
}

/* plates */
.plate{position:relative; width:100%; overflow:hidden; background:var(--stone)}
.plate .frame{overflow:hidden; height:100%}
.plate img{width:100%; height:100%; object-fit:cover;
  transform:scale(1.07); transition:transform 2.4s cubic-bezier(.19,1,.22,1)}
.plate.seen img{transform:scale(1)}
.plate-hero{height:clamp(540px,86vh,920px)}
.plate-tall{height:clamp(460px,72vh,780px)}
.plate-mid{height:clamp(380px,56vh,620px)}
.veil{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(14,12,10,.30) 0%, rgba(14,12,10,0) 32%,
    rgba(14,12,10,0) 46%, rgba(14,12,10,.58) 100%)}
.overlay{position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column;
  align-items:center; gap:18px; padding:0 24px 58px; text-align:center}
.plate-hero .veil{background:linear-gradient(to bottom, rgba(14,12,10,.34) 0%,
  rgba(14,12,10,.06) 24%, rgba(14,12,10,.22) 54%, rgba(14,12,10,.78) 100%)}
.overlay .kicker{color:rgba(255,255,255,.82); text-shadow:0 1px 18px rgba(10,8,6,.7)}
.overlay h1,.overlay h2{color:#FBFAF8; font-size:clamp(2.2rem,5.4vw,4.4rem); line-height:1.06; max-width:17ch;
  text-shadow:0 2px 34px rgba(10,8,6,.5)}
.overlay .link,.link-light{font-family:var(--sans); font-weight:300; font-size:.61rem;
  letter-spacing:.28em; text-transform:uppercase; color:#FBFAF8; padding-bottom:5px;
  border-bottom:1px solid rgba(251,250,248,.5); text-shadow:0 1px 16px rgba(10,8,6,.65)}
.overlay .link:hover,.link-light:hover,.overlay .link:focus-visible{border-bottom-color:#FBFAF8}

/* editorial blocks */
.statement{padding:clamp(92px,14vh,180px) 26px; text-align:center; background:var(--bone);
  display:flex; flex-direction:column; align-items:center; gap:30px}
.statement p.lead{color:var(--ink); font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.42; max-width:24ch}
.rule{width:1px; height:54px; background:var(--ash)}
.rule-gold{width:46px; height:1px; background:var(--ash)}

.caption{padding:52px 26px clamp(84px,12vh,148px); text-align:center; background:var(--bone);
  display:flex; flex-direction:column; align-items:center; gap:15px}
.caption h2{font-size:clamp(1.75rem,3.4vw,2.7rem); line-height:1.14; color:var(--ink)}
.caption p{color:var(--ink-soft); font-size:1.12rem; line-height:1.68; max-width:46ch}
.caption .link{margin-top:8px; font-family:var(--sans); font-weight:300; font-size:.61rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink);
  padding-bottom:5px; border-bottom:1px solid var(--ash)}
.caption .link:hover,.caption .link:focus-visible{border-bottom-color:var(--ink)}

/* two-up */
.duo{display:grid; grid-template-columns:1fr 1fr; background:var(--bone)}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.duo .cell{position:relative; overflow:hidden; background:var(--stone)}
.duo .cell .frame{height:clamp(360px,50vh,600px); overflow:hidden}
.duo .cell img{width:100%; height:100%; object-fit:cover;
  transform:scale(1.07); transition:transform 2.4s cubic-bezier(.19,1,.22,1)}
.duo .cell.seen img{transform:scale(1)}
.duo .cell .tag{position:absolute; left:0; right:0; bottom:0; padding:0 22px 30px; text-align:center}
.duo .cell .tag .t{color:#FBFAF8; font-size:1.5rem; margin-top:9px}

/* specification list — the quiet detail */
.spec{background:var(--stone); padding:clamp(84px,12vh,156px) 26px}
.spec-in{max-width:940px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px}
.spec h2{color:var(--ink); font-size:clamp(1.7rem,3.2vw,2.5rem)}
.spec-grid{width:100%; margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--ash); border:1px solid var(--ash)}
@media (max-width:760px){.spec-grid{grid-template-columns:1fr}}
.spec-grid > div{background:var(--stone); padding:32px 26px; text-align:left}
.spec-grid dt{font-family:var(--sans); font-weight:300; font-size:.6rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-mid); margin-bottom:12px}
.spec-grid dd{margin:0; color:var(--ink-soft); font-size:1.02rem; line-height:1.62}

/* related */
.related{background:var(--bone); padding:clamp(80px,12vh,150px) 26px;
  display:flex; flex-direction:column; align-items:center; gap:36px}
.rel-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; width:100%; max-width:1240px}
@media (max-width:900px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
.rel-grid a{display:block}
.rel-grid .frame{overflow:hidden; aspect-ratio:4/3; background:var(--stone)}
.rel-grid img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.rel-grid a:hover img{transform:scale(1.05)}
.rel-grid .n{margin-top:15px; text-align:center; color:var(--ink); font-size:1.2rem}

/* sourcebook */
.book{background:var(--deep); color:#EDE9E3}
.book-in{padding:clamp(92px,14vh,180px) 26px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:20px}
.book h2{color:#FBFAF8; font-size:clamp(1.85rem,3.9vw,3.1rem); line-height:1.14; max-width:21ch}
.book p{color:rgba(237,233,227,.66); font-size:1.06rem; line-height:1.66; max-width:44ch}
.book .rule{background:rgba(237,233,227,.24)}
.book .micro{color:rgba(237,233,227,.6)}

/* footer */
.foot{background:var(--night); color:#E6E2DB; padding:64px 34px 72px;
  display:flex; flex-direction:column; align-items:center; gap:26px}
.foot img{width:150px; height:auto}
.foot .row{display:flex; flex-wrap:wrap; gap:28px; justify-content:center}
.foot .row a{font-family:var(--sans); font-weight:300; font-size:.61rem; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(230,226,219,.62)}
.foot .row a:hover{color:#FBFAF8}
.foot .fine{font-family:var(--sans); font-weight:300; font-size:.58rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(230,226,219,.34)}

/* reveal */
.rv{opacity:1}
.js .rv{opacity:0; transform:translateY(16px)}
.js .rv.seen{opacity:1; transform:none;
  transition:opacity 1.5s cubic-bezier(.19,1,.22,1), transform 1.5s cubic-bezier(.19,1,.22,1)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1 !important; transform:none !important}
  .plate img,.duo .cell img,.rel-grid img{transform:none !important; transition:none !important}
}
:focus-visible{outline:1px solid var(--ink); outline-offset:4px}
.badge{position:fixed; right:14px; bottom:14px; z-index:80; font-family:var(--sans); font-weight:300;
  font-size:.54rem; letter-spacing:.22em; text-transform:uppercase;
  background:rgba(16,14,12,.82); color:#E6E2DB; padding:7px 12px}