/* ==========================================================================
   SEAM Lab — shared stylesheet
   Tokens inherited from carsonbruns.com so the two sites read as one house.
   Edit colours and spacing here; every page picks up the change.
   ========================================================================== */

:root{
  /* --- surfaces & text (identical to the personal site) --- */
  --ground:#0A0A0C;
  --panel:#121218;
  --text:#EDEDF0;
  --muted:#8C8D96;
  --dim:#62636C;
  --line:rgba(255,255,255,.5);   /* structural hairlines between bands */
  --rule:#26262E;                /* quiet dividers inside content */

  /* --- the three pillars ---
     Hues taken directly from the three corners of the lab logo
     (cyan #009FEB, yellow #FEE900, magenta #EF007D), with saturation
     dialled back and value raised so they stay legible on the dark ground
     and read as professional rather than neon. */
  --syn:#3FA8D9;   /* Synthetic — logo cyan    */
  --eme:#E8D35A;   /* Emergent  — logo yellow  */
  --ani:#D62B80;   /* Animate   — logo magenta */

  --cream:#EDD79F;   /* warmed toward the logo yellow */

  /* Figures come with their own white backgrounds. Rather than fight that,
     we mount them on a warm off-white plate and let the figure's white blend
     into it (mix-blend-mode: multiply below). No hard white rectangle, and
     every figure gets the same margin regardless of how it was exported. */
  --plate:#F2F0E9;
  --exposed:#D62B80;

  /* --- type --- */
  --display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --rail:54px;
  --measure:68ch;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--exposed);outline-offset:3px}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.topband{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;padding:16px 24px;
  background:rgba(10,10,12,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.brand .mark{
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  letter-spacing:-.03em;color:var(--text);
}
.brand .expand{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
@media (max-width:720px){.brand .expand{display:none}}

.topnav{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;
}
.topnav a{color:var(--muted);text-decoration:none;transition:color .18s}
.topnav a:hover{color:var(--text)}
.topnav a[aria-current="page"]{color:var(--cream)}

/* --------------------------------------------------------------------------
   Bands — the horizontal rhythm of every page.
   A band is a labelled section: vertical rail on the left, content on the right.
   -------------------------------------------------------------------------- */
.band{display:grid;grid-template-columns:var(--rail) 1fr}
.band + .band{border-top:1px solid var(--line)}
.rail span{
  position:sticky;top:88px;display:block;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream);white-space:nowrap;
  padding:22px 0;margin-left:20px;
}
.rail span i{font-style:normal;color:var(--dim);letter-spacing:.14em;margin-left:11px}
.inner{border-left:1px solid var(--line);padding:52px 40px 64px}
@media (max-width:720px){
  .band{grid-template-columns:1fr}
  .rail{display:none}
  .inner{border-left:0;padding:36px 20px 44px}
}

.wrap{max-width:1180px;margin:0 auto}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin:0 0 14px;
}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.025em;margin:0}
h1{font-weight:700;font-size:clamp(2.1rem,5.5vw,3.6rem);line-height:1.02}
h2{font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;margin:0 0 16px}
h3{font-weight:500;font-size:1.16rem;line-height:1.25;margin:0 0 8px}
h4{font-weight:500;font-size:.98rem;margin:0 0 6px}

p{margin:0 0 1.05em;max-width:var(--measure)}
.lede{font-size:1.15rem;line-height:1.55;color:var(--text);max-width:60ch}
.sub{color:var(--muted)}
small,.small{font-size:.86rem;color:var(--muted)}

a.link{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(237,215,159,.38);transition:border-color .18s,color .18s}
a.link:hover{color:#fff;border-bottom-color:var(--exposed)}
.prose a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(237,215,159,.33)}
.prose a:hover{color:#fff;border-bottom-color:var(--exposed)}

hr.rule{border:0;border-top:1px solid var(--rule);margin:36px 0}

/* --------------------------------------------------------------------------
   SIGNATURE ELEMENT — the SEAM triad.
   Every research project shows which of the three pillars it draws on.
   The bar is data, not ornament: segment width = emphasis.
   -------------------------------------------------------------------------- */
.triad{display:flex;height:3px;width:130px;margin:0 0 14px;overflow:hidden}
.triad i{display:block;height:100%;transition:flex-grow .4s ease}
.triad i.s{background:var(--syn)}
.triad i.e{background:var(--eme)}
.triad i.a{background:var(--ani)}
.triad i.off{background:#1E1E25}

.triad-key{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.triad-key b{font-weight:400;display:inline-flex;align-items:center;gap:7px}
.triad-key b::before{content:"";width:16px;height:3px;display:block}
.triad-key b.s::before{background:var(--syn)}
.triad-key b.e::before{background:var(--eme)}
.triad-key b.a::before{background:var(--ani)}

/* Pillar heading block on the research page */
.pillar{border-top:1px solid var(--rule);padding-top:26px;margin-top:46px}
.pillar:first-of-type{border-top:0;margin-top:0;padding-top:0}
.pillar-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.pillar-head .letter{
  font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,4rem);
  line-height:.9;letter-spacing:-.05em;
}
.pillar-head h2{margin:0}
.pillar[data-p="s"] .letter{color:var(--syn)}
.pillar[data-p="e"] .letter{color:var(--eme)}
.pillar[data-p="a"] .letter{color:var(--ani)}
.pillar-def{color:var(--muted);max-width:62ch;margin-bottom:30px}

/* --------------------------------------------------------------------------
   Project entries
   -------------------------------------------------------------------------- */
.project{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;
  padding:30px 0;border-top:1px solid var(--rule);
}
.project:first-child{border-top:0}
@media (max-width:900px){.project{grid-template-columns:1fr;gap:20px}}
.project .figure{align-self:start}
.project .figure .shot{background:var(--plate);border:1px solid #2A2A33;border-radius:2px;
  padding:16px;box-shadow:0 20px 44px -30px rgba(0,0,0,.95)}
.project .figure .shot img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.project .figure figcaption{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  color:var(--dim);margin-top:8px;line-height:1.5;
}

.reading{margin:18px 0 0;padding:0;list-style:none}
.reading li{
  font-size:.87rem;line-height:1.5;color:var(--muted);
  padding-left:20px;text-indent:-20px;margin-bottom:7px;
}
.reading a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(237,215,159,.28)}
.reading a:hover{color:#fff}

.presslinks{font-size:.87rem;color:var(--muted);max-width:var(--measure)}
.presslinks a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(237,215,159,.28)}
.presslinks a:hover{color:#fff;border-bottom-color:var(--exposed)}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.hero{padding:78px 40px 66px;border-bottom:1px solid var(--line)}
@media (max-width:720px){.hero{padding:48px 20px 40px}}
.hero .wordmark{font-family:var(--display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(2.4rem,8vw,5.4rem);line-height:.96;margin:0 0 22px}
.hero .wordmark em{font-style:normal}
.hero .wordmark em.s{color:var(--syn)}
.hero .wordmark em.e{color:var(--eme)}
.hero .wordmark em.a{color:var(--ani)}
.hero .where{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-top:26px}

/* --------------------------------------------------------------------------
   Cards / grids
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.g3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.cell{background:var(--ground);padding:22px}

.person{background:var(--ground)}
/* 2:3 matches the native aspect of the pre-cropped mug files exactly, so
   object-fit never has to crop anything at display time. */
.person .shot{aspect-ratio:2/3;background:var(--panel);overflow:hidden}
.person .shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.25);transition:filter .5s}
.person:hover .shot img{filter:saturate(1)}
.person .who{padding:14px 4px 26px}
.person .who h3{margin:0 0 3px;font-size:1rem}
.person .who .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.person .who p{font-size:.87rem;color:var(--muted);margin:10px 0 0;max-width:none}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:30px 26px}

.alumni{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:22px 18px}
.alum .shot{aspect-ratio:2/3;background:var(--panel);overflow:hidden}
.alum .shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.15) brightness(.85);transition:filter .5s}
.alum:hover .shot img{filter:saturate(1) brightness(1)}
.alum h4{margin:9px 0 2px;font-size:.9rem}
.alum .meta{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--dim);line-height:1.5}

/* --------------------------------------------------------------------------
   Principles
   -------------------------------------------------------------------------- */
.principles{counter-reset:pr;display:grid;gap:1px;background:var(--rule);
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));border:1px solid var(--rule)}
.principle{background:var(--ground);padding:24px 22px 26px;position:relative}
.principle::before{
  counter-increment:pr;content:counter(pr,decimal-leading-zero);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--exposed);
  display:block;margin-bottom:12px;
}
.principle h3{font-size:1.02rem;margin-bottom:7px}
.principle p{font-size:.9rem;color:var(--muted);margin:0}

/* --------------------------------------------------------------------------
   Publications
   -------------------------------------------------------------------------- */
.pubfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;align-items:center}
.pubfilter .lab{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-right:4px}
.pubfilter button{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  background:transparent;color:var(--muted);border:1px solid var(--rule);
  border-radius:2px;padding:6px 11px;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
}
.pubfilter button:hover{color:var(--text);border-color:var(--muted)}
.pubfilter button[aria-pressed="true"]{color:var(--ground);background:var(--exposed);border-color:var(--exposed)}

.yearhead{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--cream);
  border-bottom:1px solid var(--rule);padding-bottom:8px;margin:44px 0 20px;
}

/* The graphical abstract is the point of a TOC image — it gets real space.
   Text sits above; the figure runs the full width of the content column. */
.pub{display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;
  padding:22px 0 30px;border-bottom:1px solid rgba(38,38,46,.6)}
.pub .num{font-family:var(--mono);font-size:10px;color:var(--dim);padding-top:4px}
.pub .t{font-size:1.02rem;line-height:1.4;margin:0 0 5px;max-width:none}
.pub .t a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent}
.pub .t a:hover{color:#fff;border-bottom-color:var(--exposed)}
.pub .a{font-size:.85rem;color:var(--muted);margin:0 0 3px;max-width:none}
.pub .v{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin:0;max-width:none}
.pub .tag{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--exposed);margin-left:8px}

.pub .toc{margin-top:18px;max-width:820px;
  background:var(--plate);border:1px solid #2A2A33;border-radius:2px;
  padding:20px 22px;
  box-shadow:0 22px 46px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(237,215,159,.05);}
.pub .toc img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.pub .toc.empty{background:none;border-style:dashed;border-color:#24242C;
  height:38px;max-width:300px;padding:0 12px;
  display:flex;align-items:center}
.pub .toc.empty::after{content:"no graphical abstract yet";
  font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;color:#35353F}
@media (max-width:640px){
  .pub{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .pub .toc{padding:9px}
}

/* --------------------------------------------------------------------------
   News — images run the full width of the column, as on the old site.
   -------------------------------------------------------------------------- */
.newsitem{display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;
  padding:30px 0 34px;border-top:1px solid var(--rule)}
.newsitem:first-child{border-top:0}
@media (max-width:600px){.newsitem{grid-template-columns:1fr;gap:8px}}
.newsitem .when{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);padding-top:5px}
.newsitem h3{margin-bottom:8px;font-size:1.14rem}
.newsitem p{font-size:.95rem;color:var(--muted);margin:0;max-width:68ch}
.newsitem .shot{margin-top:18px;max-width:820px;background:#0E0E13;
  border:1px solid var(--rule);overflow:hidden}
.newsitem .shot img{width:100%;height:auto;display:block}

/* --------------------------------------------------------------------------
   Funding table
   -------------------------------------------------------------------------- */
.fund{width:100%;border-collapse:collapse;font-size:.88rem}
.fund th{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);text-align:left;font-weight:400;
  border-bottom:1px solid var(--rule);padding:0 14px 9px 0;
}
.fund td{padding:12px 14px 12px 0;border-bottom:1px solid rgba(38,38,46,.6);vertical-align:top}
.fund td.amt,.fund td.role,.fund td.yr{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.fund .agency{display:block;color:var(--dim);font-size:.82rem;margin-top:3px}
@media (max-width:720px){
  .fund thead{display:none}
  .fund tr{display:block;border-bottom:1px solid var(--rule);padding:12px 0}
  .fund td{display:block;border:0;padding:1px 0}
}

/* --------------------------------------------------------------------------
   Call-to-action block (Join page)
   -------------------------------------------------------------------------- */
.cta{border:1px solid var(--rule);padding:26px 24px;margin:30px 0;background:var(--panel)}
.cta h3{color:var(--cream)}
.btn{
  display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;padding:11px 18px;
  border:1px solid var(--exposed);color:var(--exposed);transition:background .18s,color .18s;
}
.btn:hover{background:var(--exposed);color:var(--ground)}

/* --------------------------------------------------------------------------
   Missing-image placeholder.
   Any <img> whose file isn't in place yet renders as a labelled slot showing
   the exact filename to drop in. Nothing silently disappears.
   -------------------------------------------------------------------------- */
.slot{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;height:100%;min-height:110px;padding:14px;
  background:repeating-linear-gradient(45deg,#111116,#111116 8px,#15151C 8px,#15151C 16px);
  border:1px dashed rgba(214,43,128,.4);
}
.slot span{font-family:var(--mono);font-size:9px;line-height:1.6;letter-spacing:.04em;
  color:rgba(214,43,128,.85);word-break:break-all}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding:34px 40px 52px;
  display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
@media (max-width:720px){.foot{padding:28px 20px 40px;gap:24px}}
.foot .addr{font-size:.88rem;color:var(--muted);max-width:34ch}
.foot .addr strong{display:block;font-family:var(--display);font-weight:500;
  color:var(--text);font-size:.95rem;margin-bottom:6px}
.foot .cols{display:flex;gap:44px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.foot .cols ul{list-style:none;margin:0;padding:0}
.foot .cols li{margin-bottom:9px}
.foot .cols a{color:var(--muted);text-decoration:none;transition:color .18s}
.foot .cols a:hover{color:var(--text)}
.foot .cols .h{color:var(--dim);margin-bottom:13px;display:block}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--exposed);color:var(--ground);
  padding:9px 14px;font-family:var(--mono);font-size:11px}

/* --------------------------------------------------------------------------
   Home: the three pillars, each carrying its actual projects.
   The walkthrough stays; the research hangs off it.
   -------------------------------------------------------------------------- */
.hp{border-top:1px solid var(--rule);padding-top:30px;margin-top:44px}
.hp:first-of-type{border-top:0;margin-top:0;padding-top:0}
.hp-head{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;margin-bottom:10px}
.hp-head .letter{font-family:var(--display);font-weight:700;line-height:.85;
  letter-spacing:-.05em;font-size:clamp(2.6rem,7vw,4.2rem)}
.hp-head h2{margin:0;font-size:clamp(1.4rem,3vw,2rem)}
.hp[data-p="s"] .letter{color:var(--syn)}
.hp[data-p="e"] .letter{color:var(--eme)}
.hp[data-p="a"] .letter{color:var(--ani)}
.hp-def{color:var(--muted);max-width:64ch;margin-bottom:24px}

.hp-projects{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.hpp{background:var(--ground);display:block;text-decoration:none;color:inherit;
  transition:background .2s}
.hpp:hover{background:var(--panel)}

/* Full bleed: every card is a 1:1 square filled edge to edge, regardless of
   what the source image's own aspect ratio was. Uniform grid, no white gaps. */
.hpp .fig{aspect-ratio:1;overflow:hidden;background:#0E0E13;position:relative}
.hpp .media{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.6,.2,1),filter .45s}
.hpp:hover .media{transform:scale(1.045)}
/* A hairline scrim keeps light-background figures from glaring against the page. */
.hpp .fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),
             inset 0 -70px 60px -60px rgba(10,10,12,.85)}

.hpp .txt{padding:18px 18px 24px}
.hpp h3{font-size:1.02rem;margin:0 0 8px}
.hpp p{font-size:.87rem;color:var(--muted);margin:0;max-width:none}
.hpp .more{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--exposed);margin-top:12px;display:block;opacity:0;
  transition:opacity .2s}
.hpp:hover .more{opacity:1}
@media (hover:none){.hpp .more{opacity:1}}
/* Don't animate video for people who've asked the system to stop motion. */
@media (prefers-reduced-motion:reduce){
  .hpp .media{transition:none}
  .hpp:hover .media{transform:none}
}

/* Talks list */
.talk{display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;padding:13px 0;
  border-bottom:1px solid rgba(38,38,46,.6)}
.talk .num{font-family:var(--mono);font-size:10px;color:var(--dim);padding-top:4px}
.talk h4{margin:0 0 4px;font-family:var(--display);font-weight:500;font-size:.98rem;line-height:1.35}
.talk .venue{font-size:.85rem;color:var(--muted);margin:0}
.talk .date{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin:3px 0 0}

/* Home page shows the five latest posts; its images stay modest so the page
   doesn't turn into a scroll marathon. The full archive shows them large. */
#newslist.compact .newsitem{padding:22px 0 24px}
#newslist.compact .newsitem .shot{max-width:400px;margin-top:14px}

/* Alumni with no photo on file: a quiet monogram, not a broken slot. */
.alum .shot.noshot{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#14141A,#101015)}
.alum .shot.noshot span{font-family:var(--display);font-weight:500;font-size:1.5rem;
  letter-spacing:.02em;color:#3A3A46}

/* --------------------------------------------------------------------------
   Hero: type on the left, logo filling what used to be empty space at right.
   -------------------------------------------------------------------------- */
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,26vw,330px);
  gap:clamp(24px,5vw,64px);align-items:center}
.herologo img{width:100%;height:auto}
@media (max-width:820px){
  .herogrid{grid-template-columns:1fr;gap:30px}
  .herologo{max-width:180px}
}

/* Small logo in the masthead */
.brandmark{width:24px;height:24px;flex:0 0 auto;align-self:center}
.brand{align-items:center}

/* --------------------------------------------------------------------------
   Outreach
   -------------------------------------------------------------------------- */
.ogrid{display:grid;gap:34px}
.oitem{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;
  align-items:start;padding-bottom:32px;border-bottom:1px solid var(--rule)}
.oitem:last-child{border-bottom:0;padding-bottom:0}
@media (max-width:760px){.oitem{grid-template-columns:1fr;gap:16px}}
.oshot{background:#0E0E13;border:1px solid var(--rule);overflow:hidden}
.oshot img{width:100%;height:auto;display:block}
.obody h3{font-size:1.16rem;margin-bottom:8px}
.obody p{font-size:.94rem;color:var(--muted)}

.earlier{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--rule);
  font-size:.88rem;color:var(--dim);max-width:60ch}
.earlier a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(237,215,159,.28)}
.earlier a:hover{color:#fff;border-bottom-color:var(--exposed)}