/* Eon Meridian: shared styles for the index and every project page. */

:root{
  --paper:#f3f0e8; --ink:#171715; --muted:#6d6a62; --line:#c9c4b8; --soft:#e8e3d8;
  --max:1080px;
  --serif:Georgia,"Times New Roman",serif;
  --mono:"Courier New",Courier,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.42}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,svg{max-width:100%}

.site{max-width:var(--max);margin:0 auto;padding:26px 32px 56px}

/* small uppercase label: eyebrows, notes, captions, meta */
.smallcaps{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

/* ---- masthead ---- */
.mast{position:sticky;top:0;z-index:20;background:rgba(243,240,232,.96);backdrop-filter:blur(8px);
      display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;
      border-bottom:1px solid var(--line);padding:10px 0 16px;margin-bottom:46px}
.brand{font:400 19px/1 var(--serif);letter-spacing:.08em}
.roles{margin-top:6px;font-size:10px;color:var(--muted);letter-spacing:.05em}
.nav{display:flex;gap:28px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding-top:3px}

/* ---- hero (index) ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:64px;align-items:start}
.hero h1{font:400 44px/1.05 var(--serif);max-width:600px;margin:10px 0 24px;letter-spacing:-.02em}
.hero p{max-width:540px;font-size:15px;margin:0}
/* the credentials line: where the work has actually been shown */
.venues{margin-top:26px;padding-top:13px;border-top:1px solid var(--line);max-width:540px;
        font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);line-height:2}
.rule{width:32px;border-top:1px solid var(--ink);margin:20px 0}
.visual{aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;
        background:linear-gradient(155deg,#dfdbd0 0%,#c7c3b8 54%,#eeeae0 100%)}
.visual svg{width:100%;height:100%;display:block}
.caption{margin-top:7px}

/* ---- sections ---- */
.section{padding-top:70px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
              border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:2px}
.section h2{font:400 31px/1 var(--serif);margin:0;letter-spacing:.03em}

/* ---- featured work cards (index) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
       gap:0;border-left:1px solid var(--line);margin-top:26px}
/* six lead works, larger, so the page reads as a selection rather than a list */
.cards.featured{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.cards.featured .thumb{aspect-ratio:16/10}
.cards.featured h3{font-size:26px;line-height:1.1;margin-bottom:10px}
.cards.featured .blurb{font-size:13px}
.cards.featured .body{padding:18px 24px 0}
.cards.featured .card{padding-bottom:22px}
.card{display:flex;flex-direction:column;border-right:1px solid var(--line);
      border-bottom:1px solid var(--line);padding:0 0 18px;transition:background .18s ease}
a.card:hover{background:rgba(23,23,21,.035);text-decoration:none}
.card .thumb{aspect-ratio:4/3;border-bottom:1px solid var(--line);background:var(--soft);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:14px 20px 0;display:flex;flex-direction:column;flex:1}
.card .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.card h3{font:400 20px/1.15 var(--serif);margin:0 0 8px}
.card .blurb{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.card .cardmeta,.card .cardvenue{margin:auto 0 0;padding-top:11px;border-top:1px solid var(--line)}
.card .cardvenue{color:var(--ink);letter-spacing:.09em}
a.card:hover h3{text-decoration:underline;text-underline-offset:3px}

/* ---- the index: everything not featured, scannable in one pass ---- */
.index-head{margin-top:64px}
.rows{border-top:1px solid var(--line);margin-top:2px}
.work-row{display:grid;grid-template-columns:38px minmax(180px,1.15fr) 78px minmax(200px,1.35fr);
          gap:20px;align-items:baseline;border-bottom:1px solid var(--line);padding:14px 2px;
          transition:background .16s ease}
a.work-row:hover{background:rgba(23,23,21,.035);text-decoration:none}
a.work-row:hover .work-title{text-decoration:underline;text-underline-offset:3px}
.num,.year,.meta{font-size:10px;color:var(--muted)}
.meta{text-transform:uppercase;letter-spacing:.07em}
.work-title{font:400 17px/1.2 var(--serif)}

/* ---- about ---- */
.about p{font:400 21px/1.42 var(--serif);max-width:760px;margin:0}
.about.two-col{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start}

/* ---- project page ---- */
.proj-head{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:end;
           margin-bottom:26px}
.proj-head h1{font:400 40px/1.04 var(--serif);margin:7px 0 0;letter-spacing:-.015em}
.proj-meta{font-size:10px;color:var(--muted);line-height:1.9}
.proj-meta b{color:var(--ink);font-weight:400}
.lead{font:400 20px/1.45 var(--serif);max-width:760px;margin:0}

.plate{border:1px solid var(--line);background:var(--soft);overflow:hidden}
.plate img{width:100%;display:block}
.plate.dark{background:#07070b}
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:34px}
figure{margin:0}
figcaption{margin-top:7px}

.proj-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;margin-top:38px;align-items:start}
.prose h2{font:400 22px/1.2 var(--serif);margin:34px 0 10px;letter-spacing:.02em}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px;max-width:700px;font-size:14px;line-height:1.55}
.prose ul{margin:0 0 14px;padding-left:18px;max-width:700px}
.prose li{margin-bottom:7px;line-height:1.5}
.prose b{font-weight:400;border-bottom:1px solid var(--line)}
.prose code{font-family:var(--mono);background:var(--soft);padding:1px 4px}

.side{border-top:1px solid var(--line);padding-top:14px;font-size:10px;color:var(--muted);line-height:1.9}
.side b{color:var(--ink);font-weight:400}
.side + .side{margin-top:26px}

/* a table of invariants / offices, kept legible on narrow screens */
.tablewrap{overflow-x:auto;margin:0 0 14px}
table{border-collapse:collapse;font-size:12px;min-width:520px}
th,td{text-align:left;vertical-align:top;padding:8px 16px 8px 0;border-bottom:1px solid var(--line)}
td:first-child{white-space:nowrap}
th{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:400}

.links{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;border-top:1px solid var(--ink);padding-top:14px}
.links a,.links .off{border:1px solid var(--line);padding:9px 14px;font-size:10px;
         text-transform:uppercase;letter-spacing:.08em;transition:.18s ease}
.links a:hover{background:var(--ink);color:var(--paper);text-decoration:none;border-color:var(--ink)}
.links .off{border-style:dashed;color:var(--muted);cursor:default}

.prevnext{display:flex;justify-content:space-between;gap:20px;margin-top:56px;
          border-top:1px solid var(--line);padding-top:13px;font-size:10px;
          text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

.footer{margin-top:86px;border-top:1px solid var(--line);padding-top:13px;
        display:flex;justify-content:space-between;gap:20px;
        font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}

@media (max-width:860px){
  .site{padding:18px}
  .mast{position:static;grid-template-columns:1fr}
  .nav{gap:15px;flex-wrap:wrap}
  .hero{grid-template-columns:1fr;gap:30px}
  .hero h1{font-size:34px}
  .cards{grid-template-columns:1fr}
  .work-row{grid-template-columns:32px 1fr 62px}
  .work-row .meta{grid-column:2/4}
  .proj-head,.proj-body{grid-template-columns:1fr}
  .proj-head{gap:22px}
  .proj-body{gap:32px}
  .proj-head h1{font-size:31px}
  .footer{display:block}
  .footer span{display:block;margin-bottom:6px}
}