/* ---------------------------------------------------------------
   Sentient Horizons design standard · skin "Imprint", version 1.0.0 (2026-10-19)
   Ruled by John 2026-10-19 (proposal: sentient-horizons design/proposals/author-page-2026-10-19/).
   The author page at johnandrewfredrickson.com. Light by default: the
   ivory page of a printed book, near-black ink, and a gilt ochre for links
   and the one action. Dark: the book's cloth binding, a warm brown-black,
   with the gilt lifted to the parent's galaxy amber. The display face is
   EB Garamond, the face the book is set in, for the name and headings only.
   Taken with shell.css version 2.0.1. The page's own rules are in page.css.
   --------------------------------------------------------------- */

/* The one display face: EB Garamond SemiBold (600), cut to the Latin letters,
   self-hosted, 20 KB, SIL Open Font Licence 1.1. Georgia stands in until it
   arrives, scaled so the swap does not move the text. */
@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/eb-garamond-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond fallback';
  src: local('Georgia');
  size-adjust: 92.7%;
  ascent-override: 108.6%;
  descent-override: 32.2%;
  line-gap-override: 0%;
}

:root {
  /* light, the default: the book's page */
  --bg: #f6f1e6;          /* ivory page */
  --bg-soft: #ede6d7;
  --panel: #fbf8f1;
  --text: #1d1a15;        /* ink */
  --text-soft: #3b362e;
  --muted: #6c6558;
  --line: rgba(29, 26, 21, 0.12);
  --line-strong: rgba(29, 26, 21, 0.22);
  --accent: #7f5a10;      /* gilt ochre: links and the one action */
  --accent-2: #5b4a7e;    /* the parent's slate violet, a second mark */
  --accent-3: #5b6f86;    /* slate, for data marks */
  --on-accent: #fbf8f1;
  --accent-hover: #946b18;
  --link: #7f5a10;
  --link-hover: #946b18;
  --glow: rgba(127, 90, 16, 0.14);
  --header-bg: rgba(246, 241, 230, 0.88);
  --hover-bg: rgba(29, 26, 21, 0.05);
  --active-bg: rgba(29, 26, 21, 0.08);
  --chip-bg: transparent;
  --callout-bg: rgba(127, 90, 16, 0.07);
  --ok: #2f7c4a;
  --no: #a5432f;
  --star: #b8862a;        /* the one star on the horizon */
  --radius: 4px;
  --maxw: 1080px;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --display: 'EB Garamond', 'EB Garamond fallback', Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* dark: the book's binding */
:root[data-theme='dark'] {
  --bg: #14110d;
  --bg-soft: #1a1611;
  --panel: #1e1a14;
  --text: #f1ebdf;
  --text-soft: #d6cebf;
  --muted: #988f80;
  --line: rgba(255, 248, 235, 0.10);
  --line-strong: rgba(255, 248, 235, 0.18);
  --accent: #e3b26b;      /* gilt, lifted to the parent's galaxy amber */
  --accent-2: #9b7bc0;    /* the parent's nebula violet */
  --accent-3: #93abc4;
  --on-accent: #1a1206;
  --accent-hover: #efc283;
  --link: #e3b26b;
  --link-hover: #efc283;
  --glow: rgba(227, 178, 107, 0.16);
  --header-bg: rgba(20, 17, 13, 0.80);
  --hover-bg: rgba(255, 248, 235, 0.06);
  --active-bg: rgba(255, 248, 235, 0.08);
  --chip-bg: rgba(255, 248, 235, 0.03);
  --callout-bg: rgba(227, 178, 107, 0.08);
  --ok: #7fc48a;
  --no: #d98a7a;
  --star: #e3b26b;
  --radius: 5px;
}
/* The skeleton's link rule reads --link only in the light theme; in the dark it uses --accent. */

/* ---- the backdrop: one curved horizon and one star, the parent icon's two marks ----
   A faint arc across the first screen, a single gilt star above it at the right,
   fading out within the first screen as the family's backdrops do. On in both themes. */
.horizon-bg { position: absolute; top: 0; left: 0; right: 0; height: 620px; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.horizon-bg svg { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: max(1400px, 140vw); height: 620px; }
.horizon-bg .arc { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.horizon-bg .star { fill: var(--star); }

/* ---------------------------------------------------------------
   Sentient Horizons design standard · the skeleton
   shell.css version 2.0.1 (2026-10-16): split out of deep-field.css 1.3.0; light-theme button text fixed.
   What every site shares and a reader learns once: the base, the links,
   the page width, the top bar, the type roles and heading scale, the
   layout helpers, buttons, chips, callouts, tables, the footer and the
   responsive rules. It defines no colour: every colour here is a token
   that the site's skin (design/skins/<name>.css) supplies. A site copies
   this file and one skin, in that order, into its own stylesheet and adds
   its own rules below a marked line; see design/README.md.
   --------------------------------------------------------------- */
* { box-sizing: border-box; }
/* The hidden attribute must win over component display rules (e.g. .run-out { display: flex }). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

/* Links in running text look like links by default. Components whose whole
   block is a link (nav, brand, buttons, chain cards, rail, footer, eyebrows,
   node-name headings) opt out with .u-link-reset or their own rule. */
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); transition: color 0.15s ease, text-decoration-color 0.15s ease; }
a:hover { text-decoration-color: currentColor; }
:root[data-theme='light'] a { color: var(--link); }
:root[data-theme='light'] a:hover { color: var(--link-hover); }
.u-link-reset, .navlinks a, .brand, .btn, .link, .fcard, .rail li a, .footer-links a, .eyebrow a, .nname, .term, .beside, .dim { text-decoration: none; }
code { font-family: var(--mono); font-size: 0.88em; color: var(--text-soft); background: var(--chip-bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; position: relative; z-index: 1; }
.narrow { max-width: 760px; }


/* ---- header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--header-bg); backdrop-filter: blur(10px); }
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; gap: 10px; position: relative; }
.nav-toggle { display: none; width: 38px; height: 38px; padding: 0; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.nav-toggle:hover { border-color: var(--accent); background: var(--hover-bg); }
.nav-toggle .ico-close { display: none; }
.site-header.nav-open .nav-toggle .ico-open { display: none; }
.site-header.nav-open .nav-toggle .ico-close { display: block; }
.brand { font-size: 19px; font-weight: 600; letter-spacing: 0.3px; color: var(--text); }
.brand:hover { color: var(--accent); }
.navlinks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navlinks a { font-family: var(--sans); font-size: 13px; letter-spacing: 0.03em; color: var(--text-soft); font-weight: 500; padding: 6px 12px; border-radius: 7px; }
.navlinks a:hover { color: var(--text); background: var(--hover-bg); }
.navlinks a.active { color: var(--text); background: var(--active-bg); }
.navlinks a.nav-secondary { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.navlinks a.nav-primary { color: var(--text-soft); font-weight: 500; }
.navlinks a.nav-primary:hover { color: var(--text); }
.navlinks a.nav-cta { color: var(--on-accent); background: var(--accent); font-weight: 600; margin-left: 8px; }
.navlinks a.nav-cta:hover { color: var(--on-accent); background: var(--accent-hover); }
.nav-divider { width: 1px; height: 18px; background: var(--line-strong); margin: 0 8px; align-self: center; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 8px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.theme-toggle:hover { color: var(--text); border-color: var(--accent); background: var(--hover-bg); }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
:root[data-theme='light'] .theme-toggle .icon-sun { display: none; }
:root[data-theme='light'] .theme-toggle .icon-moon { display: block; }

/* ---- typography ---- */
h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--text); }
h1.question { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: 22px; font-weight: 600; margin: 0; color: var(--text); }
h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.eyebrow a { color: inherit; }
.lede { font-size: 18px; color: var(--muted); font-style: italic; }
.prose { font-size: 17px; line-height: 1.75; color: var(--text-soft); }
.prose p { margin: 0 0 1.1em; }
.prose em { color: var(--text); font-style: italic; }
.prose h2 { font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--text); margin: 1.9em 0 0.5em; }
.prose h3 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text); margin: 1.7em 0 0.4em; }
.prose ul, .prose ol { margin: 0 0 1.1em 1.2em; padding: 0; }
.prose li { margin: 0.4em 0; }
.prose blockquote { margin: 1.3em 0; padding: 0.3em 0 0.3em 1.1em; border-left: 3px solid var(--accent); font-style: italic; color: var(--text); }
.prose blockquote p { margin: 0; }
.prose strong { color: var(--text); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.2em 0; }
.dim { color: var(--muted); }
a.dim:hover { color: var(--accent); }
.mono { font-family: var(--mono); font-size: 0.85em; color: var(--muted); }

/* ---- layout helpers ---- */
.hero { padding: 64px 0 16px; max-width: 760px; }
.hero.wide { max-width: none; }
.section { padding: 26px 0; }
.hero + .section { padding-top: 0; }
.shead { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 20px; }
.shead h2 { font-size: 16px; letter-spacing: 0.02em; }
.shead span { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
[id] { scroll-margin-top: 84px; }

/* ---- buttons, chips, callouts ---- */
.btn { font-family: var(--sans); font-size: 13px; padding: 8px 15px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: inline-block; cursor: pointer; border: 1px solid var(--accent); }
.btn:hover { color: var(--on-accent); filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent); color: var(--on-accent); }
/* the light theme's link colour must not reach into buttons (the rule above for `a` outranks .btn) */
:root[data-theme='light'] a.btn { color: var(--on-accent); }
:root[data-theme='light'] a.btn.ghost { color: var(--accent); }
:root[data-theme='light'] a.btn.ghost:hover { color: var(--on-accent); }
.ctas { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-block; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.02em; border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; color: var(--muted); background: var(--chip-bg); white-space: nowrap; }
.chip.accent { color: var(--accent); }
.chip.ok { color: var(--ok); border-color: var(--ok); }
.chip.no { color: var(--no); border-color: var(--no); }
.chip.violet { color: var(--accent-2); }
.callout { background: var(--callout-bg); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 15px 17px; }
.callout h3 { font-size: 13px; font-family: var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.callout p { margin: 6px 0 0; }
.kicker { font-size: 13px; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; }

/* ---- tables (shared shape; a site may widen or narrow columns) ---- */
.prose table, table.data { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 13.5px; margin: 12px 0 18px; display: block; overflow-x: auto; }
.prose th, .prose td, table.data th, table.data td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th, table.data th { color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.prose code, table.data code { white-space: nowrap; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 30px 0; color: var(--muted); font-family: var(--sans); font-size: 13px; position: relative; z-index: 1; }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.footer-brand { font-weight: 600; color: var(--text); }
.footer-tag { margin: 0.3rem 0 0.5rem; }
.footer-links { margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-links a { color: var(--text-soft); }
.footer-links a:hover { color: var(--accent); }
.footer-meta { margin: 0.5rem 0 0; font-size: 12px; }
.footer-parent { margin: 0.6rem 0 0; font-size: 12px; }
.footer-parent a { color: var(--text-soft); }
.footer-parent a:hover { color: var(--accent); }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .navlinks { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; padding: 8px 26px 16px; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .site-header.nav-open .navlinks { display: flex; }
  .navlinks a { padding: 11px 6px; border-radius: 6px; font-size: 15px; text-align: right; }
  .navlinks a.nav-secondary { font-size: 15px; }
  .navlinks a.nav-cta { margin: 8px 0 0; }
  .nav-divider { display: none; }
  .theme-toggle { margin: 10px 0 0; }
}
@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .space-bg { height: 560px; }
  .container { padding: 0 16px; }
}

/* ==== The page's own rules, below the skin and the skeleton ==== */
.brand { font-family: var(--display); font-size: 21px; letter-spacing: 0.01em; }
h1, h2, .prose h2, .prose h3 { font-family: var(--display); }
h1.name { font-size: clamp(38px, 6.4vw, 64px); line-height: 1.04; letter-spacing: -0.005em; margin-bottom: 18px; }
.hero { padding-top: 96px; }
.lede { font-style: normal; color: var(--text-soft); font-size: 19px; line-height: 1.6; }

/* the horizon rule: a short arc under the name with the star, the motif repeated at small size */
.rule-h { display: block; width: 148px; height: 18px; margin: 0 0 22px; }
.rule-h path { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0.7; }
.rule-h circle { fill: var(--star); }

.section h2.sec { font-size: 28px; margin: 0 0 16px; }
.section .sec-note + .work { margin-top: 0; }
.section .sec-note { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin: -8px 0 20px; }

/* the work: one row per project, its dot in that project's own colour (as on the Projects page) */
.work { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.work li { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 8px 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.work h3 { font-family: var(--display); font-size: 22px; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; }
:root .work h3 a, :root[data-theme='light'] .work h3 a, :root[data-theme='light'] .brand { color: var(--text); text-decoration: none; }
.work h3 a:hover { color: var(--accent); }
.work .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); flex: none; transform: translateY(-2px); }
:root[data-theme='light'] .work .dot { background: var(--pc-light); }
.work .asks { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-soft); }
.work .asks em { color: var(--text); }
.work .addr { font-family: var(--sans); font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.work .num { text-align: right; }
.work .num .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 26px; color: var(--text); line-height: 1.1; display: block; }
.work .num .what { font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--muted); display: block; margin-top: 4px; }
.work .num .when { font-family: var(--sans); font-size: 11.5px; color: var(--muted); display: block; margin-top: 6px; }
.work .num .stale { color: var(--no); }

/* the book */
.book { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: start; }
.book img { width: 150px; height: auto; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.14); }
.book h3 { font-family: var(--display); font-size: 26px; margin: 0; }
.book .sub { font-style: italic; color: var(--muted); margin: 2px 0 12px; }
.book p { margin: 0 0 10px; color: var(--text-soft); }
.book .stands { font-family: var(--sans); font-size: 13px; color: var(--muted); }

/* follow and contact */
.follow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.follow li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.follow a { font-family: var(--sans); font-size: 14.5px; font-weight: 500; }
.follow span { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.contact { font-size: 17px; color: var(--text-soft); }

@media (max-width: 720px) {
  .hero { padding-top: 64px; }
  .work li { grid-template-columns: 1fr; }
  .work .num { text-align: left; }
  .book { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
  .book img { width: 96px; }
  .follow { grid-template-columns: 1fr; }
  .horizon-bg { height: 480px; }
}

/* the hero: words at the left, the photo at the right on a desktop; the photo above the name on a phone.
   A plain square, never a circle, never wider than 200 CSS pixels so the 403-pixel source stays a full
   2x image (ruled by John 2026-10-19). */
.hero.with-photo { max-width: none; display: grid; grid-template-columns: minmax(0, 760px) auto; gap: 56px; align-items: start; }
.hero .words { min-width: 0; }
.photo { width: 200px; margin: 30px 0 0; }
.photo picture, .photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 2px; background: var(--bg-soft); }
.photo figcaption { font-family: var(--sans); font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.photo.empty { height: 200px; border: 1px dashed var(--line-strong); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.hero .also { font-family: var(--sans); font-size: 13px; color: var(--muted); margin: 0; }
@media (max-width: 820px) {
  .hero.with-photo { grid-template-columns: 1fr; gap: 0; }
  .hero.with-photo .photo { order: -1; width: 140px; margin: 0 0 24px; }
  .hero.with-photo .photo.empty { height: 140px; }
}

/* Frames for the photo (asked for by John 2026-10-19: "some kind of border or inlay"). Three
   treatments in the printed-book idea, CSS only, the photo itself staying 200 pixels. The chosen
   one is set in src/photo.mjs (`frame`); on the preview any can be shown with ?frame=plate,
   ?frame=double or ?frame=print. */
.photo.frame-plate, :root[data-frame='plate'] .photo,
.photo.frame-print, :root[data-frame='print'] .photo { position: relative; width: auto; padding: 12px; background: var(--panel); border: 1px solid var(--line); }
/* (a) frontispiece plate: an ivory mat with a hairline gilt rule inset between mat and photo */
.photo.frame-plate::before, :root[data-frame='plate'] .photo::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--accent); opacity: 0.75; pointer-events: none; }
.photo.frame-plate picture, :root[data-frame='plate'] .photo picture { width: 200px; position: relative; }
/* (b) double rule: an outer hairline in the ink, an inner one in gilt */
.photo.frame-double, :root[data-frame='double'] .photo { width: auto; padding: 3px; border: 1px solid var(--text); }
.photo.frame-double picture, :root[data-frame='double'] .photo picture { width: 200px; padding: 3px; border: 1px solid var(--accent); box-sizing: content-box; }
.photo.frame-double img, :root[data-frame='double'] .photo img { width: 200px; }
/* (c) a print laid on the page, John's choice (2026-10-19): a thin mat (6 pixels, half the first
   mock-up's) with a tight shadow, so the star mark below stays clear. Plain mat and shadow in both themes:
   a faint warm edge was tried in dark and John preferred it without. */
.photo.frame-print, :root[data-frame='print'] .photo { padding: 6px; border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.12); }
:root[data-theme='dark'] .photo.frame-print, :root[data-theme='dark'][data-frame='print'] .photo { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.55); }
.photo.frame-print picture, :root[data-frame='print'] .photo picture { width: 200px; }
.photo[class*='frame-'] figcaption, :root[data-frame] .photo figcaption { margin-top: 8px; }
@media (max-width: 820px) {
  .photo.frame-plate picture, :root[data-frame='plate'] .photo picture,
  .photo.frame-print picture, :root[data-frame='print'] .photo picture,
  .photo.frame-double picture, :root[data-frame='double'] .photo picture,
  .photo.frame-double img, :root[data-frame='double'] .photo img { width: 140px; }
  .hero.with-photo .photo[class*='frame-'], :root[data-frame] .hero.with-photo .photo { width: max-content; }
}
.photo[class*='frame-'] img, :root[data-frame] .photo img { border-radius: 0; }

/* the site address under each project is a link to it (John, 2026-10-19): gilt, underlined on hover */
.work .addr a { text-decoration: none; }
.work .addr a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.work .addr a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; text-decoration: underline; }

/* The star mark: one gilt dot centred a fixed distance under the photo, so no frame or window width
   can cover it. With a photo on the page, the backdrop's own star is hidden, so there is one dot. */
.photo:not(.empty) { position: relative; margin-bottom: 34px; }
.photo:not(.empty)::after { content: ''; position: absolute; left: 50%; bottom: -26px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--star); }
.photo:not(.empty):has(figcaption)::after { bottom: -30px; }
.has-photo .horizon-bg .star { display: none; }
@media (max-width: 820px) { .hero.with-photo .photo:not(.empty) { margin-bottom: 50px; } }

/* each headline number links to its project, like the title (John, 2026-10-19): the number keeps its
   ink at rest, takes the link colour and an underline on hover, and a gilt outline on keyboard focus */
:root .work .num a.n, :root[data-theme='light'] .work .num a.n { color: var(--text); text-decoration: none; }
:root .work .num a.n:hover, :root[data-theme='light'] .work .num a.n:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.work .num a.n:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.work .num a.n { display: inline-block; }