/*
 * The article page (PRD sections 2–5), from the Lovable design's Tailwind
 * classes and its .article-body rules, written out as plain CSS. Every value
 * comes from tokens.css.
 *
 * Buttons, inputs and lists carry `html body .edct` in front: the theme and
 * the Elementor kit style bare `button`, `a`, `ul` and `input` with selectors
 * that outrank one class (measured on edCircuit, 2026-10-21).
 */

/* ---------- Page and grid ---------- */
.edct-main { display: block; background: var(--edct-article-page); }
/* Soledad's header element is empty on edCircuit (Front-End Lean's top bar
   replaces it) but keeps a 60px bottom margin (header-6, measured 2026-10-23);
   on this page the gap above the breadcrumb is the design's own. */
/* The theme sets it as `#header { margin-bottom: var(--pchd-mg) }`, so this needs the id too. */
html body.edct-page #header, html body.edct-page .penci-header-wrap > header { margin-bottom: 0; }
/* PublishPress prints its author box inside the content; this page shows the
   same PublishPress details in its own author box below the article. */
.edct-body > .pp-multiple-authors-boxes-wrapper { display: none; }
.edct {
	box-sizing: border-box;
	max-width: var(--edct-max);
	margin: 0 auto;
	padding: 24px 16px 48px;
	font-family: var(--edct-font-sans);
	font-feature-settings: "cv11", "ss01", "ss03";
	color: var(--edct-fg);
	-webkit-font-smoothing: antialiased;
}
.edct *, .edct *::before, .edct *::after { box-sizing: border-box; }
@media (min-width: 640px) { .edct { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .edct { padding-left: 32px; padding-right: 32px; } }

.edct-grid { display: grid; gap: var(--edct-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
	.edct-grid:not(.edct-grid--phone) { grid-template-columns: minmax(0, 1fr) var(--edct-rail); }
}

.edct .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; }
.edct a { color: inherit; text-decoration: none; }
.edct :focus-visible { outline: 2px solid var(--edct-button); outline-offset: 2px; border-radius: 4px; }

/* ---------- Icons ---------- */
.edct-i { width: 14px; height: 14px; flex: none; }
.edct-i--12 { width: 12px; height: 12px; }
.edct-i--14 { width: 14px; height: 14px; }
.edct-i--16 { width: 16px; height: 16px; }
.edct-i--accent { color: var(--edct-accent); }

/* ---------- Cards ---------- */
.edct-card { background: var(--edct-card); border: 1px solid var(--edct-border-60); box-shadow: var(--edct-shadow-sm); }

/* ---------- Breadcrumb ---------- */
.edct-crumbs { margin: 24px 0 32px; }
html body .edct .edct-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 0; list-style: none; font-size: var(--edct-text-14); color: var(--edct-muted-fg); }
.edct-crumbs li { margin: 0; display: flex; align-items: center; min-width: 0; }
.edct-crumbs a { color: var(--edct-muted-fg); transition: color .15s; }
.edct-crumbs a:hover { color: var(--edct-orange-text); }
.edct-crumb__sep .edct-i { color: hsl(220 10% 42% / 0.6); }
.edct-crumbs__here { display: inline-block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--edct-fg); vertical-align: bottom; }

/* ---------- The article card ---------- */
.edct-article { border-radius: var(--edct-radius-2xl); padding: 24px 25px; min-width: 0; }
@media (min-width: 640px) { .edct-article { padding: 40px 25px; } }

.edct-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; /* a little space between wrapped rows (owner, 2026-10-23) */ margin-bottom: 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--edct-orange-text); }
.edct-cats a { color: var(--edct-orange-text); }
.edct-cats__dot { color: var(--edct-accent-line); }

html body .edct .edct-title { margin: 0; font-family: var(--edct-font-serif); font-size: var(--edct-text-30); font-weight: 700; line-height: 1.25; letter-spacing: var(--edct-heading-tracking); color: var(--edct-fg); text-transform: none; }
@media (min-width: 640px) { html body .edct .edct-title { font-size: var(--edct-text-36); } }
.edct-subtitle { margin: 12px 0 0; font-size: var(--edct-text-18); line-height: 1.375; color: var(--edct-muted-fg); }

/* Byline */
.edct-byline { margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--edct-border-60); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.edct-byline__who { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--edct-text-14); color: var(--edct-muted-fg); }
.edct-by a, .edct-by > span { font-weight: 500; color: var(--edct-fg); }
.edct-by a:hover { color: var(--edct-orange-text); }
.edct-dot { color: hsl(220 10% 42% / 0.5); }
.edct-co { display: flex; align-items: center; gap: 8px; }
.edct-co__faces { display: flex; }
.edct-co__faces .edct-avatar + .edct-avatar { margin-left: -6px; }
.edct-co__names { font-size: var(--edct-text-12); }
.edct-byline__tools { display: flex; align-items: center; gap: 4px; color: var(--edct-muted-fg); }

/* Photos. Modern Image Converter wraps every <img> in a <picture> element; in
   a flex row that wrapper shrank and the 40px photo was drawn 12px wide
   (measured on article 118902). The wrapper keeps its picture's size. */
.edct picture { flex: none; }
.edct picture > img.edct-avatar, .edct picture > img.edct-mini__pic { max-width: none; }
.edct-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 999px; object-fit: cover; background: var(--edct-muted); color: var(--edct-muted-fg); font-weight: 600; }
.edct-avatar--24 { width: 24px; height: 24px; font-size: 10px; box-shadow: 0 0 0 2px var(--edct-card); }
.edct-avatar--32 { width: 32px; height: 32px; font-size: 12px; }
.edct-avatar--40 { width: 40px; height: 40px; font-size: 14px; }

/* Buttons */
html body .edct .edct-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 32px; margin: 0; padding: 0 8px;
	border: 1px solid var(--edct-border-60); border-radius: var(--edct-radius-md);
	background: #fff; color: var(--edct-muted-fg);
	font: 400 var(--edct-text-12)/1 var(--edct-font-sans); letter-spacing: 0; text-transform: none;
	cursor: pointer; transition: color .15s, border-color .15s; box-shadow: none;
}
html body .edct .edct-btn:hover { color: var(--edct-fg); border-color: var(--edct-border); background: #fff; }
html body .edct .edct-btn[hidden] { display: none; }
html body .edct .edct-btn--wide { height: auto; padding: 8px 12px; gap: 8px; font-size: var(--edct-text-14); font-weight: 500; line-height: 1.4; width: 100%; }
html body .edct .edct-btn--ghost { border-color: transparent; background: transparent; height: 36px; padding: 0 12px; font-size: var(--edct-text-14); font-weight: 500; }
html body .edct .edct-btn--ghost:hover { background: var(--edct-muted); }
html body .edct .edct-btn--primary {
	height: auto; padding: 8px 18px; border: 0; border-radius: var(--edct-radius-md);
	background: var(--edct-button); color: #fff; font-size: 19px; font-weight: 500; line-height: 1.3;
}
html body .edct .edct-btn--primary:hover { background: var(--edct-button-hover); color: #fff; }
html body .edct .edct-btn--primary:disabled { opacity: .6; cursor: default; }


/* edCircuit Bookmarks' own button, dressed as the design's buttons */
.edct-bm { display: inline-flex; }
html body .edct .edct-bm--icon .edc-bm {
	position: static; width: auto; height: 32px; padding: 0 8px; margin: 0;
	border: 1px solid var(--edct-border-60); border-radius: var(--edct-radius-md);
	background: #fff; color: var(--edct-muted-fg); box-shadow: none;
}
html body .edct .edct-bm--icon .edc-bm svg { width: 14px; height: 14px; }
html body .edct .edct-bm--icon .edc-bm:hover { color: var(--edct-fg); }
html body .edct .edct-bm--wide { width: 100%; }
html body .edct .edct-bm--wide .edc-bm {
	position: static; width: 100%; height: auto; gap: 8px; padding: 8px 12px; margin: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--edct-border-60); border-radius: var(--edct-radius-md);
	background: #fff; color: var(--edct-muted-fg); box-shadow: none;
	font: 500 var(--edct-text-14)/1.4 var(--edct-font-sans);
}
html body .edct .edct-bm--wide .edc-bm svg { width: 16px; height: 16px; }
html body .edct .edct-bm--wide .edc-bm::after { content: "Save"; }
html body .edct .edct-bm--wide .edc-bm.is-saved::after { content: "Saved"; }
html body .edct .edct-bm--icon .edc-bm.is-saved svg,
html body .edct .edct-bm--wide .edc-bm.is-saved svg { fill: var(--edct-accent); color: var(--edct-accent); }

/* Listen */
.edct-listen { margin-top: 12px; }
.edct-listen audio { width: 100%; }

/* Hero, excerpt */
.edct .edct-hero { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 24px; border-radius: var(--edct-radius-xl); }
.edct-excerpt { margin: 24px 0 0; font-size: var(--edct-text-16); line-height: 1.625; color: var(--edct-fg-90); }

/* ---------- The article body (ETP-5.3) ---------- */
.edct-body { margin-top: 24px; font-size: var(--edct-text-17); line-height: 1.75; color: var(--edct-fg); overflow-wrap: break-word; }
.edct-body > * + * { margin-top: 1.1em; }
.edct-body p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.edct-body p + p { margin-top: 1.1em; }
/* The podcast's "Listen to …" line, moved under its card (Rules\move_podcast): smaller, grey, close to the card. */
html body .edct .edct-body p.edct-podcast-note { margin-top: 0.5em; font-size: var(--edct-text-14); line-height: 1.5; color: var(--edct-muted-fg); }
html body .edct .edct-body h1, html body .edct .edct-body h2 { font-family: var(--edct-font-serif); font-size: var(--edct-text-24); font-weight: 700; line-height: 1.3; letter-spacing: var(--edct-heading-tracking); margin: 2.25rem 0 .75rem; color: var(--edct-fg); text-transform: none; }
html body .edct .edct-body h3 { font-family: var(--edct-font-serif); font-size: var(--edct-text-20); font-weight: 700; line-height: 1.35; letter-spacing: var(--edct-heading-tracking); margin: 1.75rem 0 .5rem; color: var(--edct-fg); text-transform: none; }
html body .edct .edct-body h4 { font-family: var(--edct-font-sans); font-size: var(--edct-text-17); font-weight: 700; margin: 1.25rem 0 .4rem; color: var(--edct-fg); text-transform: none; }
.edct-body [data-edct-section] { scroll-margin-top: 96px; }
.edct-body strong, .edct-body b { font-weight: 700; color: var(--edct-fg); }
.edct-body em, .edct-body i { font-style: italic; }
html body .edct .edct-body a { color: var(--edct-orange-text); }
html body .edct .edct-body ul, html body .edct .edct-body ol { padding-left: 1.5rem; margin: 1.1em 0; }
html body .edct .edct-body ul { list-style: disc; }
html body .edct .edct-body ol { list-style: decimal; }
html body .edct .edct-body li { margin: .35em 0; }
.edct-body li > p { margin: 0; }
.edct-body blockquote { margin: 1.5em 0; padding: .25rem 0 .25rem 1rem; border-left: 4px solid var(--edct-accent); color: var(--edct-fg-90); font-weight: 500; font-style: normal; background: none; }
.edct-body img, .edct-body figure { display: block; max-width: 100%; height: auto; margin: 1.5em auto; border-radius: 12px; }
.edct-body figure img { margin: 0; border-radius: inherit; }
.edct-body figcaption { margin-top: .5rem; font-size: .8125rem; color: var(--edct-muted-fg); text-align: center; }
.edct-body hr { border: 0; border-top: 1px solid var(--edct-border); margin: 2em 0; }
.edct-body code { background: var(--edct-muted); padding: .1em .35em; border-radius: 4px; font-size: .95em; }
.edct-body pre { background: var(--edct-muted); color: var(--edct-fg); padding: 1rem; border-radius: 12px; overflow-x: auto; font-size: .9rem; line-height: 1.6; }
.edct-body pre code { background: transparent; padding: 0; }
.edct-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95em; }
.edct-body th, .edct-body td { border: 1px solid var(--edct-border); padding: .5rem .75rem; text-align: left; vertical-align: top; }
.edct-body th { background: var(--edct-muted); font-weight: 600; }
.edct-body iframe { max-width: 100%; border: 0; }
.edct-body > iframe, .edct-body p > iframe:only-child { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.edct-body .wp-block-embed__wrapper { position: relative; }
.edct-body .wp-block-pullquote { margin: 2em 0; padding-left: 1.5rem; border-left: 4px solid var(--edct-accent); font-size: var(--edct-text-18); font-style: italic; }

/* ---------- Author box, tags, wide actions ---------- */
.edct-author { display: flex; align-items: flex-start; gap: 16px; margin-top: 40px; padding: 20px; border: 1px solid var(--edct-border-60); border-radius: var(--edct-radius-xl); background: hsl(220 16% 96% / 0.3); }
.edct-author__text { min-width: 0; }
.edct-author__name { font-size: var(--edct-text-14); font-weight: 600; color: var(--edct-fg); }
.edct-author__name a:hover { color: var(--edct-orange-text); }
.edct-author__job, .edct-author__with { margin-top: 2px; font-size: var(--edct-text-12); color: var(--edct-muted-fg); }
.edct-author__with span { color: var(--edct-fg); }
.edct-author__bio { margin: 4px 0 0; font-size: var(--edct-text-12); line-height: 1.625; color: var(--edct-muted-fg); }
.edct-author__bio p { margin: 0 0 .5em; font-size: inherit; line-height: inherit; }
.edct-author__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; font-size: var(--edct-text-12); }
.edct-author__links a { display: inline-flex; align-items: center; gap: 4px; color: var(--edct-muted-fg); }
.edct-author__links a:hover { color: var(--edct-orange-text); }

.edct-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; font-size: var(--edct-text-12); }
.edct-tags > span { font-weight: 500; color: var(--edct-muted-fg); }
html body .edct .edct-tag { display: inline-flex; padding: 2px 10px; border: 1px solid var(--edct-accent-line); border-radius: 999px; background: var(--edct-accent-soft); color: var(--edct-orange-text); text-decoration: none; }
html body .edct .edct-tag:hover { border-color: var(--edct-accent); }

.edct-actions-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.edct-actions-wide .edct-share { display: block; }
.edct-actions-wide .edct-share > summary { width: 100%; }

/* ---------- Ads (ETP-4) ---------- */
.edct-ad { overflow: hidden; border-radius: var(--edct-radius-xl); text-align: center; line-height: 0; }
.edct-ad img { max-width: 100%; height: auto; }
/* Every ad has the page's rounded corners (owner, 2026-10-23): the ad picture
   or frame itself is rounded, so the corners show however Advanced Ads sizes
   it inside the box. */
html body .edct .edct-ad :is(img, iframe, video, picture) { border-radius: var(--edct-radius-xl); }
.edct-ad picture { display: inline-block; overflow: hidden; line-height: 0; }
.edct-ad--top { margin-top: 0; }
.edct-ad--bottom { margin-top: 24px; }
.edct-ad--rect { aspect-ratio: 300 / 250; }
.edct-ad--rect img { width: 100%; height: 100%; object-fit: cover; }
.edct-ad--inline { margin: 1.5em auto; max-width: 300px; }

/* ---------- The rail ---------- */
.edct-rail { display: flex; flex-direction: column; gap: var(--edct-card-gap); min-width: 0; }
.edct-rail__sticky { display: flex; flex-direction: column; gap: var(--edct-card-gap); }
@media (min-width: 1024px) {
	/* The whole rail moves as one (ETP-3.11; owner, 2026-10-23): it holds with
	   Subscribe 80px under the header for the length of the article, and
	   once the article ends the rest of the rail scrolls up into view. */
	.edct-rail { align-self: stretch; }
	.edct-rail__sticky { position: sticky; top: var(--edct-sticky-top); }
	.admin-bar .edct-rail__sticky { top: calc(var(--edct-sticky-top) + 32px); }
}
.edct-rcard { border-radius: var(--edct-radius-xl); padding: 16px; }
html body .edct .edct-rcard__title { margin: 0; font: 600 var(--edct-text-14)/1.4 var(--edct-font-sans); letter-spacing: 0; color: var(--edct-fg); text-transform: none; }
.edct-rcard__row { display: flex; align-items: center; justify-content: space-between; }
.edct-rcard__p { margin: 8px 0 0; font-size: var(--edct-text-12); line-height: 1.625; color: var(--edct-muted-fg); }

html body .edct .edct-subscribe {
	display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 16px; border-radius: var(--edct-radius-xl);
	background: var(--edct-button); color: #fff; box-shadow: var(--edct-shadow-sm);
	font: 500 19px/1.3 var(--edct-font-sans); text-decoration: none; transition: background .15s;
}
html body .edct .edct-subscribe:hover { background: var(--edct-button-hover); color: #fff; }

/* Reading progress: a 3px line under the site's top bar (owner, 2026-10-23).
   The module moves it into the bar's sticky box (--in-bar) so it rides that
   box's lower edge; until then, and with no top bar, it is fixed at 56px.
   The faint grey track shows the line is there before any reading (owner,
   2026-10-23); the orange fill grows over it. */
.edct-topline { position: fixed; left: 0; right: 0; top: 56px; z-index: 50; height: 3px; background: var(--edct-border); pointer-events: none; }
.admin-bar .edct-topline { top: 88px; }
.edct-topline.edct-topline--in-bar { position: absolute; top: 100%; }
.edct-topline__bar { width: 0; height: 100%; background: var(--edct-accent); transition: width .2s; }
@media (prefers-reduced-motion: reduce) { .edct-topline__bar { transition: none; } }

html body .edct .edct-toc { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.edct-toc__item { margin: 0; }
html body .edct .edct-toc a {
	display: flex; gap: 8px; padding: 4px 0 4px 12px;
	border-left: 2px solid transparent; font-size: var(--edct-text-14); line-height: 1.4; color: var(--edct-muted-fg); transition: color .15s, border-color .15s;
}
.edct-toc__item--l1 a { padding-left: 24px !important; font-size: var(--edct-text-12) !important; }
.edct-toc__item--l2 a, .edct-toc__item--l3 a { padding-left: 36px !important; font-size: var(--edct-text-12) !important; }
html body .edct .edct-toc a:hover { color: var(--edct-fg); border-left-color: var(--edct-border); }
html body .edct .edct-toc .is-active a { color: var(--edct-orange-text); border-left-color: var(--edct-accent); font-weight: 500; }
.edct-toc__n { font-variant-numeric: tabular-nums; }
.edct-toc__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

html body .edct .edct-takeaways { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.edct-takeaways li { display: flex; gap: 8px; margin: 0; font-size: var(--edct-text-12); line-height: 1.625; color: var(--edct-fg-90); }
.edct-takeaways .edct-i { margin-top: 2px; }

.edct-eyebrow { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--edct-orange-text); }
.edct-eyebrow--10 { font-size: 10px; letter-spacing: 0.1em; }
.edct-eyebrow--grey { color: var(--edct-muted-fg); }
.edct-sponsor__ad { margin-top: 8px; font-size: var(--edct-text-12); line-height: 1.6; color: var(--edct-muted-fg); }
.edct-sponsor__ad img { max-height: 24px; width: auto; }
.edct-sponsor__ad a { color: var(--edct-orange-text); }

html body .edct .edct-mini { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.edct-mini li { margin: 0; }
.edct-mini a { display: flex; gap: 12px; border-radius: 6px; }
.edct-mini a:hover { background: hsl(220 16% 96% / 0.4); }
.edct .edct-mini__pic { flex: none; width: 64px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--edct-muted); display: block; }
.edct-mini__text { min-width: 0; display: block; }
.edct-mini__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--edct-text-12); font-weight: 600; line-height: 1.375; color: var(--edct-fg); }
.edct-mini__date { display: block; margin-top: 2px; font-size: 11px; color: var(--edct-muted-fg); }

.edct-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--edct-text-12); font-weight: 600; color: var(--edct-orange-text) !important; }
html body .edct .edct-menu-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.edct-menu-list li { margin: 0; }
.edct-menu-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: var(--edct-text-12); font-weight: 500; color: var(--edct-fg); }
.edct-menu-list a:hover { background: hsl(220 16% 96% / 0.4); }

/* ---------- Phones (ETP-3.10) ---------- */
.edct-phone-tools { display: grid; gap: 12px; margin-top: 16px; }
.edct-panel { border-radius: var(--edct-radius-xl); padding: 12px 16px; }
.edct-panel > summary { cursor: pointer; font-size: var(--edct-text-14); font-weight: 600; color: var(--edct-fg); }
.edct-panel__sub { margin-top: 16px; font-size: var(--edct-text-14); font-weight: 600; }
.edct-after { display: flex; flex-direction: column; gap: var(--edct-card-gap); }

/* ---------- More from edCircuit row (ETP-2.8) ---------- */
.edct-feature { margin-top: 48px; }
html body .edct .edct-feature__h { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--edct-border-60); font: 600 var(--edct-text-14)/1.4 var(--edct-font-sans); letter-spacing: 0; color: var(--edct-fg); text-transform: none; }
.edct-feature__grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
@media (min-width: 640px) { .edct-feature__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .edct-feature__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.edct-fcard { position: relative; overflow: hidden; border: 1px solid var(--edct-border-60); border-radius: var(--edct-radius-xl); background: var(--edct-card); box-shadow: var(--edct-shadow-sm); transition: box-shadow .15s; }
.edct-fcard:hover { box-shadow: var(--edct-shadow-md); }
.edct-fcard__link { display: block; }
.edct-fcard__link:hover { background: hsl(220 16% 96% / 0.4); }
.edct-fcard__frame { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--edct-muted); }
.edct .edct-fcard__pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.edct-fcard__text { display: block; padding: 16px; }
html body .edct .edct-fcard__title { margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 var(--edct-text-14)/1.375 var(--edct-font-sans); letter-spacing: 0; color: var(--edct-fg); text-transform: none; }
.edct-fcard .edct-mini__date { margin-top: 4px; }
.edct-fcard .edct-bm { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* ---------- Sign-up box (ETP-3.9) ---------- */
html body .edct-dialog {
	width: min(448px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 24px;
	border: 0; border-radius: var(--edct-radius-xl); background: var(--edct-card); color: var(--edct-fg);
	box-shadow: var(--edct-shadow-xl); font-family: var(--edct-font-sans);
}
.edct-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
/* Scripts off: the Subscribe link targets the box and CSS shows it. */
.edct-dialog:target:not([open]) { display: block; position: fixed; inset: 0; z-index: 100000; height: fit-content; outline: 100vmax solid rgb(0 0 0 / 0.5); }
.edct-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
html body .edct-dialog h2 { margin: 0; font: 600 var(--edct-text-18)/1.4 var(--edct-font-sans); letter-spacing: 0; color: var(--edct-fg); text-transform: none; }
.edct-dialog__head p { margin: 4px 0 0; font-size: var(--edct-text-14); color: var(--edct-muted-fg); }
html body .edct .edct-dialog__x { width: 32px; height: 32px; padding: 0; }
.edct-form { margin-top: 16px; }
.edct-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.edct-field { grid-column: 1 / -1; }
.edct-field--half { grid-column: span 1; }
.edct-field label { display: block; font-size: var(--edct-text-12); font-weight: 500; color: var(--edct-fg); }
.edct-field label span { color: var(--edct-muted-fg); }
html body .edct-dialog .edct-field input {
	display: block; width: 100%; margin: 4px 0 0; padding: 8px 12px; height: auto;
	border: 1px solid var(--edct-border); border-radius: var(--edct-radius-md); background: #fff; color: var(--edct-fg);
	font: 400 var(--edct-text-14)/1.4 var(--edct-font-sans); box-shadow: none;
}
html body .edct-dialog .edct-field input:focus { border-color: var(--edct-button); outline: 1px solid var(--edct-button); }
html body .edct-dialog .edct-field input[aria-invalid="true"] { border-color: #b42318; }
.edct-field__msg { margin: 4px 0 0; font-size: var(--edct-text-12); color: #b42318; }
.edct-field__msg:empty { display: none; }
.edct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.edct-form__status { margin: 12px 0 0; font-size: var(--edct-text-14); }
.edct-form__status:empty { display: none; }
.edct-form__status.is-ok { color: var(--edct-orange-text); font-weight: 500; }
.edct-form__status.is-error { color: #b42318; }
.edct-form__buttons { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- Plain fallback (ETP-ER-7) ---------- */
.edct--plain .edct-article { max-width: 860px; margin: 0 auto; }

/* ---------- Print: the article alone (ETP-5.5) ---------- */
@media print {
	@page { margin: 0.6in; size: portrait; }
	body.edct-page * { visibility: hidden; }
	body.edct-page [data-print-article], body.edct-page [data-print-article] * { visibility: visible; }
	body.edct-page [data-print-article] { position: absolute; inset: 0; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; background: #fff; color: #000; }
	body.edct-page [data-print-hide], body.edct-page .edct-byline__tools { display: none !important; }
}