/* =========================================================
   MAISON RHED — shared design system
   Quiet gallery / editorial white-cube
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:        #F5F4F1;
  --paper-2:      #E9E8E3;
  --ink:          #111110;
  --ink-soft:     #34332E;
  --stone:        #8C8A82;
  --stone-2:      #B6B4AC;
  --line:         rgba(17,17,16,0.13);
  --line-soft:    rgba(17,17,16,0.07);
  --rhed:         oklch(0.47 0.165 32);
  --rhed-deep:    oklch(0.40 0.14 32);

  --serif: 'Archivo', system-ui, sans-serif;   /* now a modern grotesque */
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --mx: clamp(20px, 5.5vw, 88px);     /* page side margin */
  --maxw: 1720px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*{ 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(--serif);
  font-weight:400;
  font-size:19px;
  line-height:1.55;
  letter-spacing:-0.01em;
  overflow-x:hidden;
}
::selection{ background:var(--rhed); color:var(--paper); }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- typographic helpers ---------- */
.mono{
  font-family:var(--mono);
  font-weight:400;
  font-size:12px;
  letter-spacing:0.17em;
  text-transform:uppercase;
}
.mono-sm{
  font-family:var(--mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:0.19em;
  text-transform:uppercase;
}
/* repurposed: was an italic flourish, now a flat accent highlight */
.serif-it{ font-style:normal; color:var(--rhed); }

h1,h2,h3{ font-weight:500; margin:0; letter-spacing:-0.03em; line-height:1.0; }
.display{
  font-size:clamp(48px, 9.2vw, 158px);
  font-weight:500;
  line-height:0.88;
  letter-spacing:-0.045em;
}

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--mx); }
.section{ padding:clamp(64px,9vw,140px) 0; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.eyebrow{
  display:flex; align-items:center; gap:14px;
  color:var(--stone);
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--ink); opacity:.5;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-head{
  position:sticky; top:0; z-index:60;
  background:color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
}
.site-head .bar{
  display:flex; align-items:center; justify-content:space-between;
  height:74px; gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; line-height:1; }
.brand .brand-mark{ display:block; width:30px; height:30px; border-radius:6px; object-fit:contain; flex:none; }
.brand .maison{ font-family:var(--mono); font-size:9px; letter-spacing:0.34em; text-transform:uppercase; color:var(--stone); }
.brand .rhed{
  font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:-0.035em;
}
.brand .rhed b{ font-weight:600; color:var(--rhed); }

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-family:var(--mono); font-size:12px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; padding:4px 0;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--rhed); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--rhed); }

.menu-btn{
  display:none; background:none; border:0; cursor:pointer; padding:10px; margin:-10px;
  color:var(--ink);
}
/* hamburger / close icon */
.menu-btn .bars{ display:block; width:26px; height:14px; position:relative; }
.menu-btn .bars i{
  position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-btn .bars i:nth-child(1){ top:0; }
.menu-btn .bars i:nth-child(2){ top:6px; }
.menu-btn .bars i:nth-child(3){ top:12px; }
.menu-btn.is-close .bars i:nth-child(1){ top:6px; transform:rotate(45deg); }
.menu-btn.is-close .bars i:nth-child(2){ opacity:0; }
.menu-btn.is-close .bars i:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:80; background:var(--paper);
  transform:translateY(-100%); transition:transform .5s var(--ease);
  display:flex; flex-direction:column; padding:24px var(--mx);
  overflow:hidden;
}
.drawer.open{ transform:translateY(0); }
.drawer .d-top{ display:flex; justify-content:space-between; align-items:center; height:74px; }
.drawer nav{ display:flex; flex-direction:column; gap:6px; margin-top:6vh; }
.drawer nav a{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,9vw,64px); letter-spacing:-0.035em; }
.drawer nav a .idx{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--stone); margin-right:18px; vertical-align:super; }

/* =========================================================
   PLACEHOLDER (swap for real artwork)
   ========================================================= */
.ph{
  position:relative; overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--stone-2); text-align:center; padding:0 14px; max-width:78%;
}
.ph.portrait{ aspect-ratio:33.5/40; }
.ph.landscape{ aspect-ratio:4/3; }
.ph.square{ aspect-ratio:1/1; }
.ph.wide{ aspect-ratio:16/9; }
.ph.tall{ aspect-ratio:3/4; }

/* =========================================================
   WORK CARD
   ========================================================= */
.work{ display:block; cursor:pointer; }
.work .frame{ position:relative; overflow:hidden; background:var(--paper-2); }
.work .frame .ph{ transition:transform 0.9s var(--ease), filter .6s var(--ease); }
.work:hover .frame .ph{ transform:scale(1.04); }
.work .cap{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:14px 1px 0;
}
.work .cap .t{ font-style:normal; font-weight:500; font-size:17px; letter-spacing:-0.01em; }
.work .cap .m{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--stone); white-space:nowrap; }
.work .sub{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--stone-2); padding:4px 2px 0; }

/* viewing dim — when hovering a grid, fade the rest */
.dimmable:hover .work{ transition:opacity .4s var(--ease); }
.dimmable:hover .work:not(:hover){ opacity:.42; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lb{
  position:fixed; inset:0; z-index:120; background:color-mix(in oklab, var(--ink) 92%, transparent);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease); padding:5vh 6vw;
}
.lb.open{ opacity:1; pointer-events:auto; }
.lb .stage{ max-width:min(78vw,900px); max-height:74vh; display:flex; align-items:center; justify-content:center; }
.lb .stage .ph{ max-height:74vh; }
.lb .lb-cap{ color:var(--paper); text-align:center; margin-top:26px; }
.lb .lb-cap .t{ font-style:normal; font-weight:500; font-size:21px; letter-spacing:-0.02em; }
.lb .lb-cap .m{ font-family:var(--mono); font-size:12px; letter-spacing:0.17em; color:var(--stone-2); margin-top:8px; text-transform:uppercase; }
.lb .lb-x{ position:absolute; top:26px; right:30px; }
.lb .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; padding:20px; color:var(--paper); opacity:.6; transition:opacity .3s; }
.lb .lb-nav:hover{ opacity:1; }
.lb .lb-prev{ left:10px; } .lb .lb-next{ right:10px; }
.lb .lb-count{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:var(--stone-2); }
.lb button{ background:none; border:0; color:var(--paper); cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{ border-top:1px solid var(--line); padding:clamp(48px,6vw,80px) 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; align-items:start; }
.foot-grid .big{ font-size:clamp(40px,6vw,88px); font-weight:500; line-height:0.9; letter-spacing:-0.045em; }
.foot-grid h4{ font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); margin:0 0 16px; font-weight:400; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot-grid ul a{ color:var(--ink-soft); transition:color .25s; }
.foot-grid ul a:hover{ color:var(--rhed); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:60px; color:var(--stone); }

/* =========================================================
   UTIL / motion
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.link-underline{ position:relative; }
.link-underline::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.link-underline:hover::after{ transform:scaleX(1); }

.pill{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:2px; padding:10px 16px; color:var(--ink-soft);
  background:none; cursor:pointer; transition:all .22s var(--ease);
}
.pill:hover{ border-color:var(--ink); color:var(--ink); }
.pill[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav{ display:none; }
  .menu-btn{ display:block; }
  .foot-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto; }
}