/* ==========================================================================
   Kasurian — Ghost theme stylesheet
   Recreates the working prototype (Kasurian Prototype.dc.html) 1:1.
   Desktop rail ≥1180px; mobile rail below (same copy, different structure).
   Day/night tokens live on :root[data-mode] — toggled by assets/js/theme.js,
   persisted as localStorage `kas-mode`, seeded from prefers-color-scheme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root,
:root[data-mode="day"] {
  --ground: var(--cream);
  --shdw: rgba(0, 0, 0, .22);
  --ink: #000;
  --accent: var(--oxblood);            /* overridden by @custom.accent_color */
  --accent-ink: var(--cream);
  --pgreen: #123524;
  --pblue: #011F5B;
  --pred: var(--oxblood);
  --panel: #F5EDD6;
  --h1: #F4ECD5;
  --h2: #EAE1C7;
  --d15: rgba(0, 0, 0, .15);
  --d2: rgba(0, 0, 0, .2);
  --d35: rgba(0, 0, 0, .35);
  --d45: rgba(0, 0, 0, .55);
  --d5: rgba(0, 0, 0, .58);
  --d55: rgba(0, 0, 0, .62);
  --d6: rgba(0, 0, 0, .6);
  --d7: rgba(0, 0, 0, .7);
  --treef: none;
  --tier: rgba(0, 0, 0, .55);
  --pteal: #005F6B;
  --gr0: rgba(253, 246, 227, 0);
  --gr97: rgba(253, 246, 227, .97);
  --body-bg: var(--cream);
  /* Ghost custom fonts (Settings → Design) are honoured when chosen;
     the design's own faces are the default. */
  --link: var(--accent);
  /* mode-invariant house colours (night never overrides these).
     Tinted-cream rgba(253,246,227,α) literals elsewhere are deliberate
     one-offs — a dozen distinct alphas would not earn their tokens. */
  --cream: #FDF6E3;
  --oxblood: #4A0404;
  --oxblood-deep: #2f0202;         /* hover press */
  --oxblood-press: #1c0101;        /* active press */
  --amber-bright: #D99B3F;         /* night hover lift */
  --amber: #C98A2E;
  --serif: var(--gh-font-body, 'EB Garamond'), Georgia, serif;
  --heading: var(--gh-font-heading, var(--gh-font-body, 'EB Garamond')), Georgia, serif;
  --mono: 'IBM Plex Mono', monospace;
}

:root[data-mode="night"] {
  --ground: #1C1917;
  --shdw: rgba(0, 0, 0, .6);
  --ink: #faf9f6;
  --accent: #faf9f6;
  --accent-ink: #1C1917;
  --pgreen: #0B3528;
  --pblue: #122B52;
  --pred: #5E1A1A;
  --panel: #292524;
  --h1: #2A2724;
  --h2: #1C1917;
  --d15: rgba(250, 249, 246, .18);
  --d2: rgba(250, 249, 246, .22);
  --d35: rgba(250, 249, 246, .4);
  --d45: rgba(201, 138, 46, .85);
  --d5: rgba(201, 138, 46, .92);
  --d55: rgba(201, 138, 46, .95);
  --d6: rgba(216, 210, 196, .9);
  --d7: rgba(216, 210, 196, .95);
  --treef: invert(.96);
  --tier: rgba(250, 249, 246, .65);
  --pteal: #177682;
  --gr0: rgba(28, 25, 23, 0);
  --gr97: rgba(28, 25, 23, .97);
  --body-bg: #1C1917;
  --link: var(--amber);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* clip (not hidden — sticky must keep working) so the full-bleed
   divider pseudos can span 100vw without opening a horizontal scroll */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--body-bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
}

::selection { background: #FFBF00; color: #000; }

a { color: var(--link, var(--accent)); }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input, textarea { font: inherit; color: inherit; }

/* utility: hand-drawn hatch placeholder */
.k-hatch {
  background: repeating-linear-gradient(45deg, var(--h1) 0, var(--h1) 9px, var(--h2) 9px, var(--h2) 18px);
}
/* mono label utilities */
.k-kicker {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.k-kicker i, .k-kicker .k-roman { font-style: normal; }
.k-microlabel {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .18em;
  color: var(--d5);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. The rail
   -------------------------------------------------------------------------- */
/* No frame: the rail is a centred measure on a seamless ground, not a
   bordered box (the box was a holdover from the design drafts). */
.k-rail {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--ground);
}

/* Home loading screen: tree spins under an orbiting ring for ~1s, then
   fades; the rail unfurls top-to-bottom right after. Pure CSS timeline —
   no JS to race against, so it can't stutter. */
.k-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ground);
  animation: kasLoaderOut .35s ease-out .95s forwards;
}
.k-loader__ring {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid var(--d15);
  border-top-color: var(--accent);
  animation: kasSpin .9s linear infinite;
}
.k-loader__tree {
  width: 55px;
  height: auto;
  filter: var(--treef);
}
@keyframes kasSpin { to { transform: rotate(360deg); } }
@keyframes kasLoaderOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }

body.home-template .k-rail {
  opacity: 0;
  animation: kasUnfurl .6s cubic-bezier(.22, .7, .3, 1) 1.05s forwards;
}
@keyframes kasUnfurl {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .k-loader { display: none; }
  body.home-template .k-rail { opacity: 1; animation: none; clip-path: none; }
}
/* session gate — set pre-paint in default.hbs when this isn't the
   session's first page: no loader, no unfurl, straight to content */
html[data-kas-skip-loader] .k-loader { display: none; }
html[data-kas-skip-loader] body.home-template .k-rail { opacity: 1; animation: none; clip-path: none; }

/* page titles are h1 for the document outline; the classes carry all the
   styling, so neutralise only the UA's h1 defaults (zero specificity) */
:where(h1) { margin: 0; font-size: inherit; font-weight: inherit; }

.k-desktop-only { display: block; }
.k-mobile-only { display: none; }
span.k-desktop-only { display: inline; }

@media (max-width: 1179.98px) {
  .k-rail { max-width: 560px; padding-bottom: 40px; }
  .k-desktop-only, span.k-desktop-only { display: none !important; }
  .k-mobile-only { display: block; }
  span.k-mobile-only { display: inline; }
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.k-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--ground);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 15px 28px;
  margin-bottom: 27px;
}
/* the nav divider runs the full viewport width, past the rail */
.k-header::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: 0;
  height: 2px;
  background: var(--ink);
  transition: background-color .26s cubic-bezier(.22, .7, .3, 1);
}

.k-header__logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
}
.k-header__logo:hover { color: var(--ink); }

/* the centred tree mark is a home link — the anchor carries the
   positioning so the mark itself is the click target */
.k-header__treelink {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  line-height: 0;
  padding: 4px 6px;      /* a little forgiveness around the mark */
}
.k-header__tree {
  height: 38px;
  width: auto;
  filter: var(--treef);
}

.k-header__crumb {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--d55);
  text-transform: uppercase;
}
.k-header__crumb a {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.k-header__actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
  align-items: center;
}

/* chip standard: mono 10.5px / .14em / 7px 12px — .k-btn, .k-drop__btn,
   .k-season-bar__all and .k-fn-section__all all follow it */
.k-btn {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  cursor: pointer;
  user-select: none;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  background: transparent;
}
.k-btn--accent {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
/* keep the accent-ink text on hover (the global a:hover ink made it
   black-on-oxblood in day and white-on-white in night); the surface
   dims a touch for feedback instead */
.k-btn--accent:hover {
  color: var(--accent-ink);
  filter: brightness(.92);
}
/* night: the accent token goes cream (kickers, focus rings), but accent
   BUTTONS stay the standard red — the lifted night oxblood surface */
:root[data-mode="night"] .k-btn--accent {
  border-color: var(--pred);
  background: var(--pred);
  color: var(--cream);
}
:root[data-mode="night"] .k-btn--accent:hover { color: var(--cream); filter: brightness(1.25); }
/* patronage wears Penn blue — the Member card's cloth */
.k-btn--patron {
  border-color: var(--pblue);
  background: var(--pblue);
  color: var(--cream);
}
.k-btn--patron:hover { color: var(--cream); filter: brightness(1.45); }
/* donations wear the autumn teal — filled, no separate border stroke,
   same treatment as the patron button beside it */
.k-btn--donate {
  border-color: var(--pteal);
  background: var(--pteal);
  color: var(--cream);
}
.k-btn--donate:hover { color: var(--cream); filter: brightness(1.3); }

/* sun and moon share one grid cell and cross-fade (see §24 Motion) */
.k-mode {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  color: var(--ink);
  flex: none;
  padding: 0;
}
.k-mode__sun { display: block; font-size: 13px; line-height: 1; }
.k-mode__moon { position: relative; width: 12px; height: 12px; }
.k-mode__moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); }
.k-mode__moon::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--ground); left: 4.5px; top: -2.5px; }
.k-mode__sun, .k-mode__moon { grid-area: 1 / 1; }
.k-mode__moon { opacity: 0; transform: translate(1px, -1px) rotate(-60deg) scale(.4); }
:root[data-mode="night"] .k-mode__sun { opacity: 0; transform: rotate(120deg) scale(.3); }
:root[data-mode="night"] .k-mode__moon { opacity: 1; transform: translate(1px, -1px); }

/* block flow, not flex — iOS Safari doesn't reliably lay out flex
   children inside <button>, which left the bars invisible on iPhone */
.k-burger {
  display: block;
  width: 20px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.k-burger span { display: block; height: 1.5px; background: var(--ink); }
.k-burger span + span { margin-top: 4px; }

@media (max-width: 1179.98px) {
  .k-header { gap: 10px; padding: 12px 16px; margin-bottom: 21px; }
  /* mobile: patronage lives in the menu — the extra weight outguns the
     late .k-btn-ico display rule */
  .k-header .k-header__sub { display: none; }
  .k-header__logo { font-size: 15.5px; letter-spacing: .14em; }
  .k-header__tree { height: 30px; }
  .k-header__actions { gap: 10px; }
  .k-header .k-btn { padding: 4px 8px; letter-spacing: .12em; }
  .k-mode { width: 26px; height: 26px; }
  .k-burger { width: 18px; }
  .k-header__crumb { display: none; }
}

/* mobile breadcrumb strip under the header */
.k-crumbbar {
  display: none;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--d15);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--d55);
  text-transform: uppercase;
}
.k-crumbbar a { color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* search borrows the bar: the FIND field indents in at the RIGHT of the
   crumbs, which stay put (only the cart chip steps aside); results wrap
   onto their own full row. search.js lifts the field out again on close */
.k-crumbbar.is-searching { flex-wrap: wrap; }
.k-crumbbar.is-searching .k-crumbbar__cart { display: none; }
.k-crumbbar .k-searchpanel__inner { display: contents; }
.k-crumbbar .k-searchpanel__bar { flex: 1 1 auto; min-width: 0; margin-left: 14px; }
/* a faint rule marks where the crumbs end and the search begins — the
   bar's own border spec, stood upright */
.k-crumbbar .k-searchpanel__bar::before {
  content: "";
  align-self: stretch;
  width: 1px;
  flex: none;
  background: var(--d15);
}
.k-crumbbar .k-searchpanel__results { flex: 1 1 100%; min-width: 0; }
.k-crumbbar .k-searchbar__input { padding: 0; height: auto; }
@media (max-width: 1179.98px) {
  /* pinned under the navbar, like the header and the contents box —
     search results opened in the bar ride along with it */
  .k-crumbbar {
    display: flex;
    margin-top: -21px;
    margin-bottom: 21px;
    position: sticky;
    top: 52px;
    z-index: 60;
    background: var(--ground);
  }
  .k-header__cart { display: none; }        /* mobile cart lives in the crumb row */
}
@media (min-width: 1180px) {
  .k-crumbbar__cart { display: none; }
}

.k-crumbbar__cart { margin-left: auto; padding: 5px 10px; font-size: 9.5px; }

/* reading progress (mobile) — a small ticked meter inside the contents
   box, between CONTENTS and the reading time (rounded like the
   scrollbar pill; the fill is the "how far in" gauge) */
.k-meter {
  position: relative;
  width: 116px;
  height: 9px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  background: var(--ground);
  overflow: hidden;
  flex: none;
}
.k-meter__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 4px;
  transition: width .18s linear;
}
.k-meter::after {
  content: "";
  position: absolute;
  inset: 0;
  /* one mark per essay section, like the section tick rail: the rounded
     caps ARE the first and last, and theme.js paints the interior marks
     via --kas-meter-ticks (quarters until it speaks; explicit stops —
     a repeating gradient also stripes at 100%, against the cap) */
  background: var(--kas-meter-ticks,
    linear-gradient(var(--d35), var(--d35)) 25% 0 / 1px 100% no-repeat,
    linear-gradient(var(--d35), var(--d35)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--d35), var(--d35)) 75% 0 / 1px 100% no-repeat);
  pointer-events: none;
}
.k-toc-box .k-meter { margin-left: auto; }

/* --------------------------------------------------------------------------
   5. Hamburger menu + backdrop
   -------------------------------------------------------------------------- */
.k-menu-backdrop {
  display: none;
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 89;
}
.k-menu {
  display: none;
  position: fixed;
  top: 60px;
  right: max(28px, calc(50vw - 692px)); /* 28px inside the 1440px rail, under the burger */
  z-index: 90;
  width: 230px;
  border: 1px solid var(--ink);
  background: var(--ground);
  box-shadow: 6px 6px 0 var(--shdw);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.k-menu.is-open, .k-menu-backdrop.is-open { display: block; }
.k-menu a {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--d15);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.k-menu .k-menu__sub {
  background: var(--pblue);          /* patronage row — Penn blue */
  color: var(--cream);
  font-weight: 700;
  border-bottom: none;
}
@media (min-width: 1180px) {
  .k-menu .k-menu__sub { display: none; }   /* desktop keeps the header button */
  .k-menu a:nth-last-child(2) { border-bottom: none; }  /* last VISIBLE link */
}
.k-menu a:last-child { border-bottom: none; }
@media (max-width: 1179.98px) {
  .k-menu { top: 52px; right: max(16px, calc(50vw - 264px)); }
}

/* --------------------------------------------------------------------------
   6. Dropdown filter chips (gallery / footnotes / shop / issue / season)
   -------------------------------------------------------------------------- */
.k-filterbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 20px 28px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  position: relative;
  z-index: 40;
  flex-wrap: wrap;
}
.k-filterbar__label {
  font-size: 8.5px;
  letter-spacing: .18em;
  color: var(--d5);
  flex: none;
  text-transform: uppercase;
}
.k-filterbar__right { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.k-drop { position: relative; flex: none; }
/* the home IN SEASON chip wears the season colour (cream text),
   following the issue dropdown like the panels do */
[data-kas-season-drop] .k-drop__btn {
  background: var(--seabg, var(--pgreen));
  border-color: var(--seabg, var(--pgreen));
  color: var(--cream);
}
.k-drop__btn {
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border: 1px solid var(--ink);
  background: transparent;
  color: inherit;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
}
.k-drop__btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.k-drop__list {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 45;
  min-width: 160px;
  border: 1px solid var(--ink);
  background: var(--ground);
  box-shadow: 4px 4px 0 var(--shdw);
}
.k-drop.is-open .k-drop__list { display: block; }
.k-drop__opt {
  text-transform: uppercase;
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--d15);
  white-space: nowrap;
  font: inherit;
  letter-spacing: inherit;
  background: transparent;
  color: inherit;
}
.k-drop__opt:last-child { border-bottom: none; }
.k-drop__opt.is-selected { background: var(--ink); color: var(--ground); }

.k-clear {
  text-transform: uppercase;
  display: none;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: .14em;
  padding: 4px 2px;
  white-space: nowrap;
  flex: none;
  user-select: none;
  background: none;
  border: none;
  font: inherit;
}
.k-clear.is-visible { display: inline-block; }

.k-viewchip {
  text-transform: uppercase;
  border: 1px solid var(--d35);
  background: transparent;
  color: var(--d55);
  padding: 4px 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
}
.k-viewchip.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ground);
}

@media (max-width: 1179.98px) {
  .k-filterbar { margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--ink); font-size: 10px; }
  /* the VIEW group wraps to its own row, aligned with the filters */
  .k-filterbar__right { margin-left: 0; width: 100%; justify-content: flex-start; }
  .k-drop__btn { padding: 5px 10px; font-size: 10px; }
}

/* empty state */
.k-empty {
  text-transform: uppercase;
  display: none;
  margin: 22px 28px 8px;
  border: 1px solid var(--ink);
  padding: 40px 20px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--d55);
}
.k-empty.is-visible { display: flex; }
.k-empty button {
  border: 1px solid var(--ink);
  padding: 5px 12px;
  cursor: pointer;
  user-select: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
@media (max-width: 1179.98px) {
  .k-empty { margin: 18px 16px 8px; padding: 26px 14px; }
}

/* --------------------------------------------------------------------------
   7. Page heads (Gallery / Shop / Footnotes / Subscribe …)
   -------------------------------------------------------------------------- */
.k-listing-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin: 0 28px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 16px;
}
.k-listing-head__main { flex: 1; min-width: 0; }
.k-listing-head__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}
.k-listing-head__title {
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1.02;
  margin-top: 6px;
}
.k-listing-head__sub {
  font-style: italic;
  font-size: 17.5px;
  color: var(--d55);
  margin-top: 6px;
  text-wrap: pretty;
}
.k-listing-head__sub .k-roman, .k-listing-head__sub .k-upright { font-style: normal; }
@media (max-width: 1179.98px) {
  .k-listing-head { margin: 0; padding: 18px 16px 16px; display: block; }
  .k-listing-head__kicker { font-size: 9px; letter-spacing: .22em; }
  .k-listing-head__title { font-size: 31px; line-height: 1; margin-top: 7px; }
  .k-listing-head__sub { font-size: 15px; }
}

/* hero-style page head (Footnotes / Write) */
.k-page-head { max-width: 860px; margin: 0 auto; padding: 44px 40px 8px; }
/* Issues and Footnotes: the ledger tables read cramped at the essay
   measure — wider, but well short of the Gallery's near-full-rail
   width, since it's still a table, not a wall */
.k-page-head--wide { max-width: 1160px; }
.k-page-head__title { font-size: 52px; font-weight: 500; line-height: 1.05; margin: 12px 0 0; }
.k-page-head__sub { font-style: italic; font-size: 19px; color: var(--d6); margin-top: 8px; }
@media (max-width: 1179.98px) {
  .k-page-head { padding: 20px 16px 22px; }
  .k-page-head__title { font-size: 34px; margin-top: 8px; }
  .k-page-head__sub { font-size: 15.5px; margin-top: 6px; }
}

/* --------------------------------------------------------------------------
   8. Home — In Season
   -------------------------------------------------------------------------- */
/* 1fr / auto / 1fr — the season chip sits on the true centre line
   regardless of how wide the title and ALL ISSUES sides are */
.k-season-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  /* the reader keeps a crumb-band of air below the navbar — the season
     bar matches it, and the search strip drops into that band instead
     of onto the title */
  margin: 56px 28px 0;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
}
.k-season-bar__title {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--season-ink, var(--pgreen));
}
:root[data-mode="night"] .k-season-bar__title { color: var(--ink); }
.k-season-bar__mid {
  flex: 1;
  display: flex;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
}
.k-season-bar .k-drop__list { left: 50%; transform: translateX(-50%); min-width: 0; }
.k-season-bar__all {
  justify-self: end;
  text-transform: uppercase;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  border: 1px solid var(--ink);
  padding: 7px 12px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
@media (max-width: 1179.98px) {
  .k-season-bar { gap: 8px; margin: 50px 16px 0; }
  .k-season-bar__title { font-size: 13px; }
  .k-season-bar__mid { font-size: 10px; letter-spacing: .08em; }
  .k-season-bar__all { font-size: 10px; letter-spacing: .14em; padding: 5px 10px; }
}

.k-home-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 18px 32px 10px;
}
/* each row lays its own cards edge to edge, so a row of two reads as
   two cards sharing the width — not a three-column grid with an empty
   gap where a third would sit. theme.js groups the season's essays
   into 3-then-2 rows (seasonRowSizes) and rebuilds these on every
   season switch. */
.k-home-row { display: flex; gap: 20px; }
.k-home-row > .k-essay-card { flex: 1 1 0; min-width: 0; }

/* hero row — cover art left in a bordered box, season panel right (~59/41) */
.k-hero-card {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  min-height: 420px;
}
.k-hero-card__artbox {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ground);
}
.k-hero-card__art {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 76%;
  width: auto;
  max-width: 86%;
  filter: var(--treef);
  pointer-events: none;
  object-fit: contain;
}
.k-hero-card__panel {
  background: var(--seabg, var(--pgreen));
  color: var(--cream);
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
}
.k-hero-card__panel:hover, .k-home-hero-m__panel:hover, .k-letter-card:hover { color: var(--cream); }

.k-hero-card__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(253, 246, 227, .75);
  text-transform: uppercase;
}
.k-hero-card__title { font-size: 38px; line-height: 1.12; margin-top: 14px; }
.k-hero-card__num { opacity: .85; margin-right: 14px; }
.k-hero-card__sub {
  font-size: 16.5px;
  line-height: 1.45;
  color: rgba(253, 246, 227, .85);
  margin-top: 14px;
  max-width: 44ch;
}
.k-hero-card__meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(253, 246, 227, .4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.k-hero-card__by { color: rgba(253, 246, 227, .75); }
/* the mobile hero panel still composes label/title/sub/read in a __row */
.k-hero-card__row { display: flex; align-items: baseline; margin-top: 8px; }
.k-hero-card__read {
  margin-left: auto;
  white-space: nowrap;
  padding-left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.k-hero-card__meta .k-hero-card__read { margin-left: 0; padding-left: 0; }

.k-essay-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.k-essay-card__img {
  position: relative;
  height: 280px;
  border-bottom: 1px solid var(--ink);
  background: var(--ground);
  overflow: hidden;
}
.k-essay-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* caption: a season-accent panel (like the hero and letter cards) —
   cream text, numeral + title, dek, then the byline and theme tag
   pinned level across the row */
.k-essay-card__caption {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  background: var(--seabg, var(--pgreen));
  color: var(--cream);
}
.k-essay-card__title {
  font-size: 19px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-essay-card__title .k-card-n { color: var(--cream); opacity: .85; margin-right: 10px; }
.k-essay-card__dek { font-size: 14.5px; line-height: 1.45; color: rgba(253, 246, 227, .85); }
.k-essay-card__meta {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.k-essay-card__by { color: rgba(253, 246, 227, .7); }
.k-essay-card__theme { color: var(--cream); white-space: nowrap; }

.k-letter-card {
  height: 100%;
  min-height: 240px;
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
/* inverted vs the essay cards: the colour band and text sit on top,
   the letter's art below — the editors' letter is not an ordinary essay */
.k-letter-card__band {
  background: var(--seabg, var(--pgreen));
  color: var(--cream);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.k-letter-card__band .k-letter-card__read { margin-top: 4px; }
.k-letter-card__art {
  flex: 1;
  position: relative;
  min-height: 90px;
  border-top: 1px solid var(--ink);
  background: var(--ground);
  overflow: hidden;
}
.k-letter-card__art img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: 84%;
  max-width: 90%;
  object-fit: contain;
  filter: var(--treef);
}
.k-letter-card__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(253, 246, 227, .7);
  text-transform: uppercase;
}
.k-letter-card__title { font-size: 19px; line-height: 1.25; }
.k-letter-card__read {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Home — mobile: hero + numbered list */
.k-home-hero-m { margin: 12px 16px 0; position: relative; }
.k-home-hero-m__art { position: relative; height: 340px; overflow: hidden; }
.k-home-hero-m__art img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  /* cap both axes, force neither — wide plates (the tiger) were being
     squashed by a fixed height meeting the width cap */
  max-height: 82%;
  max-width: 92%;
  width: auto;
  height: auto;
  filter: var(--treef);
  pointer-events: none;
}
.k-home-hero-m__panel {
  display: block;
  background: var(--seabg, var(--pgreen));
  color: var(--cream);
  padding: 14px 16px;
  cursor: pointer;
  text-decoration: none;
}
.k-home-hero-m__panel .k-hero-card__title { font-size: 27px; margin-top: 6px; }
.k-home-hero-m__panel .k-hero-card__sub { font-size: 13px; }

.k-home-list-m { margin: 4px 16px 0; }
.k-home-list-m__row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--d15);
  text-decoration: none;
  color: inherit;
}
.k-home-list-m__num { font-family: var(--mono); font-size: 10px; color: var(--accent); width: 22px; flex: none; }
.k-home-list-m__title { flex: 1; font-size: 15.5px; line-height: 1.2; }
.k-home-list-m__thumb { width: 44px; height: 34px; flex: none; overflow: hidden; }
.k-home-list-m__thumb img { width: 100%; height: 100%; object-fit: cover; }
.k-home-list-m__read { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }

/* --------------------------------------------------------------------------
   9. Home — Footnotes section
   -------------------------------------------------------------------------- */
.k-fn-section { margin: 42px 28px 6px; }
.k-fn-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}
.k-fn-section__title {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.k-fn-section__sub { font-style: italic; font-size: 15.5px; color: var(--d55); }
/* matches the standard chip (.k-btn / .k-drop__btn): ink on ink border */
.k-fn-section__all {
  text-transform: uppercase;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  border: 1px solid var(--ink);
  padding: 7px 12px;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.k-fn-cols { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.k-fn-col { padding-left: 16px; padding-right: 16px; border-left: 1px solid var(--d2); }
.k-fn-col:first-child { padding-left: 0; border-left: none; }
.k-fn-col:last-child { padding-right: 0; }
.k-fn-col__head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--accent);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  text-transform: uppercase;
}
.k-fn-item {
  display: block;
  padding: 9px 0 10px;
  border-bottom: 1px solid var(--d15);
  text-decoration: none;
  color: inherit;
}
.k-fn-item:last-child { border-bottom: none; }
.k-fn-item__title { font-size: 15.5px; line-height: 1.25; min-height: 2.5em; }
.k-fn-item__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--d5);
  margin-top: 3px;
  text-transform: uppercase;
}

@media (max-width: 1179.98px) {
  .k-fn-section { margin: 32px 16px 0; }
  .k-fn-section__head { gap: 8px; padding-bottom: 6px; }
  .k-fn-section__title { font-size: 13px; letter-spacing: .16em; }
  .k-fn-section__sub { display: none; }
  .k-fn-section__all { font-size: 10px; padding: 5px 10px; }
  .k-fn-cols { display: block; margin-top: 0; }
  .k-fn-col { padding: 0; border-left: none; }
  .k-fn-col__head { border-bottom: none; padding: 10px 0 0; font-size: 10px; letter-spacing: .14em; }
  .k-fn-item { border-bottom: 1px solid var(--d15); padding: 4px 0 10px; }
  .k-fn-item__title { margin-top: 4px; }
  /* prototype mobile shows one footnote per type */
  .k-fn-col a.k-fn-item:not(:first-of-type) { display: none; }
}

/* --------------------------------------------------------------------------
   10. Subscribe banner — "Read and Correspond" letterpress plate
   (data-members-form; .success swaps to the oxblood confirmation)
   -------------------------------------------------------------------------- */
.k-subbanner {
  margin: 44px auto 52px;
  max-width: 960px;
  width: calc(100% - 64px);
  border: 1px solid var(--ink);
  background: #faf9f6;
  padding: 26px 32px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .85);
  /* back-out ease (the 1.56 is the ~3% overshoot — that IS the bounce);
     on the resting state so release eases back too. Colour props ride
     along for the day/night crossfade. */
  transition:
    transform .18s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .18s cubic-bezier(.34, 1.56, .64, 1),
    background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
@media (hover: hover) {
  .k-subbanner:not(.success):hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, .85);
  }
}
/* wraps so the site-wide patronage row can drop to its own full-width
   line beneath text + form (14px row gap ≈ the reader plate's rhythm) */
.k-subbanner__default { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 36px; }
.k-subbanner__text { flex: 1; }
.k-subbanner__title {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.12;
  color: var(--ink);
}
.k-subbanner__sub { font-size: 15.5px; line-height: 1.4; color: rgba(0, 0, 0, .6); margin-top: 6px; }
.k-subbanner__group {
  width: 360px;
  flex: none;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ink);
  background: #fffdf7;
}
.k-subbanner__group input[type="email"] {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 14px 15px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink);
  outline: none;
}
.k-subbanner__group input[type="email"]:focus { background: #f6ecec; }
.k-subbanner__group input[type="email"]::placeholder { color: var(--d45); }
.k-subbanner__group button {
  border: none;
  border-left: 1px solid var(--ink);
  background: var(--oxblood);
  padding: 0 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
  cursor: pointer;
  transition: transform .12s ease;
}
.k-subbanner__group button:hover { background: var(--oxblood-deep); }
.k-subbanner__group button:active { background: var(--oxblood-press); transform: translate(1px, 1px); }
/* success plate — swaps in place, no persistence */
.k-subbanner__done { display: none; align-items: center; gap: 18px; }
.k-subbanner.success { background: var(--oxblood); border-color: var(--oxblood); color: var(--cream); }
.k-subbanner.success .k-subbanner__default { display: none; }
.k-subbanner.success .k-subbanner__done { display: flex; }
.k-subbanner__check { font-family: var(--serif); font-size: 34px; line-height: 1; flex: none; }
.k-subbanner__donelabel {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(253, 246, 227, .72);
}
.k-subbanner__donemsg {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.3;
  margin-top: 3px;
}
/* night: same letterpress logic on the dark ground */
:root[data-mode="night"] .k-subbanner { background: var(--panel); }
:root[data-mode="night"] .k-subbanner__sub { color: var(--d6); }
:root[data-mode="night"] .k-subbanner__group { background: var(--ground); }
:root[data-mode="night"] .k-subbanner__group input[type="email"]:focus { background: #2A211F; }
:root[data-mode="night"] .k-subbanner.success { background: var(--oxblood); }

/* reader variant — lives in the essay column at the paragraph measure
   and stacks even on desktop (text above, form below, title centred) */
.k-subbanner--reader { margin: 44px 0 0; width: 100%; max-width: none; }
.k-subbanner--reader .k-subbanner__text { text-align: center; }
.k-subbanner--reader .k-subbanner__default { flex-direction: column; align-items: stretch; gap: 16px; }
.k-subbanner--reader .k-subbanner__group { width: 100%; }
/* no email box above it, so the alt door's divider (meant to separate it
   from the email section) would just be a stray rule under the title */
.k-subbanner--patron-only .k-subbanner__alt { margin-top: 0; padding-top: 0; border-top: none; }
/* nothing sits beside the text (no email group), so it already spans
   the full row — centre it to match the buttons below, and scale the
   whole plate down: two doors and a line of copy don't need the
   full-width email-plate's footprint */
.k-subbanner--patron-only { max-width: 600px; padding: 22px 28px; }
.k-subbanner--patron-only .k-subbanner__text { text-align: center; }
.k-subbanner--patron-only .k-subbanner__title { font-size: 19px; }
.k-subbanner--patron-only .k-subbanner__sub { font-size: 13.5px; }

/* the rail is the 560px mobile pillar below 1180 — the banner stacks at
   the SAME breakpoint, or its fixed-width form pops out of the plate */
@media (max-width: 1179.98px) {
  .k-subbanner { margin: 30px 16px 34px; width: auto; padding: 20px; }
  .k-subbanner__default { flex-direction: column; align-items: stretch; gap: 16px; }
  .k-subbanner__text { text-align: center; }   /* stacked plates centre their title */
  .k-subbanner__group { width: 100%; }
  /* the reader plate already sits in the padded column */
  .k-subbanner--reader { margin: 30px 0 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   11. Tree break + footer
   -------------------------------------------------------------------------- */
.k-tree-break {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 34px 28px 0;
}
.k-tree-break::before, .k-tree-break::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ink);
}
/* the footer's tree divider runs the full viewport width (the essay
   reader's mid-page tree-break keeps its column measure) */
.k-tree-break--bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.k-tree-break img {
  height: 36px;
  width: auto;
  filter: var(--treef);
  pointer-events: none;
}
@media (max-width: 1179.98px) {
  .k-tree-break { margin: 26px 16px 0; }
  .k-tree-break img { height: 28px; }
}

.k-footer__cols {
  display: flex;
  gap: 28px;
  padding: 22px 28px 0;
  align-items: stretch;
}
.k-footer__brand {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.k-footer__copyright {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--d5);
  text-transform: uppercase;
}
.k-footer__tagline {
  margin-top: 14px;
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.35;
  max-width: 230px;
}
.k-footer__harbour {
  align-self: flex-end;
  margin-top: -25px;
  flex: none;
  position: relative;
  filter: var(--treef);
  pointer-events: none;
}
.k-footer__harbour img { display: block; height: 600px; width: auto; }
.k-footer__links {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.k-footer__linkcols {
  display: flex;
  gap: 38px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 2.1;
}
.k-footer__linkcols a { color: var(--d55); cursor: pointer; text-decoration: none; display: block; width: fit-content; }
.k-footer__linkcols b { color: var(--ink); }
/* one-letter links (X): invisible padding widens the target so a
   near-miss still lands; the drawn underline stays inset on the glyph
   (see the hover rules in §24) */
.k-footer__linkcols a.k-hit-wide { padding: 0 14px; }
@media (min-width: 1180px) {
  .k-footer__linkcols a.k-hit-wide { margin-left: -14px; }
}

@media (max-width: 1179.98px) {
  /* stacked order: brand → links → harbour (the panorama closes the page) */
  .k-footer__cols { display: flex; flex-direction: column; padding: 14px 16px 0; }
  .k-footer__harbour { order: 3; }
  .k-footer__tagline { font-size: 15.5px; max-width: 240px; }
  .k-footer__linkcols {
    gap: 22px;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    letter-spacing: .08em;
    line-height: 2;
    margin-top: 8px;
  }
  /* fit-content anchors need auto margins to centre in the column */
  .k-footer__linkcols a { margin-left: auto; margin-right: auto; }
  .k-footer__linkcols > div { flex: 1; }
  .k-footer__links { display: block; }
  /* the art's diamond composition is sparse at its tip — pull it up so
     the visible city sits a line below the links */
  .k-footer__harbour { margin: -14px 0 0; width: 100%; align-self: auto; }
  .k-footer__harbour img { width: 100%; height: auto; max-width: none; }
}

/* --------------------------------------------------------------------------
   12. Issue page — see Footnotes-style table rules (.k-iss-row etc.)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   13. Essay (post.hbs)
   -------------------------------------------------------------------------- */
.k-essay-hero { position: relative; height: 500px; overflow: hidden; }
.k-essay-hero__art {
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  height: 84%;                        /* the processed plates carry frame
                                         padding — render the frame large so
                                         the artwork inside reads full-size */
  max-width: 78%;
  width: auto;
  filter: var(--treef);
  pointer-events: none;
  object-fit: contain;
}
.k-essay-hero__panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 110px 60px 6px; }
.k-essay-hero__panel--hatch {
  background: linear-gradient(var(--gr0), var(--gr97) 72%);
  padding: 60px 60px 26px;
}
.k-essay-hero--hatch { border-bottom: 1px solid var(--ink); }
.k-essay-hero--hatch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, var(--h1) 0, var(--h1) 9px, var(--h2) 9px, var(--h2) 18px);
}
/* capped at the halfway line; the panel is bottom-anchored, so a
   second line grows upward into the blank band, not down the page */
.k-essay-hero__title { font-size: 44px; font-weight: 500; line-height: 1.08; margin-top: 10px; max-width: 50%; }
.k-essay-hero__sub { margin-top: 10px; font-size: 19px; color: var(--d6); }
.k-essay-hero__credits {
  position: absolute;
  right: 60px;
  bottom: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--d55);
  line-height: 2.1;
  text-align: right;
  text-transform: uppercase;
}
.k-essay-hero__credits a { color: inherit; text-decoration: none; }

@media (max-width: 1179.98px) {
  .k-essay-hero { height: 470px; }
  .k-essay-hero__art { top: 28%; height: 54%; max-width: 94%; }
  .k-essay-hero__panel { padding: 70px 18px 16px; }
  .k-essay-hero__title { font-size: 31px; margin-top: 6px; max-width: none; }
  .k-essay-hero__sub { font-size: 14px; margin-top: 10px; }
  .k-essay-hero__credits {
    position: static;
    text-align: center;
    font-size: 10px;
    letter-spacing: .12em;
    margin-top: 12px;
    line-height: 1.9;
  }
}

.k-post-layout { display: flex; }
.k-post-layout__side { flex: 1; min-width: 260px; }
/* rails sit at the page edges — contents left, margin notes right,
   equidistant from the essay column */
.k-post-layout__side--left { display: flex; justify-content: flex-start; }
.k-post-layout__side:last-child { display: flex; justify-content: flex-end; }

/* TOC rail */
.k-toc-rail {
  width: 236px;
  padding: 26px 24px;
  position: sticky;
  top: 74px;
  align-self: flex-start;
}
.k-toc-rail__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--d55);
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  text-transform: uppercase;
}
.k-toc-rail__icon::before { content: "▾"; font-size: 14px; line-height: 1; }
.k-toc-rail.is-collapsed .k-toc-rail__icon::before { content: "▸"; }
:root[data-mode="night"] .k-toc-rail__icon::before { color: var(--amber); }
.k-toc-rail__body { display: block; }
.k-toc-rail.is-collapsed .k-toc-rail__body { display: none; }
/* the rail's top action reads as what it does */
.k-toc-rail__title {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--d55);
  margin: 16px 0 18px;
  cursor: pointer;
}
.k-toc-rail__title:hover { color: var(--accent); }
.k-toc-rail__list { display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; }
.k-toc-rail__item { color: var(--d55); cursor: pointer; text-decoration: none; }
.k-toc-rail__item.is-current { color: var(--accent); }
.k-toc-rail__item .k-toc-rail__n {
  font-family: var(--mono);
  font-size: 11.5px;
  display: inline-block;
  width: 26px;
}
.k-progress {
  margin-top: 20px;
  width: 2px;
  height: 60px;
  background: var(--d15);
  position: relative;
}
.k-progress__fill {
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  background: var(--accent);
  height: 0;
}
.k-progress-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--d45);
  margin-top: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* mobile TOC box — hangs from the pinned crumb bar like a drawer, all
   four edges in the bar's faint rule (the top overlaps it by the 1px
   when stuck) */
.k-toc-box {
  border: 1px solid var(--d15);
  padding: 12px 14px;
  margin: 0 8px 20px;
  position: sticky;
  top: 89px;                        /* navbar 52 + crumb bar 38 − 1 */
  z-index: 30;
  background: var(--ground);
  /* opaque wings past the 8px gutters — scrolling text disappears
     behind the box, not half-a-letter beside it (wider than the
     gutters so overhanging italics vanish too) */
  box-shadow: 16px 0 0 var(--ground), -16px 0 0 var(--ground);
}
.k-toc-box .k-toc-rail__toggle { width: 100%; }
.k-toc-box .k-toc-rail__mins { margin-left: auto; color: var(--d45); }
.k-toc-box .k-meter ~ .k-toc-rail__mins { margin-left: 10px; }
.k-toc-box .k-toc-rail__title { margin: 12px 0 0; }
.k-toc-box .k-toc-rail__list { gap: 10px; font-size: 14.5px; margin-top: 10px; }
.k-toc-box .k-toc-rail__item { color: inherit; }
.k-toc-box .k-toc-rail__n { width: 24px; color: var(--accent); }
.k-toc-box.is-collapsed .k-toc-rail__body { display: none; }

/* essay column */
/* 870px measure, but yields on narrow desktops (rails keep their 260px) */
.k-essay-col { flex: 0 1 870px; min-width: 560px; padding: 34px 40px 40px; }
.k-essay-col--center { width: 870px; max-width: 100%; margin: 0 auto; }
@media (max-width: 1179.98px) {
  .k-post-layout { display: block; }
  .k-post-layout__side { display: none; }
  .k-essay-col { width: auto; min-width: 0; padding: 22px 20px 24px; }
}

/* margin rail (right) */
.k-margin-rail { width: 236px; padding: 34px 24px; position: relative; }
.k-margin-rail__notes { position: absolute; top: 420px; left: 0; width: 212px; }
/* (the translate menu lived here until July 2026 — feature retired) */

/* --------------------------------------------------------------------------
   14. Essay content — Ghost {{content}} / .k-content
   Every element the theme can set (style specimen, essay2).
   -------------------------------------------------------------------------- */
.k-content { counter-reset: k-section; }
.k-content > p {
  margin: 0 0 22px;
  font-size: 19px;
  line-height: 1.65;
  text-wrap: pretty;
}
.k-content a {
  color: var(--link, var(--accent));
  border-bottom: 1px solid var(--link, var(--accent));
  text-decoration: none;
  cursor: pointer;
}
.k-content a:hover { color: var(--ink); border-color: var(--ink); }
.k-content code {
  font-family: var(--mono);
  font-size: 15.5px;
  background: var(--panel);
  padding: 1px 6px;
}
.k-content sup {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  line-height: 0;
}

/* drop cap on the opening paragraph — never italic, even when the
   opening word is <i>Kasurian</i> */
.k-content > p:first-of-type::first-letter {
  float: left;
  font-size: 66px;
  line-height: .78;
  padding: 8px 12px 0 0;
  font-weight: 500;
  font-style: normal;
  color: var(--accent);
}

/* headings — H2 carries the roman-numeral section kicker */
.k-content h1 { font-size: 42px; font-weight: 500; line-height: 1.15; margin: 46px 0 22px; }
/* essay section headers sit centred, numeral above */
.k-essay-col .k-content h2, .k-essay-col .k-content h3 { text-align: center; }
.k-content h2 {
  font-size: 31px;
  font-weight: 500;
  line-height: 1.15;
  margin: 46px 0 22px;
  counter-increment: k-section;
}
.k-content h2::before {
  content: counter(k-section, upper-roman);
  display: block;
  font-family: var(--mono);
  font-size: 15.5px;
  letter-spacing: .24em;
  color: var(--accent);
  margin-bottom: 6px;
  font-weight: 400;
}
.k-content h3 { font-size: 27px; font-weight: 500; line-height: 1.15; margin: 40px 0 18px; }
.k-content h4 { font-size: 24px; font-weight: 600; line-height: 1.25; margin: 36px 0 16px; }
.k-content h5 { font-size: 17.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; margin: 32px 0 14px; }
.k-content h6 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 32px 0 14px;
}

/* blockquote */
.k-content blockquote {
  margin: 0 0 22px;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--accent);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--d7);
}
.k-content blockquote cite {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  font-style: normal;
  color: var(--d55);
  margin-top: 8px;
  text-transform: uppercase;
}
/* the attribution line convention when an author sets it as bold text
   rather than a <cite> element (— Author, Title (Year)): the source
   line reads upright, and only a nested <em> (the work's title) stays
   italic — never the whole line */
.k-content blockquote strong { font-style: normal; }
.k-content blockquote strong em { font-style: italic; }

/* pull quote — Ghost "blockquote alt" */
.k-content blockquote.kg-blockquote-alt,
.k-content .k-pullquote {
  margin: 32px 0;
  border-left: none;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  padding: 18px 8px;
  text-align: center;
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: inherit;
}

/* lists */
.k-content ul { margin: 0 0 22px; padding-left: 22px; font-size: 19px; line-height: 1.65; }
.k-content ol { margin: 0 0 22px; padding-left: 24px; font-size: 19px; line-height: 1.65; }
.k-content li { margin-bottom: 8px; }
.k-content li:last-child { margin-bottom: 0; }

/* figures & captions (kg image / gallery cards) — reader images keep
   their day colours at night (no invert; only the plate art inverts) */
.k-content figure { margin: 32px 0; }
.k-content figure img { display: block; width: 100%; height: auto; }
.k-content figcaption {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--d55);
  margin-top: 8px;
  text-align: left;
}
.k-content .kg-image-card img { filter: none; }
.k-content .kg-width-wide { margin-left: -40px; margin-right: -40px; }
.k-content .kg-width-full {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
@media (min-width: 1180px) {
  /* full-bleed stops at the rail borders */
  .k-content .kg-width-full { margin-left: -300px; margin-right: -300px; max-width: none; }
}
@media (max-width: 1179.98px) {
  .k-content .kg-width-wide { margin-left: -20px; margin-right: -20px; }
  .k-content .kg-width-full { margin-left: -20px; margin-right: -20px; max-width: none; }
}

/* margin note — Ghost callout card doubles as the note */
.k-content .kg-callout-card,
.k-note {
  border-left: 1px solid var(--accent);
  background: var(--panel);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--d7);
  margin: 0 0 22px;
  border-radius: 0;
}
.k-margin-rail .k-note, .k-margin-rail .kg-callout-card { margin: 0 0 10px; }

/* hr + section-break tree */
.k-content hr {
  height: 1px;
  width: 96px;
  background: var(--ink);
  border: none;
  margin: 34px auto;
}

/* buttons / bookmark / embeds from the editor */
.k-content .kg-button-card a.kg-btn {
  display: inline-block;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
}
.k-content .kg-bookmark-container {
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--shdw);
  text-decoration: none;
  color: inherit;
}
.k-content .kg-embed-card { margin: 32px 0; }

@media (max-width: 1179.98px) {
  .k-content > p { margin: 0 0 18px; font-size: 17.5px; line-height: 1.6; }
  .k-content > p:first-of-type::first-letter { font-size: 56px; padding: 7px 10px 0 0; }
  .k-content h2 { font-size: 24px; }
  .k-content h2::before { font-size: 13px; margin-bottom: 5px; }
  .k-content blockquote.kg-blockquote-alt,
  .k-content .k-pullquote { margin: 22px 0; padding: 14px 6px; font-size: 19px; }
  .k-content .kg-callout-card, .k-note { padding: 9px 11px; font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
}

/* members gate — Ghost default CTA restyled */
.gh-post-upgrade-cta {
  border: 1px solid var(--ink);
  background: var(--panel) !important;
  padding: 26px 28px;
  text-align: center;
  border-radius: 0;
  margin: 32px 0;
}
.gh-post-upgrade-cta-content { background: none !important; border-radius: 0; }
.gh-post-upgrade-cta h2 {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.gh-post-upgrade-cta a,
.gh-post-upgrade-cta button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink) !important;
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
}

/* share row */
/* Share this essay — click-to-reveal row (design_handoff_share_row):
   a bordered mono button springs an icon tray open rightward; icons are
   one weight, monochrome, oxblood on hover with a 3px lift */
.k-sharerow { margin-top: 30px; display: flex; align-items: center; }
.k-sharerow__toggle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  background: var(--ground);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;                       /* only the icons give way — the
                                       button must not move or reflow */
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.k-sharerow__toggle:hover { background: var(--oxblood); color: var(--cream); }
.k-sharerow__arrow { display: inline-block; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.k-sharerow.is-open .k-sharerow__arrow { transform: rotate(180deg); }
.k-sharerow__tray {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding-left: 14px;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  flex: 0 1 auto;
  min-width: 0;
  transition: max-width .34s cubic-bezier(.34, 1.56, .64, 1), opacity .22s ease;
}
.k-sharerow.is-open .k-sharerow__tray { max-width: 420px; opacity: 1; }
.k-sharerow__icon {
  position: relative;
  width: 40px;                      /* definite width so the tray's auto
                                       basis counts 40px per icon, not
                                       the 19px glyph */
  height: 40px;
  flex: 0 1 40px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  transition: color .15s cubic-bezier(.34, 1.56, .64, 1), transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.k-sharerow__icon:hover { color: var(--oxblood); transform: translateY(-3px); }
:root[data-mode="night"] .k-sharerow__icon:hover { color: var(--amber); }
/* min() lets the drawing follow a flex-shrunk button; the viewBox keeps
   the glyph square inside the 19px viewport (meet) */
.k-sharerow__icon svg { width: min(19px, 88%); height: 19px; display: block; }
.k-sharerow__in { font-family: var(--mono); font-weight: 700; font-size: 14px; line-height: 1; position: relative; top: -1.5px; }
.k-sharerow__icon.is-done svg, .k-sharerow__icon.is-done .k-sharerow__in { opacity: 0; }
.k-sharerow__icon.is-done::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--oxblood);
}
:root[data-mode="night"] .k-sharerow__icon.is-done::after { color: var(--amber); }
@media (max-width: 759.98px) {
  /* one line always: the toggle slims and the icons flex-shrink so all
     eight stay beside the button — never a second row */
  .k-sharerow__toggle { font-size: 9.5px; letter-spacing: .14em; padding: 10px 12px; gap: 6px; }
  .k-sharerow__tray { gap: 3px; padding-left: 8px; }
  .k-sharerow__in { font-size: 12px; }
}
@media (max-width: 479.98px) {
  /* widen the container into the pillar's side padding — the icons get
     those pixels back */
  .k-sharerow { margin-left: -10px; margin-right: -10px; }
}
@media (max-width: 1179.98px) {
  .k-sharerow { margin-top: 22px; }
  .k-sharerow__tray { gap: 5px; padding-left: 10px; }
}

/* comments hook */
.k-comments { margin-top: 34px; }

/* --------------------------------------------------------------------------
   15. Footnotes page
   -------------------------------------------------------------------------- */
.k-glyph-legend {
  text-transform: uppercase;
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--d15);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--d7);
  flex-wrap: wrap;
}
.k-glyph-legend b { color: var(--accent); }
@media (max-width: 1179.98px) {
  .k-glyph-legend { gap: 12px; margin-top: 14px; padding: 8px 0; font-size: 10px; letter-spacing: .12em; }
}

.k-page-head .k-filterbar { margin: 14px 0 0; padding: 0; border-bottom: none; font-size: 11.5px; }
@media (max-width: 1179.98px) {
  .k-page-head .k-filterbar { margin-top: 10px; font-size: 10px; letter-spacing: .08em; }
  .k-page-head .k-drop__btn { padding: 3px 9px; }
}

.k-fn-group-head {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--d45);
  border-bottom: 1px solid var(--ink);
  padding: 22px 6px 7px;
  text-transform: uppercase;
}
.k-fn-group-head__spacer { width: 40px; flex: none; }
.k-fn-group-head__fill { flex: 1; }
.k-fn-group-head__words { width: 110px; flex: none; text-align: right; }
.k-fn-group-head__year { width: 92px; flex: none; text-align: right; }

.k-fn-row {
  display: flex;
  gap: 14px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--d15);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
.k-fn-row__glyph { font-family: var(--mono); font-size: 13px; color: var(--accent); width: 40px; flex: none; }
.k-fn-row__title { flex: 1; font-size: 19px; line-height: 1.25; }
.k-fn-row__author {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--d55);
  width: 110px;
  flex: none;
  text-align: right;
  text-transform: uppercase;
}
.k-fn-row__date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--d5);
  width: 92px;
  flex: none;
  text-align: right;
  text-transform: uppercase;
}
.k-fn-earlier {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--d45);
  padding: 16px 0 26px;
  text-transform: uppercase;
}
@media (max-width: 1179.98px) {
  .k-fn-group-head { padding: 18px 0 6px; display: block; text-align: right; border-bottom: 1px solid var(--ink); }
  .k-fn-group-head__spacer, .k-fn-group-head__fill, .k-fn-group-head__words { display: none; }
  .k-fn-group-head__year { width: auto; }
  .k-fn-row { gap: 8px; padding: 11px 2px; }
  .k-fn-row__glyph { font-size: 11.5px; width: 30px; }
  .k-fn-row__title { font-size: 15.5px; }
  .k-fn-row__author { display: none; }
  .k-fn-row__date { width: 64px; letter-spacing: .08em; }
  .k-fn-earlier { padding: 12px 0 0; letter-spacing: .12em; }
}

/* Issues — the same ledger-table pattern as Footnotes, grouped by issue
   instead of by year */
.k-iss-group-head {
  display: flex;
  gap: 26px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--d45);
  border-bottom: 1px solid var(--ink);
  padding: 22px 6px 7px;
  text-transform: uppercase;
}
.k-iss-group-head__fill { flex: 1; }
.k-iss-group-head__author { width: 140px; flex: none; text-align: right; }
.k-iss-group-head__theme { width: 170px; flex: none; text-align: right; }
.k-iss-group-head__date { width: 120px; flex: none; text-align: right; }
.k-iss-row {
  display: flex;
  gap: 26px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--d15);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
.k-iss-row__title { flex: 1; font-size: 19px; line-height: 1.25; }
.k-iss-row__author {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--d55);
  width: 140px;
  flex: none;
  text-align: right;
  text-transform: uppercase;
}
.k-iss-row__theme {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--d5);
  width: 170px;
  flex: none;
  text-align: right;
  text-transform: uppercase;
}
.k-iss-row__date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--d5);
  width: 120px;
  flex: none;
  text-align: right;
  text-transform: uppercase;
}
@media (max-width: 1179.98px) {
  .k-iss-group-head { padding: 18px 0 6px; gap: 8px; }
  .k-iss-row { gap: 8px; padding: 11px 2px; }
  .k-iss-row__title { font-size: 15.5px; }
  .k-iss-row__author, .k-iss-row__theme { display: none; }
  .k-iss-row__date { width: 76px; letter-spacing: .08em; }
  .k-iss-group-head__author, .k-iss-group-head__theme { display: none; }
  .k-iss-group-head__date { width: 76px; letter-spacing: .08em; }
}
/* filters — ruled off from the title/sub above, like Footnotes' glyph
   legend does with its own border-top; Issues has no legend, so the
   filterbar carries its own top rule instead. More air below the rule
   than the default filterbar gets — it was hugging the line. */
/* .k-page-head .k-filterbar (above) sets padding:0 at equal specificity
   to a bare .k-filterbar--ruled rule — qualify with .k-page-head too so
   the padding-top actually wins */
.k-page-head .k-filterbar--ruled { border-top: 1px solid var(--ink); padding-top: 24px; margin-top: 6px; }
/* a table of 30+ essays otherwise pushes the subscribe banner and
   footer far down the page — cap the visible rows and let the rest
   scroll inside the box (~20 rows at the desktop row height). Padding
   on the right keeps the scrollbar off the row content. */
[data-kas-iss-list] { max-height: 1080px; overflow-y: auto; padding-right: 14px; }
@media (max-width: 1179.98px) {
  [data-kas-iss-list] { max-height: 960px; padding-right: 8px; }
}

/* --------------------------------------------------------------------------
   16. Gallery
   -------------------------------------------------------------------------- */
/* one boxed wall of plates — the filters change what hangs on it; the
   grid re-columns so smaller selections render bigger (gallery.js sets
   --gcols) and only grows a scrollbar past four rows */
.k-gwall { margin: 22px 28px 0; border: 1px solid var(--ink); }
.k-gwall__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  gap: 8px;
}
.k-gwall__title { color: var(--accent); }
.k-gwall__count { color: var(--d45); flex: none; }
.k-gwall__grid {
  display: grid;
  grid-template-columns: repeat(var(--gcols, 4), 1fr);
  gap: 22px;
  padding: 24px;
  background: repeating-linear-gradient(45deg, var(--h1) 0, var(--h1) 9px, var(--h2) 9px, var(--h2) 18px);
}
.k-gwall--scroll .k-gwall__grid { overflow-y: auto; }

.k-plate { perspective: 1600px; }
.k-plate__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 296 / 336;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4, .12, .2, 1);
  transform: rotateY(0deg);
  cursor: pointer;
}
.k-plate.is-flipped .k-plate__inner { transform: rotateY(180deg); }

.k-plate__front, .k-plate__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--ink);
  box-shadow: 5px 6px 0 var(--shdw);
  display: flex;
  flex-direction: column;
}
.k-plate__front { background: var(--ground); padding: 14px 14px 0; }
.k-plate__back {
  transform: rotateY(180deg);
  background: var(--panel);
  padding: 16px 17px;
  overflow: hidden;
}

.k-plate__topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--d55);
}
.k-plate__no { color: var(--accent); }
.k-plate__imgwrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 6px 0;
}
.k-plate__imgwrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: var(--treef);
}
/* colour plates: the ink keeps its colour in night mode — no invert,
   and no paper backing either: the transparent PNG sits directly on
   the page ground, day and night, like every other plate. */
.k-plate--colour .k-plate__imgwrap img,
.k-gindex__row--colour .k-gindex__thumb img,
.k-essay-hero__art--colour { filter: none !important; }
/* the flip affordance is a real button (keyboard path); the card face
   itself stays a plain click target so links inside remain unnested */
button.k-plate__turn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  /* the turn affordances are quiet mono-caps chips on both faces */
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.k-plate__foot {
  flex: none;
  border-top: 1px solid var(--ink);
  padding: 10px 2px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
/* room for a two-line essay title */
.k-plate__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.2;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-plate__turn { flex: none; padding-bottom: 3px; }

.k-plate__backbody { flex: 0 1 auto; min-height: 0; overflow: hidden; margin-top: 8px; }
.k-plate__note { font-size: 13.5px; line-height: 1.5; margin-top: 10px; text-wrap: pretty; }
.k-plate__excerpt {
  border-left: 2.5px solid var(--accent);
  padding-left: 11px;
  margin-top: 11px;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
}
/* the Read pill floats to the centre of whatever space the note
   leaves — with no copy on the back, that is the middle of the card */
.k-plate__actions { flex: none; padding-top: 12px; margin: auto 0; text-align: center; }
.k-plate__shop {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 8px;
  border: 1px solid var(--accent);
  cursor: pointer;
  user-select: none;
  margin-bottom: 7px;
  background: none;
  text-decoration: none;
}
.k-plate__read {
  display: inline-block;
  max-width: 100%;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 11px 8px;
  border: 1px solid var(--accent);
}

@media (max-width: 1179.98px) {
  .k-gwall { margin: 18px 16px 0; }
  .k-gwall__head { padding: 10px 14px; font-size: 9px; letter-spacing: .16em; }
  /* mobile: one horizontal strip (page scroll stays free; gallery.js
     caps the strip at 12 plates) */
  .k-gwall__grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none !important;
    gap: 16px;
    padding: 18px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .k-gwall__grid .k-plate { flex: none; width: 76vw; max-width: 320px; scroll-snap-align: start; }
  .k-plate { width: 272px; }
  .k-plate__inner { height: 400px; }
  .k-plate__front { padding: 16px 16px 0; }
  .k-plate__back { padding: 18px; }
  .k-plate__topline { font-size: 9px; }
  .k-plate__imgwrap { margin: 8px 0; }
  .k-plate__foot { padding: 12px 2px 14px; }
  .k-plate__name { font-size: 20px; }
  .k-plate__turn { font-size: 8.5px; }
  .k-plate__turn .k-turn { display: none; }
  .k-plate__turn .k-tap { display: inline; }
  .k-plate__note { font-size: 14px; margin-top: 11px; }
  .k-plate__excerpt { padding-left: 12px; margin-top: 12px; font-size: 14px; line-height: 1.42; }
  .k-plate__actions { padding-top: 14px; }
  .k-plate__shop { font-size: 10px; padding: 10px 8px; margin-bottom: 8px; }
  .k-plate__read { font-size: 10px; padding: 13px 8px; }
}

/* gallery index view */
.k-gindex { margin: 22px 28px 8px; border: 1px solid var(--ink); }
.k-gindex__head {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--d45);
  border-bottom: 1px solid var(--ink);
  padding: 10px 16px;
  text-transform: uppercase;
}
.k-gindex__head .c-num { width: 30px; flex: none; }
.k-gindex__head .c-plate { width: 64px; flex: none; }
.k-gindex__head .c-title, .k-gindex__head .c-essay { flex: 1; }
.k-gindex__head .c-issue { width: 76px; flex: none; text-align: right; }
.k-gindex__head .c-year { width: 44px; flex: none; text-align: right; }

.k-gindex__row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--d15);
  text-decoration: none;
  color: inherit;
}
.k-gindex__row:last-child { border-bottom: none; }
.k-gindex__num { font-family: var(--mono); font-size: 12px; color: var(--accent); width: 30px; flex: none; }
.k-gindex__thumb {
  width: 64px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.k-gindex__thumb img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; filter: var(--treef); }
.k-gindex__name { flex: 1; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.2; }
.k-gindex__essay { flex: 1; font-size: 14px; font-style: italic; color: var(--d6); }
.k-gindex__issue {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--d55);
  width: 76px;
  flex: none;
  text-align: right;
  text-transform: uppercase;
}
.k-gindex__year {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--d5);
  width: 44px;
  flex: none;
  text-align: right;
}

@media (max-width: 1179.98px) {
  .k-gindex { margin: 18px 16px 8px; }
  .k-gindex__head { display: none; }
  .k-gindex__row { gap: 12px; padding: 10px 12px; }
  .k-gindex__num { font-size: 11px; width: 22px; }
  .k-gindex__thumb { width: 50px; height: 40px; }
  .k-gindex__name { font-size: 17px; line-height: 1.15; }
  .k-gindex__namewrap { flex: 1; min-width: 0; }
  .k-gindex__essay { display: block; flex: none; font-size: 12.5px; margin-top: 2px; }
  .k-gindex__right {
    flex: none;
    text-align: right;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: .12em;
    color: var(--d5);
    line-height: 1.7;
    text-transform: uppercase;
  }
  .k-gindex__issue, .k-gindex__year { display: none; }
}
@media (min-width: 1180px) {
  .k-gindex__namewrap { display: contents; }
  .k-gindex__right { display: contents; }
}

/* --------------------------------------------------------------------------
   17. Shop
   -------------------------------------------------------------------------- */
.k-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 22px 28px 8px;
}
.k-product {
  border: 1px solid var(--ink);
  background: var(--ground);
  box-shadow: 5px 6px 0 var(--shdw);
  display: flex;
  flex-direction: column;
}
.k-product__media {
  position: relative;
  height: 212px;
  border-bottom: 1px solid var(--ink);
  background: repeating-linear-gradient(45deg, var(--h1) 0, var(--h1) 9px, var(--h2) 9px, var(--h2) 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.k-product__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: var(--treef);
}
.k-product__cover {
  position: absolute;
  inset: 14px;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 10px;
}
.k-product__cover-brand { font-family: var(--mono); font-size: 8px; letter-spacing: .26em; }
.k-product__cover-title { font-family: var(--serif); font-size: 26px; line-height: 1; }
.k-product__cover-season { font-style: italic; font-size: 13px; }
.k-product__type {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
  border: 1px solid var(--ink);
  background: var(--ground);
  padding: 3px 7px;
  text-transform: uppercase;
  color: var(--ink);
}
.k-product__qty {
  display: none;
  position: absolute;
  right: 10px;
  top: 10px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 3px 7px;
}
.k-product__qty.is-visible { display: inline-block; }
.k-product__body {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.k-product__titlerow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.k-product__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.1;
}
.k-product__price { font-family: var(--mono); font-size: 12px; color: var(--accent); flex: none; }
.k-product__meta {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--d55);
}
.k-product__sizes { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.k-size {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  padding: 3px 9px;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--d35);
  background: transparent;
  color: var(--d55);
}
.k-size.is-active { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.k-product__add {
  margin-top: auto;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  padding: 10px 8px;
  cursor: pointer;
  user-select: none;
  border: none;
  text-transform: uppercase;
}
.k-shop-note {
  margin: 18px 28px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--d45);
  text-transform: uppercase;
}

@media (max-width: 1179.98px) {
  .k-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 16px 8px; }
  .k-product { box-shadow: 4px 5px 0 var(--shdw); }
  .k-product__media { height: 140px; padding: 10px; }
  .k-product__cover-brand { font-size: 7px; letter-spacing: .2em; }
  .k-product__cover-title { font-size: 19px; }
  .k-product__cover-season { font-size: 11px; }
  .k-product__body { padding: 10px 11px 11px; gap: 5px; }
  .k-product__title { font-size: 15.5px; line-height: 1.12; }
  .k-product__meta { font-size: 7.5px; letter-spacing: .08em; }
  .k-product__titlerow { display: block; }
  .k-product__add { font-size: 8px; letter-spacing: .1em; padding: 8px 10px; margin-top: 0; white-space: nowrap; }
  .k-product__buyrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
  }
  .k-product__buyrow .k-product__price { font-size: 11px; }
  .k-shop-note { margin: 14px 16px 0; font-size: 8px; letter-spacing: .14em; line-height: 1.8; }
}
@media (min-width: 1180px) {
  .k-product__buyrow { display: contents; }
}

/* cart bar + toasts */
.k-cartbar {
  text-transform: uppercase;
  display: none;
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 110;
  border: 1px solid var(--ink);
  background: var(--ground);
  box-shadow: 5px 5px 0 var(--shdw);
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  gap: 13px;
  align-items: center;
  white-space: nowrap;
}
.k-cartbar.is-visible { display: flex; }
.k-cartbar__checkout {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
  border: none;
  font: inherit;
  letter-spacing: inherit;
}
.k-cartbar__empty {
  cursor: pointer;
  color: var(--d5);
  border: none;
  border-bottom: 1px solid var(--d35);
  font-size: 9px;
  background: none;
  font-family: inherit;
  letter-spacing: inherit;
  padding: 0;
}

.k-toast {
  text-transform: uppercase;
  display: none;
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 120;
  border: 1px solid var(--ink);
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--shdw);
  padding: 13px 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  gap: 16px;
  align-items: center;
  white-space: nowrap;
  color: var(--ink);
}
.k-toast.is-visible { display: flex; }
.k-toast__close {
  cursor: pointer;
  border: 1px solid var(--ink);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: none;
  color: inherit;
  padding: 0;
}
@media (max-width: 640px) {
  .k-toast { max-width: calc(100vw - 24px); white-space: normal; }
  /* full-width row on mobile so the label doesn't stack letter-by-letter */
  .k-cartbar { left: 12px; right: 12px; transform: none; max-width: none; }
  .k-cartbar [data-kas-cart-label] { flex: 1; }
}

/* --------------------------------------------------------------------------
   18. Subscribe
   -------------------------------------------------------------------------- */
.k-sub-hero { padding: 46px 60px 40px; text-align: center; }
.k-sub-hero__arch {
  display: block;
  margin: 0 auto 26px;
  width: auto;
  height: auto;
  max-width: 92%;
  max-height: 560px;
  filter: var(--treef);
  pointer-events: none;
}
.k-sub-hero__title { font-size: 42px; font-weight: 500; line-height: 1.15; margin-top: 12px; }
.k-sub-hero__sub {
  font-size: 17.5px;
  color: var(--d55);
  margin-top: 10px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.k-billing {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-family: var(--mono);
}
.k-billing__chip {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .14em;
  padding: 5px 14px;
  cursor: pointer;
  font-family: var(--mono);
  border: 1px solid var(--d35);
  background: transparent;
  color: var(--d6);
  user-select: none;
}
.k-billing__chip.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ground);
}
:root[data-mode="night"] .k-billing__chip.is-active { color: var(--oxblood); }

.k-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
  text-align: left;
}
.k-tier {
  cursor: pointer;
  border: 1px solid var(--ink);
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  text-align: left;   /* free tier renders as a <button> */
  font: inherit;
}
.k-tier--free { background: var(--ground); color: var(--ink); }
.k-tier--1 { background: var(--oxblood); color: var(--cream); }
.k-tier--2 { background: var(--pblue); color: var(--cream); }
.k-tier--3 { background: var(--pgreen); color: var(--cream); }
.k-tier__name {
  font-family: var(--mono);
  font-size: 15.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);              /* full cream — the .65 read as grey */
}
.k-tier--free .k-tier__name { color: var(--tier); }
.k-tier__price { font-size: 31px; margin-top: 8px; }
.k-tier__per { font-size: 15.5px; color: rgba(253, 246, 227, .65); }
.k-tier--free .k-tier__per { color: var(--d55); }
.k-tier__note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(253, 246, 227, .55);
  margin-top: 4px;
  text-transform: uppercase;
}
.k-tier--free .k-tier__note { color: var(--d55); }
.k-tier__plus {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  margin-top: 14px;
  text-transform: uppercase;
}
.k-tier__benefit {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: rgba(253, 246, 227, .85);
  margin-top: 8px;
  display: flex;
  gap: 7px;
}
.k-tier--free .k-tier__benefit { color: var(--d7); }
.k-tier__benefit .k-glyph { flex: none; }

/* the fineprint sits between the billing toggle and the tier cards */
.k-sub-fineprint {
  margin: 16px auto 0;
  max-width: 900px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 2.1;
  color: var(--d55);
  text-transform: uppercase;
}
/* Benefactor + Donations share the row beneath the tiers */
.k-benefactor {
  grid-column: 1 / span 2;
  border: 1px solid var(--pteal); /* the Benefactor wears the autumn teal */
  background: var(--panel);
  padding: 14px 16px;
  text-align: left;
}
.k-benefactor__name {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
/* matches the Donations plate's body type — the two boxes read as twins */
.k-benefactor__body { font-size: 15px; line-height: 1.5; margin-top: 8px; }
.k-benefactor__mail {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  text-decoration: none;
}

@media (max-width: 1179.98px) {
  .k-sub-hero { padding: 24px 16px; }
  .k-sub-hero__arch { max-height: 340px; max-width: 96%; margin-bottom: 18px; }
  .k-sub-hero__title { font-size: 31px; margin-top: 8px; }
  .k-sub-hero__sub { font-size: 13px; margin-top: 8px; max-width: 270px; }
  .k-billing { gap: 6px; margin-top: 18px; }
  .k-tiers { display: block; }
  .k-tier { width: 100%; padding: 16px 16px 18px; margin-top: 10px; }
  .k-tier__headrow { display: flex; align-items: baseline; }
  .k-tier__headrow .k-tier__name { font-size: 14px; }
  .k-tier__headrow .k-tier__price { margin-left: auto; font-size: 24px; margin-top: 0; }
  .k-tier__headrow .k-tier__per { font-size: 11.5px; }
  .k-tier__note { text-align: right; margin-top: 2px; }
  .k-tier__plus { font-size: 9px; margin-top: 10px; }
  .k-tier__benefit { font-size: 10px; line-height: 1.6; margin-top: 6px; gap: 6px; }
  .k-benefactor { margin-top: 10px; padding: 12px 14px; }
  .k-donate { margin-top: 10px; padding: 12px 14px; }
  .k-benefactor__name { font-size: 10px; letter-spacing: .22em; }
  .k-benefactor__body { margin-top: 6px; }
  .k-benefactor__mail { font-size: 10px; }
  .k-sub-fineprint { margin-top: 12px; line-height: 2; }
}
@media (min-width: 1180px) {
  .k-tier__headrow { display: contents; }
}

/* --------------------------------------------------------------------------
   19. Generic pages (About / Write) & archives
   -------------------------------------------------------------------------- */
.k-page-kicker { max-width: 860px; margin: 0 auto; padding: 40px 40px 0; }
.k-page-content { max-width: 760px; margin: 0 auto; padding: 52px 40px 46px; }
.k-page-content--narrow { max-width: 660px; padding: 34px 40px 44px; }
@media (max-width: 1179.98px) {
  .k-page-kicker { padding: 18px 16px 0; }
  .k-page-content { padding: 24px 18px; }
  .k-page-content--narrow { padding: 22px 20px 24px; }
}

/* about numbered rows */
/* About reads at the essay-reader standard — the 00N number column is
   retired, and hidden wherever old row markup survives in content */
.k-about-row { display: block; }
.k-about-row + .k-about-row { margin-top: 22px; }
.k-about-row__num { display: none; }
.k-about-row__body, .k-about-row__lede { font-size: 19px; line-height: 1.65; }
.k-masthead {
  margin: 40px auto 0;
  border: 1px solid var(--ink);
  padding: 20px 22px 22px;
  max-width: 460px;
}
.k-masthead__kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.k-masthead__list {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 2.3;
  margin-top: 10px;
  color: var(--d7);
  text-transform: uppercase;
}
.k-masthead__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
}
.k-masthead__actions .k-btn { padding: 9px 16px; font-size: 11.5px; }
@media (max-width: 1179.98px) {
  .k-about-row + .k-about-row { margin-top: 20px; }
  .k-about-row__body { font-size: 15.5px; }
  .k-masthead { margin-top: 28px; }
  .k-masthead__list { font-size: 11.5px; line-height: 2.2; margin-top: 8px; }
  .k-masthead__actions { flex-direction: column; gap: 8px; margin-top: 14px; text-align: center; }
  .k-masthead__actions .k-btn { padding: 10px 0; }
}

/* write hero */
.k-write-hero {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 26px 60px;
  border-bottom: 1px solid var(--ink);
}
.k-write-hero__main { flex: 1; }
.k-write-hero__title { font-size: 52px; font-weight: 500; line-height: 1.05; margin-top: 10px; }
.k-write-hero__sub { margin-top: 10px; font-size: 19px; color: var(--d6); }
.k-write-hero__art {
  /* one equal footprint on About and Write for Us — the fixed box +
     object-fit keeps both plates the same size and position whatever
     their aspect (doubled from the old 240px line) */
  height: 480px;
  width: 480px;
  object-fit: contain;
  object-position: center;
  align-self: center;
  flex: none;
  filter: var(--treef);
  pointer-events: none;
}
/* wide plates with drawn margins (the compass grid) crop to fill the
   square, matching the gateway's visual weight */
.k-write-hero__art--fill { object-fit: cover; }
/* reader-template pages: the tree break below is the divider — no rule */
.k-write-hero--reader { border-bottom: none; }
@media (max-width: 1179.98px) {
  .k-write-hero { gap: 14px; padding: 18px 16px; }
  .k-write-hero__title { font-size: 27px; margin-top: 6px; }
  .k-write-hero__sub { font-size: 13px; margin-top: 8px; }
  .k-write-hero__art { height: 260px; width: 100%; max-width: 260px; }
}

/* pagination */
.k-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 40px 26px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--d45);
  text-transform: uppercase;
}
.k-pagination a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
@media (max-width: 1179.98px) {
  .k-pagination { padding: 8px 16px 20px; }
}

/* --------------------------------------------------------------------------
   20. Popup + free-signup modal + checkout toast
   -------------------------------------------------------------------------- */
.k-popup {
  --popr: max(26px, calc(50vw - 694px)); /* 26px inside the 1440px rail */
  position: fixed;
  right: var(--popr);
  bottom: 24px;
  width: 560px;
  max-width: calc(100vw - 32px);
  z-index: 60;
  border: 1px solid var(--ink);
  background: var(--ground);
  box-shadow: 6px 6px 0 var(--shdw);
  /* its own width + the right offset — fully off-screen at any viewport */
  transform: translateX(calc(100% + var(--popr) + 12px));
  visibility: hidden;
  transition: transform .5s cubic-bezier(.22, .7, .3, 1), visibility 0s linear .5s,
    background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  pointer-events: none;
}
.k-popup.is-visible {
  transform: translateX(0);
  visibility: visible;
  transition: transform .5s cubic-bezier(.22, .7, .3, 1),
    background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .k-popup { transition: none; }
}
.k-popup__close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  font-family: var(--mono);
  background: none;
  color: inherit;
  padding: 0;
}
.k-popup__body { padding: 32px 34px 26px; }
.k-popup__lede { font-style: italic; font-size: 27px; line-height: 1.35; margin-top: 12px; }
.k-popup__lede .k-upright { font-style: normal; }
/* popup carries the Read-and-Correspond plate: italic title, muted
   subline, the banner's joined input group, oxblood success swap */
.k-popup__title { font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.15; margin-top: 10px; }
.k-popup__sub { font-size: 15px; line-height: 1.4; color: var(--d6); margin-top: 6px; }
.k-popup__form { display: block; margin-top: 18px; }
.k-popup__form .k-subbanner__group { width: 100%; }
.k-popup__form .k-subbanner__done {
  background: var(--oxblood);
  border: 1px solid var(--oxblood);
  color: var(--cream);
  padding: 14px 16px;
}
.k-popup__form .k-subbanner__donemsg { font-size: 16.5px; }
.k-popup__form.success .k-subbanner__group { display: none; }
.k-popup__form.success .k-subbanner__done { display: flex; }
/* members-form button label states (the free modal still uses these) */
.k-form-success { display: none; }
form.success .k-form-sub { display: none; }
form.success .k-form-success { display: inline-block; }
.k-popup__upgrade {
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 13px 20px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  cursor: pointer;
  margin-top: 22px;
}
.k-popup__notnow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--d5);
  margin-top: 16px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--d35);
  display: inline-block;
  background: none;
  padding: 0;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .k-popup { --popr: max(16px, calc(50vw - 280px)); } /* centred on mobile */
  .k-popup__body { padding: 24px 20px 20px; }
  .k-popup__lede { font-size: 21px; }
  .k-popup__title { font-size: 20px; }
}

/* free signup modal */
.k-modal { display: none; }
.k-modal.is-visible { display: block; }
.k-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 118;
  background: rgba(0, 0, 0, .25);
  border: none;
  padding: 0;
}
.k-modal__card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 430px;
  max-width: 88vw;
  z-index: 121;   /* above the shop toast (120) when both are up */
  border: 1px solid var(--ink);
  background: var(--ground);
  box-shadow: 6px 6px 0 var(--shdw);
  padding: 28px 30px 24px;
}
.k-modal__close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  cursor: pointer;
  font-family: var(--mono);
  background: none;
  color: inherit;
  padding: 0;
}
.k-modal__kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.k-modal__lede { font-style: italic; font-size: 24px; line-height: 1.35; margin-top: 10px; }
.k-modal__form { display: flex; gap: 9px; margin-top: 18px; }
.k-modal__form input[type="email"] {
  flex: 1;
  border: 1px solid var(--ink);
  background: var(--ground);
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
}
.k-modal__form input[type="email"]::placeholder { color: var(--d45); }
.k-modal__form button {
  text-transform: uppercase;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 11px 17px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   21. RTL support ({{t}} / dir=rtl for ar & ur)
   -------------------------------------------------------------------------- */
[dir="rtl"] .k-content > p:first-of-type::first-letter { float: right; padding: 8px 0 0 12px; }
[dir="rtl"] .k-content blockquote { border-left: none; border-right: 1px solid var(--accent); padding: 4px 20px 4px 0; }
[dir="rtl"] .k-note, [dir="rtl"] .k-content .kg-callout-card { border-left: none; border-right: 1px solid var(--accent); }

/* --------------------------------------------------------------------------
   22. Ghost misc — keep every feature reachable
   -------------------------------------------------------------------------- */
.koenig-lexical, .kg-prose { font-family: var(--serif); }

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

@media (prefers-reduced-motion: reduce) {
  .k-plate__inner { transition: none; }
}

/* --------------------------------------------------------------------------
   23. Late overrides
   -------------------------------------------------------------------------- */
/* TURN (desktop) vs TAP (mobile) hints — covers foot + back-hint */
.k-plate .k-tap { display: none; }
.k-plate .k-turn { display: inline; }
@media (max-width: 1179.98px) {
  .k-plate .k-turn { display: none; }
  .k-plate .k-tap { display: inline; }
}

/* an essay that opens on one or more blockquotes reads as an epigraph —
   quiet border, verse size. theme.js marks the WHOLE leading run (not
   just the first) so three stacked opening quotes read as one register,
   not one quiet epigraph followed by two loud pull-quotes. */
.k-content blockquote.k-epigraph {
  border-left-color: var(--d15);
  font-size: 15.5px;
  line-height: 1.7;
  color: inherit;
  padding: 2px 0 2px 20px;
  margin-bottom: 36px;
}
[dir="rtl"] .k-content blockquote.k-epigraph { border-right-color: var(--d15); }
.k-content blockquote.k-epigraph p { margin: 0 0 20px; }
.k-content blockquote.k-epigraph p:last-of-type { margin-bottom: 0; }

.k-upright, .k-roman { font-style: normal; }

/* --------------------------------------------------------------------------
   24. Motion — one vocabulary: the house ease, two durations, transform +
   opacity only. Everything yields to prefers-reduced-motion.
   -------------------------------------------------------------------------- */
:root { --ease: cubic-bezier(.22, .7, .3, 1); --t-fast: .16s; --t-med: .26s; }

/* the brand name renders italic in prose (wrapped by theme.js) */
.k-brand { font-style: italic; }

/* day/night cross-fades instead of snapping */
body, .k-rail, .k-header, .k-crumbbar, .k-footer, .k-menu, .k-cartbar,
.k-plate__front, .k-plate__back, .k-toc-box {
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* the subscribe banner and popup keep their own motion — their transitions
   (mode crossfade included) live with their component rules, not here:
   listing them here would clobber the spring/slide (it happened) */
img { transition: filter .25s var(--ease); }
.k-mode__sun, .k-mode__moon { transition: opacity .22s var(--ease), transform .4s var(--ease); }

/* cards lift toward the reader */
.k-essay-card, .k-letter-card, .k-product, .k-tier, .k-plate {
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .k-essay-card:hover, .k-letter-card:hover, .k-product:hover, .k-tier:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px -14px var(--shdw);
  }
  .k-essay-card__img img { transition: transform .35s var(--ease), filter .25s var(--ease); }
  .k-essay-card:hover .k-essay-card__img img { transform: scale(1.03); }
  .k-plate:hover:not(.is-flipped) { transform: translateY(-3px); box-shadow: 0 14px 26px -14px var(--shdw); }
  .k-plate:hover:not(.is-flipped) .k-plate__inner { transform: rotateY(7deg); }
  .k-hero-card__read, .k-letter-card__read { transition: transform var(--t-fast) var(--ease); }
  .k-hero-card__panel:hover .k-hero-card__read,
  .k-letter-card:hover .k-letter-card__read { transform: translateX(4px); }
  /* footer links: the underline draws itself */
  .k-footer__linkcols a {
    background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
    transition: background-size .2s var(--ease), color .2s var(--ease);
  }
  .k-footer__linkcols a:hover { background-size: 100% 1px; }
  .k-footer__linkcols a.k-hit-wide { background-position: 14px bottom; }
  .k-footer__linkcols a.k-hit-wide:hover { background-size: calc(100% - 28px) 1px; }
}
.k-btn:active, .k-drop__btn:active, .k-plate__turn:active,
.k-popup__form button:active { transform: translateY(1px); }
/* (the subscribe banner button presses translate(1px,1px) — see §10) */

/* the home hero plate drifts almost imperceptibly with the scroll */
/* keep the centring translate — scale alone would unseat the art */
.k-hero-card__art { transform: translate(-50%, -50%) scale(var(--kas-drift, 1)); transform-origin: 50% 60%; }

/* reveal-on-enter — the class is added by JS only, so content is never
   hidden without it; --rev-d staggers siblings */
.k-reveal { opacity: 0; transform: translateY(12px); }
.k-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--ease) var(--rev-d, 0s), transform .45s var(--ease) var(--rev-d, 0s);
}

/* dropdown + menu entrances */
.k-drop.is-open .k-drop__list { animation: kasDropIn .16s var(--ease); }
.k-menu.is-open { animation: kasDropIn .18s var(--ease); }
.k-menu.is-open a { animation: kasFadeUp .25s var(--ease) backwards; }
.k-menu.is-open a:nth-child(2) { animation-delay: .03s; }
.k-menu.is-open a:nth-child(3) { animation-delay: .06s; }
.k-menu.is-open a:nth-child(4) { animation-delay: .09s; }
.k-menu.is-open a:nth-child(5) { animation-delay: .12s; }
.k-menu.is-open a:nth-child(6) { animation-delay: .15s; }
@keyframes kasDropIn { from { opacity: 0; transform: translateY(-6px); } }
@keyframes kasFadeUp { from { opacity: 0; transform: translateY(6px); } }

/* burger morphs into a close mark */
.k-burger span { transition: transform .22s var(--ease), opacity .16s var(--ease); }
.k-burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.k-burger.is-open span:nth-child(2) { opacity: 0; }
.k-burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* essay hero art arrives, doesn't pop */
.k-post .k-essay-hero__art { animation: kasHeroIn .55s var(--ease) both; }
@keyframes kasHeroIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* progress flows, TOC glides */
.k-progress__fill { transition: height .18s linear; }
.k-toc-rail__item { transition: color .15s var(--ease); }

/* margin notes drift in beside their paragraph */
.k-notewrap { animation: kasNoteIn .4s var(--ease) both; }
@keyframes kasNoteIn { from { opacity: 0; transform: translateX(10px); } }

/* cart bar rises; counters tick; prices swap softly */
@media (min-width: 1180px) { .k-cartbar.is-visible { animation: kasBarUpD .24s var(--ease); } }
@media (max-width: 1179.98px) { .k-cartbar.is-visible { animation: kasBarUpM .24s var(--ease); } }
@keyframes kasBarUpD { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes kasBarUpM { from { opacity: 0; transform: translateY(10px); } }
.k-tick { animation: kasTick .3s var(--ease); }
@keyframes kasTick { 50% { transform: scale(1.15); } }
.k-swap, .k-anim-pop { animation: kasFadeUp .22s var(--ease); }

/* one switch turns it all off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
  .k-reveal { opacity: 1; transform: none; }
  .k-hero-card__art { transform: translate(-50%, -50%); }
}

/* --------------------------------------------------------------------------
   25. Steady art state (TEST — home cards only)
   Repo plates (bundled from art/ at deploy) replace CMS feature images
   on the In Season cards; theme.js does the swap (KAS_HOME_REPO_ART).
   Plates are transparent etchings, so they sit contained on the hatch
   rather than cover-cropped, and invert with the night filter.
   -------------------------------------------------------------------------- */
.k-essay-card__img--plate img {
  inset: 0;
  margin: auto;
  width: auto;
  height: 84%;
  max-width: 92%;
  object-fit: contain;
  filter: var(--treef);
}
.k-home-list-m__thumb--plate img {
  object-fit: contain;
  padding: 3px;
  filter: var(--treef);
}
/* colour plates never invert — and sit straight on the ground, no paper */
.k-plateimg--colour img { filter: none !important; }

/* accent-surface cards keep their cream text on hover (the global
   a:hover ink would blacken them) */
.k-tier--1:hover, .k-tier--2:hover, .k-tier--3:hover { color: var(--cream); }

/* --------------------------------------------------------------------------
   26. Gallery lightbox — full-screen plate view (⛶ on each plate)
   -------------------------------------------------------------------------- */
.k-plate__zoom {
  font-size: 19px;
  line-height: 1;
  color: var(--d6);
  padding: 2px 0 2px 8px;
}
.k-plate__zoom:hover { color: var(--accent); }
.k-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-lightbox[hidden] { display: none; }
.k-lightbox__backdrop { position: absolute; inset: 0; background: var(--gr97); cursor: zoom-out; }
.k-lightbox__fig {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;        /* clicks fall through to the backdrop */
  animation: kasLightIn .25s var(--ease, ease) both;
}
@keyframes kasLightIn { from { opacity: 0; transform: scale(.97); } }
.k-lightbox__img {
  max-width: 90vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  filter: var(--treef);
}
.k-lightbox--colour .k-lightbox__img { filter: none; }
.k-lightbox__cap {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  max-width: 88vw;
}
.k-lightbox__cap-no, .k-lightbox__cap-title { display: block; }
.k-lightbox__cap-title { margin-top: 7px; letter-spacing: .14em; }
@media (max-width: 1179.98px) {
  .k-lightbox__cap { font-size: 12px; }
}
.k-lightbox__close {
  position: absolute;
  top: 20px;
  right: 26px;
  font-size: 17px;
  color: var(--d55);
  padding: 8px;
}
.k-lightbox__close:hover { color: var(--ink); }

/* night: the accent panels get the same 1px frame as the bordered cards
   so the home grid reads evenly (day keeps its borderless colour blocks) */
:root[data-mode="night"] .k-hero-card__panel { border: 1px solid var(--ink); border-left: none; }
:root[data-mode="night"] .k-letter-card { border: 1px solid var(--ink); }
:root[data-mode="night"] .k-home-hero-m__panel { border: 1px solid var(--ink); }

/* --------------------------------------------------------------------------
   27. Coming-soon band (home, between Footnotes and the subscribe banner)
   -------------------------------------------------------------------------- */
.k-coming {
  margin: 30px 32px 0;
  border: 1px solid var(--ink);
  padding: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-coming__inner {
  border: 1px solid var(--ink);
  background: var(--ground);
  padding: 15px 40px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--d55);
}
@media (max-width: 1179.98px) {
  .k-coming { margin: 22px 16px 0; padding: 26px; }
  .k-coming__inner { padding: 12px 24px; font-size: 10.5px; }
}

/* --------------------------------------------------------------------------
   28. Scrollbars — slim oxblood bar on the ground, rounded chevrons at
   the ends (unscoped so the page bar and every inner scroll area match)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track { background: var(--cream); }
/* the 8px pill floats with 2px of air on each side (transparent border
   + clip — thumbs can't take margins) */
::-webkit-scrollbar-thumb {
  background: var(--oxblood);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 6px;
}
/* background-color, not the shorthand — the shorthand resets background-clip
   and the pill would fill the gutter on hover */
::-webkit-scrollbar-thumb:hover { background-color: var(--oxblood-deep); }
::-webkit-scrollbar-corner { background: var(--cream); }
/* rounded chevrons at the ends */
::-webkit-scrollbar-button {
  background-color: var(--cream);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px 7px;
}
::-webkit-scrollbar-button:vertical { height: 12px; }
::-webkit-scrollbar-button:horizontal { width: 12px; }
/* one button per end only */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.5 6 4l3.5 3.5' fill='none' stroke='%234A0404' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234A0404' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.5 2.5 4 6l3.5 3.5' fill='none' stroke='%234A0404' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%234A0404' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-mode="night"] ::-webkit-scrollbar-track { background: var(--ground); }
/* night: the oxblood pill vanishes on the dark ground — amber instead
   (background-color, not the shorthand, so the clip float survives) */
:root[data-mode="night"] ::-webkit-scrollbar-thumb { background-color: var(--amber); }
:root[data-mode="night"] ::-webkit-scrollbar-thumb:hover { background-color: var(--amber-bright); }
:root[data-mode="night"] ::-webkit-scrollbar-corner { background: var(--ground); }
:root[data-mode="night"] ::-webkit-scrollbar-button { background-color: var(--ground); }
:root[data-mode="night"] ::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.5 6 4l3.5 3.5' fill='none' stroke='%23C98A2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-mode="night"] ::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23C98A2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-mode="night"] ::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.5 2.5 4 6l3.5 3.5' fill='none' stroke='%23C98A2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-mode="night"] ::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%23C98A2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Firefox only -- modern Chromium also honours scrollbar-color and would
   silently drop all the ::-webkit styling above if it saw this */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--oxblood) var(--cream); }
  html[data-mode="night"] { scrollbar-color: var(--amber) var(--ground); }
}

/* the mobile tree-break margin shorthand must not undo the footer bleed */
@media (max-width: 1179.98px) {
  .k-tree-break--bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

/* --------------------------------------------------------------------------
   30. Quick search — a crumb-strip FIND bar under the navbar
   -------------------------------------------------------------------------- */
.k-searchbar__input {
  flex: 0 1 300px;                  /* a field, not a page-wide plate */
  min-width: 70px;
  border: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 0;
  height: 33px;                     /* the crumb bar's measure */
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.k-searchbar__input::-webkit-search-cancel-button { display: none; }
@media (pointer: coarse) {
  /* a sub-16px input makes iOS zoom the page on focus — hold 16px on
     touch (pinch-zoom stays enabled; no maximum-scale lock) and pull
     the tracking in so the field keeps its measure */
  .k-searchbar__input { font-size: 16px; letter-spacing: .06em; }
}
/* the prompt whispers at the SEARCH — label's size; typed queries keep
   the crumb size */
.k-searchbar__input::placeholder { color: var(--d45); font-size: 8.5px; letter-spacing: .18em; }
/* the header search button — a drawn glass beside the day/night dial */
.k-searchbtn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  flex: none;
  padding: 0;
  display: grid;
  place-items: center;
}
.k-searchbtn__glass {
  position: relative;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transform: translate(-1.5px, -1.5px);
}
.k-searchbtn__glass::after {
  content: "";
  position: absolute;
  width: 1.5px;
  height: 5.5px;
  background: currentColor;
  left: 7px;
  top: 6.5px;
  transform: rotate(-45deg);
}
.k-searchbtn[aria-expanded="true"] { background: var(--ink); color: var(--ground); }

/* the drop strip under the navbar — the crumb bar's twin: hairline
   bottom rule, same height, FIND indented right where the crumbs would
   leave off */
.k-searchpanel {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 85;
  display: none;
  background: var(--ground);
  border-bottom: 1px solid var(--d15);
}
.k-searchpanel.is-open { display: block; }
.k-searchpanel__inner { max-width: 1440px; margin: 0 auto; padding: 0 28px; }
.k-searchpanel__bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-family: var(--mono); font-size: 10px; }
.k-searchpanel .k-searchpanel__bar { min-height: 37px; }   /* the crumb bar's height */
.k-searchpanel__results { max-height: 55vh; overflow-y: auto; }
.k-searchpanel__results:not(:empty) { padding-bottom: 14px; }
.k-searchpanel__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--d15);
  margin-top: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.k-searchpanel__results .k-searchpanel__row:first-child { border-top: 1px solid var(--ink); }
.k-searchpanel__row:hover .k-searchpanel__title { color: var(--link, var(--accent)); }
.k-searchpanel__kind {
  flex: none;
  width: 52px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.k-searchpanel__title { font-size: 18px; line-height: 1.25; }
.k-searchpanel__meta {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d55);
  margin-top: 3px;
}
.k-searchpanel__none {
  font-style: italic;
  font-size: 14.5px;
  color: var(--d6);
  padding: 10px 0 2px;
  border-top: 1px solid var(--ink);
}
@media (max-width: 1179.98px) {
  .k-searchpanel__inner { padding: 0 16px; }
  .k-searchpanel__kind { width: 44px; }
  .k-searchpanel__title { font-size: 16px; }
  .k-searchpanel__results { max-height: 48vh; }
}

/* --------------------------------------------------------------------------
   29. Section tick rail — under each essay section numeral: one mark per
   section, the outermost pair drawn taller as end marks; every mark
   (ends included) tracks the reader's scroll spy and the current one
   enlarges into the accent
   -------------------------------------------------------------------------- */
.k-secticks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 2px;
}
.k-secticks__end {
  width: 1px;
  height: 9px;
  background: var(--d35);
  transition: height .18s cubic-bezier(.22, .7, .3, 1), background-color .18s cubic-bezier(.22, .7, .3, 1), width .18s cubic-bezier(.22, .7, .3, 1);
}
.k-secticks__t {
  width: 1.5px;
  height: 7px;
  background: var(--d2);
  transition: height .18s cubic-bezier(.22, .7, .3, 1), background-color .18s cubic-bezier(.22, .7, .3, 1), width .18s cubic-bezier(.22, .7, .3, 1);
}
.k-secticks__t.is-on,
.k-secticks__end.is-on {
  width: 3px;
  height: 12px;
  background: var(--accent, var(--oxblood));
}

/* --------------------------------------------------------------------------
   31. Welcome — the paid subscriber's welcome package (/welcome/)
   -------------------------------------------------------------------------- */
.k-welcome { max-width: 900px; margin: 0 auto; padding: 6px 28px 26px; }

/* the arrival plate — the subscribe banner's success language, writ large */
.k-welcome-plate {
  border: 1px solid var(--ink);
  background: var(--oxblood);
  color: var(--cream);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .85);
  padding: 46px 40px 42px;
  text-align: center;
}
/* wears the tier's own colour — reader stays the oxblood default (matches
   .k-tier--1 on Subscribe); member and patron match .k-tier--2/--3; free
   wears no accent at all, matching .k-tier--free's plain treatment */
[data-kas-welcome-tier="member"] .k-welcome-plate { background: var(--pblue); }
[data-kas-welcome-tier="patron"] .k-welcome-plate { background: var(--pgreen); }
[data-kas-welcome-tier="free"] .k-welcome-plate { background: var(--ground); color: var(--ink); }
[data-kas-welcome-tier="free"] .k-welcome-plate__kicker { color: var(--d55); }
[data-kas-welcome-tier="free"] .k-welcome-plate__note { color: var(--d7); }
.k-welcome-plate__check { font-family: var(--serif); font-size: 40px; line-height: 1; display: block; }
.k-welcome-plate__kicker { color: rgba(253, 246, 227, .72); margin-top: 14px; }
.k-welcome-plate__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 37px;
  line-height: 1.1;
  margin: 10px 0 0;
}
.k-welcome-plate__note {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.55;
  max-width: 560px;
  margin: 14px auto 0;
  color: rgba(253, 246, 227, .88);
}
.k-welcome-plate__note p { margin: 0 0 8px; }
.k-welcome-plate__note p:last-child { margin-bottom: 0; }

/* section heads — a mono whisper trailing into the crumb rule */
.k-welcome-h {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--d55);
  margin: 48px 0 4px;
}
.k-welcome-h::after { content: ""; flex: 1; height: 1px; background: var(--d15); }

/* the manifest */
.k-wman__row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 2px;
  border-bottom: 1px solid var(--d15);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.k-wman__n { font-family: var(--serif); font-size: 17px; width: 34px; flex: none; color: var(--accent); }
.k-wman__body { font-size: 16.5px; line-height: 1.5; }
.k-wman__body b { font-weight: 600; }

/* three doors */
.k-wdoors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.k-wdoor {
  border: 1px solid var(--ink);
  padding: 18px 16px 15px;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.k-wdoor__kick { color: var(--d55); }
.k-wdoor__title { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.15; }
.k-wdoor__line { font-size: 13.5px; line-height: 1.45; color: var(--d6); }
.k-wdoor__go { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.k-wdoor--issue { background: var(--seabg, var(--pgreen)); border-color: var(--seabg, var(--pgreen)); color: var(--cream); }
.k-wdoor--issue .k-wdoor__kick, .k-wdoor--issue .k-wdoor__line { color: rgba(253, 246, 227, .8); }
/* the title/go text inherit their colour from the anchor, so the global
   a:hover ink rule was blackening them against the season-green fill —
   hold the anchor's own colour at cream on hover, same fix pattern as
   .k-btn--accent:hover */
.k-wdoor--issue:hover { color: var(--cream); }

.k-welcome-form__note { font-size: 15px; line-height: 1.55; color: var(--d7); max-width: 640px; }

/* membership form — Google's fixed 640×2248 embed, scaled to the
   column and boxed like the rest of the welcome package; overflow on
   narrower reflows falls back to the iframe's own scrollbar */
.k-welcome-form {
  margin-top: 14px;
  border: 1px solid var(--ink);
  line-height: 0;
}
.k-welcome-form iframe {
  display: block;
  width: 100%;
  max-width: 640px;
  height: 2248px;
  margin: 0 auto;
  border: 0;
}

/* housekeeping strip */
/* three-slot justified row: subscription link left, address-book note
   truly centred (a grid centres it regardless of the other two items'
   widths — flexbox's space-between can't), email right */
.k-welcome-keep {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 10px 20px;
  margin-top: 48px;
  padding: 12px 2px;
  border-top: 1px solid var(--d15);
  border-bottom: 1px solid var(--d15);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d55);
}
.k-welcome-keep a { color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.k-welcome-keep a:first-child { justify-self: start; }
.k-welcome-keep span { justify-self: center; text-align: center; }
.k-welcome-keep a:last-child { justify-self: end; text-align: right; }
@media (max-width: 1179.98px) {
  .k-welcome-keep { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
  .k-welcome-keep a:first-child, .k-welcome-keep a:last-child { justify-self: center; text-align: center; }
}

/* the sealed gate — everyone who isn't a paid member */
.k-welcome-gate { max-width: 640px; margin: 0 auto; text-align: center; padding: 72px 28px 64px; }
.k-welcome-gate__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  margin: 12px 0 0;
}
.k-welcome-gate__sub { font-style: italic; font-size: 16px; color: var(--d6); margin-top: 10px; }
.k-welcome-gate__actions { display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.k-welcome-gate__actions .k-btn { font-size: 11px; padding: 13px 22px; }
.k-welcome-gate__signin {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--d55);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .k-wdoor { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
  .k-wdoor:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px var(--shdw); }
  .k-wman__row:hover b { color: var(--link, var(--accent)); }
}
@media (max-width: 1179.98px) {
  .k-welcome { padding: 0 16px 20px; }
  .k-welcome-plate { padding: 30px 20px 28px; }
  .k-welcome-plate__title { font-size: 27px; }
  .k-welcome-plate__note { font-size: 16px; }
  .k-wdoors { grid-template-columns: 1fr; }
  .k-wdoor { min-height: 0; }
  .k-welcome-gate { padding: 54px 16px 46px; }
  .k-welcome-gate__title { font-size: 24px; }
}

/* the shop's closed plate */
.k-shop-closed { max-width: 640px; margin: 0 auto; text-align: center; padding: 72px 28px 64px; }
.k-shop-closed__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  margin: 12px 0 0;
}
.k-shop-closed__sub { font-style: italic; font-size: 16px; color: var(--d6); margin: 10px 0 24px; }

/* one-time donations — the quiet plate beside the Benefactor's, same
   autumn-teal border so the two boxes read as twins */
.k-donate {
  grid-column: 3 / span 2;
  border: 1px solid var(--pteal);
  background: var(--panel);
  padding: 14px 16px;
  text-align: left;
}
.k-donate__body { font-family: var(--serif); font-size: 15px; line-height: 1.5; margin-top: 7px; max-width: 640px; }
.k-donate__btn { display: inline-block; margin-top: 12px; font-size: 10px; padding: 9px 14px; }

/* subscribe buttons carry their marks (design handoff 5C) — the
   envelope posts the free email signup; the medal-seal is patronage.
   16×16, currentColor, 11px shoulder; the compact navbar chip scales
   its seal down to keep the header line */
.k-btn-ico { display: inline-flex; align-items: center; justify-content: center; gap: 11px; }
.k-btn-ico svg { width: 16px; height: 16px; flex: none; }
.k-header__sub.k-btn-ico { gap: 7px; }
.k-header__sub svg { width: 13px; height: 13px; }

/* Ghost Portal's floating bubble — the theme carries its own subscribe
   doors, so the native trigger stays hidden even before the Admin
   toggle (Settings → Portal → show portal button → off) is thrown.
   Portal itself must keep working: checkout, sign-in and the donation
   flow all open through #/portal/ links. */
iframe[title="portal-trigger"] { display: none !important; }

/* the pamphlet door — top right, top right of the reader: compact in the
   margin rail, its own centred strip on mobile; revealed only when the
   manifest carries a PDF for this essay */
.k-pamrow__btn { font-size: 10.5px; padding: 12px 18px; }
.k-margin-rail .k-pamrow { margin: 12px 0 0; }
.k-margin-rail .k-pamrow__btn { width: 100%; font-size: 9px; letter-spacing: .12em; padding: 10px 10px; gap: 8px; }
.k-margin-rail .k-pamrow__btn svg { width: 13px; height: 13px; }
/* the mobile strip carries its own hide — a bare display:flex here
   would outgun .k-mobile-only's desktop hide (late-file rule) */
.k-pam-m { display: none; }
@media (max-width: 1179.98px) {
  .k-pam-m { margin: 12px 16px 0; display: flex; justify-content: center; }
}

/* the Society link drawn into the Member tier's benefit line */
.k-benefit-link { color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* the banner's second door — patronage and donations ride inside every
   subscribe plate under a hairline, so each page stays ONE banner */
.k-subbanner__alt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--d15);
}
.k-subbanner__alt-line {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--d55);
}
/* one wrap unit — the label wraps away from the buttons first; the two
   buttons only split onto their own lines once neither fits beside
   the other (see .k-subbanner__alt-line above) */
.k-subbanner__alt-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.k-subbanner__alt-btn { font-size: 10px; padding: 10px 14px; }

/* the centred cap (design 7B) — one-line openers only: the initial
   rises to sit centred beside its single line, upright even when the
   word is Kasurian; running prose keeps the classic floated cap */
.k-content > p.k-cap-centre:first-of-type { display: flex; align-items: center; gap: 14px; }
.k-cap-centre .k-cap {
  flex: none;
  font-size: 66px;
  line-height: .8;
  font-weight: 500;
  font-style: normal;
  color: var(--accent);
}
.k-cap-centre .k-cap-rest { flex: 1 1 auto; min-width: 0; }

/* the Set-I footnote marks — † ¶ § ‡ are FONT glyphs, set in EB Garamond
   itself (the 6B reference plates in art/masters/ fix only their weight
   and proportion); inside mono labels they step up a size and drop the
   label's tracking and uppercase transform */
.k-fn-mark {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

/* the welcome package's About plate — section 2 of every tier page */
.k-wabout { max-width: 760px; font-size: 17px; line-height: 1.7; }
.k-wabout p + p { margin-top: 12px; }
@media (max-width: 1179.98px) {
  .k-cap-centre .k-cap { font-size: 56px; }
}