/**
 * Author archive page (author.php + template-parts/author-details.php).
 *
 * Layout-only styles for the pieces that don't already have a home: the split
 * hero (photo + name + role + socials + bio) and the "More publications" grid.
 * The details accordions use the `.dm-faq` design lifted from the cocktail
 * detail page (see the bottom of this file), and the post cards reuse
 * `.dm-jgrid__card` from journal-grid.css, which is enqueued alongside this
 * file. Colours mirror assets/css/tailwind.css.
 */

/* ============================ HERO ============================ */
.dm-author-hero {
	background-color: var(--dm-bg-default-primary);
	padding-top: 1.5rem;
	padding-bottom: 3rem;
}

.dm-author-hero__crumb {
	margin-bottom: 0.45rem;
}

.dm-author-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	align-items: stretch;
}

.dm-author-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--color-beige-light, var(--color-sand));
}

.dm-author-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* heading-mobile/h1-M -> heading/h1 at >=768px. */
.dm-author-hero__name {
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	color: var(--dm-fg-default-primary);
	font-weight: 400;
	margin: 0.8rem 0 0.95rem;
}

.dm-author-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.45rem;
}

/* heading-mobile/h6-M -> heading/h6 at >=768px. */
.dm-author-hero__role {
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	color: var(--dm-fg-default-primary);
	font-weight: 400;
	font-size: 18px;
	line-height: 120%;
}

.dm-author-social {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* White disc, forest glyph — the same treatment as the blog post share bar
   (.dm-post-bar__social). Icons carry fill="currentColor", so `color` drives
   the glyph. */
.dm-author-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--dm-bg-default-white);
	color: var(--color-forest, var(--dm-fg-default-primary));
	line-height: 1;
	text-decoration: none;
}

.dm-author-social__link svg {
	display: block;
	width: 15px;
	height: auto;
	fill: currentColor;
}

/* body/lg/regular (same on mobile and desktop). */
.dm-author-hero__bio {
	color: var(--dm-fg-default-primary);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
}

.dm-author-hero__bio p {
	margin: 0 0 1rem;
}

.dm-author-hero__bio p:last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.dm-author-hero {
		padding-top: 2rem;
		padding-bottom: 4.5rem;
	}
	.dm-author-hero__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		gap: 2rem;
	}
	/* Right column fills the photo's height: title + role/socials pinned to the
	   top, bio pinned to the bottom, a flexible gap between, and balanced
	   top/bottom padding on the column. */
	.dm-author-hero__text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* space-between only spreads spare height; once the bio is taller than
		   the photo there is none, and the role/socials row ended flush on the
		   bio. The gap holds a floor between the two groups either way. */
		gap: 32px;
		height: 100%;
		padding-block: 2rem;
	}
	.dm-author-hero__meta {
		margin-bottom: 0;
	}
	.dm-author-hero__name {
		font-size: 60px;
		line-height: 110%;
		letter-spacing: -1.2px;
	}
	.dm-author-hero__role {
		font-size: 20px;
		line-height: 120%;
	}
}

/* ================== LONG-FORM CONTENT ================== */
/* "Author Page Content" field: free rich text under the hero (H2/H3 sections,
   the "at a glance" table, links). An 800px reading column like the details
   accordions below; the table keeps the live site's two-column layout (tinted
   label column, white value column, stacked cards on phones) in forest. */
.dm-author-content {
	background-color: var(--dm-bg-default-primary);
	padding-bottom: 3rem;
}

.dm-author-content__body {
	max-width: 800px;
	margin-inline: auto;
	color: var(--dm-fg-default-primary);
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 140%;
}

.dm-author-content__body > * {
	margin-block: 0;
}

.dm-author-content__body p,
.dm-author-content__body ul,
.dm-author-content__body ol,
.dm-author-content__body table {
	margin-top: 1rem;
}

.dm-author-content__body > :first-child {
	margin-top: 0;
}

.dm-author-content__body h2,
.dm-author-content__body h3,
.dm-author-content__body h4 {
	margin-top: 2.5rem;
	color: var(--dm-fg-default-primary);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	line-height: 1.15;
}

.dm-author-content__body h3,
.dm-author-content__body h4 {
	margin-top: 2rem;
}

.dm-author-content__body h2 {
	font-size: 26px;
}

.dm-author-content__body h3 {
	font-size: 21px;
}

.dm-author-content__body h4 {
	font-size: 19px;
}

.dm-author-content__body > h2:first-child,
.dm-author-content__body > h3:first-child {
	margin-top: 0;
}

.dm-author-content__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity 0.18s ease;
}

.dm-author-content__body a:hover,
.dm-author-content__body a:focus-visible {
	opacity: 0.7;
}

.dm-author-content__body strong,
.dm-author-content__body b {
	font-weight: 700;
}

/* Tailwind's preflight removes list markers site-wide; put them back here. */
.dm-author-content__body ul {
	list-style: disc;
	padding-left: 1.25rem;
}

.dm-author-content__body ol {
	list-style: decimal;
	padding-left: 1.25rem;
}

.dm-author-content__body li + li {
	margin-top: 0.4rem;
}

.dm-author-content__body table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid color-mix(in srgb, var(--color-forest) 30%, transparent);
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
}

.dm-author-content__body th,
.dm-author-content__body td {
	padding: 1rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--color-forest) 18%, transparent);
	text-align: left;
	vertical-align: top;
}

.dm-author-content__body th:first-child,
.dm-author-content__body td:first-child {
	width: 32%;
	color: var(--dm-fg-default-primary);
	font-weight: 700;
	text-align: right;
	background-color: color-mix(in srgb, var(--color-forest) 7%, transparent);
}

.dm-author-content__body th:last-child,
.dm-author-content__body td:last-child {
	color: color-mix(in srgb, var(--dm-fg-default-primary) 85%, transparent);
	font-weight: 400;
	background-color: var(--dm-bg-default-white);
}

.dm-author-content__body tr:nth-child(even) td:last-child {
	background-color: color-mix(in srgb, var(--color-forest) 3%, var(--dm-bg-default-white));
}

/* Phones: each row becomes a small card, label above value. */
@media (max-width: 600px) {
	.dm-author-content__body table,
	.dm-author-content__body tbody,
	.dm-author-content__body tr,
	.dm-author-content__body th,
	.dm-author-content__body td {
		display: block;
		width: auto;
	}

	.dm-author-content__body table {
		border: none;
	}

	.dm-author-content__body tr {
		padding: 0.85rem 1rem;
		border: 1px solid color-mix(in srgb, var(--color-forest) 25%, transparent);
		background-color: color-mix(in srgb, var(--color-forest) 4%, transparent);
	}

	.dm-author-content__body tr + tr {
		margin-top: 0.75rem;
	}

	.dm-author-content__body th,
	.dm-author-content__body td,
	.dm-author-content__body th:first-child,
	.dm-author-content__body td:first-child,
	.dm-author-content__body th:last-child,
	.dm-author-content__body td:last-child,
	.dm-author-content__body tr:nth-child(even) td:last-child {
		width: auto;
		padding: 0;
		border: none;
		text-align: left;
		background-color: transparent;
	}

	.dm-author-content__body td:first-child {
		padding-bottom: 0.35rem;
	}
}

@media (min-width: 768px) {
	.dm-author-content {
		padding-bottom: 4.5rem;
	}

	.dm-author-content__body {
		font-size: 18px;                /* body/lg/regular */
	}

	.dm-author-content__body p,
	.dm-author-content__body ul,
	.dm-author-content__body ol {
		margin-top: 16px;
	}

	.dm-author-content__body h2,
	.dm-author-content__body h3,
	.dm-author-content__body h4 {
		line-height: 1.2;
	}

	.dm-author-content__body h2 {
		margin-top: 48px;
		font-size: 32px;                /* heading/h4 */
	}

	.dm-author-content__body h3 {
		margin-top: 32px;
		font-size: 24px;                /* heading/h5 */
	}

	.dm-author-content__body h4 {
		font-size: 20px;                /* heading/h6 */
	}
}

/* ================== MORE PUBLICATIONS ================== */
.dm-author-more {
	background-color: var(--dm-bg-default-secondary);
	padding-top: 4rem;
	padding-bottom: 3.5rem;
}

/* heading/h2 — IM Fell Double Pica 52 / 110% / -1.04px, centred, upright with
   only the emphasised word italic (same treatment as the cocktail FAQ title).
   Mobile drops to the heading-mobile/h2 step, matching .dm-faq__title. */
.dm-author-more__title {
	margin: 0 0 2rem;
	text-align: center;
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-weight: 400;
	font-style: normal;
	font-size: 36px;
	line-height: 1.1; /* 110% */
	letter-spacing: -0.72px;
	color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
}

.dm-author-more__title em {
	font-style: italic;
}

/* Phones: the heading sits left-aligned and flush against the slider. */
@media (max-width: 639px) {
	.dm-author-more__title {
		margin: 0 0 0;
		text-align: left;
	}
}

@media (min-width: 900px) {
	.dm-author-more__title {
		margin-bottom: 3rem;
		font-size: 52px;
		letter-spacing: -1.04px;
	}
}

.dm-author-more__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.dm-author-more__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* The grid also carries .dm-jgrid, whose padding-block adds up to 4rem above
	   the cards on top of this section's own padding. Drop the top half here
	   only — the blog listing's own .dm-jgrid keeps it. Needs both classes:
	   journal-grid.css is enqueued after this file, so a single-class selector
	   would lose the tie. */
	.dm-author-more__grid.dm-jgrid {
		padding-top: 0;
	}
}

@media (min-width: 1024px) {
	.dm-author-more {
		padding-top: 7rem;
		padding-bottom: 5rem;
	}
	.dm-author-more__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

/* =====================================================================
   ".dm-faq" — copied from the cocktail detail page (assets/css/cocktail-pdp.css)
   so the author accordions stay visually identical to the cocktail FAQ. Used on
   this page by the details accordions in template-parts/author-details.php
   (.dm-faq--details, below); single-open via assets/js/faq-accordion.js. The
   `__title` rules are unused here — the details section renders no heading —
   but are kept so this stays a faithful copy of the source design.
   ===================================================================== */
.dm-faq {
	background: var(--dm-bg-default-primary);
	padding: 24px 0 40px;
	overflow-x: clip; /* contains the full-bleed divider lines below */
}

/* Italic author name + upright FAQ, display serif — heading/h2.
   Capped at 800px to align with the content list; the divider lines and section
   background still span full width. */
.dm-faq__title {
	max-width: 800px;
	margin: 0 auto 36px;
	text-align: center;
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1; /* 110% */
	letter-spacing: -1.04px;
	color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
}

.dm-faq__title em {
	font-style: italic;
}

.dm-faq__list {
	max-width: 800px;
	margin: 0 auto;
}

/* Full-bleed divider lines: the list content stays at 800px, but the rules
   span the full viewport width (edge to edge). */
.dm-faq__item {
	position: relative;
}

.dm-faq__item::before,
.dm-faq__item:last-child::after {
	content: "";
	position: absolute;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 1px;
	background: color-mix(in srgb, var(--color-forest) 15%, transparent);
	pointer-events: none;
}

.dm-faq__item::before {
	top: 0;
}

.dm-faq__item:last-child::after {
	bottom: 0;
}

.dm-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 22px;
	cursor: pointer;
}

/* heading/h5 — display serif, 24 / 120% */
.dm-faq__question span {
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2; /* 120% -> 28.8px */
	color: var(--Semantics-fg-default-primary, var(--dm-bg-default-tertiary));
}

.dm-faq__chevron {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
	transition: transform 0.25s ease;
}

.dm-faq__toggle:checked ~ .dm-faq__question .dm-faq__chevron {
	transform: rotate(180deg);
}

.dm-faq__toggle:focus-visible ~ .dm-faq__question {
	outline: 2px solid var(--color-forest, var(--dm-border-default-dark-strong));
	outline-offset: -2px;
}

/* Grid-rows collapse trick: animates open/close without JS */
.dm-faq__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.dm-faq__toggle:checked ~ .dm-faq__answer-wrap {
	grid-template-rows: 1fr;
}

/* body/lg/regular — Roboto Condensed, 18 / 140% */
.dm-faq__answer {
	overflow: hidden;
	padding: 0 22px;
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4; /* 140% -> 25.2px */
	color: var(--Semantics-fg-default-primary, var(--dm-bg-default-tertiary));
	max-width: 72ch;
}

.dm-faq__toggle:checked ~ .dm-faq__answer-wrap .dm-faq__answer {
	padding-bottom: 22px;
}

/* ---- Mobile typography (Figma heading-mobile specs) --------------------- */
@media (max-width: 899px) {
	.dm-faq__title {
		font-size: 36px;
		letter-spacing: -0.72px;
	}
	.dm-faq__question span {
		font-size: 22px;
	}
	.dm-faq__answer {
		font-size: 16px;
	}
	.dm-faq__chevron {
		width: 22px;
		height: 22px;
	}
	.dm-faq__question,
	.dm-faq__answer {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 900px) {
	.dm-faq {
		padding: 32px 0 56px;
	}
	.dm-faq__title {
		font-size: 52px;
		margin-bottom: 48px;
	}
	.dm-faq__question {
		padding: 24px 28px;
	}
	.dm-faq__answer {
		padding: 0 28px;
	}
	.dm-faq__toggle:checked ~ .dm-faq__answer-wrap .dm-faq__answer {
		padding-bottom: 26px;
	}
}

/* ---- "About the author" details accordions (.dm-faq--details) -----------
   Professional Experience / Education / Publications & Mentions, rendered by
   template-parts/author-details.php. Same design as the FAQ above — divider
   lines, serif question, chevron, animated answer — with two differences: the
   section carries no title. The rows inherit the FAQ's 800px cap, so the label
   and the answer are both at most 800px wide and centred, with the divider
   lines still running full-bleed. The answer drops the FAQ's tighter 72ch
   measure so rich text fills the same 800px as the label above it.

   Type is a step up from the cocktail FAQ's, per the Figma for this page: the
   row label is heading/h4 (32 / 120%) rather than heading/h5, and the body is
   body/md/regular (16 / 140%) rather than body/lg. */
.dm-faq--details .dm-faq__question span {
	font-size: 26px;
	line-height: 1.2; /* 120% */
}

.dm-faq--details .dm-faq__answer {
	max-width: none;
	font-size: 16px;
	line-height: 1.4; /* 140% -> 22.4px */
}

@media (min-width: 900px) {
	.dm-faq--details .dm-faq__question span {
		font-size: 32px; /* 120% -> 38.4px */
	}
}

/* Rich-text markup inside a details answer (the WYSIWYG fields and the
   publications list). */
.dm-faq--details .dm-faq__answer ul {
	list-style: disc;
	margin: 0;
	padding-left: 1.25rem;
}

.dm-faq--details .dm-faq__answer ol {
	list-style: decimal;
	margin: 0;
	padding-left: 1.25rem;
}

.dm-faq--details .dm-faq__answer li {
	margin-bottom: 0.5rem;
}

.dm-faq--details .dm-faq__answer li:last-child {
	margin-bottom: 0;
}

.dm-faq--details .dm-faq__answer p {
	margin: 0 0 0.75rem;
}

.dm-faq--details .dm-faq__answer p:last-child {
	margin-bottom: 0;
}

.dm-faq--details .dm-faq__answer a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dm-faq--details .dm-faq__answer a:hover,
.dm-faq--details .dm-faq__answer a:focus-visible {
	opacity: 0.75;
}


/* =====================================================================
   ".dm-simcock" — copied verbatim from the cocktail detail page
   (assets/css/cocktail-pdp.css, the "Similar cocktails" section) so the
   author page's "More cocktails by …" carousel is the same design. Rendered
   by template-parts/author-details.php; arrows + progress thumb are driven by
   the shared assets/js/pdp-carousel.js via the [data-dm-carousel] hooks.
   ===================================================================== */
.dm-simcock {
	background: var(--dm-bg-default-primary);
	padding: 24px 0 72px;
}

.dm-simcock__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.dm-simcock__rail {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
}

/* heading/h2 — IM Fell Double Pica, 52 / 110% */
.dm-simcock__title {
	margin: 0 0 14px;
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1; /* 110% */
	letter-spacing: -1.04px;
	color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
}

.dm-simcock__subtitle {
	margin: 0 0 24px;
	font-family: var(--font-default, sans-serif);
	font-size: 16px;
	font-weight: 300;
	color: var(--dm-fg-default-primary);
	max-width: 34ch;
}

.dm-simcock__browse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border-radius: 999px;
	background: var(--color-forest, var(--dm-bg-default-tertiary));
	color: var(--dm-bg-default-primary);
	font-family: var(--font-default, sans-serif);
	font-size: 15px;
	text-decoration: none;
}

/* Progress line + round arrows */
.dm-simcock__controls {
	display: flex;
	align-items: center;
	gap: 24px;
}

.dm-simcock__progress {
	position: relative;
	flex: 1;
	max-width: 380px;
	height: 2px;
	background: color-mix(in srgb, var(--color-forest) 20%, transparent);
	overflow: hidden;
}

.dm-simcock__progress-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 25%;
	background: var(--color-forest, var(--dm-bg-default-tertiary));
}

.dm-simcock__arrows {
	display: flex;
	gap: 14px;
}

.dm-simcock__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--dm-border-default-dark-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--dm-fg-default-primary);
	cursor: pointer;
}

.dm-simcock__arrow svg {
	width: 20px;
	height: 20px;
}

/* Card track: native scroll-snap row */
.dm-simcock__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.dm-simcock__track::-webkit-scrollbar {
	display: none;
}

.dm-simcock__card {
	flex: 0 0 78%;
	scroll-snap-align: start;
}

.dm-simcock__media {
	display: block;
	aspect-ratio: 1 / 1.24;
	overflow: hidden;
}

.dm-simcock__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Italic display serif name, like the mock */
.dm-simcock__name {
	margin: 18px 0 8px;
	font-family: var(--font-display, serif);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	color: var(--dm-fg-default-primary);
}

.dm-simcock__name a {
	color: inherit;
	text-decoration: none;
}

.dm-simcock__name a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.dm-simcock__desc {
	margin: 0;
	font-family: var(--font-default, sans-serif);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.45;
	color: var(--dm-fg-default-primary);
}

/* Mobile: drop the arrows/progress below the cards. Flattening the rail lets
	 its children reorder as direct items of the stacked layout grid. */
@media (max-width: 899px) {
	.dm-simcock__rail {
		display: contents;
	}

	.dm-simcock__rail-top {
		order: 1;
	}

	/* Stacked, the title sits straight above the cards — the rail's own gap
	   provides the spacing, so the heading's bottom margin is dropped. */
	.dm-simcock__title {
		margin-bottom: 0;
	}

	.dm-simcock__track {
		order: 2;
		/* Full bleed on both sides, with the 16px gutter moved inside the
		   track. Bleeding only the right edge left the track's left edge on
		   the page gutter, so cards scrolling off the left were cut on a hard
		   line 16px in, and with no room after the last card it ended flush
		   on the screen edge. Now the first card still rests on the gutter
		   (scroll-padding), cards slide out to the screen edge, and the last
		   one stops 16px short of it. */
		margin-inline: -1rem;
		padding-inline: 1rem;
		scroll-padding-inline: 1rem;
	}

	.dm-simcock__controls {
		order: 3;
	}

	.dm-simcock__media {
		border-radius: 10px;
	}
}

@media (min-width: 900px) {
	.dm-simcock {
		padding: 62px 0 96px;
		overflow-x: hidden;
	}

	/* Track bleeds to the right viewport edge; the rail stays on the
		 container's left edge. 50% resolves against the container width, so
		 (50% - 50vw) is exactly the negative right gutter. */
	.dm-simcock__layout {
		grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
		gap: 56px;
		align-items: stretch;
		margin-right: calc(50% - 50vw);
	}

	.dm-simcock__title {
		font-size: 52px;
	}

	.dm-simcock__card {
		flex-basis: clamp(320px, 31%, 480px);
	}
}

/* =====================================================================

/* ---- "More publications" mobile slider ---------------------------------
   Below 640px the three cards stop stacking and become a scroll-snap row with
   the cocktails rail's controls (hence the shared .dm-simcock__controls
   classes). From 640px up the grid returns and the controls hide again — this
   rule must stay after the .dm-simcock block, which sets them to flex. */
.dm-author-more__controls {
	display: none;
}

@media (max-width: 639px) {
	.dm-author-more__grid {
		display: flex;
		gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/* Full bleed with the gutter inside, as the cocktails rail above:
		   cards slide out to both screen edges, the first rests on the gutter
		   and the last stops 16px short of the edge. */
		margin-inline: -1rem;
		padding-inline: 1rem;
		scroll-padding-inline: 1rem;
	}

	.dm-author-more__grid::-webkit-scrollbar {
		display: none;
	}

	.dm-author-more__grid > * {
		flex: 0 0 88%;
		scroll-snap-align: start;
	}

	.dm-author-more__controls {
		display: flex;
		margin-top: 0;
	}
}

/* ---- Small desktop (1024-1280) -------------------------------------- *
 * No board for the author page at this size; each section follows the
 * boarded pattern it already copies:
 *   - hero: breadcrumb py-16, then the Village "The family" row (2024:29109)
 *     - photo | text 24 apart, text inset py-40 px-64, 4px corners, py-80
 *   - details accordions: the collection FAQ (2021:19479) - 800 rows with
 *     py-24 headers and no inner gutter, 80 below
 *   - "More cocktails by": the shop carousel (1987:16243) - a 500 rail with
 *     32 inner right padding, 16 to the track, 48px arrows 16 apart, 32 to
 *     the progress line; 320 cards 16 apart, 4px corners
 *   - "More publications by": 52px heading 40 above three ui-article-cards
 *     (859:13125) 32 apart, py-80
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	/* The capped 1080 container already provides Figma's 100px gutter. */
	.dm-author-hero > .mx-auto,
	.dm-author-content > .mx-auto,
	.dm-faq--details > .mx-auto,
	.dm-simcock > .mx-auto,
	.dm-author-more > .mx-auto {
		padding-inline: 0;
	}

	/* ---- Hero ---- */
	.dm-author-hero {
		padding-top: 16px;
		padding-bottom: 80px;
	}

	.dm-author-hero__crumb {
		margin-bottom: 16px;
	}

	/* Breadcrumb as on every board: 8 between items, pipes full strength,
	   current page at 70% (style.css defaults to 0.4 / 0.5). */
	.dm-author-hero__crumb.breadcrumbs.text-forest li + *::before {
		opacity: 1;
		margin: 0 8px;
	}

	.dm-author-hero__crumb.breadcrumbs.text-forest li:last-child {
		opacity: 0.7;
	}

	.dm-author-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px;
	}

	.dm-author-hero__media {
		border-radius: 4px;
	}

	.dm-author-hero__text {
		padding: 40px 64px;
	}

	.dm-author-hero__name {
		margin: 0 0 16px;
	}

	.dm-author-hero__meta {
		gap: 8px 24px;
	}

	.dm-author-social {
		gap: 8px;
	}

	.dm-author-hero__bio p {
		margin-bottom: 16px;
	}

	/* ---- Details accordions ---- */
	.dm-faq--details {
		padding: 0 0 80px;
	}

	.dm-faq--details .dm-faq__question {
		gap: 10px;
		padding: 24px 0;
	}

	.dm-faq--details .dm-faq__answer {
		padding: 0;
	}

	.dm-faq--details .dm-faq__toggle:checked ~ .dm-faq__answer-wrap .dm-faq__answer {
		padding-bottom: 24px;
	}

	/* ---- More cocktails rail ---- */
	.dm-simcock {
		padding: 80px 0;
	}

	.dm-simcock__layout {
		grid-template-columns: 500px minmax(0, 1fr);
		gap: 16px;
	}

	.dm-simcock__rail {
		padding-right: 32px;
	}

	.dm-simcock__title {
		margin-bottom: 0;
		letter-spacing: -0.02em;        /* -1.04px at 52px */
	}

	.dm-simcock__controls {
		gap: 32px;
	}

	.dm-simcock__progress {
		max-width: none;
	}

	.dm-simcock__arrows {
		gap: 16px;
	}

	.dm-simcock__arrow {
		width: 48px;
		height: 48px;
	}

	.dm-simcock__track {
		gap: 16px;
	}

	.dm-simcock__card {
		flex-basis: 320px;
	}

	.dm-simcock__media {
		border-radius: 4px;
	}

	.dm-simcock__name {
		margin: 16px 0 8px;
	}

	.dm-simcock__desc {
		font-size: 16px;                /* body/md/regular */
		font-weight: 400;
		line-height: 1.4;
	}

	/* ---- More publications ---- */
	.dm-author-more {
		padding-block: 80px;
	}

	.dm-author-more__title {
		margin-bottom: 40px;
	}

	/* The grid also carries .dm-jgrid, whose small-desktop py-80 (meant for
	   the journal section) would stack under this section's own padding. */
	.dm-author-more__grid.dm-jgrid {
		padding-block: 0;
	}

	.dm-author-more__grid {
		gap: 32px;
	}
}

/* ---- Edge bleed, every desktop width -------------------------------- *
 * From 900px the card track runs to the screen edge, but with nothing after
 * the last card it stopped there - half under the scrollbar, with the next
 * arrow already disabled - and `mandatory` start-snapping pulled the end back
 * a card, since the last card's start can never reach the left edge.
 * Trailing room equal to the bleed lets the last card scroll in to the
 * container's right edge; `proximity` still snaps mid-track but lets the end
 * rest. Same fix as the shop carousel (shop-mezcales.css).
 *
 * The distance is (screen - container) / 2 + the wrapper's side padding, with
 * the wrapper sized by `lg:container px-4`: full width below 1024, capped at
 * 1080 through 1280 with no padding (author-single.css drops it there), then 1280 and 1536.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 900px) {
	.dm-simcock {
		--dm-simcock-edge: 16px;
	}
}

@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-simcock {
		--dm-simcock-edge: calc((100vw - min(1080px, 100vw - 32px)) / 2);
	}
}

@media (min-width: 1281px) {
	.dm-simcock {
		--dm-simcock-edge: calc((100vw - 1280px) / 2 + 16px);
	}
}

@media (min-width: 1536px) {
	.dm-simcock {
		--dm-simcock-edge: calc((100vw - 1536px) / 2 + 16px);
	}
}

@media (min-width: 900px) {
	.dm-simcock__layout {
		margin-right: calc(-1 * var(--dm-simcock-edge));
	}

	.dm-simcock__track {
		padding-right: var(--dm-simcock-edge);
		scroll-padding-right: var(--dm-simcock-edge);
		scroll-snap-type: x proximity;
	}
}