/* ───────── oaoisme.top — Swiss editorial index ─────────
   Paper, near-black ink, one vermillion accent, ruthless grid.
   Matches design.md (ed. 02 — contents page). */

:root{
  --paper:#FAFAF7; --ink:#09090B; --muted:#3F3F46;
  --hair:#D8D6CF; --accent:#E63A1F;
}
*,*::before,*::after{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  animation:fade .6s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
a{color:inherit; text-decoration:none;}

.sheet{max-width:1180px; margin:0 auto; padding:clamp(24px,5vw,64px) clamp(20px,5vw,56px) 40px;}

/* masthead */
.meta-top{display:flex; align-items:baseline; justify-content:space-between; gap:16px;}
.issue{font-family:"Playfair Display",serif; font-style:italic; color:var(--accent); font-size:clamp(1.1rem,3vw,1.6rem);}
.meta-line{font-family:"JetBrains Mono",monospace; font-size:.78rem; color:var(--muted); letter-spacing:.02em; text-align:right;}
.wordmark{font-weight:900; letter-spacing:-0.045em; line-height:.9; margin:.18em 0 .12em;
  font-size:clamp(3.4rem,14vw,11rem);}
.wordmark .dot{color:var(--accent);}
.deck{max-width:60ch; font-size:clamp(1.05rem,2.4vw,1.35rem); color:var(--ink); margin:0;}
.deck i{font-family:"Playfair Display",serif; font-style:italic;}

/* section head */
.sec-head{margin:clamp(40px,7vw,80px) 0 26px; border-top:2px solid var(--ink); border-bottom:1px solid var(--ink);
  padding:10px 0; position:relative; display:flex; align-items:center; justify-content:space-between;}
.sec-head h2{font-weight:900; letter-spacing:-0.03em; font-size:clamp(1.4rem,4vw,2.1rem); margin:0; text-transform:uppercase;}
.sec-head .tick{width:10px; height:10px; background:var(--accent);}

/* grid of entries */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,56px) clamp(28px,4vw,52px);}
.entry{display:flex; flex-direction:column; gap:0;}
.plate{margin:0; border:1px solid var(--hair); background:#fff; overflow:hidden;
  aspect-ratio:16/10; transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s;}
.plate img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.entry:hover .plate{transform:translateY(-4px); border-color:var(--ink);}

.entry-body{padding-top:16px; position:relative;}
.num{font-family:"JetBrains Mono",monospace; font-size:.8rem; color:var(--accent); font-weight:500;}
.host{display:block; font-family:"JetBrains Mono",monospace; font-size:.82rem; color:var(--muted); margin-top:2px; letter-spacing:.01em;}
.entry h3{font-weight:900; letter-spacing:-0.03em; font-size:clamp(1.5rem,3.6vw,2.1rem); margin:.18em 0 .35em; line-height:1; display:inline-block;
  background-image:linear-gradient(var(--accent),var(--accent)); background-size:0% 0.12em; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .28s cubic-bezier(.16,1,.3,1);}
.entry:hover h3{background-size:100% 0.12em;}
.entry p{margin:0 0 .8em; color:var(--ink); max-width:46ch; font-size:1rem;}
.tag{font-family:"JetBrains Mono",monospace; font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;}

/* footer */
.foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:clamp(48px,8vw,90px); padding-top:14px; border-top:1px solid var(--ink);
  font-family:"JetBrains Mono",monospace; font-size:.78rem; color:var(--muted); letter-spacing:.02em;}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  body{animation:none;}
  .entry:hover .plate{transform:none;}
  .entry h3, .plate{transition:none;}
}

@media (max-width:760px){
  .grid{grid-template-columns:1fr; gap:36px;}
  .meta-line{font-size:.68rem;}
}