/*
 * essues Portal — front-end design system.
 *
 * Tokens mirror the approved prototypes exactly. Directional properties use
 * CSS logical properties throughout, so the whole layout mirrors correctly
 * under `dir="rtl"` without a separate stylesheet.
 */

:root{
	--ink:#1c1a17;
	--ink-soft:#3c3730;
	--gold:#c1904f;
	--gold-deep:#a3743a;
	--gold-pale:#e9d3b3;
	--cream:#f7f3ec;
	--cream-deep:#f0eadd;
	--paper:#ffffff;
	--stone:#9c9284;
	--hairline:#e4dccb;
	--shadow:0 20px 45px -25px rgba(28,26,23,0.35);
	--shadow-soft:0 12px 28px -18px rgba(28,26,23,0.35);
	--veil:linear-gradient(0deg, rgba(20,17,14,0.82) 0%, rgba(20,17,14,0) 55%);
	--font-display:'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--font-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--gutter:clamp(20px,5vw,64px);
}

/* Dark theme: the ink/cream relationship inverts, the gold stays the brand. */
:root[data-theme="dark"]{
	--ink:#f4efe6;
	--ink-soft:#d9d1c4;
	--cream:#141210;
	--cream-deep:#1d1a16;
	--paper:#211d19;
	--stone:#9a9184;
	--hairline:#332d26;
	--shadow:0 20px 45px -25px rgba(0,0,0,0.7);
	--shadow-soft:0 12px 28px -18px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html.essues-html{scroll-behavior:smooth;}

body.essues{
	margin:0;
	background:var(--cream);
	color:var(--ink);
	font-family:var(--font-body);
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

.essues h1,
.essues h2,
.essues h3{
	font-family:var(--font-display);
	font-weight:500;
	margin:0;
	letter-spacing:-0.01em;
}

.essues a{color:inherit; text-decoration:none;}
.essues img{display:block; max-width:100%; height:auto;}
.essues button{font-family:var(--font-body);}

.screen-reader-text{
	position:absolute !important;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.essues-skip{
	position:absolute;
	inset-inline-start:-9999px;
	top:0;
	z-index:200;
	background:var(--ink);
	color:var(--cream);
	padding:12px 18px;
	border-radius:0 0 8px 0;
	font-size:13px;
	font-weight:700;
}
.essues-skip:focus{inset-inline-start:0;}

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

@media (prefers-reduced-motion:reduce){
	html.essues-html{scroll-behavior:auto;}
	body.essues *{transition:none !important; animation:none !important;}
}

/* ---------- corner-fold signature (echoes the logo's cut corner) ---------- */
.fold{position:relative; overflow:hidden;}
.fold::after{
	content:"";
	position:absolute;
	top:0;
	inset-inline-end:0;
	width:0; height:0;
	border-style:solid;
	border-width:0 26px 26px 0;
	border-color:transparent var(--gold) transparent transparent;
	opacity:0.9;
	transition:border-width .25s ease;
}
[dir="rtl"] .fold::after{
	border-width:0 0 26px 26px;
	border-color:transparent transparent transparent var(--gold);
}
.fold:hover::after{border-width:0 36px 36px 0;}
[dir="rtl"] .fold:hover::after{border-width:0 0 36px 36px;}

/* ---------- top bar ---------- */
.topbar{
	position:sticky; top:0; z-index:50;
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:14px;
	padding:26px var(--gutter);
	background:color-mix(in srgb, var(--cream) 92%, transparent);
	backdrop-filter:blur(8px);
	border-bottom:1px solid var(--hairline);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
	.topbar{background:var(--cream);}
}
.topbar-brand{grid-column:2; display:flex; flex-direction:column; align-items:center; gap:8px;}
.topbar-brand-link{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;}
.topbar-brand img{height:64px; width:auto;}
/* The wordmark is drawn in ink; on a dark surface it needs the dedicated dark
   logo, or failing that the same knock-out-to-white treatment as the footer. */
.topbar-logo-dark{display:none;}
:root[data-theme="dark"] .topbar-logo-light{display:none;}
:root[data-theme="dark"] .topbar-logo-dark{display:block;}
:root[data-theme="dark"] .topbar-logo-auto-invert{filter:brightness(0) invert(1); display:block;}
.topbar-tagline{
	font-family:var(--font-display);
	font-style:italic;
	font-size:14px;
	color:var(--gold-deep);
	letter-spacing:0.01em;
	white-space:nowrap;
}
.topbar-brand-link:hover .topbar-tagline{color:var(--gold);}
.topbar-tools{grid-column:3; justify-self:end; display:flex; align-items:center; gap:10px;}

.menu-wrap{position:relative;}
.menu-btn,
.theme-btn{
	width:40px; height:40px;
	display:flex; align-items:center; justify-content:center;
	background:none;
	border:1px solid var(--hairline);
	border-radius:8px;
	cursor:pointer;
	color:var(--ink);
	transition:background .2s ease, border-color .2s ease;
}
.menu-btn:hover,
.theme-btn:hover{background:var(--cream-deep); border-color:var(--gold);}
.menu-btn svg,
.theme-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

.theme-icon-moon{display:none;}
:root[data-theme="dark"] .theme-icon-sun{display:none;}
:root[data-theme="dark"] .theme-icon-moon{display:block;}

.menu-dropdown{
	position:absolute;
	top:calc(100% + 10px);
	inset-inline-end:0;
	background:var(--paper);
	border:1px solid var(--hairline);
	border-radius:10px;
	box-shadow:var(--shadow);
	padding:8px;
	min-width:210px;
	z-index:60;
	display:none;
	flex-direction:column;
	gap:2px;
}
.menu-dropdown.open{display:flex;}
.menu-dropdown a{
	padding:12px 14px;
	font-size:12.5px; font-weight:700;
	letter-spacing:0.07em; text-transform:uppercase;
	color:var(--ink-soft);
	border-radius:7px;
	transition:background .2s ease, color .2s ease;
}
.menu-dropdown a:hover{background:var(--cream-deep); color:var(--gold-deep);}

/* ---------- hero ---------- */
body.essues .hero{
	position:relative;
	padding:88px var(--gutter) 70px;
	text-align:center;
	overflow:hidden;
}
.hero-peaks{
	position:absolute;
	inset-inline-start:50%;
	top:10px;
	transform:translateX(-50%);
	width:min(900px, 90vw);
	opacity:0.35;
	color:var(--gold);
	pointer-events:none;
}
[dir="rtl"] .hero-peaks{transform:translateX(50%);}
.hero-eyebrow{
	position:relative;
	display:inline-flex; align-items:center; gap:10px;
	font-size:12px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
	color:var(--gold-deep);
	margin-bottom:22px;
}
.hero-eyebrow::before,
.hero-eyebrow::after{content:""; width:26px; height:1px; background:var(--gold);}
.hero h1{
	position:relative;
	font-size:clamp(34px, 5.4vw, 64px);
	line-height:1.05;
	color:var(--ink);
}
.hero h1 em{font-style:italic; color:var(--gold-deep);}
.hero p.sub{
	position:relative;
	max-width:520px;
	margin:20px auto 0;
	color:var(--stone);
	font-size:16px; line-height:1.6;
}
.hero-actions{position:relative; margin-top:28px;}

.essues-button{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--gold); color:var(--ink);
	font-weight:800; font-size:13px;
	letter-spacing:0.06em; text-transform:uppercase;
	padding:14px 26px; border-radius:8px;
	transition:background .2s ease, color .2s ease;
}
.essues-button:hover{background:var(--gold-deep); color:#fff;}

/* ---------- section shell ---------- */
body.essues section{padding:26px var(--gutter) 70px;}
body.essues section > .section-head,
body.essues section > .pub-grid,
body.essues section > .cat-grid,
body.essues section > .feat-list{max-width:1180px; margin-inline:auto;}

.section-head{
	display:flex; align-items:flex-end; justify-content:space-between;
	margin-bottom:32px; flex-wrap:wrap; gap:12px;
}
.section-head h2{font-size:clamp(24px,3vw,32px);}
.section-head .tag{
	font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
	color:var(--stone);
}

/* ---------- publications grid ---------- */
.pub-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:18px;
	max-width:900px;
}
.pub-card{
	background:var(--paper);
	border:1px solid var(--hairline);
	border-radius:16px;
	box-shadow:var(--shadow-soft);
	display:flex; flex-direction:column;
	overflow:hidden;
	height:230px;
	transition:transform .25s ease, box-shadow .25s ease;
}
.pub-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -16px rgba(28,26,23,0.4);}
.pub-card .cover{position:relative; height:130px; flex:0 0 auto; overflow:hidden; background:var(--ink);}
.pub-card .cover img{
	width:100%; height:100%; object-fit:cover;
	transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.pub-card:hover .cover img{transform:scale(1.06);}
.pub-card .cover .veil{
	position:absolute; inset:0;
	background:var(--veil);
	display:flex; align-items:flex-end; justify-content:flex-start;
	padding:16px;
	opacity:0; transition:opacity .3s ease;
}
.pub-card:hover .cover .veil{opacity:1;}
.veil span{
	color:#fff; font-size:12px; font-weight:700;
	letter-spacing:0.12em; text-transform:uppercase;
	border-bottom:1px solid var(--gold);
	padding-bottom:2px;
}
.pub-card .meta{padding:13px 15px 16px; flex:1 1 auto; min-height:0;}
.pub-card .meta h3{
	font-size:15px; margin-bottom:4px;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pub-card .meta p{
	margin:0; font-size:11.5px; color:var(--stone); line-height:1.4;
	display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
	overflow:hidden;
}

.cover-fallback{
	display:flex; align-items:center; justify-content:center;
	width:100%; height:100%;
	background:linear-gradient(150deg, var(--ink) 0%, #2c2822 100%);
	color:var(--gold-pale);
	font-family:var(--font-display); font-style:italic; font-size:14px;
}

.pub-add{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:8px;
	border:1px dashed var(--gold-pale);
	border-radius:16px;
	color:var(--gold-deep);
	font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
	height:230px;
	text-align:center;
	padding:10px;
}
.pub-add .plus{
	width:30px; height:30px; border-radius:50%;
	border:1px solid var(--gold);
	display:flex; align-items:center; justify-content:center;
	font-size:16px; font-family:var(--font-display);
}

/* ---------- formats grid ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.cat-card{
	background:var(--paper);
	border:1px solid var(--hairline);
	border-radius:16px;
	overflow:hidden;
	display:flex; flex-direction:column;
	transition:transform .25s ease, box-shadow .25s ease;
}
.cat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.cat-card:hover::after{border-color:transparent var(--gold-pale) transparent transparent;}
[dir="rtl"] .cat-card:hover::after{border-color:transparent transparent transparent var(--gold-pale);}
.cat-card:hover .cat-media svg{transform:scale(1.06);}
.cat-card:hover .cat-icon{background:var(--ink);}
.cat-card:hover .cat-icon svg{stroke:var(--gold-pale);}

.cat-top{position:relative;}
.cat-media{
	position:relative;
	aspect-ratio:5/4;
	background:linear-gradient(155deg, var(--cream-deep) 0%, #ece2cd 100%);
	display:flex; align-items:center; justify-content:center;
	overflow:hidden;
}
:root[data-theme="dark"] .cat-media{background:linear-gradient(155deg, #241f1a 0%, #2f2820 100%);}
.cat-media svg{width:58%; height:58%; transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.cat-media svg .a{fill:var(--gold);}
.cat-media svg .b{fill:var(--gold-deep);}
.cat-media svg .c{fill:var(--ink); opacity:0.88;}
.cat-media svg .w{fill:var(--cream);}

.cat-icon{
	position:absolute;
	inset-inline-start:22px;
	bottom:-22px;
	width:48px; height:48px;
	border-radius:50%;
	background:var(--paper);
	border:1px solid var(--hairline);
	box-shadow:0 8px 16px -8px rgba(28,26,23,0.35);
	display:flex; align-items:center; justify-content:center;
	transition:background .25s ease;
	z-index:2;
}
.cat-icon svg{
	width:22px; height:22px;
	stroke:var(--gold-deep); fill:none;
	stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
	transition:stroke .25s ease;
}

.cat-body{position:relative; padding:32px 22px 22px; flex:1 1 auto; display:flex; flex-direction:column; gap:6px;}
.cat-index{font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--gold-deep);}
.cat-card h3{font-size:19px;}

/* ---------- featured reading ---------- */
.feat-list{display:grid; grid-template-columns:repeat(5, 1fr); gap:26px 18px; align-items:start;}
.feat-item{display:flex; flex-direction:column; gap:12px;}
/* Each tile takes the cover's own proportions (set inline from the file's real
   dimensions), so a publication is never cropped and never sits in a letterbox.
   The fallback is only used when no image can be measured. */
.feat-item .thumb{
	position:relative;
	width:100%;
	max-width:210px;
	margin-inline:auto;
	aspect-ratio:var(--essues-cover-ratio, 3/4);
	border-radius:9px;
	overflow:hidden;
	box-shadow:0 12px 22px -14px rgba(28,26,23,0.45);
}
.feat-item .thumb img{width:100%; height:100%; object-fit:contain; display:block; transition:transform .4s ease;}
.feat-item:hover .thumb img{transform:scale(1.06);}
.feat-item .info{min-width:0; text-align:center;}
.feat-item .info .cat{
	font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
	color:var(--gold-deep); margin-bottom:5px; display:block;
}
.feat-item .info h3{
	font-size:13.5px; line-height:1.3; margin-bottom:4px;
	font-family:var(--font-body); font-weight:700; color:var(--ink);
}
.feat-item .info .month{font-size:11px; color:var(--stone); display:block;}

/* ---------- page hero (archives) ---------- */
body.essues main > .crumb{max-width:1200px; margin-inline:auto; padding:34px var(--gutter) 0;}
body.essues main > .reader-head{padding-top:14px;}
body.essues .pub-hero{padding:56px var(--gutter) 36px; max-width:1300px; margin-inline:auto;}
.crumb{
	font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
	color:var(--stone); margin-bottom:18px; display:block;
}
.crumb a{color:var(--gold-deep);}
.crumb a:hover{text-decoration:underline;}
.pub-hero h1{font-size:clamp(28px,4vw,44px); margin-bottom:10px;}
.pub-hero p{color:var(--stone); font-size:15px; max-width:520px; line-height:1.6; margin:0;}

/* ---------- issues grid ---------- */
body.essues .issues-wrap{padding:10px var(--gutter) 90px; max-width:1300px; margin-inline:auto;}
.issues-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:22px 18px;}
.issue-card{display:flex; flex-direction:column;}
.issue-month{
	font-size:14px; font-weight:800; letter-spacing:0.02em; text-transform:uppercase;
	color:var(--ink); margin-bottom:10px; text-align:center;
}
.issue-cover{
	position:relative;
	aspect-ratio:var(--essues-cover-ratio, 5/6.25);
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 14px 26px -16px rgba(28,26,23,0.45);
	border:1px solid var(--hairline);
	display:block;
}
.issue-cover img{width:100%; height:100%; object-fit:contain; display:block; transition:transform .4s ease;}
.issue-card:hover .issue-cover img{transform:scale(1.045);}
.issue-cover .fold::after{border-width:0 22px 22px 0;}

.issue-meta{display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:12.5px;}
.issue-number{font-weight:700; color:var(--ink);}
.issue-views{display:flex; align-items:center; gap:5px; color:var(--stone);}
.issue-views svg{width:14px; height:14px; stroke:var(--stone); fill:none; stroke-width:1.6;}

.issue-actions{display:flex; align-items:center; gap:8px; margin-top:10px;}
.issue-read{
	flex:1 1 auto;
	display:block; text-align:center;
	background:var(--gold); color:#1c1a17;
	font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
	padding:7px 0; border-radius:6px; border:none; cursor:pointer;
	transition:background .2s ease, transform .2s ease;
}
.issue-read:hover{background:var(--gold-deep); color:#fff; transform:translateY(-1px);}

.latest-badge{
	position:absolute; top:10px; inset-inline-start:10px;
	background:var(--ink); color:var(--gold-pale);
	font-size:9.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
	padding:5px 9px; border-radius:5px; z-index:2;
}
:root[data-theme="dark"] .latest-badge{background:#000; color:var(--gold-pale);}

/* ---------- share widget ---------- */
.share-wrap{position:relative; flex:0 0 auto;}
.share-btn{
	width:32px; height:32px;
	display:flex; align-items:center; justify-content:center;
	background:var(--paper);
	border:1px solid var(--hairline);
	border-radius:6px; cursor:pointer;
	transition:background .2s ease, border-color .2s ease;
}
.share-btn:hover{background:var(--cream-deep); border-color:var(--gold);}
.share-btn svg{width:15px; height:15px; stroke:var(--ink-soft); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

.share-menu{
	position:absolute;
	bottom:calc(100% + 8px);
	inset-inline-end:0;
	width:180px;
	background:var(--paper);
	border:1px solid var(--hairline);
	border-radius:10px;
	box-shadow:var(--shadow);
	padding:6px;
	z-index:20;
}
.share-menu[hidden]{display:none;}
.share-menu button,
.share-menu a{
	display:flex; align-items:center; gap:9px;
	width:100%;
	padding:8px 9px;
	font-size:12.5px; font-weight:600;
	color:var(--ink);
	background:none; border:none;
	border-radius:6px; cursor:pointer;
	text-align:start;
	font-family:var(--font-body);
}
.share-menu button:hover,
.share-menu a:hover{background:var(--cream-deep);}
.share-menu svg{width:16px; height:16px; stroke:var(--gold-deep); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto;}
.share-menu .wa-icon{stroke:none; fill:#25D366;}

/* ---------- format item grid ---------- */
body.essues .items-wrap{padding:10px var(--gutter) 90px; max-width:1400px; margin-inline:auto;}
.items-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:24px 18px;}
.item-card{
	display:flex; flex-direction:column;
	background:var(--paper);
	border:1px solid var(--hairline);
	border-radius:12px;
	overflow:hidden;
	box-shadow:var(--shadow-soft);
	transition:transform .25s ease, box-shadow .25s ease;
}
.item-card:hover{transform:translateY(-3px); box-shadow:0 16px 30px -14px rgba(28,26,23,0.4);}
.item-cover{
	position:relative;
	aspect-ratio:4/3;
	overflow:hidden;
	background:linear-gradient(155deg, var(--cream-deep) 0%, #ece2cd 100%);
	display:flex; align-items:center; justify-content:center;
}
:root[data-theme="dark"] .item-cover{background:linear-gradient(155deg, #241f1a 0%, #2f2820 100%);}
.item-cover svg{width:56%; height:56%; transition:transform .4s ease;}
.item-cover svg .a{fill:var(--gold);}
.item-cover svg .b{fill:var(--gold-deep);}
.item-cover svg .c{fill:var(--ink); opacity:0.88;}
.item-cover svg .w{fill:var(--cream);}
.item-cover .item-photo{width:100%; height:100%; object-fit:cover;}
.item-card:hover .item-cover svg{transform:scale(1.05);}
.item-cover .item-title-overlay{
	position:absolute; inset:0;
	display:flex; align-items:flex-end;
	padding:14px;
	background:linear-gradient(0deg, rgba(20,17,14,0.82) 0%, rgba(20,17,14,0) 60%);
}
.item-title-overlay h3{color:#fff; font-family:var(--font-body); font-weight:800; font-size:14px; line-height:1.25;}
.item-latest-badge{
	position:absolute; top:10px; inset-inline-start:10px;
	background:var(--ink); color:var(--gold-pale);
	font-size:9px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
	padding:4px 8px; border-radius:5px; z-index:2;
}
.item-body{padding:12px 13px 14px; flex:1 1 auto; display:flex; flex-direction:column;}
.item-desc{
	font-size:11.5px; color:var(--stone); line-height:1.5; margin:0 0 10px;
	display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.item-meta{margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:10.5px; color:var(--stone);}
.item-views{display:flex; align-items:center; gap:4px;}
.item-views svg{width:12px; height:12px; stroke:var(--stone); fill:none; stroke-width:1.6;}
.item-meta-right{display:flex; align-items:center; gap:8px;}
.item-meta-right .share-btn{width:20px; height:20px; border-radius:5px;}
.item-meta-right .share-btn svg{width:11px; height:11px;}
.item-meta-right .share-menu{width:160px;}

.essues-empty{max-width:1300px; margin-inline:auto; color:var(--stone); font-size:15px;}

.essues-pagination{
	display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
	margin-top:44px;
}
.essues-pagination .page-numbers{
	min-width:38px; padding:8px 12px;
	border:1px solid var(--hairline); border-radius:8px;
	background:var(--paper); color:var(--ink-soft);
	font-size:13px; font-weight:700; text-align:center;
}
.essues-pagination .page-numbers.current,
.essues-pagination .page-numbers:hover{background:var(--gold); border-color:var(--gold); color:#1c1a17;}

/* ---------- reader ---------- */
.reader-head{
	max-width:1200px; margin-inline:auto;
	padding:14px var(--gutter) 26px;
	display:flex; align-items:baseline; justify-content:space-between; gap:20px;
	flex-wrap:wrap;
}
.reader-month{font-size:clamp(32px,5vw,54px); font-weight:600; color:var(--ink);}
.reader-issue{font-family:var(--font-body); font-size:clamp(18px,2.4vw,24px); font-weight:800; color:var(--ink); letter-spacing:0.01em;}

body.essues .flip-section{max-width:1320px; margin-inline:auto; padding:0 var(--gutter);}
/* ---- the viewer window -------------------------------------------------
   The frame keeps one size for the whole issue: the cover sits centred inside
   it and a spread fills it, but the box itself never changes. Its proportions
   come from the publication's own trim size, measured when the pages render. */
.flip-frame{
	--essues-page-ratio:0.7727;
	position:relative;
	margin-inline:auto;
	max-width:min(1280px, calc(78vh * var(--essues-page-ratio) * 2));
}
.flip-frame.is-single{max-width:min(720px, calc(78vh * var(--essues-page-ratio)));}

.flip-stage{
	position:relative;
	width:100%;
	/* The fallback keeps the embed and plugin readers, which have no frame
	   around them, from collapsing to zero height. */
	aspect-ratio:calc(var(--essues-page-ratio, 0.7727) * 2);
	background:#26262b;
	border-radius:10px;
	box-shadow:var(--shadow);
	overflow:hidden;
	display:flex; align-items:center; justify-content:center;
	touch-action:pan-y;
	perspective:2200px;
	cursor:zoom-in;
}
.flip-frame.is-single .flip-stage{aspect-ratio:var(--essues-page-ratio, 0.7727);}
.flip-stage.is-zoomed{cursor:grab; touch-action:none;}
.flip-stage.is-panning{cursor:grabbing;}

/* The browser's native image drag and text selection both cancel the pointer
   stream a pan depends on, so neither is allowed to start inside the stage. */
.flip-stage img,
.flip-stage .turn-face,
.flip-stage .flip-spread{
	-webkit-user-drag:none;
	user-select:none;
	-webkit-user-select:none;
}
.flip-stage.is-zoomed .flip-viewport{transition:none;}

.flip-frame.is-fullscreen{max-width:none; width:100vw; height:100vh; height:100dvh; background:#26262b;}
.flip-frame.is-fullscreen .flip-stage{
	width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none;
}

/* iPhone Safari has no element full screen, so the reader takes the viewport
   itself. Same look, no API. */
.flip-frame.is-pseudo-fullscreen{
	position:fixed; inset:0; z-index:9999;
	width:100vw; height:100dvh;
	margin:0; border-radius:0;
	padding-top:env(safe-area-inset-top);
	padding-bottom:env(safe-area-inset-bottom);
}
html.essues-fullscreen-lock,
html.essues-fullscreen-lock body{overflow:hidden; overscroll-behavior:none;}

/* Phone held sideways: every pixel of height belongs to the spread, so the
   bar shrinks and floats instead of taking a row of its own. */
@media (orientation: landscape) and (max-height: 520px){
	.flip-frame.is-fullscreen .flip-bar,
	.flip-frame.is-pseudo-fullscreen .flip-bar{
		padding:4px 8px; gap:3px 8px;
		background:linear-gradient(0deg, rgba(16,16,18,.92) 0%, rgba(16,16,18,0) 100%);
	}
	.flip-frame.is-fullscreen .flip-btn,
	.flip-frame.is-pseudo-fullscreen .flip-btn{min-width:28px; height:28px; padding:0 5px; font-size:10.5px;}
	.flip-frame.is-fullscreen .flip-zoom-slider,
	.flip-frame.is-pseudo-fullscreen .flip-zoom-slider{display:none;}
	.flip-frame.is-fullscreen .flip-nav,
	.flip-frame.is-pseudo-fullscreen .flip-nav{bottom:38px;}
}

.flip-viewport{
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	transform-origin:center center;
	transition:transform .18s ease-out;
}
/* Promoted to its own layer only while a drag is in progress. Left promoted
   permanently, the browser keeps the layer's raster at its unscaled size, which
   is what made a zoomed page look soft however sharp the source was. */
.flip-stage.is-panning .flip-viewport{will-change:transform;}
.flip-stage.is-panning .flip-viewport{transition:none;}
.flip-viewport.is-fading{animation:essues-fade .35s ease;}
@keyframes essues-fade{ from{opacity:.25;} to{opacity:1;} }

/* The spread takes the page proportions, so the dark stage shows around a
   cover rather than white bars beside it. */
.flip-spread{
	display:flex;
	height:100%;
	aspect-ratio:calc(var(--essues-page-ratio, 0.7727) * 2);
	max-width:100%;
	/* auto margins, not align-items, so a spread grown past the stage by the
	   zoom stays centred instead of having its top and left edges clipped. */
	margin:auto;
	box-shadow:0 10px 40px -12px rgba(0,0,0,.55);
}
.flip-spread.single{aspect-ratio:var(--essues-page-ratio, 0.7727);}
.flip-frame.is-single .flip-spread{aspect-ratio:var(--essues-page-ratio, 0.7727);}

.flip-leaf{width:50%; height:100%; position:relative; background:var(--paper); overflow:hidden;}
.flip-spread.single .flip-leaf{width:100%;}
.flip-leaf + .flip-leaf{border-inline-start:1px solid rgba(0,0,0,.16);}
/* contain, not cover: a page whose proportions differ from the cover must
   never have its edges cropped away. */
.flip-leaf img{width:100%; height:100%; object-fit:contain; display:block; background:#fff;}

/* ---- page turn ---- */
.flip-turn{position:absolute; inset:0; pointer-events:none; z-index:6; display:none;}
.flip-turn.is-active{display:block;}
.turn-leaf{
	position:absolute; top:0; bottom:0; width:50%;
	transform-style:preserve-3d;
	transition:transform .72s cubic-bezier(.3,.05,.25,1);
	z-index:2;
}
.turn-leaf.is-forward{
	inset-inline-start:50%;
	transform-origin:left center;
	transform:rotateY(0deg);
}
.turn-leaf.is-forward.is-turning{transform:rotateY(-180deg);}
.turn-leaf.is-backward{
	inset-inline-start:0;
	transform-origin:right center;
	transform:rotateY(0deg);
}
.turn-leaf.is-backward.is-turning{transform:rotateY(180deg);}
[dir="rtl"] .turn-leaf.is-forward{transform-origin:right center;}
[dir="rtl"] .turn-leaf.is-forward.is-turning{transform:rotateY(180deg);}
[dir="rtl"] .turn-leaf.is-backward{transform-origin:left center;}
[dir="rtl"] .turn-leaf.is-backward.is-turning{transform:rotateY(-180deg);}

.turn-face{
	position:absolute; inset:0;
	background-color:#fff;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	backface-visibility:hidden;
	box-shadow:0 0 24px rgba(0,0,0,.32);
}
.turn-back{transform:rotateY(180deg);}

.turn-shade{
	position:absolute; inset:0;
	background:linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,0) 45%);
	opacity:0;
	animation:essues-shade .72s ease;
	pointer-events:none;
}
@keyframes essues-shade{ 0%{opacity:0;} 45%{opacity:1;} 100%{opacity:0;} }

.flip-loading{
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	color:var(--stone); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
	background:var(--paper);
}

/* ---- edge arrows ---- */
.flip-nav{
	position:absolute; top:0; bottom:56px; width:13%;
	display:flex; align-items:center; z-index:5;
	background:none; border:none; cursor:pointer;
	opacity:0; transition:opacity .2s ease;
	color:#fff;
}
.flip-stage:hover .flip-nav,
.flip-stage:focus-within .flip-nav{opacity:1;}
.flip-nav.prev{inset-inline-start:0; justify-content:flex-start; padding-inline-start:10px;}
.flip-nav.next{inset-inline-end:0; justify-content:flex-end; padding-inline-end:10px;}
.flip-nav svg{width:28px; height:28px; stroke:#fff; fill:none; stroke-width:2; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
[dir="rtl"] .flip-nav.prev svg,
[dir="rtl"] .flip-nav.next svg{transform:scaleX(-1);}
.flip-nav[disabled]{opacity:.15 !important; cursor:default;}
.flip-stage.is-zoomed .flip-nav{opacity:1; width:7%;}

/* ---- control bar, inside the window ---- */
.flip-bar{
	position:absolute; inset-inline:0; bottom:0; z-index:8;
	cursor:default;
	display:flex; align-items:center; justify-content:space-between;
	flex-wrap:wrap; gap:6px 14px;
	padding:8px 12px;
	background:linear-gradient(0deg, rgba(16,16,18,.94) 0%, rgba(16,16,18,.78) 70%, rgba(16,16,18,0) 100%);
	color:#fff;
}
.flip-bar-group{display:flex; align-items:center; gap:4px;}
.flip-bar-zoom{flex:1 1 180px; justify-content:center;}
.flip-bar-tools{justify-content:flex-end;}

.flip-btn{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:32px; height:32px; padding:0 7px;
	background:transparent; color:rgba(255,255,255,.86);
	border:1px solid transparent; border-radius:7px;
	cursor:pointer; font-size:11.5px; font-weight:700;
	letter-spacing:.04em; text-decoration:none;
	font-variant-numeric:tabular-nums;
	transition:background .18s ease, color .18s ease;
}
.flip-btn:hover:not([disabled]){background:rgba(255,255,255,.16); color:#fff;}
.flip-btn[disabled]{opacity:.3; cursor:default;}
.flip-btn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.flip-btn-text{min-width:52px;}
[dir="rtl"] .flip-btn svg{transform:scaleX(-1);}
.flip-btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}

.flip-goto{display:flex; align-items:center; gap:5px; margin-inline:4px;}
.flip-goto input{
	width:56px; height:30px; padding:0 6px;
	border:1px solid rgba(255,255,255,.28); border-radius:6px;
	background:rgba(255,255,255,.1); color:#fff;
	font-family:var(--font-body); font-size:12.5px; font-weight:700;
	text-align:center; font-variant-numeric:tabular-nums;
	-moz-appearance:textfield;
}
.flip-goto input::-webkit-outer-spin-button,
.flip-goto input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.flip-goto input:focus{outline:none; border-color:var(--gold); background:rgba(255,255,255,.18);}
.flip-goto-total{font-size:12px; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums;}

.flip-zoom-slider{
	-webkit-appearance:none; appearance:none;
	width:min(220px, 34vw); height:3px; border-radius:3px;
	background:rgba(255,255,255,.35);
	cursor:pointer;
}
.flip-zoom-slider::-webkit-slider-thumb{
	-webkit-appearance:none; appearance:none;
	width:13px; height:13px; border-radius:50%;
	background:#fff; border:none; cursor:pointer;
}
.flip-zoom-slider::-moz-range-thumb{
	width:13px; height:13px; border-radius:50%;
	background:#fff; border:none; cursor:pointer;
}
.flip-zoom-slider:focus-visible{outline:2px solid #fff; outline-offset:4px;}

.flip-icon-two, .flip-icon-collapse{display:none;}
[data-essues-view-toggle].is-double .flip-icon-one{display:none;}
[data-essues-view-toggle].is-double .flip-icon-two{display:inline-flex;}
[data-essues-fullscreen][aria-pressed="true"] .flip-icon-expand{display:none;}
[data-essues-fullscreen][aria-pressed="true"] .flip-icon-collapse{display:inline-flex;}

/* ---- thumbnail panel ---- */
.flip-thumbs{
	position:absolute; inset:0; z-index:9;
	background:rgba(16,16,18,.97);
	display:flex; flex-direction:column;
	color:#fff;
}
.flip-thumbs[hidden]{display:none;}
.flip-thumbs-head{
	display:flex; align-items:center; justify-content:space-between;
	padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.14);
	font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.flip-thumbs-grid{
	flex:1 1 auto; overflow-y:auto;
	display:grid; grid-template-columns:repeat(auto-fill, minmax(86px, 1fr));
	gap:12px; padding:14px;
}
.flip-thumb{
	background:none; border:none; padding:0; cursor:pointer;
	display:flex; flex-direction:column; align-items:center; gap:5px;
	color:rgba(255,255,255,.75); font-size:11px; font-variant-numeric:tabular-nums;
}
.flip-thumb-shell{
	display:block; width:100%;
	aspect-ratio:var(--essues-page-ratio, 0.7727);
	background:rgba(255,255,255,.1);
	border:1px solid rgba(255,255,255,.18); border-radius:3px;
	overflow:hidden;
}
.flip-thumb-shell img{width:100%; height:100%; object-fit:cover; display:block;}
.flip-thumb.is-current .flip-thumb-shell{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold);}
.flip-thumb:hover{color:#fff;}
.flip-thumb:focus-visible{outline:2px solid #fff; outline-offset:3px;}

@media (max-width: 620px){
	.flip-bar{padding:6px 8px; gap:4px 8px;}
	/* Tools stay reachable on a phone: they are why full screen exists. */
	.flip-bar-tools{order:3; margin-inline-start:auto;}
	.flip-bar-zoom .flip-zoom-slider{display:none;}
	.flip-btn{min-width:30px; height:30px; padding:0 5px;}
	.flip-nav{bottom:48px; width:18%;}
}

.flip-stage-embed object{width:100%; height:100%;}
.flip-stage-empty{
	align-items:center; justify-content:center;
	background:var(--cream-deep); color:var(--stone);
	aspect-ratio:4/2;
}
.flip-stage-empty p{margin:0; font-size:14px;}

.flip-indicator{text-align:center; margin-top:14px; font-size:12px; color:var(--stone); letter-spacing:0.06em;}
.flip-hint{text-align:center; margin-top:4px; font-size:11.5px; color:var(--stone); opacity:0.8;}
.reader-actions{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
	gap:12px; margin-top:20px;
}
.reader-action{
	display:inline-flex; align-items:center; gap:8px;
	height:40px; padding:0 18px;
	border:1px solid var(--hairline); border-radius:8px;
	background:var(--paper); color:var(--ink-soft);
	font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.reader-action:hover{background:var(--cream-deep); border-color:var(--gold); color:var(--gold-deep);}
.reader-action svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

.share-wrap-button .share-btn{width:auto; height:40px; padding:0 18px; gap:8px;}
.share-btn-labelled .share-btn-label{
	font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.share-wrap-button .share-menu{inset-inline-start:0; inset-inline-end:auto;}

.article-tile{position:relative; display:flex; flex-direction:column;}
.article-jump{display:block; text-align:start; color:inherit;}
.article-share{position:absolute; top:8px; inset-inline-end:8px; z-index:3;}
.article-share .share-btn{background:rgba(255,255,255,.94); box-shadow:0 4px 12px -6px rgba(28,26,23,.5);}
:root[data-theme="dark"] .article-share .share-btn{background:rgba(33,29,25,.94);}

.flip-alt{text-align:center; margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:4px;}
.flip-alt-link{
	display:inline-flex; align-items:center; gap:8px;
	font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
	color:var(--gold-deep);
	border-bottom:1px solid transparent;
}
.flip-alt-link:hover{border-color:var(--gold-deep);}
.flip-alt-link svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.flip-alt-note{font-size:11px; color:var(--stone);}

/* ---------- below-viewer row ---------- */
.issue-nav-row{
	max-width:1000px; margin:34px auto 0;
	padding:0 var(--gutter);
	display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.nav-side{display:flex; align-items:center; gap:12px;}
.nav-side.next{justify-content:flex-end;}
.nav-thumb{
	width:46px; aspect-ratio:5/6.25;
	border-radius:5px; overflow:hidden;
	border:1px solid var(--hairline);
	box-shadow:0 8px 16px -10px rgba(28,26,23,0.4);
	flex:0 0 auto; display:block;
}
.nav-thumb img{width:100%; height:100%; object-fit:cover;}
.nav-text{display:flex; flex-direction:column; gap:2px;}
.nav-side.next .nav-text{align-items:flex-end;}
.nav-label{font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone);}
.nav-month{font-size:13.5px; font-weight:700; color:var(--ink);}
.nav-side.disabled{opacity:0.45; pointer-events:none;}
.nav-side:hover .nav-month{color:var(--gold-deep);}

.view-count{text-align:center;}
.view-count .num{font-family:var(--font-display); font-size:22px; font-weight:600; display:block;}
.view-count .lbl{font-size:10.5px; color:var(--stone); letter-spacing:0.1em; text-transform:uppercase;}

/* ---------- featured articles ---------- */
body.essues .featured-articles{max-width:1200px; margin:60px auto 0; padding:0 var(--gutter);}
.featured-articles-head{margin-bottom:24px;}
.featured-articles-head h2{font-size:clamp(20px,2.8vw,26px); margin-bottom:6px;}
.featured-articles-head p{font-size:13px; color:var(--stone); margin:0;}
.featured-articles-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.article-tile{display:block; text-align:start; background:none; border:none; padding:0; cursor:pointer; font-family:var(--font-body); width:100%;}
.article-spread{
	display:flex; aspect-ratio:16/11; border-radius:9px; overflow:hidden;
	border:1px solid var(--hairline); box-shadow:0 12px 22px -14px rgba(28,26,23,0.4);
	background:var(--paper);
	transition:transform .25s ease, box-shadow .25s ease;
}
.article-tile:hover .article-spread{transform:translateY(-3px); box-shadow:0 16px 28px -14px rgba(28,26,23,0.45);}
.article-spread.has-pages{aspect-ratio:calc(var(--essues-page-ratio, 0.7727) * 2); padding:0; background:var(--ink);}
.article-spread.has-pages .half{padding:0; display:block; background:var(--paper); overflow:hidden;}
.article-spread.has-pages .half img{width:100%; height:100%; object-fit:contain; display:block; background:var(--paper);}
.article-spread .half{width:50%; height:100%; padding:12px 10px; position:relative; display:block;}
.article-spread .half + .half{border-inline-start:1px solid var(--hairline);}
.article-spread .mbar{height:5px; background:var(--hairline); border-radius:3px; margin-bottom:6px; display:block;}
.article-spread .mbar.w60{width:60%;} .article-spread .mbar.w80{width:80%;} .article-spread .mbar.w95{width:95%;}
.article-spread .mblock{background:var(--cream-deep); border-radius:5px; width:100%; height:70%; display:block;}
.article-title{margin-top:10px; font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.3; display:block;}
.article-pagenum{font-size:10.5px; color:var(--stone); margin-top:2px; display:block;}

/* ---------- through the years ---------- */
body.essues .years-section{max-width:1200px; margin:70px auto 90px; padding:0 var(--gutter);}
.years-head{margin-bottom:26px;}
.years-head h2{font-size:clamp(22px,3vw,28px); margin-bottom:6px;}
.years-head p{font-size:13.5px; color:var(--stone); margin:0;}
.years-grid{display:grid; grid-template-columns:repeat(8, 1fr); gap:16px;}
.year-card{display:flex; flex-direction:column; gap:8px;}
.year-cover{
	aspect-ratio:5/6.25; border-radius:8px; overflow:hidden;
	background:linear-gradient(150deg, var(--ink) 0%, #2c2822 100%);
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	position:relative; border:1px solid var(--hairline);
}
.year-cover img{width:100%; height:100%; object-fit:cover;}
.year-cover .yr{font-family:var(--font-display); font-style:italic; color:var(--gold-pale); font-size:15px;}
.year-cover .mo{color:#fff; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-top:4px; opacity:0.8;}
.year-label{text-align:center; font-size:11.5px; font-weight:700; color:var(--ink);}

/* ---------- info pages ---------- */
body.essues .info-hero-img{width:100%; display:block; height:clamp(220px,32vw,420px); object-fit:cover;}
.info-wrap{max-width:820px; margin-inline:auto; padding:54px var(--gutter) 100px;}
.info-wrap .crumb{display:block; margin-bottom:22px;}
.info-wrap h1{font-size:clamp(28px,4vw,42px); margin-bottom:20px;}
.info-wrap p{font-size:15.5px; line-height:1.8; color:var(--ink-soft); margin:0 0 18px;}
.info-wrap p.lead,
.info-wrap > p:first-of-type{font-size:17px; color:var(--ink);}
.info-wrap ul,
.info-wrap ol{font-size:15.5px; line-height:1.8; color:var(--ink-soft); padding-inline-start:22px;}
.info-wrap h2{font-size:clamp(20px,2.6vw,26px); margin:34px 0 12px;}
.info-wrap h3{font-size:18px; margin:26px 0 10px;}
.info-wrap a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px;}
.info-email-cta{
	margin-top:6px; display:inline-flex; align-items:center; gap:8px;
	background:var(--gold); color:#1c1a17;
	font-weight:800; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
	padding:14px 26px; border-radius:8px; text-decoration:none;
	transition:background .2s ease, color .2s ease;
}
.info-email-cta:hover{background:var(--gold-deep); color:#fff; text-decoration:none;}

/* ---------- contact form ---------- */
.contact-form{margin-top:34px; display:grid; gap:18px;}
.contact-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.contact-form label{
	font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
	color:var(--stone); margin-bottom:7px; display:block;
}
.contact-form input,
.contact-form textarea{
	width:100%; padding:13px 14px;
	border:1px solid var(--hairline); border-radius:8px;
	font-family:var(--font-body); font-size:14px;
	color:var(--ink); background:var(--paper);
}
.contact-form textarea{min-height:150px; resize:vertical;}
.contact-form input:focus,
.contact-form textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(193,144,79,0.18);}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"]{border-color:#b3261e;}
.contact-form button{
	justify-self:start;
	background:var(--gold); color:#1c1a17; border:none;
	font-weight:800; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
	padding:15px 32px; border-radius:8px; cursor:pointer;
	transition:background .2s ease, color .2s ease;
}
.contact-form button:hover{background:var(--gold-deep); color:#fff;}
.contact-form button[disabled]{opacity:.6; cursor:progress;}
.form-note{font-size:12px; color:var(--stone); margin-top:12px;}
.field-error{display:block; margin-top:6px; font-size:12px; color:#b3261e; font-weight:600;}

.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form-status{
	margin-top:26px; padding:14px 16px;
	border-radius:8px; font-size:14px;
	border:1px solid var(--hairline); background:var(--paper);
}
.form-status.is-ok{border-color:#2f7d5b; background:rgba(47,125,91,.08); color:#1d5c41;}
.form-status.is-error{border-color:#b3261e; background:rgba(179,38,30,.07); color:#8c1d18;}
:root[data-theme="dark"] .form-status.is-ok{color:#7fd0ab;}
:root[data-theme="dark"] .form-status.is-error{color:#f2a49f;}

.essues-search{display:flex; gap:10px; margin-top:18px; max-width:480px;}
.essues-search input{
	flex:1 1 auto; padding:12px 14px;
	border:1px solid var(--hairline); border-radius:8px;
	background:var(--paper); color:var(--ink); font-family:var(--font-body);
}
.essues-search button{
	background:var(--gold); border:none; border-radius:8px;
	padding:0 20px; font-weight:800; font-size:12px;
	letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; color:#1c1a17;
}

/* ---------- footer ---------- */
body.essues footer{
	background:linear-gradient(160deg, var(--gold) 0%, var(--gold-deep) 100%);
	padding:56px var(--gutter) 34px;
	color:#fff;
}
.footer-grid{max-width:1200px; margin-inline:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;}
.footer-nav{display:flex; flex-direction:column; gap:14px; font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;}
.footer-nav a{opacity:0.92; transition:opacity .2s ease;}
.footer-nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px;}
.footer-logo{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
.footer-logo img{height:40px; width:auto; margin-inline:auto;}
.footer-logo-invert{filter:brightness(0) invert(1);}
.footer-tagline{font-family:var(--font-display); font-style:italic; font-size:13px; color:rgba(255,255,255,0.9);}
.footer-social{display:flex; gap:12px; justify-self:end;}
.footer-social a{
	width:34px; height:34px; border-radius:50%;
	border:1px solid rgba(255,255,255,0.4);
	display:flex; align-items:center; justify-content:center;
	color:#fff; transition:background .2s ease, border-color .2s ease;
}
.footer-social a:hover{background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.7);}
.footer-social svg{width:16px; height:16px;}
.footer-rule{height:1px; background:rgba(255,255,255,0.35); margin:34px 0 20px;}
.footer-copy{text-align:center; font-size:12.5px; letter-spacing:0.04em; color:rgba(255,255,255,0.85); margin:0;}
.footer-copy a{text-decoration:underline; text-underline-offset:3px;}
.footer-sep{margin:0 8px;}

/* ---------- responsive ---------- */
@media (max-width:1200px){
	.items-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:1100px){
	.issues-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:980px){
	.pub-grid,
	.cat-grid,
	.feat-list{grid-template-columns:repeat(2,1fr);}
	.featured-articles-grid{grid-template-columns:repeat(2,1fr);}
	.years-grid{grid-template-columns:repeat(4,1fr); gap:14px 12px;}
}
@media (max-width:780px){
	.items-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
	.topbar{grid-template-columns:1fr; justify-items:center;}
	.topbar-brand{grid-column:1;}
	.topbar-tools{grid-column:1; justify-self:center;}
	.menu-dropdown{inset-inline-end:auto; inset-inline-start:50%; transform:translateX(-50%);}
	[dir="rtl"] .menu-dropdown{transform:translateX(50%);}
	.issues-grid{grid-template-columns:repeat(2,1fr);}
	.years-grid{grid-template-columns:repeat(2,1fr);}
	.footer-grid{grid-template-columns:1fr; text-align:center;}
	.footer-nav{align-items:center;}
	.footer-social{justify-self:center; margin-top:6px;}
	.issue-nav-row{grid-template-columns:1fr; text-align:center; gap:20px;}
	.nav-side,
	.nav-side.next{justify-content:center;}
	.nav-side.next .nav-text{align-items:center;}
	.reader-head{flex-direction:column; align-items:flex-start; gap:6px;}
	.flip-nav{opacity:1;}
}
@media (max-width:600px){
	.pub-grid,
	.cat-grid,
	.feat-list{grid-template-columns:1fr;}
	.contact-form .row2{grid-template-columns:1fr;}
}
@media (max-width:480px){
	.featured-articles-grid{grid-template-columns:1fr;}
}
@media (max-width:460px){
	.items-grid{grid-template-columns:1fr;}
}