:root { --ink:#2c2e35; --body:#2c2e35; --grey:#8a857c; --line:rgba(44,46,53,0.16); --sand:#d9c9a5; --side:clamp(20px,5vw,76px); }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:400; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }
img { max-width:100%; }
a { color:inherit; }
header a, footer a, .cards a, .archive a, .library { text-decoration:none; }
::selection { background:var(--ink); color:#fff; }

.serif, h1, h2 { font-family:'EB Garamond',Garamond,Georgia,'Times New Roman',serif; }
.meta { display:flex; flex-wrap:wrap; gap:4px 1.6em; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); }
.flag { color:var(--grey); }

/* ---- listing ---- */
.listing { padding:clamp(6px,1.5vh,18px) var(--side) clamp(56px,9vh,104px); }
.band { background:var(--sand); padding:clamp(9px,1.5vh,15px) 18px; margin:0 0 clamp(26px,4.5vh,46px); text-align:center; }
.band h1 { margin:0; font-weight:500; text-transform:uppercase; letter-spacing:0.02em; font-size:clamp(17px,2.35vw,34px); line-height:1.15; color:var(--ink); text-wrap:balance; }
.banner { display:flex; gap:14px; align-items:flex-start; border:1px solid var(--ink); border-left-width:3px; padding:14px 18px; margin:0 0 clamp(26px,4vh,40px); font-size:13px; line-height:1.6; color:var(--body); max-width:72ch; }
.banner strong { font-weight:400; letter-spacing:0.18em; text-transform:uppercase; font-size:11px; color:var(--ink); white-space:nowrap; padding-top:2px; }
.feed { min-width:0; }
.cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(34px,6vh,64px) clamp(24px,6.5vw,94px); }
.card { display:flex; flex-direction:column; border-top:1px solid var(--ink); padding-top:clamp(12px,2vh,18px); min-width:0; }
.shot { display:block; aspect-ratio:3/2; overflow:hidden; background:#f2efe9; }
.shot img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.card:hover .shot img { transform:scale(1.03); }
.card .meta { margin-top:clamp(14px,2.2vh,20px); }
.card h2 { margin:clamp(8px,1.4vh,12px) 0 0; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; font-size:clamp(18px,1.75vw,24px); line-height:1.17; color:var(--ink); text-wrap:balance; }
.card h2 a:hover { color:var(--grey); }
.archive { border-top:1px solid var(--line); padding-top:20px; margin-top:clamp(40px,6vh,72px); }
.archive h2 { margin:0 0 16px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; font-size:15px; color:var(--grey); }
.archive ol { list-style:none; margin:0; padding:0; }
.archive li a { display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); color:#6f6b62; }
.archive li a:hover { color:var(--ink); }
.archive .n { font-size:11px; letter-spacing:0.24em; }
.archive .t { font-family:'EB Garamond',Garamond,Georgia,serif; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; font-size:15px; line-height:1.26; }
.empty { font-size:15px; line-height:1.7; color:var(--body); max-width:52ch; }

/* ---- post: one editorial spread, picture left, copy right ---- */
.post { padding:clamp(6px,1.5vh,18px) var(--side) clamp(56px,9vh,104px); }
.spread { display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:clamp(20px,1.8vw,32px); align-items:stretch; }
.pic { margin:0; display:flex; flex-direction:column; gap:8px; min-width:0; }
.pic .frame { position:relative; flex:1 1 auto; min-height:clamp(380px,64vh,800px); overflow:hidden; background:#f2efe9; }
.pic .frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pic figcaption { font-size:11px; font-style:italic; color:var(--ink); }
.copy { min-width:0; display:flex; flex-direction:column; }
.copy h1 { margin:0; font-weight:600; text-transform:uppercase; letter-spacing:0.035em; font-size:clamp(22px,2.2vw,32px); line-height:1.12; color:var(--grey); text-wrap:balance; }
.copy .meta { margin:clamp(12px,2vh,18px) 0 clamp(18px,3vh,28px); }
.body { columns:2; column-gap:clamp(18px,1.8vw,30px); font-size:clamp(13.5px,0.95vw,15px); line-height:1.5; color:var(--body); }
.body p { margin:0 0 1em; }
.body p:last-child { margin-bottom:0; }
.actions { margin-top:clamp(22px,3.5vh,34px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(18px,1.8vw,30px); row-gap:14px; align-items:center; }
.share { display:flex; flex-wrap:wrap; gap:8px; }
.share a, .share button { font-family:inherit; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); background:transparent; border:1px solid var(--line); padding:0 13px; min-height:40px; display:inline-flex; align-items:center; cursor:pointer; border-radius:0; text-decoration:none; white-space:nowrap; }
.share a:hover, .share button:hover { border-color:var(--ink); }
.library { display:flex; align-items:center; justify-content:center; text-align:center; width:100%; min-height:44px; padding:0 20px; background:var(--sand); color:var(--ink); font-family:'EB Garamond',Garamond,Georgia,serif; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; font-size:clamp(14px,1.1vw,17px); }
.library:hover { background:#cfbd94; }

.more { margin-top:clamp(56px,9vh,100px); }
.more .band { margin-bottom:clamp(22px,3.5vh,36px); }
.more .band h2 { margin:0; font-weight:500; text-transform:uppercase; letter-spacing:0.02em; font-size:clamp(15px,1.6vw,22px); color:var(--ink); }

footer { border-top:1px solid var(--line); padding:clamp(28px,5vh,48px) var(--side) clamp(30px,5vh,52px); display:flex; flex-wrap:wrap; gap:22px 40px; align-items:flex-end; justify-content:space-between; }
footer .logo { width:129px; height:auto; display:block; }
.addr { margin-top:14px; font-size:12px; line-height:1.7; color:var(--grey); }
.flinks { display:flex; gap:26px; flex-wrap:wrap; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--grey); }

@media (max-width:1180px) { .body { columns:1; } .actions { grid-template-columns:1fr; } }
@media (max-width:900px) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spread { grid-template-columns:1fr; }
  .pic .frame { flex:none; min-height:0; aspect-ratio:4/5; max-height:78svh; }
  .body { font-size:15px; line-height:1.68; }
  .listing, .post { padding-top:20px; }
}
@media (max-width:600px) {
  .cards { grid-template-columns:1fr; }
  .banner { flex-direction:column; gap:8px; }
  .banner strong { padding-top:0; }
  .actions { flex-direction:column; align-items:stretch; }
  .library { justify-content:center; }
}