:root{color-scheme:dark;--bg:#10110f;--cream:#f3ead7;--gold:#c7aa76;--muted:#aaa79d;--line:#383a31}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:Georgia,serif}a{color:inherit;text-decoration:none}a:hover{color:var(--gold)}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}header{max-width:1200px;margin:auto;padding:30px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.brand{font-size:30px;letter-spacing:-1px}.brand em,h1 em{color:var(--gold);font-weight:normal}.brand small{display:block;color:var(--muted);font:10px Arial;letter-spacing:3px;margin-top:9px}nav{display:flex;flex-wrap:wrap;gap:24px;font:14px Arial}nav [aria-current]{color:var(--gold)}main{max-width:960px;margin:auto;padding:45px 40px 70px}.intro{border-bottom:1px solid #746044;padding-bottom:28px;margin-bottom:32px}.eyebrow{font:12px Arial;letter-spacing:2px;color:var(--gold)}h1{font-size:clamp(36px,6vw,58px);font-weight:normal;margin:14px 0}.tagline{font-size:21px;line-height:1.5;color:#bdb6a8;margin:15px 0 0}.punch{margin-bottom:60px}h2{font-size:32px;font-weight:normal;margin:12px 0 22px}.meta{display:flex;flex-wrap:wrap;gap:20px;font:14px Arial;color:var(--muted)}.meta span{color:var(--gold)}.artwork{display:block;border:1px solid var(--line);background:#000;cursor:zoom-in}.artwork img{display:block;width:100%;height:auto}.punch-actions{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--line);font:14px Arial;color:var(--gold)}.back{display:inline-block;margin-bottom:24px;font:14px Arial;color:var(--gold)}footer{border-top:1px solid var(--line);text-align:center;padding:25px;font:12px Arial;color:var(--muted)}dialog{padding:54px 12px 12px;border:1px solid #746044;background:#10110f;color:var(--cream);max-width:96vw;width:1350px;max-height:94vh;overflow:auto}dialog::backdrop{background:#000e}dialog img{display:block;width:100%;height:auto}dialog form{position:sticky;top:-45px;height:0;display:flex;justify-content:flex-end;z-index:1}dialog button{transform:translateY(-42px);height:36px;padding:8px 16px;background:var(--cream);color:var(--bg);border:0;font:16px Arial;cursor:pointer}@media(max-width:650px){header{align-items:flex-start;padding:24px 6%;gap:20px}.brand{font-size:25px}nav{display:grid;grid-template-columns:1fr;gap:12px;text-align:right;font-size:14px}main{padding:30px 5% 40px}.tagline{font-size:18px}h2{font-size:28px}.punch{margin-bottom:40px}dialog{padding-left:5px;padding-right:5px}}

/* Compact archive with room for a growing collection. */
main.punch-archive{max-width:1200px}.punch-archive .intro{display:flex;align-items:center;justify-content:space-between;gap:36px}.intro-heading{min-width:0}.title-lockup{display:flex;align-items:center;gap:20px}.title-lockup h1{font-size:clamp(34px,4.3vw,54px);white-space:nowrap}.punch-logo{width:64px;height:64px;object-fit:contain;flex:none}.punch-explainer{flex:0 0 245px;padding:10px 12px;border:1px solid #65563e;background:#191a17}.punch-explainer p{margin:0;font-size:14px;line-height:1.4;color:#bdb6a8}.punch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 30px}.punch-grid .punch{margin:0;min-width:0}.punch-heading h1,.punch-heading h2{color:var(--gold)}.punch-grid h2{font-size:28px;margin:10px 0 18px}.punch-grid .artwork{background:transparent;border:0;max-width:100%}.punch-grid .artwork img{height:340px;width:100%;object-fit:contain;object-position:left center}.punch-grid .meta{gap:12px;font-size:13px}.punch-grid .punch-actions{font-size:14px;padding:16px 0;gap:12px}.single-punch .artwork{max-width:360px}.single-punch .punch-actions{max-width:360px}
@media(max-width:1000px){.punch-archive .intro{gap:24px;align-items:flex-start;flex-wrap:wrap}.punch-explainer{flex-basis:100%;max-width:300px}.punch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.punch-grid{grid-template-columns:1fr;gap:36px}.title-lockup{gap:12px}.title-lockup h1{font-size:clamp(28px,7.7vw,38px)}.punch-logo{width:44px;height:44px}.punch-grid .artwork img{height:300px}.punch-explainer{padding:10px 12px}.punch-archive .tagline{font-size:17px}}
@media(min-width:701px) and (max-width:1000px){.punch-archive .intro{flex-wrap:nowrap;align-items:center}.punch-explainer{flex:0 0 200px;padding:8px 10px}.punch-explainer p{font-size:14px}.title-lockup{gap:12px}.punch-logo{width:50px;height:50px}.title-lockup h1{font-size:34px}.punch-archive .tagline{font-size:18px}}
.punch-share{margin-top:14px;font:14px Arial;color:var(--gold)}.punch-share summary{cursor:pointer;padding:8px 0;max-width:max-content}.punch-share summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.share-options{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.share-options a,.share-options button{font:inherit;color:var(--cream);background:#191a17;border:1px solid #65563e;padding:9px 11px;cursor:pointer;text-decoration:none}.share-options [hidden]{display:none}.share-options a:hover,.share-options button:hover{border-color:var(--gold);color:var(--gold)}.share-help,.share-status{font:13px/1.5 Arial;color:#bdb6a8;margin:10px 0}.share-status:empty{display:none}

/* Balanced explanation with typography matching the tagline. */
.punch-archive{--punch-description-size:21px}
.punch-archive .tagline,.punch-explainer p{font-size:var(--punch-description-size);line-height:1.5}
.punch-explainer{flex:0 1 480px;max-width:100%;padding:14px 18px}
.punch-explainer p{text-wrap:balance;text-align:center}
@media(min-width:701px) and (max-width:1000px){.punch-archive{--punch-description-size:18px}}
@media(max-width:900px){.punch-archive .intro{flex-wrap:wrap}.punch-explainer{flex:0 1 480px;width:100%}}
@media(max-width:650px){.punch-archive{--punch-description-size:18px}}
@media(max-width:600px){.punch-archive{--punch-description-size:17px}}

/* Lead with the newest Punch, then show the responsive archive. */
.punch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 36px}
.punch-grid>.punch:first-child{grid-column:1 / -1;width:min(100%,500px);justify-self:center}
.punch-grid>.punch:first-child .punch-heading{text-align:center}
.punch-grid>.punch:first-child .meta{justify-content:center}
.punch-grid>.punch:first-child .artwork img{height:auto;width:100%}
@media(max-width:600px){.punch-grid{grid-template-columns:1fr;gap:36px}.punch-grid>.punch:first-child{grid-column:auto;width:100%}}

/* Dates hug the artwork; desktop rows space the visible artwork evenly. */
.punch-row{display:contents}
.punch-grid .punch-heading>div{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.punch-grid .punch-heading h2{margin:0 0 8px}
.punch-grid .meta{margin:0 0 10px}
.punch-grid>.punch:first-child .punch-heading{text-align:left}
.punch-grid>.punch:first-child .meta{justify-content:flex-start}
@media(min-width:1001px){
 .punch-grid{grid-template-columns:1fr}
 .punch-row{display:grid;grid-column:1 / -1;grid-template-columns:var(--punch-columns);column-gap:36px;row-gap:0;align-items:stretch}
 .punch-row>.punch{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
 .punch-row .artwork{align-self:start}
 .punch-row .artwork img{height:auto;width:100%;object-position:left top}
 .punch-row .punch-share{align-self:start}
}

/* Keep the sharing prompt quiet and centered beneath each illustration. */
.punch-share>summary{margin-inline:auto;font-size:12px;text-align:center}
.single-punch .punch-share{max-width:360px}

/* Fine gold frame with a little black breathing room. */
.artwork,.punch-grid .artwork{border:1px solid var(--gold);padding:5px;background:#000}

.punch .meta time{color:var(--gold)}

.punch-grid .meta,.punch-grid>.punch:first-child .meta{justify-content:center;text-align:center}
.single-punch .meta{max-width:360px;justify-content:center;text-align:center}

/* On phones, every frame follows the full artwork's natural proportions. */
@media(max-width:600px){
 .punch-grid .artwork{margin-inline:auto}
 .punch-grid .artwork img{width:100%;height:auto;object-position:center}
}

/* Align the archive introduction with the shared masthead; retain artwork sizes. */
main.punch-archive{max-width:1440px;padding:55px 5% 70px}
.punch-archive .punch-grid{max-width:1120px;margin-inline:auto}
@media(max-width:650px){main.punch-archive{padding:32px 6% 45px}}