/* =====================================================================
   LE GOÛT ROUGE — landing hub / version index
   ===================================================================== */
:root{
  --bg:#121110; --bg-2:#1b1816; --bg-3:#221e1b;
  --cream:#efe8db; --muted:rgba(239,232,219,.6); --muted-2:rgba(239,232,219,.4);
  --red:#b5281d; --red-lt:#d8473a; --line:rgba(239,232,219,.14);
  --f-disp:"Fraunces",Georgia,serif; --f-body:"Inter",system-ui,sans-serif; --f-lab:"Oswald",sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--cream); font-family:var(--f-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 90% at 50% -10%, rgba(120,24,18,.22), transparent 55%);
  min-height:100vh;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1140px; margin:0 auto; padding:clamp(2.5rem,7vw,5.5rem) clamp(1.1rem,4vw,2.5rem) 3rem; }

/* ---------- header ---------- */
.head{ text-align:center; max-width:720px; margin:0 auto clamp(2.5rem,5vw,4rem); }
.file-tag{ font-family:var(--f-lab); text-transform:uppercase; letter-spacing:.32em; font-size:.74rem; color:var(--red-lt); }
.title{ font-family:var(--f-disp); font-weight:900; font-size:clamp(2.8rem,9vw,5.5rem); line-height:.98; letter-spacing:.005em; margin:.6rem 0 .4rem; }
.sub{ font-family:var(--f-disp); font-style:italic; font-weight:500; font-size:clamp(1.15rem,3vw,1.6rem); color:var(--cream); }
.sub strong{ color:var(--red-lt); font-style:normal; font-weight:600; }
.intro{ color:var(--muted); margin-top:1.3rem; font-size:1.04rem; max-width:60ch; margin-inline:auto; }
.rule{ width:60px; height:3px; background:var(--red); margin:1.8rem auto 0; }

/* ---------- grid ---------- */
.grid{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.1rem,2.5vw,1.8rem); }
.card{ }
.card a{
  display:block; height:100%; background:var(--bg-2); border:1px solid var(--line);
  overflow:hidden; transition:transform .25s, border-color .25s, box-shadow .25s;
}
.card a:hover,.card a:focus-visible{
  transform:translateY(-5px); border-color:rgba(216,71,58,.6);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.9);
}
.thumb{ display:block; position:relative; aspect-ratio:8/5; overflow:hidden; border-bottom:1px solid var(--line); }
.thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s, filter .5s; filter:saturate(.96); }
.card a:hover .thumb img{ transform:scale(1.05); filter:saturate(1.05); }
.meta{ display:block; padding:1.15rem 1.25rem 1.35rem; position:relative; }
.vno{
  font-family:var(--f-lab); font-weight:600; font-size:.78rem; letter-spacing:.18em;
  color:var(--bg); background:var(--red); padding:.18em .6em; position:absolute; top:-1.5rem; left:1.1rem;
}
.cname{ display:block; font-family:var(--f-disp); font-weight:600; font-size:1.4rem; line-height:1.15; margin-top:.2rem; }
.cdesc{ display:block; color:var(--muted); font-size:.95rem; margin-top:.4rem; }
.open{ display:inline-block; font-family:var(--f-lab); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--red-lt); margin-top:.9rem; transition:letter-spacing .25s; }
.card a:hover .open{ letter-spacing:.24em; }

/* ---------- footer ---------- */
.foot{ text-align:center; margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.6rem; border-top:1px solid var(--line); }
.foot p{ font-family:var(--f-lab); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--muted); }
.foot-dim{ color:var(--muted-2)!important; margin-top:.4rem; letter-spacing:.2em!important; }

@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }