/* Shell foundation: every measure the WordPress copy of CORE's frame needs, declared once.
   CORE's own tokens (--fw-*) come from core.css; these --fwx-* place that frame around a page that
   scrolls the window instead of a column. Components read tokens, never numbers. */

html.fw-shell {
  /* columns, as CORE's ShellLayout sizes them */
  --fwx-strip: 32px;
  --fwx-gap: 8px;
  --fwx-rail: 384px;
  --fwx-rail-min: 240px;
  --fwx-rail-max: 440px;
  --fwx-col: 460px;
  --fwx-col-min: 380px;
  --fwx-col-max: 1280px;
  --fwx-rail-now: var(--fwx-rail);
  --fwx-col-now: var(--fwx-col);
  /* Every page's side margin and the space under the bar are the old LOG's, in screen pixels: the old
     LOG never scaled, while the frame zooms the page (head.js), so a measure counts --fwx-px. */
  --fwx-px: calc(1px / var(--fw-zoom, 1));
  --fwx-edge: calc(13 * var(--fwx-px));
  /* The LOG's running text, as the articles set it (measured on staging, 2026-10-28): pages of words take it. */
  --fwx-body: 18px;
  --fwx-body-line: 2;
  /* 20 under the bar's controls on a computer (owner, 2026-10-27: with the bar on the page's own colour, 10
     read as touching the Newsletter button); the phone keeps 10 under its island, which draws its own edge. */
  --fwx-under-bar: calc(20 * var(--fwx-px));
  /* The bar over the stage ends --fwx-under-bar below its controls, and every page starts there;
     then the room the ask takes under it. */
  --fwx-bar-pad: 24px;
  --fwx-top: calc(var(--fwx-bar-pad) + var(--fw-tap) + var(--fwx-under-bar));
  --fwx-ask-room: 118px;
  /* phone chrome: the island is 36px controls in 6px of padding (core.css), set below the notch */
  --fwx-island-h: 48px;
  --fwx-phone-top: calc(max(8px, env(safe-area-inset-top)) + var(--fwx-island-h) + var(--fwx-under-bar));
  --fwx-phone-bar: 76px;
  --fwx-phone-room: 144px;
  /* controls */
  --fwx-avatar: 36px;
  --fwx-avatar-sm: 32px;
  --fwx-avatar-xs: 30px;
  --fwx-compose-max: 160px;
  --fwx-pop-gap: 10px;
  --fwx-menu-w: 260px;
  --fwx-notes-menu-w: 288px;
  --fwx-brand-menu-w: 340px;
  --fwx-list-menu-w: 168px;
  --fwx-hint-gap: 6px;
  --fwx-take-wave: 26px;
  --fwx-take-bar: 2px;
  --fwx-take-note: 12px;
  --fwx-take-note-gap: 8px;
  --fwx-take-ring: 14px;
  --fwx-take-stop: 12px;
  --fwx-take-tip: 9px;
  --fwx-take-tip-pad: 5px 8px;
  /* one screen of the page on a computer: from under the bar to the room the ask keeps at the foot */
  --fwx-screen: calc(var(--fw-vh) - var(--fwx-top) - var(--fwx-ab) - var(--fwx-ask-room));
  /* the account window, over everything the frame draws */
  --fwx-account-w: 920px;
  --fwx-z-account: calc(var(--fwx-z) + 20);
  --fwx-z-catalog: calc(var(--fwx-z) + 30);
  --fwx-catalog-ground: #050506;
  --fwx-catalog-card: #131315;
  --fwx-plans-w: 860px;
  /* the floating player on a computer, when the rail that holds it is closed */
  --fwx-mini-w: 340px;
  --fwx-mini-gut: 16px;
  /* the stage's own scrollbar, drawn the way CORE's fw-thin-scroll draws it */
  /* a 4px thumb in a track wide enough to catch with a mouse */
  --fwx-thumb-track: 14px;
  --fwx-thumb-inset: 5px;
  --fwx-thumb-min: 32px;
  /* stacking: the frame sits above the page, the columns above the frame, menus above both */
  --fwx-z: 9000;
  --fwx-z-mask: calc(var(--fwx-z) + 1);
  --fwx-z-columns: calc(var(--fwx-z) + 2);
  --fwx-z-layer: calc(var(--fwx-z) + 10);
  /* menus open over everything, the phone's left rail included (it sits at layer + 1) */
  --fwx-z-pop: calc(var(--fwx-z) + 12);
  /* surfaces CORE paints with literals */
  --fwx-stage: #fff;
  --fwx-ab: 0px;
  /* derived: where the stage starts and ends */
  --fwx-l: calc(var(--fwx-strip) + var(--fwx-gap));
  --fwx-r: calc(var(--fwx-strip) + var(--fwx-gap));
}
html.fw-shell[data-theme="dark"] { --fwx-stage: var(--fw-bg); }
/* The Partner Program's pink, Fakewhale Studio's: solid on a cover, a tint of the accent on the page (partner.php). */
html.fw-shell { --fwx-partner: #fde9e9; --fwx-partner-tint: rgba(235, 0, 0, 0.07); --fwx-partner-text: var(--fw-accent); }
html.fw-shell[data-theme="dark"] { --fwx-partner-tint: rgba(235, 0, 0, 0.18); --fwx-partner-text: #ff6b6b; }
html.fw-shell .cs-meta-category:has(.fw-partner-tag) { display: inline-flex; align-items: center; gap: 10px; margin-right: 12px; }
html.fw-shell .fw-partner-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--fw-corner-sm);
  background: var(--fwx-partner-tint); color: var(--fwx-partner-text);
  font-family: var(--font-jetbrains), monospace; font-size: 10px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase;
}
html.fw-shell .fw-partner-line { margin: 0 0 1.5em; font-family: var(--font-jetbrains), monospace; font-size: 12px; letter-spacing: 0.02em; color: var(--fw-text-muted); }
html.fw-shell[data-fwx-left-open] { --fwx-l: calc(var(--fwx-rail-now) + var(--fwx-gap)); }
html.fw-shell[data-fwx-right-open] { --fwx-r: calc(var(--fwx-col-now) + var(--fwx-gap)); }
/* WordPress marks its admin bar on <body>, but the room tokens (--fwx-screen) are worked out on <html>: the bar's
   height is set there, or staff's pages counted 32px of room that the bar takes. */
html.fw-shell:has(> body.admin-bar) { --fwx-ab: 32px; }

/* ---------- the page inside the stage ---------- */
/* Every page keeps one side margin, and the bar and the ask align with it. Every page starts where the
   bar ends: the theme's space above its content goes, with the LOG custom CSS's 16px !important on
   archives (#fwx-weight lends the id's weight). */
html.fw-shell #fw-page,
html.fw-shell #fw-core :is(.fwx-topbar, [data-fwx="askedge"]) { --fw-pad: var(--fwx-edge); }
html.fw-shell :is(#fwx-weight, main) .cs-site-content { margin-top: 0 !important; }
/* The theme's own pages (an article, search) keep the same edge, and their breadcrumbs open under the bar. */
html.fw-shell body .cs-site-primary > .cs-container { padding-left: var(--fwx-edge); padding-right: var(--fwx-edge); }
html.fw-shell .cs-breadcrumbs { margin-top: 0; }
html.fw-shell { background: var(--fw-bg); scrollbar-width: none; }
html.fw-shell::-webkit-scrollbar { display: none; }
html.fw-shell body {
  background: var(--fwx-stage) !important;
  padding: var(--fwx-top) var(--fwx-r) 0 var(--fwx-l) !important;
}
html.fw-shell.fwx-ask-room body { padding-bottom: var(--fwx-ask-room) !important; }
/* In dark CORE's stage is its ground; the LOG's own surfaces follow it. */
html.fw-shell[data-theme="dark"] body { --cs-site-background: var(--fw-bg); --cs-layout-background: var(--fw-bg); }
html.fw-shell .cs-header,
html.fw-shell .cs-header-overlay,
html.fw-shell .cs-offcanvas,
html.fw-shell .cs-site-overlay,
html.fw-shell .cs-search-overlay,
html.fw-shell .cs-scroll-top { display: none !important; }
/* The LOG's custom CSS bleeds the post grids to 100vw; inside the frame the stage is the width. */
@media (min-width: 1024px) {
  html.fw-shell .cs-posts { width: auto; max-width: 100%; left: auto; right: auto; margin-left: 0; margin-right: 0; }
  /* On the LOG a grid inside a boxed home section bleeds past the theme's 24px gutter and keeps its
     own 20px, so its cards start where the section heading does. Bleed it to the stage the same way. */
  html.fw-shell .elementor-template-full-width .e-con.e-flex > .e-con-inner > .elementor-widget-cs-posts .cs-posts { max-width: none; margin-left: -24px; margin-right: -24px; }
}
/* CORE's centre grid holds 4 columns, 3 with one side column open and 2 with both. The LOG's post
   grids count their columns from the window, which an open side column leaves unchanged, so inside
   the frame each grid is capped instead. A cap keeps a row the LOG drew narrower (1 or 2) as it is. */
@media (min-width: 768px) {
  html.fw-shell .cs-posts-area__main { --fwx-cols: var(--cs-posts-area-grid-columns); }
  html.fw-shell[data-fwx-left-open],
  html.fw-shell[data-fwx-right-open] { --fwx-cols-cap: 3; }
  html.fw-shell[data-fwx-left-open][data-fwx-right-open] { --fwx-cols-cap: 2; }
  html.fw-shell[data-fwx-left-open] .cs-posts-area__main,
  html.fw-shell[data-fwx-right-open] .cs-posts-area__main {
    grid-template-columns: repeat(min(var(--fwx-cols), var(--fwx-cols-cap)), minmax(0, 1fr));
  }
}
/* /submit/ (submit-showcase.php): three kinds side by side, the four steps in a row, one column on a phone. */
/* CORE utilities the showcase uses that no captured CORE page carried, written as Tailwind writes them. */
#fw-page .text-fw-bg\/50 { color: color-mix(in srgb, var(--fw-bg) 50%, transparent); }
#fw-page .text-fw-bg\/60 { color: color-mix(in srgb, var(--fw-bg) 60%, transparent); }
#fw-page .text-fw-bg\/70 { color: color-mix(in srgb, var(--fw-bg) 70%, transparent); }
#fw-page .text-\[calc\(44px\*var\(--fw-r-w\)\)\] { font-size: calc(44px * var(--fw-r-w)); }
@media (max-width: 767px) {
  #fw-page .max-md\:gap-7 { gap: 28px; }
  #fw-page .max-md\:text-\[34px\] { font-size: 34px; }
}
/* The front page's Elementor containers give up their own gutters, widths and spacing: every LOG block
   on it (log-home.php) keeps the LOG's one edge from the stage, and the space between blocks is the
   LOG's (log-cards.css): the card gap between blocks, a section head's own margins around it. */
html.fw-shell body.home .elementor .e-con {
  --padding-left: 0px; --padding-right: 0px; --padding-top: 0px; --padding-bottom: 0px; --margin-top: 0px; --margin-bottom: 0px;
  padding: 0; margin-top: 0; margin-bottom: 0; row-gap: var(--fw-log-gap);
}
/* The LOG's own custom CSS spaces its containers with 16px !important, once under main and once under
   #primary; the same selector, scoped to the frame, sets that space back to the LOG's measures,
   #fwx-weight lending it the id's weight. */
html.fw-shell body.home :is(#fwx-weight, main) .elementor > .elementor-element.e-con.e-parent:nth-child(n) { margin-top: 0 !important; margin-block-start: 0 !important; }
html.fw-shell body.home .elementor .e-con > .e-con-inner { max-width: none; padding-left: 0; padding-right: 0; }
/* Every margin goes: the blocks were tucked under the old theme's headings with negative ones. */
html.fw-shell body.home .elementor :is(.elementor-widget-cs-posts, .elementor-widget-text-editor),
html.fw-shell body.home .elementor :is(.elementor-widget-cs-posts, .elementor-widget-text-editor) > .elementor-widget-container { margin: 0; }
/* An article's text in dark: Elementor gives each text block its global "secondary" ink (near black) and
   the site turns the paragraphs inside white, so text pasted as plain blocks (from a document, with no
   paragraph) stayed near black on the dark page. The block itself takes the scheme's ink. */
html.fw-shell body[data-scheme="dark"] .elementor-widget-text-editor { color: var(--cs-color-primary); }
/* On a phone the theme pulls its grids and headings toward the edge by different amounts (0, 10, 11 and
   24px), so here each grid spans the screen and pads itself to the page's edge, whatever its container
   does, and the headings follow it. */
@media (max-width: 767px) {
  html.fw-shell .cs-posts-area__main {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: var(--fwx-edge);
    padding-right: var(--fwx-edge);
  }
  html.fw-shell .elementor-template-full-width .e-con.e-flex > .e-con-inner { padding-left: var(--fwx-edge); padding-right: var(--fwx-edge); }
  html.fw-shell .elementor-template-full-width .e-con-inner > .elementor-widget-text-editor { margin-left: 0; margin-right: 0; }
}
/* Elementor's post widgets keep their count per breakpoint in variables of their own. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  html.fw-shell .cs-posts-area-elementor .cs-posts-area__main { --fwx-cols: var(--cs-posts-columns-tablet, 1); }
}
@media (min-width: 1200px) and (max-width: 1319.98px) {
  html.fw-shell .cs-posts-area-elementor .cs-posts-area__main { --fwx-cols: var(--cs-posts-columns-laptop, 1); }
}
@media (min-width: 1320px) {
  html.fw-shell .cs-posts-area-elementor .cs-posts-area__main { --fwx-cols: var(--cs-posts-columns-desktop, 1); }
}

/* The theme dresses every button and field (centred inline-flex, padding, min-height, fonts).
   CORE's controls expect the browser's plain ones; its own classes and corners then apply on top. */
#fw-core button,
#fw-core input,
#fw-core textarea,
#fw-page button {
  position: static;
  display: inline-block;
  align-items: normal;
  justify-content: normal;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: none;
  appearance: none;
  resize: none;
}

/* ---------- the frame, and the pages the plugin draws in CORE's markup ---------- */
#fw-core,
#fw-page {
  font-family: var(--font-jetbrains), monospace;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--fw-text);
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: auto;
}
#fw-core .fwx-left,
#fw-core .fwx-right {
  position: fixed;
  z-index: var(--fwx-z-columns);
  top: var(--fwx-ab);
  bottom: 0;
  display: flex;
}
#fw-core .fwx-left { left: 0; }
#fw-core .fwx-right { right: 0; }
#fw-core .fwx-rail-panel { width: var(--fwx-rail-now); }
#fw-core .fwx-column { width: var(--fwx-col-now); }
#fw-core .fwx-stage {
  position: fixed;
  z-index: var(--fwx-z);
  top: var(--fwx-ab);
  bottom: 0;
  left: var(--fwx-l);
  right: var(--fwx-r);
  pointer-events: none;
}
#fw-core .fwx-topbar {
  position: absolute;
  inset: 0 0 auto 0;
  background: var(--fwx-stage);
  pointer-events: auto;
}
/* The row sits on the topbar's own ground, the page's colour in both schemes: CORE gives it its surface,
   which in dark drew a grey band the content seemed to hang from (owner, 2026-10-27). */
#fw-core .fwx-topbar .fwx-topbar__row { padding: var(--fwx-bar-pad) var(--fw-pad) var(--fwx-under-bar); background: none; }
/* Content outside the stage's rounded rectangle is painted over with the ground, so the page reads
   as a sheet laid on it, exactly as CORE's stage does. */
#fw-core .fwx-mask {
  position: fixed;
  z-index: var(--fwx-z-mask);
  top: var(--fwx-ab);
  bottom: 0;
  left: var(--fwx-l);
  right: var(--fwx-r);
  border-radius: var(--fw-corner);
  box-shadow: 0 0 0 100vmax var(--fw-bg);
  pointer-events: none;
}
#fw-core .fwx-layer { position: relative; z-index: var(--fwx-z-pop); }
#fw-core .fwx-pop { position: fixed; z-index: var(--fwx-z-pop); }
#fw-core .fwx-pop--menu { width: var(--fwx-menu-w); }
#fw-core .fwx-pop--notes { width: var(--fwx-notes-menu-w); }
#fw-core .fwx-pop--brand { width: var(--fwx-brand-menu-w); }
#fw-core .fwx-pop--list { width: var(--fwx-list-menu-w); }
#fw-core .fwx-avatar { width: var(--fwx-avatar); height: var(--fwx-avatar); }
#fw-core .fwx-avatar-sm { width: var(--fwx-avatar-sm); height: var(--fwx-avatar-sm); }
#fw-core .fwx-avatar-xs { width: var(--fwx-avatar-xs); height: var(--fwx-avatar-xs); }
#fw-core .fwx-compose-max { max-height: var(--fwx-compose-max); }
#fw-core .fwx-hidden { display: none !important; }
/* Text that keeps its measure whatever the column: a title stops at --fwx-clamp-lines lines and closes on
   an ellipsis, a meta line stays on one line. */
:is(#fw-core, #fw-page, .fwx-scope) .fwx-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--fwx-clamp-lines, 3); line-clamp: var(--fwx-clamp-lines, 3); }
:is(#fw-core, #fw-page, .fwx-scope) .fwx-one-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- the stage's scrollbar ---------- */
#fw-core .fwx-scroll {
  position: fixed;
  z-index: var(--fwx-z-mask);
  top: calc(var(--fwx-ab) + var(--fwx-top));
  bottom: 0;
  right: var(--fwx-r);
  width: var(--fwx-thumb-track);
}
#fw-core .fwx-scroll[data-idle] { display: none; }
#fw-core .fwx-scroll i {
  position: absolute;
  top: 0;
  left: var(--fwx-thumb-inset);
  right: var(--fwx-thumb-inset);
  min-height: var(--fwx-thumb-min);
  border-radius: var(--fw-corner-pill);
  background: var(--fw-line);
  cursor: default;
}
#fw-core .fwx-scroll:hover i,
#fw-core .fwx-scroll[data-drag] i { background: var(--fw-text-subtle); }

/* ---------- LITE's answer, CORE's prose ---------- */
#fw-core .fwx-prose strong { font-weight: 700; color: var(--fw-text); }
#fw-core .fwx-prose em { font-style: italic; }
#fw-core .fwx-prose h4 {
  margin: 0;
  font-family: var(--font-oswald), sans-serif;
  font-size: var(--fw-type-h5, 15px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fw-text);
}
#fw-core .fwx-prose ol,
#fw-core .fwx-prose ul { margin: 0; padding-left: 1.5em; }
#fw-core .fwx-prose ol { list-style: decimal; }
#fw-core .fwx-prose ul { list-style: square; }
#fw-core .fwx-prose li + li { margin-top: 0.35em; }
#fw-core .fwx-prose sup { font-size: 0.7em; line-height: 0; vertical-align: super; color: var(--fw-text-subtle); }
#fw-core .fwx-thinking::after { content: ""; animation: fwx-dots 1.2s steps(4, end) infinite; }
@keyframes fwx-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------- phone ---------- */
@media (max-width: 767px) {
  html.fw-shell { --fwx-l: 0px; --fwx-r: 0px; --fwx-edge: 10px; --fwx-under-bar: 10px; }
  /* The island, the tab bar and the phone's sheets keep the page's edge; CORE's shell sets 14px. */
  html.fw-shell #fw-core [data-fw-core-shell] { --fwm-gut: var(--fwx-edge); }
  html.fw-shell body { padding: var(--fwx-phone-top) 0 var(--fwx-phone-room) 0 !important; }
  html.fw-shell.fwx-ask-room body { padding-bottom: var(--fwx-phone-room) !important; }
  #fw-core .fwx-left,
  #fw-core .fwx-stage,
  #fw-core .fwx-mask,
  #fw-core .fwx-scroll { display: none; }
  #fw-core .fwx-right { position: static; }
  #fw-core .fwx-phone-top { position: fixed; z-index: var(--fwx-z); top: var(--fwx-ab); left: 0; right: 0; }
  #fw-core .fwx-phone-nav { position: fixed; z-index: var(--fwx-z); left: 0; right: 0; bottom: 0; }
  /* The tab bar floats on a band of the stage's own colour, as CORE's sits below its scroller:
     the page ends above it instead of running under the glass. */
  #fw-core .fwx-phone-bar { height: var(--fwx-phone-bar); background: var(--fwx-stage); }
  /* Chrome away: the slot drops to the handle's room at once and the bar slides out under it, as
     CORE's MobileTabBar does with its measured height. */
  #fw-core .fwx-phone-bar[aria-hidden="true"] { height: var(--fw-bar-peek-room); }
  #fw-core .fwx-phone-bar[aria-hidden="true"] > nav { transform: translateY(var(--fwx-phone-bar)); }
  /* the analysis sheet rises over the phone chrome, as it does in CORE */
  #fw-core .fwx-column { z-index: var(--fwx-z-columns); }
  /* The drawer pushes the reading page aside; the shell's own chrome steps back while it is open. */
  html.fw-shell[data-fw-rail-push] #fw-core .fwx-shell { transform: none !important; box-shadow: none !important; }
  html.fw-shell .cs-wrapper { transition: transform var(--fw-dur-move) var(--fw-ease-out); transform-origin: 0 var(--fwx-push-y, 50%); }
  html.fw-shell[data-fw-rail-push] body { background: var(--fw-bg) !important; }
  html.fw-shell[data-fw-rail-push] .cs-wrapper {
    background: var(--fwx-stage);
    transform: translate(min(82vw, 380px)) scale(0.92);
    border-radius: var(--fw-corner);
    box-shadow: var(--fw-over);
    overflow: hidden;
  }
  html.fw-shell[data-fw-rail-push] #fw-core .fwx-phone-top,
  html.fw-shell[data-fw-rail-push] #fw-core .fwx-phone-nav { opacity: 0; pointer-events: none; }
  /* touch-action pan-y leaves sideways moves to the swipe that closes the rail */
  #fw-core .fwx-scrim { position: fixed; inset: 0; z-index: var(--fwx-z-layer); background: transparent; touch-action: pan-y; }
  /* The menu sits over the scrim that closes it. The page pushed aside runs past the screen, and a
     phone widens its layout to show it unless the overflow is clipped while the menu is open. */
  #fw-core .fw-rail-push-panel { z-index: calc(var(--fwx-z-layer) + 1); }
  html.fw-shell[data-fw-rail-push],
  html.fw-shell[data-fw-rail-push] body { overflow: hidden; }
  /* Nor while the page slides back: a phone that sees it run past the edge widens its layout, and
     every fixed sheet measured in that moment takes the wrong height. */
  html.fw-shell,
  html.fw-shell body { overflow-x: clip; }
}
@media (min-width: 768px) {
  #fw-core .fwx-phone-top,
  #fw-core .fwx-phone-nav { display: none; }
}
@media (max-width: 782px) { html.fw-shell:has(> body.admin-bar) { --fwx-ab: 46px; } }
@media (max-width: 600px) { html.fw-shell:has(> body.admin-bar) { --fwx-ab: 0px; } }
@media (prefers-reduced-motion: reduce) {
  html.fw-shell .cs-wrapper { transition: none; }
  #fw-core .fwx-thinking::after { animation: none; content: "..."; }
}

/* ---------- pages the plugin draws itself (Hypercasts) ---------- */
/* The theme's breadcrumbs, archive title and archive banner belong to its own archives; its
   singles sit in a grid with a sidebar column and a padded container. These pages take the stage
   whole, as CORE's do. */
html.fw-shell .fwx-own-page .cs-container:has(> .cs-breadcrumbs),
html.fw-shell .fwx-own-page .cs-page__header,
html.fw-shell .fwx-own-page .cs-banner-archive-after { display: none; }
html.fw-shell .fwx-own-page .cs-site-content,
html.fw-shell .fwx-own-page .cs-main-content { margin-top: 0; }
html.fw-shell .fwx-own-page .cs-site-content > .cs-container { max-width: none; padding-left: 0; padding-right: 0; }
html.fw-shell .fwx-own-page .cs-main-content { display: block; }
#fw-page [data-fwx-play] .fwx-when-playing,
#fw-page [data-fwx-play].is-playing .fwx-when-paused { display: none; }
#fw-page [data-fwx-play].is-playing .fwx-when-playing { display: inline-block; }
/* On a phone CORE's own .fw-mini-player rule places the bar over the tab bar; on a computer it sits
   at the stage's foot, above the ask. */
#fw-core .fwx-mini { position: fixed; z-index: var(--fwx-z-columns); }
@media (min-width: 768px) {
  #fw-core .fwx-mini {
    left: calc(var(--fwx-l) + var(--fwx-mini-gut));
    right: auto;
    width: var(--fwx-mini-w);
    bottom: calc(var(--fwx-ask-room) + var(--fwx-gap));
  }
}

/* ---------- the account window ---------- */
/* CORE layers it at 120 over its own shell; here the host lifts it over the frame's columns. */
#fw-core .fwx-account { position: relative; z-index: var(--fwx-z-account); }
#fw-core .fwx-account-modal { width: var(--fwx-account-w); }
/* Inside the phone's account sheet the buy sheet covers the sheet itself, not the long panel under it
   (the sheet is transformed, so fixed means the sheet's own box). */
@media (max-width: 767px) {
  #fw-core [data-fwx="account-sheet"] .fwx-buy-veil { position: fixed; }
}

/* ---------- the submission pages ---------- */
/* On a computer the form and the LOG preview each scroll inside the stage's height, as CORE's split does.
   html carries CORE's zoom, which shrinks viewport units with everything else, so they are divided back. */
#fw-page .fwx-submit--desk { height: calc(100dvh / var(--fw-zoom, 1) - var(--fwx-top) - var(--fwx-ab)); }
html.fw-shell.fwx-ask-room #fw-page .fwx-submit--desk { height: calc(100dvh / var(--fw-zoom, 1) - var(--fwx-top) - var(--fwx-ab) - var(--fwx-ask-room)); }
html.fw-shell body.fwx-submit-page:not(.fwx-submit-index) .cs-footer { display: none; }
/* The theme's footer follows the page's scheme (80-layout.js turns its blocks' data-scheme); log-footer.css draws it. */
/* Tones Tailwind compiles for CORE and the copy lacks: the section divider, the chosen role's subline. */
#fw-page .border-fw-surface-2\/60 { border-color: color-mix(in srgb, var(--fw-surface-2) 60%, transparent); }
#fw-page .text-fw-bg\/65 { color: color-mix(in srgb, var(--fw-bg) 65%, transparent); }
#fw-page .fw-as-visitor [data-fw-owner-bar] { display: none; }
#fw-page .fw-prof-avatar { height: clamp(64px, 7vw, 96px); width: clamp(64px, 7vw, 96px); box-shadow: 0 0 0 2px var(--fw-surface); }
#fw-page .fw-prof-ring { box-shadow: 0 0 0 2px var(--fw-surface); }
#fw-page .border-white\/35 { border-color: rgba(255, 255, 255, .35); }
#fw-page .bg-black\/20 { background-color: rgba(0, 0, 0, .2); }
#fw-page .hover\:bg-white\/15:hover { background-color: rgba(255, 255, 255, .15); }
#fw-page .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, .1); }
#fw-page .fw-prof-sheet { max-height: 92%; max-width: 560px; margin: 0 auto; }
@media (min-width: 640px) { #fw-page .fw-prof-sheet { bottom: auto; top: 50%; transform: translateY(-50%); border-radius: var(--fwx-radius, 0); } }
/* A field the send check points at: the accent edge, until it is filled. */
#fw-page .fw-submit-field[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--fw-accent); }
#fw-page .fwx-submit-strip { position: sticky; bottom: 0; z-index: 5; }
#fw-page .fwx-submit-handle { cursor: col-resize; }
#fw-page .fwx-submit-sheet { position: fixed; inset: 0; z-index: var(--fwx-z-account); }
html.fw-shell.fwx-ask-room #fw-page .fwx-submit-strip { bottom: var(--fwx-phone-room); }

/* ---------- the membership catalog ---------- */
/* CORE's catalog sits over the account window (130 over 120). Two plans keep CORE's card width:
   276px each at 1440, as its four columns are, plus the 14px gap. */
#fw-core .fwx-plans { position: relative; z-index: var(--fwx-z-catalog); }
/* A Member name's line on the plan cards (84-plans.js planCard), and the Hypercast's audio mark beside its name. */
/* The plan a reader holds: an ink tag on the card and a quiet state where the button would be. */
#fw-core .fwx-plan-yours {
  position: absolute; right: 12px; top: 12px; padding: 5px 8px; border-radius: var(--fw-corner-pill);
  background: var(--fw-text); color: var(--fw-bg);
  font: 600 9px/1 var(--font-jetbrains), monospace; letter-spacing: 0.14em; text-transform: uppercase;
}
/* The Fakewhale AI allowance in the account menu (40-topbar.js liteUsage). */
#fw-core .fwx-ai-use { display: grid; gap: 9px; min-width: 232px; padding: 10px 18px 6px; }
#fw-core .fwx-ai-use__head { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
#fw-core .fwx-ai-use__name { font: 600 13px/1 var(--font-oswald), sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fw-text); }
#fw-core .fwx-ai-use__figure { margin-left: auto; font: 700 20px/1 var(--font-oswald), sans-serif; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-transform: uppercase; color: var(--fw-text); }
#fw-core .fwx-ai-use__of { font-size: 13px; color: var(--fw-text-subtle); }
#fw-core .fwx-ai-use__marks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
#fw-core .fwx-ai-use__marks i,
#fw-core .fwx-ai-use__bar { display: block; height: 4px; border-radius: 1px; background: color-mix(in srgb, var(--fw-text) 18%, transparent); }
#fw-core .fwx-ai-use__marks i.is-on { background: var(--fw-text); }
#fw-core .fwx-ai-use__bar { overflow: hidden; }
#fw-core .fwx-ai-use__bar i { display: block; width: var(--fwx-ai-left); height: 100%; background: var(--fw-text); }
#fw-core .fwx-ai-use__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 22px; white-space: nowrap; font: 500 9px/1.2 var(--font-jetbrains), monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-core .fwx-ai-use__up { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--fw-accent); transition: opacity var(--fw-dur-state); }
#fw-core .fwx-ai-use__up:hover { opacity: 0.85; }
#fw-core .fwx-ai-use__up svg { width: 10px; height: 10px; }
#fw-core .fwx-menu-close svg { transform: rotate(-90deg); }
#fw-core .fwx-plan-held { border: 1px solid var(--fw-line); background: transparent; color: var(--fw-text); cursor: default; }
#fw-core .fwx-plan-line { display: block; margin-top: 2px; font-family: var(--font-jetbrains), monospace; font-size: .85em; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--fw-text-muted); }
#fw-core .fwx-plan-listen { display: inline-block; width: auto; height: .8em; margin-left: 7px; vertical-align: 0; }
#fw-core .fwx-search, #fw-core .fwx-np-host { position: relative; z-index: var(--fwx-z-catalog); }
/* The search palette hangs from a fixed top and grows downward as results arrive: centred, it lifted its own field
   110px while the reader typed (no field of the site moves while it is typed in, steady-fields-live.mjs). */
#fw-core .fwx-search-modal { width: 720px; top: 14vh; max-height: 80vh; }
#fw-core .fwx-search-modal a,
#fw-core .fwx-search-modal a:hover { text-decoration: none; }
/* A phone window that is not full height takes what it holds, up to most of the screen. */
#fw-core .fwx-window-sheet:not([data-fw-window-full]) { max-height: 92%; }
/* The essay gate on a computer: dev's MembershipGateShell. It scrolls from the top when taller than
   the screen and stays centred while it fits. */
/* The veil covers the whole screen; the panel centres on the stage, between whichever columns are open. */
#fw-core .fwx-gate-overlay { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; overflow: auto; overscroll-behavior: contain; background: rgba(10, 10, 10, 0.52); padding: 24px calc(var(--fwx-r) + 16px) 40px calc(var(--fwx-l) + 16px); }
#fw-core .fwx-gate-panel { margin: auto 0; width: min(520px, 100%); padding: 18px 28px 22px; }
#fw-core .fwx-gate-plan { max-width: 340px; margin: 0 auto; }
#fw-core .fwx-gate-head { min-height: 28px; padding-bottom: 10px; margin-bottom: 18px; }
#fw-core .fwx-gate-intro { max-width: 72ch; margin-bottom: 22px; }
#fw-core .fwx-gate-intro p:last-child { max-width: 62ch; }

/* The essay gate inside the page: the last lines of the free opening blur and fade into the stage,
   then the card that opens the membership window. */
html.fw-shell .fw-gate-free { position: relative; }
/* The veil reaches past the text into the empty margin: a backdrop blur stops hard at its own edge, which
   cut the blurred lines straight at the column's left. */
html.fw-shell .fw-gate-free { --fw-gate-bleed: 56px; }
@media (max-width: 767px) { html.fw-shell .fw-gate-free { --fw-gate-bleed: 12px; } }
html.fw-shell .fw-gate-veil { position: absolute; left: calc(-1 * var(--fw-gate-bleed)); right: calc(-1 * var(--fw-gate-bleed)); bottom: 0; height: min(320px, 85%); pointer-events: none; }
html.fw-shell .fw-gate-veil span {
  position: absolute; inset: 0;
  --fw-gate-sides: linear-gradient(to right, transparent, #000 var(--fw-gate-bleed), #000 calc(100% - var(--fw-gate-bleed)), transparent);
  -webkit-mask-image: var(--fw-gate-ramp), var(--fw-gate-sides); -webkit-mask-composite: source-in;
  mask-image: var(--fw-gate-ramp), var(--fw-gate-sides); mask-composite: intersect;
}
html.fw-shell .fw-gate-veil span:nth-child(1) { --fw-gate-ramp: linear-gradient(to bottom, transparent 0%, #000 30%); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
html.fw-shell .fw-gate-veil span:nth-child(2) { --fw-gate-ramp: linear-gradient(to bottom, transparent 25%, #000 50%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.fw-shell .fw-gate-veil span:nth-child(3) { --fw-gate-ramp: linear-gradient(to bottom, transparent 50%, #000 75%); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
html.fw-shell .fw-gate-veil span:nth-child(4) { --fw-gate-ramp: linear-gradient(to bottom, transparent 70%, #000 100%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html.fw-shell .fw-gate-veil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, var(--fwx-stage) 100%); }
html.fw-shell .fw-gate { margin: 8px auto 48px; max-width: 520px; padding: 26px 24px 24px; text-align: center; background: var(--fw-surface); border-radius: var(--fw-corner); box-shadow: var(--fw-lift); outline: 1px solid color-mix(in srgb, var(--fw-text) 8%, transparent); }
html.fw-shell .fw-gate .fw-gate-kicker { margin: 0 0 10px; font-family: var(--font-jetbrains), monospace; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fw-text-subtle); }
html.fw-shell .fw-gate .fw-gate-title { margin: 0 0 10px; font-family: var(--font-oswald), sans-serif; font-weight: 700; font-size: 30px; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; color: var(--fw-text); }
html.fw-shell .fw-gate .fw-gate-text { margin: 0 auto 18px; max-width: 46ch; font-family: var(--font-jetbrains), monospace; font-size: 12px; line-height: 1.5; color: var(--fw-text-muted); }
html.fw-shell .fw-gate .fw-gate-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; height: 40px; min-height: 0; padding: 0 22px; border: 0; border-radius: var(--fw-corner-sm); background: var(--fw-accent); color: #fff; font-family: var(--font-oswald), sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: opacity var(--fw-dur-state); }
html.fw-shell .fw-gate .fw-gate-btn:hover { opacity: 0.9; }
@media (prefers-reduced-transparency: reduce) { html.fw-shell .fw-gate-veil span { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Opening a conversation and answering. The theme gives every textarea a fixed 110px; these grow
   from their own rows as dev's do. The topics row is the LOG's own (dev's form has none). */
#fw-page .fw-say__field,
#fw-page .fw-open-thread__body,
#fw-page .fw-open-thread__title { height: auto; }
#fw-page .fw-open-thread__about { margin: 4px 0 10px; }
#fw-page .fw-open-thread__topics { margin-top: 18px; }
#fw-page .fw-open-thread__topics .fw-open-thread__eyebrow { margin-bottom: 8px; }
#fw-page .fw-open-thread__newtopic { display: flex; align-items: baseline; gap: 16px; margin-top: 10px; }
#fw-page .fw-open-thread__newtopic[hidden] { display: none; }
#fw-page .fw-open-thread__newtopic input { flex: 1 1 auto; min-width: 0; max-width: 320px; background: transparent; border: 0; border-bottom: 1px solid var(--fw-line); padding: 4px 2px; font-family: var(--font-jetbrains), monospace; font-size: 12px; color: var(--fw-text); outline: none; }

/* Four scopes outgrow a phone's width: the row scrolls sideways and each label stays whole. */
#fw-core [data-fwx="search-scopes"] { overflow-x: auto; scrollbar-width: none; }
#fw-core [data-fwx="search-scopes"]::-webkit-scrollbar { display: none; }
#fw-core [data-fwx="search-scopes"] > * { flex: none; white-space: nowrap; }
@media (max-width: 767px) { #fw-core [data-fwx="search-scopes"] > span { display: none; } }
#fw-core .fwx-plans-grid { width: 100%; max-width: var(--fwx-plans-w); }

/* A row that scrolls sideways keeps its sideways scroll to itself, and a wheel turned over it still
   scrolls the page: the studio scroller's "contain" holds both directions, which stopped the page
   under a card on a mouse wheel. */
:is(#fw-core, #fw-page, .fwx-scope) .fw-studio-scroll:is(.overflow-y-hidden, .fw-scroll-x) { overscroll-behavior-y: auto; }

/* The rail's trailing slot is a glyph's width; a word tag (MEMBERS) takes the width it needs. */
[data-design-contract] :is(#fw-core, #fw-page, .fwx-scope) .fw-rail-trail:has(> .fw-tag) { width: auto; }

/* Line breaks (owner, 2026-10-24): a line that fits stays one line, and a break never leaves one word
   alone. Every text avoids a one-word last line (text-wrap-style inherits); headings and centred lines
   balance theirs. A line set to nowrap keeps it. */
:is(#fw-core, #fw-page, .fwx-scope) { text-wrap: pretty; }
:is(#fw-core, #fw-page, .fwx-scope) :is(h1, h2, h3, h4, .text-center) { text-wrap: balance; }

/* ---------- the note that names a reader just signed in (98-arrival.js) ---------- */
#fw-core .fwx-arrival {
  position: absolute; top: calc(var(--fwx-arrival-top) + 14px); left: 50%; z-index: var(--fw-z-modal); display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 14px; border-radius: var(--fw-corner); background: var(--fw-glass-solid); box-shadow: var(--fw-seam), var(--fw-over);
  translate: -50% 0; animation: fwx-arrival-in 320ms var(--fw-ease-out); transition: opacity 400ms, translate 400ms;
}
#fw-core .fwx-arrival.is-leaving { opacity: 0; translate: -50% -8px; }
#fw-core .fwx-arrival__mark { width: 18px; height: 18px; flex: none; color: var(--fw-accent); }
#fw-core .fwx-arrival__words { display: flex; flex-direction: column; gap: 3px; }
#fw-core .fwx-arrival__kicker { font-family: var(--font-jetbrains), monospace; font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-core .fwx-arrival__line { font-family: var(--font-oswald), sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fw-text); white-space: nowrap; }
@keyframes fwx-arrival-in { from { opacity: 0; translate: -50% -8px; } to { opacity: 1; translate: -50% 0; } }
@media (max-width: 767px) { #fw-core .fwx-arrival { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 68px); } }
@media (prefers-reduced-motion: reduce) { #fw-core .fwx-arrival { animation: none; transition: none; } }

/* ---------- the join window's band for readers who already hold an account (84-join.js) ---------- */
#fw-core .fwx-join-band, #fw-page .fwx-join-band {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: var(--fwx-plans-w, 860px); margin: 14px auto 0; padding: 14px 14px 14px 20px;
  border-radius: var(--fw-corner); background: var(--fw-surface); box-shadow: var(--fw-seam);
}
#fw-core .fwx-join-band__ask, #fw-page .fwx-join-band__ask { margin: 0; font-family: var(--font-oswald), sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fw-text); }
/* On a dark page the free way in is the white one (boss, 2026-11-06); the windows are light in both themes (CATALOG_TONE). */
html[data-theme="dark"] #fw-page .fwx-join-free { background: var(--fw-inverse); color: var(--fwx-stage); }
#fw-core .fwx-join-band__go, #fw-page .fwx-join-band__go {
  display: inline-flex; flex: none; align-items: center; justify-content: center; height: 42px; padding: 0 28px; border-radius: var(--fw-radius);
  background: var(--fw-inverse); color: var(--fw-bg); font-family: var(--font-oswald), sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
#fw-core .fwx-join-band__go:hover, #fw-page .fwx-join-band__go:hover { opacity: 0.88; }
/* On the /newsletter/ page the cards span the column, and the band with them. */
#fw-page .fwx-join-band { max-width: none; }
@media (max-width: 639px) {
  #fw-core .fwx-join-band, #fw-page .fwx-join-band { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; text-align: center; }
}

/* ---------- the phone island (71-island.js): where the reader is, Hypercasts, Submit, Search ---------- */
@media (max-width: 767px) {
  #fw-core .fw-foot-island.fwx-isle { display: flex; align-items: stretch; padding-inline: 0; overflow: hidden; }
  #fw-core .fwx-isle__place { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 16px; color: var(--fw-text); text-align: left; }
  #fw-core .fwx-isle__place b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-oswald), sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
  /* The caret points up while the sections wait above the island, down while they are open. */
  #fw-core .fwx-isle__caret { flex: none; color: var(--fw-text-subtle); transform: rotate(180deg); transition: transform var(--fw-dur-move) var(--fw-ease-out); }
  #fw-core .fwx-isle__place[aria-expanded="true"] .fwx-isle__caret { transform: none; color: var(--fw-text); }
  #fw-core .fwx-isle__cell { position: relative; flex: none; display: flex; align-items: center; justify-content: center; min-width: 50px; padding: 0 4px; color: var(--fw-text-muted); text-decoration: none; }
  #fw-core .fwx-isle__cell::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 1px; background: var(--fw-line); }
  #fw-core .fwx-isle__cell[aria-current="page"] { color: var(--fw-accent); }
  #fw-core .fwx-isle__place:active, #fw-core .fwx-isle__cell:active { background: color-mix(in srgb, var(--fw-text) 6%, transparent); }
  #fw-core .fwx-isle__lens { width: 22px; height: 22px; }
  #fw-core .fwx-isle__submit { padding: 0 9px; }
  #fw-core .fwx-isle__submit span {
    display: flex; align-items: center; height: 32px; padding: 0 11px; border-radius: var(--fw-corner-sm);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fw-text) 28%, transparent);
    font-family: var(--font-oswald), sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fw-text);
  }
  #fw-core .fwx-isle__submit[aria-current="page"] span { background: var(--fw-accent); box-shadow: none; color: #fff; }
  /* The Hypercasts sign: seven bars whose outline is the Fakewhale diamond. They are HTML, because
     Safari on iOS left the same bars still as SVG. While a recording sounds they move in the text's
     colour; red there read as an alarm (owner, 2026-10-26). */
  #fw-core .fwx-wave { display: flex; align-items: center; gap: 1.5px; height: 22px; }
  #fw-core .fwx-wave i { display: block; width: 2px; height: 4px; border-radius: 1px; background: currentColor; }
  #fw-core .fwx-wave i:nth-child(2), #fw-core .fwx-wave i:nth-child(6) { height: 9px; }
  #fw-core .fwx-wave i:nth-child(3), #fw-core .fwx-wave i:nth-child(5) { height: 14px; }
  #fw-core .fwx-wave i:nth-child(4) { height: 20px; }
  #fw-core .fwx-isle[data-sounding] .fwx-isle__wave { color: var(--fw-text); }
  #fw-core .fwx-isle[data-sounding] .fwx-wave i { animation: fwx-isle-wave 0.9s ease-in-out infinite alternate; }
  #fw-core .fwx-isle[data-sounding] .fwx-wave i:nth-child(2) { animation-delay: -0.15s; }
  #fw-core .fwx-isle[data-sounding] .fwx-wave i:nth-child(3) { animation-delay: -0.45s; }
  #fw-core .fwx-isle[data-sounding] .fwx-wave i:nth-child(4) { animation-delay: -0.3s; }
  #fw-core .fwx-isle[data-sounding] .fwx-wave i:nth-child(5) { animation-delay: -0.6s; }
  #fw-core .fwx-isle[data-sounding] .fwx-wave i:nth-child(6) { animation-delay: -0.75s; }
  #fw-core .fwx-isle[data-sounding] .fwx-wave i:nth-child(7) { animation-delay: -0.2s; }
  /* Away, the island slides out of its clipped slot and goes inert. Core's visibility toggle stays off
     it: Safari on iOS left the clipped place label unpainted when the island came back. */
  #fw-core [aria-hidden="true"] > .fw-foot-island.fwx-isle { visibility: visible; }
  /* What floats at the foot wears the top island's glass (.fw-glass: the tint, the blur, the seam), so
     the bar reads as one material with the island at the head (owner, 2026-10-26). In light the island at
     the foot gets a hairline: its glass seam is white on a white band. */
  #fw-core { --fwx-float-edge: var(--fw-line); --fwx-float-top: var(--fw-line); }
  html[data-theme="dark"] #fw-core { --fwx-float-edge: #ffffff1f; --fwx-float-top: #ffffff3d; }
  html:not([data-theme="dark"]) #fw-core .fwx-isle { box-shadow: inset 0 0 0 1px var(--fw-line), var(--fw-lift); }
  #fw-core .fwx-np-row__player.fw-glass, #fw-core .fwx-dock .fw-glass {
    height: 52px; border: 0; border-radius: var(--fw-corner); box-shadow: var(--fw-seam), var(--fw-lift);
  }
  #fw-core .fwx-dock .fw-glass:active { background-color: color-mix(in srgb, var(--fw-text) 8%, var(--fw-glass-tint)); }
  #fw-core [data-fwx="phone-compose"] { position: relative; z-index: 1; }

  /* ASK, last in the island: the mark and the verb, as Submit is a verb beside it. */
  #fw-core .fwx-isle__ask { gap: 7px; padding: 0 15px 0 13px; color: var(--fw-text); }
  #fw-core .fwx-isle__ask svg { flex: none; color: var(--fw-accent); }
  #fw-core .fwx-isle__ask b { font-family: var(--font-oswald), sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

  /* The first visits' word, pointing at ASK from above the island (73-ask-hint.js). */
  #fw-core .fwx-ask-hint {
    position: relative; width: min(268px, calc(100vw - 2 * var(--fwm-gut, 14px))); margin: 0 var(--fwm-gut, 14px) 2px auto; padding: 14px 16px 15px;
    display: grid; gap: 6px; border-radius: var(--fw-corner); background: var(--fw-glass-solid); box-shadow: var(--fw-seam), var(--fw-lift);
    color: var(--fw-text); animation: fwx-dock-in 0.32s var(--fw-ease-out);
  }
  #fw-core .fwx-ask-hint::after {
    content: ""; position: absolute; right: 34px; bottom: -6px; width: 12px; height: 12px; background: var(--fw-glass-solid);
    transform: rotate(45deg); box-shadow: 1px 1px 0 var(--fw-line);
  }
  #fw-core .fwx-ask-hint small { font-family: var(--font-jetbrains), monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fw-accent); }
  #fw-core .fwx-ask-hint b { font-family: var(--font-oswald), sans-serif; font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
  #fw-core .fwx-ask-hint p { margin: 0; font-family: var(--font-jetbrains), monospace; font-size: 11.5px; line-height: 1.55; color: var(--fw-text-muted); }

  /* A page's way in (73-call.js): a strip a step above the island, in its glass, and its close. */
  #fw-core .fwx-call { display: flex; gap: var(--fw-sp-2); margin: 0 var(--fwm-gut, 14px); animation: fwx-dock-in 0.32s var(--fw-ease-out); }
  #fw-core .fwx-call .fw-glass { height: 44px; border: 0; border-radius: var(--fw-corner); box-shadow: var(--fw-seam), var(--fw-lift); color: var(--fw-text); }
  #fw-core .fwx-call__go { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; text-decoration: none; }
  #fw-core .fwx-call__go b { overflow: hidden; font-family: var(--font-oswald), sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
  #fw-core .fwx-call__x { flex: none; display: grid; place-items: center; width: 44px; padding: 0; color: var(--fw-text-muted); }
  html:not([data-theme="dark"]) #fw-core .fwx-call .fw-glass { box-shadow: inset 0 0 0 1px var(--fw-line), var(--fw-lift); }
  #fw-core .fwx-call .fw-glass:active { background-color: color-mix(in srgb, var(--fw-text) 8%, var(--fw-glass-tint)); }

  /* A recording loaded, the island up: the player floats a step above the island, across its width. */
  #fw-core .fwx-np-row { display: flex; gap: var(--fw-sp-2); margin: 0 var(--fwm-gut, 14px); }
  #fw-core .fwx-np-row__player.fw-glass { flex: 1; min-width: 0; display: flex; overflow: hidden; }
  #fw-core .fwx-np-row__player > .fwx-np-bar, #fw-core .fwx-dock__player > .fwx-np-bar { flex: 1; }

  /* The island away: one line in its place, at its height. The band under the island steps aside, so
     the glass floats over the page as the head's does. */
  #fw-core .fwx-phone-bar[aria-hidden="true"] { background: transparent; }
  #fw-core .fwx-dock {
    position: fixed; z-index: 1; left: var(--fwm-gut, 14px); right: var(--fwm-gut, 14px); bottom: max(16px, env(safe-area-inset-bottom));
    display: flex; gap: var(--fw-sp-2); animation: fwx-dock-in 0.24s var(--fw-ease-out);
  }
  #fw-core .fwx-dock__player.fw-glass { flex: 1; min-width: 0; display: flex; overflow: hidden; }
  #fw-core .fwx-dock__gap { flex: 1; }
  #fw-core .fwx-dock__grip.fw-glass, #fw-core .fwx-dock .fw-ask-peek.fw-glass {
    flex: none; display: grid; place-items: center; width: 52px; padding: 0; cursor: pointer;
  }
  #fw-core .fwx-dock__grip span { display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--fw-text-subtle); }
  #fw-core .fwx-dock .fw-ask-peek svg { width: 20px; height: 20px; color: var(--fw-accent); }

  /* The player in the bar: picture, title and time open its sheet, the toggle plays; the line at its foot
     is how far it has gone. */
  #fw-core .fwx-np-bar { position: relative; display: flex; align-items: stretch; min-width: 0; }
  #fw-core .fwx-np-bar__open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 2px 0 9px; border: 0; background: none; color: var(--fw-text); text-align: left; cursor: pointer; }
  #fw-core .fwx-np-bar__open:active, #fw-core .fwx-np-bar__toggle:active, #fw-core .fwx-np-bar__close:active { background: color-mix(in srgb, var(--fw-text) 6%, transparent); }
  #fw-core .fwx-np-bar__art { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); color: var(--fw-text-muted); }
  #fw-core .fwx-np-bar__art img, #fw-core .fwx-np__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #fw-core .fwx-np-bar__text { min-width: 0; display: grid; gap: 3px; }
  #fw-core .fwx-np-bar__text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-oswald), sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
  #fw-core .fwx-np-bar__meta { white-space: nowrap; font-family: var(--font-jetbrains), monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--fw-text-subtle); }
  #fw-core .fwx-np-bar__toggle { flex: none; display: grid; place-items: center; width: 46px; border: 0; background: none; color: var(--fw-text); cursor: pointer; }
  #fw-core .fwx-np-bar__toggle svg { width: 13px; height: 15px; }
  #fw-core .fwx-np-bar__close { flex: none; display: grid; place-items: center; width: 34px; margin-right: 4px; border: 0; background: none; color: var(--fw-text-subtle); cursor: pointer; }
  #fw-core .fwx-np-bar__close:active { color: var(--fw-text); }
  #fw-core .fwx-np-bar__track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--fw-text) 12%, transparent); pointer-events: none; }
  #fw-core .fwx-np-bar__track [data-fwx-progress], #fw-core .fwx-np__track [data-fwx-progress] { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fw-text); }

  /* While it sounds the bars at the picture's corner move, or the wave that stands in for a picture. */
  #fw-core .fwx-eq { position: absolute; left: 4px; bottom: 4px; display: flex; align-items: flex-end; gap: 1.5px; height: 11px; filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.6)); }
  #fw-core .fwx-eq i { display: block; width: 2px; height: 4px; border-radius: 1px; background: #fff; transform-origin: bottom; }
  #fw-core .fwx-eq i:nth-child(2) { height: 9px; } #fw-core .fwx-eq i:nth-child(3) { height: 6px; } #fw-core .fwx-eq i:nth-child(4) { height: 11px; }
  #fw-core .is-live .fwx-eq i { animation: fwx-isle-wave 0.8s ease-in-out infinite alternate; }
  #fw-core .is-live .fwx-eq i:nth-child(2) { animation-delay: -0.3s; } #fw-core .is-live .fwx-eq i:nth-child(3) { animation-delay: -0.55s; } #fw-core .is-live .fwx-eq i:nth-child(4) { animation-delay: -0.15s; }
  #fw-core .fwx-np__frame .fwx-eq { left: 12px; bottom: 12px; height: 22px; gap: 3px; }
  #fw-core .fwx-np__frame .fwx-eq i { width: 4px; border-radius: 2px; }
  #fw-core .fwx-np__frame .fwx-eq i:nth-child(1) { height: 8px; } #fw-core .fwx-np__frame .fwx-eq i:nth-child(2) { height: 18px; } #fw-core .fwx-np__frame .fwx-eq i:nth-child(3) { height: 12px; } #fw-core .fwx-np__frame .fwx-eq i:nth-child(4) { height: 22px; }
  #fw-core .is-live .fwx-np-bar__art .fwx-wave i, #fw-core .is-live .fwx-np__frame .fwx-wave i { animation: fwx-isle-wave 0.9s ease-in-out infinite alternate; }
  #fw-core .is-live .fwx-wave i:nth-child(2n) { animation-delay: -0.35s; } #fw-core .is-live .fwx-wave i:nth-child(3n) { animation-delay: -0.6s; }

  /* The recording's sheet, in the phone's window chrome (82-phone-window.js). */
  #fw-core .fwx-np { display: grid; gap: 16px; padding: 6px 18px max(22px, env(safe-area-inset-bottom)); }
  #fw-core .fwx-np__art { display: block; }
  #fw-core .fwx-np__frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--fw-corner); background: var(--fw-surface-2); color: var(--fw-text-muted); }
  #fw-core .fwx-np__frame .fwx-wave { transform: scale(2.4); }
  #fw-core .fwx-np__kicker { margin: 0; font-family: var(--font-jetbrains), monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fw-text-subtle); }
  #fw-core .fwx-np__title { margin: -8px 0 0; font-family: var(--font-oswald), sans-serif; font-size: 26px; font-weight: 700; line-height: 1; text-transform: uppercase; text-wrap: balance; color: var(--fw-text); }
  #fw-core .fwx-np__seek { padding: 10px 0; cursor: pointer; touch-action: none; }
  #fw-core .fwx-np__track { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--fw-text) 16%, transparent); }
  #fw-core .fwx-np__times { display: flex; justify-content: space-between; margin-top: -14px; font-family: var(--font-jetbrains), monospace; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fw-text-subtle); }
  #fw-core .fwx-np__controls { display: flex; align-items: center; justify-content: center; gap: 40px; }
  #fw-core .fwx-np__controls button { min-width: 48px; height: 48px; border: 0; background: none; font-family: var(--font-oswald), sans-serif; font-size: 16px; font-weight: 700; color: var(--fw-text); cursor: pointer; }
  #fw-core .fwx-np__controls .fwx-np__play { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--fw-text); color: var(--fw-bg); }
  #fw-core .fwx-np__play svg { width: 20px; height: 22px; }
  #fw-core .fwx-np__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--fw-line); }
  #fw-core .fwx-np__foot button, #fw-core .fwx-np__foot a { padding: 6px 0; border: 0; background: none; font-family: var(--font-jetbrains), monospace; font-size: 12px; color: var(--fw-text); text-decoration: none; cursor: pointer; }
  #fw-core .fwx-np__foot .fwx-np__stop { color: var(--fw-text-subtle); }

  /* The sections rise from the island over a dimmed page; the island stays above the dim to close them. */
  #fw-core .fwx-isle-scrim { position: fixed; inset: 0; z-index: 0; border: 0; padding: 0; background: color-mix(in srgb, #000 55%, transparent); touch-action: none; animation: fwx-isle-fade 0.2s var(--fw-ease-out); }
  #fw-core .fwx-isle-sheet {
    position: fixed; z-index: 2; left: var(--fwm-gut, 14px); right: var(--fwm-gut, 14px); max-height: 70vh; overflow-y: auto; padding: 10px 6px 6px;
    border-radius: var(--fw-corner); background: var(--fw-glass-solid); box-shadow: var(--fw-seam), var(--fw-lift);
    touch-action: none; transform-origin: 30% 100%; animation: fwx-isle-rise 0.24s var(--fw-ease-out); transition: transform 0.2s var(--fw-ease-out);
  }
  #fw-core .fwx-isle-sheet__grab { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--fw-surface-3); }
  #fw-core .fwx-isle-sheet__kicker { margin: 0 12px 6px; font-family: var(--font-jetbrains), monospace; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fw-text-subtle); }
  #fw-core .fwx-isle-sec { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 12px; border-radius: var(--fw-corner-sm); color: var(--fw-text); text-decoration: none; }
  #fw-core .fwx-isle-sec b { flex: 1; font-family: var(--font-oswald), sans-serif; font-size: 19px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
  #fw-core .fwx-isle-sec.is-child { height: 44px; padding-left: 28px; }
  #fw-core .fwx-isle-sec.is-child b { font-size: 16px; color: var(--fw-text-muted); }
  #fw-core .fwx-isle-sec:active { background: var(--fw-surface-2); }
  #fw-core .fwx-isle-sec[aria-current="page"] b { color: var(--fw-accent); }
  #fw-core .fwx-isle-sec[aria-current="page"]::after { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--fw-accent); }
}
@keyframes fwx-isle-wave { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@keyframes fwx-isle-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fwx-isle-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fwx-dock-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #fw-core .fwx-isle[data-sounding] .fwx-wave i, #fw-core .fwx-isle-sheet, #fw-core .fwx-isle-scrim, #fw-core .fwx-dock, #fw-core .fwx-ask-hint, #fw-core .fwx-call, #fw-core .is-live .fwx-eq i, #fw-core .is-live .fwx-wave i { animation: none; }
}

/* ---------- listening across pages (86-keep-listening.js): a page staged over the one holding the audio ---------- */
html.fw-shell.fwx-staged, html.fw-shell.fwx-staged body { overflow: hidden !important; }
html.fw-shell .fwx-stage-frame { position: fixed; inset: 0; z-index: 2147483000; width: 100%; height: 100%; border: 0; background: var(--fwx-stage); }

/* ---------- a page's way in on a computer (73-call.js) ---------- */
/* A glass strip under the bar, as wide as the page's column: the page's words on the left, its one action and a
   close on the right. It slides in once three rows of cards have gone by and out again near the top. */
#fw-core .fwx-call-top {
  position: fixed;
  z-index: var(--fwx-z-columns);
  top: calc(var(--fwx-ab) + var(--fwx-top));
  left: calc(var(--fwx-l) + var(--fwx-edge));
  right: calc(var(--fwx-r) + var(--fwx-edge));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 24px;
  padding: 12px 12px 12px 20px;
  border-radius: var(--fw-corner);
  box-shadow: var(--fw-seam), var(--fw-lift);
  color: var(--fw-text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--fw-dur-state, 150ms) ease, transform 0.32s var(--fw-ease-out), visibility 0s linear 0.32s;
}
#fw-core .fwx-call-top.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html:not([data-theme="dark"]) #fw-core .fwx-call-top { box-shadow: inset 0 0 0 1px var(--fw-line), var(--fw-lift); }
#fw-core .fwx-call-top__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#fw-core .fwx-call-top__words b { font-family: var(--font-oswald), sans-serif; font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; text-transform: uppercase; color: var(--fw-text); }
#fw-core .fwx-call-top__words span { font-family: var(--font-jetbrains), monospace; font-size: 13px; line-height: 1.5; letter-spacing: -0.01em; color: var(--fw-text-secondary); }
#fw-core .fwx-call-top__go { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border: 0; border-radius: var(--fw-corner-sm, 4px); background: var(--fw-inverse); color: var(--fw-bg); font-family: var(--font-jetbrains), monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: opacity var(--fw-dur-state, 150ms); }
#fw-core .fwx-call-top__go:hover { opacity: 0.85; color: var(--fw-bg); }
#fw-core .fwx-call-top__x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--fw-corner-sm, 4px); background: none; color: var(--fw-text-muted); cursor: pointer; }
#fw-core .fwx-call-top__x:hover { color: var(--fw-text); }
@media (max-width: 767px) {
  #fw-core .fwx-call-top { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #fw-core .fwx-call-top { transform: none; transition: opacity var(--fw-dur-state, 150ms) ease, visibility 0s linear var(--fw-dur-state, 150ms); }
}

/* Audience in wp-admin (audience-admin.php): wp-admin's own palette and measures, light as wp-admin is. The build
   copies this block alone in front of audience-admin.css; nothing else of this file reaches wp-admin. */
.fwx-aud {
  --fwx-aud-panel: #fff;
  --fwx-aud-page: #f0f0f1;
  --fwx-aud-ink: #1d2327;
  --fwx-aud-muted: #50575e;
  --fwx-aud-faint: #8c8f94;
  --fwx-aud-line: #dcdcde;
  --fwx-aud-rule: #f0f0f1;
  --fwx-aud-soft: #f6f7f7;
  --fwx-aud-blue: #2271b1;
  --fwx-aud-on: #f0f6fc;
  --fwx-aud-ok: #00a32a;
  --fwx-aud-warn: #dba617;
  --fwx-aud-bad: #d63638;
  --fwx-aud-off: #c3c4c7;
  --fwx-aud-sel: #edfaef;
  --fwx-aud-sel-ink: #00450c;
  --fwx-aud-sent: #fcf9e8;
  --fwx-aud-sent-ink: #614200;
  --fwx-aud-dec: #fcf0f1;
  --fwx-aud-dec-ink: #8a2424;
  --fwx-aud-gap: 16px;
  --fwx-aud-gap-s: 10px;
  --fwx-aud-gap-xs: 6px;
  --fwx-aud-cell: 8px;
  --fwx-aud-card-w: 360px;
  --fwx-aud-table-min: 980px;
  --fwx-aud-count-min: 118px;
  --fwx-aud-search-w: 220px;
  --fwx-aud-key-w: 112px;
  --fwx-aud-dot: 8px;
  --fwx-aud-bar-w: 9px;
  --fwx-aud-bar-h: 5px;
  --fwx-aud-bar-gap: 2px;
  --fwx-aud-pill-r: 10px;
  --fwx-aud-pill-pad: 1px 7px;
  --fwx-aud-line-w: 1px;
  --fwx-aud-sticky: 44px;
  --fwx-aud-adminbar: 32px;
  --fwx-aud-adminbar-m: 46px;
  --fwx-aud-big: 22px;
  --fwx-aud-title: 16px;
  --fwx-aud-head: 14px;
  --fwx-aud-small: 12px;
  --fwx-aud-tiny: 11px;
  --fwx-aud-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fwx-aud-out-card-w: 288px;
  --fwx-aud-out-cols: 5;
  --fwx-aud-out-cols-s: 3;
  --fwx-aud-out-gap: 8px;
  --fwx-aud-out-edge: 2px;
  --fwx-aud-out-on: 3px;
  --fwx-aud-out-tag: 18px;
  --fwx-aud-out-pos-w: 22px;
  --fwx-aud-out-pos-bg: rgb(29 35 39 / 82%);
  --fwx-aud-out-pos-ink: #fff;
  --fwx-aud-out-faded: .32;
  --fwx-aud-out-lifted: 0 10px 24px rgb(0 0 0 / 28%);
  --fwx-aud-out-place-w: 72px;
  --fwx-aud-out-key-w: 76px;
  --fwx-aud-out-thumb-s: 120px;
  --fwx-aud-out-top: 32px;
  --fwx-aud-out-card-top: 96px;
  --fwx-aud-cov-phone-w: 180px;
  --fwx-aud-cov-home: 1368 / 884;
  --fwx-aud-cov-home-phone: 358 / 608;
  --fwx-aud-cov-about: 21 / 9;
  --fwx-aud-cov-contact: 1368 / 378;
  --fwx-aud-cov-phone: 9 / 16;
}

/* The covers' part (covers.css): the article's 16:9 and the phone cards' 3:4. At one height a 3:4 frame is 27/64 of
   a 16:9 frame's width, so the two columns share the row in that measure. */
:root {
  --fwx-cover-wide: 16 / 9;
  --fwx-cover-tall: 3 / 4;
  --fwx-cover-cols: minmax(0, 64fr) minmax(0, 27fr);
  --fwx-cover-tall-alone: 60%;
}

/* The package pages (packages.css, PIANO_OFFERTE.md §10.2): the measures of mock v4 «After payment», named once. */
:root {
  --fwx-pk-page: 1200px;
  --fwx-pk-hair: 1px;
  --fwx-pk-bar: 3px;
  --fwx-pk-s1: 4px;
  --fwx-pk-s2: 6px;
  --fwx-pk-s3: 8px;
  --fwx-pk-s4: 10px;
  --fwx-pk-s5: 12px;
  --fwx-pk-s6: 14px;
  --fwx-pk-s7: 16px;
  --fwx-pk-s8: 18px;
  --fwx-pk-s9: 24px;
  --fwx-pk-s10: 30px;
  --fwx-pk-s11: 40px;
  --fwx-pk-t1: 9px;
  --fwx-pk-t2: 10px;
  --fwx-pk-t3: 11px;
  --fwx-pk-t4: 12px;
  --fwx-pk-t5: 13px;
  --fwx-pk-t6: 14px;
  --fwx-pk-t7: 15px;
  --fwx-pk-t8: 16px;
  --fwx-pk-t9: 18px;
  --fwx-pk-t10: 24px;
  --fwx-pk-h1: clamp(44px, 6.6vw, 96px);
  --fwx-pk-h2: clamp(28px, 3.5vw, 46px);
  --fwx-pk-name: clamp(28px, 2.8vw, 38px);
  --fwx-pk-ctl: 50px;
  --fwx-pk-ctl-sm: 38px;
  --fwx-pk-chip: 32px;
  --fwx-pk-tick: 18px;
  --fwx-pk-tk: 14px;
  --fwx-pk-num: 52px;
  --fwx-pk-act: 196px;
  --fwx-pk-thumb: 72px;
  --fwx-pk-thumb-sm: 56px;
  --fwx-pk-pick: 96px;
  --fwx-pk-pick-n: 22px;
  --fwx-pk-terms: 340px;
  --fwx-pk-area: 112px;
  --fwx-pk-held: calc(var(--fwx-ab) + var(--fwx-top));
}

/* My Submissions (submissions-mine.css), in the package pages' look: a sent row's thumbnail, and the pictures of what
   was sent when a row opens. */
:root {
  --fwx-mine-thumb: 168px;
  --fwx-mine-thumb-sm: 88px;
  --fwx-mine-cover: 200px;
  --fwx-mine-view: 160px;
  --fwx-mine-fact: 220px;
}
/* Hypercasts (hypercasts-pages.php, hypercasts-show.php): a podcast's page in CORE's tokens, one markup
   for computer and phone. The player unit (button, drawn wave, time) is the same on every picture. */
#fw-page :is(.fwx-hc, .fwx-hc-solo) {
  --hc-on-ink: var(--fw-bg);
  --hc-display: var(--font-oswald), "Arial Narrow", sans-serif;
  --hc-mono: var(--font-jetbrains), ui-monospace, monospace;
  font-family: var(--hc-mono); color: var(--fw-text);
}
#fw-page .fwx-hc { display: flex; flex-direction: column; gap: 30px; padding: 0 var(--fw-pad) 48px; }
#fw-page :where(.fwx-hc, .fwx-hc-solo) :where(button) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; box-shadow: none; }
#fw-page :where(.fwx-hc) :where(a) { color: inherit; text-decoration: none; }
#fw-page :where(.fwx-hc) :where(h1, h2, h3, p) { margin: 0; }
#fw-page .fwx-hc-mark { flex: none; color: var(--fw-accent); }
#fw-page .fwx-hc-eyebrow { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-hc-dot { display: inline-block; flex: none; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--fw-accent); vertical-align: 1px; }

/* the series: the latest episode's picture, the name, its wave, one row of controls */
#fw-page .fwx-hc-hero { position: relative; display: flex; align-items: flex-end; min-height: 460px; overflow: hidden; border-radius: var(--fw-corner-sm); background: #111; }
#fw-page .fwx-hc-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#fw-page .fwx-hc-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .6) 45%, rgb(0 0 0 / .1) 100%); }
#fw-page .fwx-hc-hero__in { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 28px; color: #fff; }
#fw-page .fwx-hc-hero__in > .fwx-hc-eyebrow { color: rgb(255 255 255 / .75); }
#fw-page .fwx-hc-hero h1 { font: 700 clamp(56px, 9vw, 112px)/.86 var(--hc-display); letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
#fw-page .fwx-hc-hero .fwx-hc-hero__wave { width: 100%; height: 46px; --wave-rest: rgb(255 255 255 / .9); --wave-hover: #fff; --wave-done: #fff; }
#fw-page .fwx-hc-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
#fw-page .fwx-hc-bigplay { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #0a0a0a; }
#fw-page .fwx-hc-playwhat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#fw-page .fwx-hc-playwhat .fwx-hc-eyebrow { color: rgb(255 255 255 / .7); }
#fw-page .fwx-hc-playwhat b { font: 700 15px/1.1 var(--hc-display); text-transform: uppercase; color: #fff; }
#fw-page .fwx-hc-sub { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid rgb(255 255 255 / .6); border-radius: var(--fw-corner-pill); font: 700 10.5px/1 var(--hc-mono); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
#fw-page .fwx-hc-sub:hover { background: rgb(255 255 255 / .12); }
#fw-page .fwx-hc-intro { display: flex; flex-direction: column; gap: 8px; }
#fw-page .fwx-hc-intro p { max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-hc-intro__meta { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fw-text-subtle); font-variant-numeric: tabular-nums; }
#fw-page .fwx-hc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--fw-corner-sm); font: 700 10.5px/1 var(--hc-mono); letter-spacing: .16em; text-transform: uppercase; }
#fw-page .fwx-hc-btn--ink { background: var(--fw-inverse); color: var(--hc-on-ink); }
#fw-page .fwx-hc-btn--line { border-color: var(--fw-border); color: var(--fw-text); }
#fw-page .fwx-hc-btn[aria-pressed="true"] { opacity: .7; }
#fw-page .fwx-hc-note { font-size: 10.5px; line-height: 1.5; color: var(--fw-accent); }
#fw-page .fwx-hc-note:empty { display: none; }

/* tabs */
#fw-page .fwx-hc-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--fw-line); }
#fw-page .fwx-hc-tabs[hidden] { display: none; }
#fw-page .fwx-hc-tabs button { margin-bottom: -1px; padding: 0 0 12px; border-bottom: 2px solid transparent; font: 700 18px/1 var(--hc-display); text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-hc-tabs button[aria-selected="true"] { border-color: var(--fw-text); color: var(--fw-text); }
#fw-page .fwx-hc-panel { display: flex; flex-direction: column; gap: 30px; }
#fw-page .fwx-hc-panel[hidden] { display: none; }
#fw-page .fwx-hc-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#fw-page .fwx-hc-shead h3 { font: 700 16px/1.1 var(--hc-display); letter-spacing: .02em; text-transform: uppercase; color: var(--fw-text); }

/* the player unit */
#fw-page .fwx-hc-player { display: flex; align-items: center; gap: 12px; min-width: 0; }
#fw-page .fwx-hc-play { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hc-on-ink); color: var(--fw-inverse); }
#fw-page .fwx-hc-time { flex: none; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .85; }
#fw-page .fwx-hc-wave { display: block; flex: none; min-width: 0; height: 34px; cursor: pointer; touch-action: manipulation;
  --wave-rest: color-mix(in srgb, var(--hc-on-ink) 30%, transparent); --wave-hover: color-mix(in srgb, var(--hc-on-ink) 60%, transparent); --wave-done: var(--hc-on-ink); }
#fw-page .fwx-hc-player .fwx-hc-wave { flex: 1 1 0; }
#fw-page .fwx-hc-player--media { color: #fff; }
#fw-page .fwx-hc-player--media .fwx-hc-play { width: 34px; height: 34px; background: #fff; color: #0a0a0a; }
#fw-page .fwx-hc-player--media .fwx-hc-wave { height: 28px; --wave-rest: rgb(255 255 255 / .38); --wave-hover: rgb(255 255 255 / .7); --wave-done: #fff; }
#fw-page .fwx-hc-wave--ghost { cursor: inherit; }
#fw-page .fwx-hc-player--media .fwx-hc-wave--ghost, #fw-page .fwx-hc-tile__art .fwx-hc-wave--ghost { --wave-rest: rgb(255 255 255 / .22); }
#fw-page .fwx-hc-player--page .fwx-hc-play { width: 50px; height: 50px; background: var(--fw-text); color: var(--fw-bg); }
#fw-page .fwx-hc-player--page .fwx-hc-wave { --wave-rest: color-mix(in srgb, var(--fw-text) 24%, transparent); --wave-hover: color-mix(in srgb, var(--fw-text) 50%, transparent); --wave-done: var(--fw-text); }
#fw-page .fwx-hc-player--page .fwx-hc-time { color: var(--fw-text-muted); opacity: 1; }
#fw-page .fwx-hc-bell { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border: 1px solid rgb(255 255 255 / .7); border-radius: 50%; color: #fff; }
#fw-page .fwx-hc-bell[aria-pressed="true"] { background: #fff; color: #0a0a0a; }
#fw-page .fwx-hc-bell--line { border-color: var(--fw-border); color: var(--fw-text); }
#fw-page .fwx-hc-bell--line[aria-pressed="true"] { background: var(--fw-inverse); color: var(--hc-on-ink); }
#fw-page .fwx-hc-bell .fwx-hc-bell__on, #fw-page .fwx-hc-bell[aria-pressed="true"] .fwx-hc-bell__off { display: none; }
#fw-page .fwx-hc-bell[aria-pressed="true"] .fwx-hc-bell__on { display: block; }

/* cards: the episodes and the premiere share one anatomy */
#fw-page .fwx-hc-tag { position: absolute; left: 10px; top: 10px; z-index: 3; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; font: 700 8px/1 var(--hc-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgb(0 0 0 / .55); backdrop-filter: blur(2px); }
#fw-page .fwx-hc-tag--accent { background: var(--fw-accent); }
#fw-page .fwx-hc-tag--right { left: auto; right: 10px; }
#fw-page .fwx-hc-art { position: relative; display: block; overflow: hidden; background: var(--fw-surface-3); }
#fw-page .fwx-hc-art img, #fw-page .fwx-hc-art .fwx-hc-seeded { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#fw-page .fwx-hc-art__link { position: absolute; inset: 0; }
#fw-page .fwx-hc-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .34) 34%, rgb(0 0 0 / 0) 60%); }
#fw-page .fwx-hc-bar { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 10px 12px; }
#fw-page .fwx-hc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fw-gutter); }
#fw-page .fwx-hc-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); }
#fw-page .fwx-hc-card.is-playing { box-shadow: inset 0 0 0 1.5px var(--fw-text); }
#fw-page .fwx-hc-card .fwx-hc-art { aspect-ratio: 16 / 9; }
#fw-page .fwx-hc-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 12px 14px; }
#fw-page .fwx-hc-card__date { display: flex; justify-content: space-between; gap: 8px; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-muted); font-variant-numeric: tabular-nums; }
#fw-page .fwx-hc-card__title { font: 700 15px/1.08 var(--hc-display); text-align: left; text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-hc-card__title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#fw-page .fwx-hc-card__about { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 11px; line-height: 1.55; color: var(--fw-text-muted); }
#fw-page .fwx-hc-card--premiere { flex-direction: row; background: var(--fw-inverse); color: var(--hc-on-ink); }
#fw-page .fwx-hc-card--premiere .fwx-hc-art { flex: none; width: 58%; aspect-ratio: auto; min-height: 280px; cursor: pointer; }
#fw-page .fwx-hc-card--premiere .fwx-hc-card__body { justify-content: center; gap: 8px; padding: 18px 20px; }
#fw-page .fwx-hc-card--premiere .fwx-hc-card__title { font-size: 26px; color: inherit; }
#fw-page .fwx-hc-card--premiere .fwx-hc-card__date, #fw-page .fwx-hc-card--premiere .fwx-hc-card__about { color: color-mix(in srgb, var(--hc-on-ink) 65%, transparent); }
#fw-page .fwx-hc-card__count { font: 700 22px/1 var(--hc-display); text-transform: uppercase; }

/* programme: one rail of broadcasts with today in it */
#fw-page .fwx-hc-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
#fw-page .fwx-hc-tile { display: flex; flex: none; flex-direction: column; gap: 8px; width: 168px; padding: 10px; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); text-align: left; scroll-snap-align: start; }
#fw-page .fwx-hc-tile__date { display: flex; align-items: baseline; gap: 8px; }
#fw-page .fwx-hc-tile__date b { font: 700 30px/1 var(--hc-display); font-variant-numeric: tabular-nums; }
#fw-page .fwx-hc-tile__date small { font-size: 9px; letter-spacing: .16em; color: var(--fw-text-subtle); }
#fw-page .fwx-hc-tile__art { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 3px; background: var(--fw-surface-3); }
#fw-page .fwx-hc-tile__art img, #fw-page .fwx-hc-tile__art .fwx-hc-seeded { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#fw-page .fwx-hc-tile__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .7), rgb(0 0 0 / 0) 60%); }
#fw-page .fwx-hc-tile__art .fwx-hc-wave { position: absolute; right: 8px; bottom: 6px; left: 8px; z-index: 1; width: calc(100% - 16px); height: 18px; cursor: inherit; --wave-rest: rgb(255 255 255 / .55); }
#fw-page .fwx-hc-tile__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.2em; font: 700 13px/1.1 var(--hc-display); text-transform: uppercase; }
#fw-page .fwx-hc-tile__foot { display: flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--fw-text-muted); }
#fw-page .fwx-hc-tile__foot .fwx-hc-dot { margin-right: 0; }
#fw-page .fwx-hc-tile.is-next { background: var(--fw-inverse); color: var(--hc-on-ink); }
#fw-page .fwx-hc-tile.is-next .fwx-hc-tile__date small, #fw-page .fwx-hc-tile.is-next .fwx-hc-tile__foot { color: color-mix(in srgb, var(--hc-on-ink) 70%, transparent); }
#fw-page .fwx-hc-tile.is-later { background: transparent; box-shadow: inset 0 0 0 1px var(--fw-border); }
#fw-page .fwx-hc-today { display: flex; flex: none; flex-direction: column; align-items: center; gap: 8px; width: 46px; padding-top: 8px; scroll-snap-align: center; }
#fw-page .fwx-hc-today i { flex: 1; width: 2px; border-radius: 2px; background: var(--fw-text); }
#fw-page .fwx-hc-today span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
#fw-page .fwx-hc-list { display: flex; flex-direction: column; gap: 6px; }
#fw-page .fwx-hc-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); }
#fw-page .fwx-hc-row__date { text-align: center; }
#fw-page .fwx-hc-row__date b { display: block; font: 700 24px/1 var(--hc-display); }
#fw-page .fwx-hc-row__date small { font-size: 9px; letter-spacing: .2em; color: var(--fw-text-subtle); }
#fw-page .fwx-hc-row__main { min-width: 0; text-align: left; }
#fw-page .fwx-hc-row__title { display: block; font: 700 15px/1.08 var(--hc-display); text-transform: uppercase; }
#fw-page .fwx-hc-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 4px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fw-text-muted); }

/* the sheet an entry opens */
#fw-page .fwx-hc-sheet { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 0; overflow: auto; border: 0; border-radius: var(--fw-corner); background: var(--fw-surface); color: var(--fw-text); box-shadow: var(--fw-over); }
#fw-page .fwx-hc-sheet::backdrop { background: rgb(10 10 10 / .5); }
#fw-page .fwx-hc-sheet .fwx-hc-art { aspect-ratio: 16 / 9; }
#fw-page .fwx-hc-sheet__in { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }
#fw-page .fwx-hc-sheet__meta { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-subtle); font-variant-numeric: tabular-nums; }
#fw-page .fwx-hc-sheet h2 { font: 700 26px/1 var(--hc-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-hc-about { font-size: 12px; line-height: 1.65; color: var(--fw-text-muted); }
#fw-page .fwx-hc-about a { text-decoration: underline; text-decoration-color: var(--fw-border); text-underline-offset: 3px; }
#fw-page .fwx-hc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#fw-page .fwx-hc-close { position: absolute; top: 10px; right: 10px; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; }

@media (max-width: 1100px) {
  #fw-page .fwx-hc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #fw-page .fwx-hc { gap: 24px; }
  #fw-page .fwx-hc-hero { min-height: 420px; }
  #fw-page .fwx-hc-hero__in { padding: 18px 16px; }
  #fw-page .fwx-hc-controls { gap: 10px; }
  #fw-page .fwx-hc-playwhat b { font-size: 13px; }
  #fw-page .fwx-hc-sub { width: 44px; padding: 0; }
  #fw-page .fwx-hc-sub span { display: none; }
  #fw-page .fwx-hc-tabs button { font-size: 16px; }
  #fw-page .fwx-hc-cards { grid-template-columns: minmax(0, 1fr); }
  #fw-page .fwx-hc-card--premiere { flex-direction: column; }
  #fw-page .fwx-hc-card--premiere .fwx-hc-art { width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
  #fw-page .fwx-hc-card--premiere .fwx-hc-card__body { justify-content: flex-start; padding: 14px 12px 16px; }
  #fw-page .fwx-hc-card--premiere .fwx-hc-card__title { font-size: 20px; }
  #fw-page .fwx-hc-tile { width: 148px; }
}

/* A recording's own page: its cover sits inside the page's gutter with the frame's corners, like every
   other picture on the LOG, instead of flush against the column. */
#fw-page .fwx-hc-cover { border-radius: var(--fw-corner); }
@media (min-width: 768px) { #fw-page .fwx-hc-cover { margin-left: var(--fw-pad); } }
@media (max-width: 767px) { #fw-page .fwx-hc-cover { width: auto; margin-inline: var(--fw-pad); } }
/* The theme's footer drawn in the frame's language (owner's pick, mock B): on the page's own ground under a
   hairline, the column's gutter and corners, CORE type, the newsletter as a field and an ink button, the
   footer menu as three columns, always open, monochrome socials. The markup stays the
   theme's, so the menu is edited in wp-admin and the form posts where it always did. */
html.fw-shell .cs-footer { --ft-pad: var(--fwx-edge); margin: 0; padding: 0 var(--ft-pad) 28px; background: transparent; font-family: var(--font-jetbrains), ui-monospace, monospace; }
html.fw-shell .cs-footer .cs-footer__item { background: transparent; padding: 0; border: 0; }
html.fw-shell .cs-footer .cs-container { max-width: none; padding: 0; margin: 0; }
html.fw-shell .cs-footer .cs-footer__item-inner { padding: 0; margin: 0; border: 0; min-height: 0; }

/* wordmark and newsletter */
html.fw-shell .cs-footer .cs-footer__item-top-bar { padding-top: 28px; border-top: 1px solid var(--fw-line); }
html.fw-shell .cs-footer .cs-footer__item-top-bar .cs-footer__item-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 24px 40px; }
html.fw-shell .cs-footer .cs-col-left, html.fw-shell .cs-footer .cs-col-right, html.fw-shell .cs-footer .cs-col-center { width: auto; max-width: none; flex: none; margin: 0; padding: 0; }
html.fw-shell .cs-footer .cs-logo img { display: block; width: auto; height: 20px; max-width: 100%; }
html.fw-shell .cs-footer .cs-footer__description { margin-top: 10px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-subtle); }
html.fw-shell .cs-footer .cs-subscribe { justify-self: end; width: 100%; max-width: 520px; margin: 0; padding: 0; background: transparent; }
html.fw-shell .cs-footer .cs-subscribe__inner, html.fw-shell .cs-footer .cs-subscribe__content { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
html.fw-shell .cs-footer .cs-subscribe__header { margin: 0; }
html.fw-shell .cs-footer .cs-subscribe__heading { margin: 0; font: 700 16px/1.1 var(--font-oswald), sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--fw-text); }
html.fw-shell .cs-footer .cs-subscribe__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
html.fw-shell .cs-footer .cs-subscribe__form-group, html.fw-shell .cs-footer .cs-subscribe__form-group .cs-form-group__inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
html.fw-shell .cs-footer .cs-subscribe .cs-form-group__inner { flex: 1; min-width: 0; }
/* One 40px row: the theme gives the field's box a 50px minimum and centres the group's children with a
   :has() rule as heavy as ours, which dropped the button 5px below the field. Field and button fill the row. */
html.fw-shell .cs-footer .cs-subscribe .cs-subscribe__form-group { height: 40px; align-items: stretch; }
html.fw-shell .cs-footer .cs-subscribe .cs-subscribe__form-group .cs-form-group__inner { height: 100%; min-height: 0; }
html.fw-shell .cs-footer .cs-subscribe .cs-subscribe__form-group input[type="email"],
html.fw-shell .cs-footer .cs-subscribe .cs-subscribe__form-group .cs-button-animated { height: 100%; min-height: 0; max-height: none; }
/* The field's label stays for screen readers; the placeholder carries it on screen, as in the theme. */
html.fw-shell .cs-footer .cs-subscribe .cs-form-group label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.fw-shell .cs-footer .cs-subscribe input[type="email"], html.fw-shell .cs-footer .cs-subscribe input[type="text"] { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); color: var(--fw-text); font: 400 13px/1 var(--font-jetbrains), monospace; box-shadow: none; }
html.fw-shell .cs-footer .cs-subscribe button, html.fw-shell .cs-footer .cs-subscribe input[type="submit"] { flex: none; width: auto; min-width: max-content; height: 40px; margin: 0; padding: 0 18px; border: 0; border-radius: var(--fw-corner-sm); background: var(--fw-inverse); color: var(--fw-bg); font: 700 10.5px/1 var(--font-jetbrains), monospace; letter-spacing: .16em; text-transform: uppercase; box-shadow: none; }
html.fw-shell .cs-footer .cs-subscribe button:hover, html.fw-shell .cs-footer .cs-subscribe input[type="submit"]:hover { opacity: .86; }
/* The theme's animated button paints its colour on an inner span and a growing circle; here the button is plain ink. */
html.fw-shell .cs-footer .cs-subscribe .cs-button-animated__circle { display: none; }
/* .cs-button-animated zeroes its own padding with !important, so the inset lives on the inner span. */
html.fw-shell .cs-footer .cs-subscribe .cs-button-animated__inner { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; padding: 0 18px; background: transparent; color: inherit; border: 0; box-shadow: none; }
html.fw-shell .cs-footer .cs-subscribe .cs-button-animated__text { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
html.fw-shell .cs-footer .cs-subscribe__form-description { margin: 0; font-size: 10px; line-height: 1.6; color: var(--fw-text-subtle); }
html.fw-shell .cs-footer .cs-subscribe__form-description a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* The box for proposals under the address (84-join.js), in the footer and in the production popup, whose dark box
   sets its own colour: the line takes the colour around it, a step quieter. */
html.fw-shell .fwx-nl-offers { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0; background: transparent; color: inherit; opacity: .8; cursor: pointer;
  font: 400 11px/1.45 var(--font-jetbrains), monospace; letter-spacing: 0; text-transform: none; }
html.fw-shell .fwx-nl-offers input { flex: none; margin: 2px 0 0; accent-color: var(--fw-text); }
html.fw-shell .cs-footer .cs-subscribe .fwx-nl-offers { background: transparent; color: var(--fw-text-muted); opacity: 1; }
#fw-newsletter-box .fwx-nl-offers { margin-top: 12px; }

/* The newsletter popup (84-newsletter-popup.js): one card over a veil of the page's own ground, blurred like the cards window's
   (--fw-overlay lives only inside CORE's scheme classes, which this page has none of), in the LOG's colours for each theme,
   above every layer of the frame (the catalog's, + 1) and under the cookie banner. The red Subscribe follows the rule red = newsletter and sign-in. */
html.fw-shell .fwx-nlpop { position: fixed; inset: 0; z-index: calc(var(--fwx-z-catalog) + 1); display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--fw-bg) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.fw-shell .fwx-nlpop__box { position: relative; width: 100%; max-width: 500px; padding: 40px; border: 1px solid var(--fw-line); border-radius: var(--fw-corner-sm); background: var(--fw-bg); color: var(--fw-text); }
html.fw-shell .fwx-nlpop__close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--fw-text-muted); font-size: 22px; line-height: 1; cursor: pointer; }
html.fw-shell .fwx-nlpop__title { margin: 0 0 20px; font: 700 20px/1.1 var(--font-oswald), sans-serif; letter-spacing: .02em; text-transform: uppercase; }
html.fw-shell .fwx-nlpop__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
html.fw-shell .fwx-nlpop__row { display: flex; flex-direction: column; gap: 8px; margin: 0; }
html.fw-shell .fwx-nlpop__row input[type="email"] { height: 48px; padding: 0 14px; border: 0; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); color: var(--fw-text); font: 400 14px/1 var(--font-jetbrains), monospace; }
html.fw-shell .fwx-nlpop__row button { height: 48px; border: 0; border-radius: var(--fw-corner-sm); background: var(--fw-accent); color: #fff; font: 700 14px/1 var(--font-jetbrains), monospace; cursor: pointer; }
html.fw-shell .fwx-nlpop__row button:disabled { opacity: .6; cursor: default; }
html.fw-shell .fwx-nlpop__terms { margin: 4px 0 0; font: 400 10px/1.6 var(--font-jetbrains), monospace; color: var(--fw-text-subtle); }
html.fw-shell .fwx-nlpop__terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { html.fw-shell .fwx-nlpop__box { padding: 28px 20px 24px; } }

/* the footer menu: five columns, always open */
html.fw-shell .cs-footer .cs-footer__item-columns { padding-top: 32px; }
/* Margin to margin: the first column starts at the left edge, the last ends at the right one, the room between
   shared out evenly (owner, 2026-10-29: equal columns left the last one short of the edge). Each column is as
   wide as its words: the theme gives them 140px, which left the last one's words short of the edge too. */
html.fw-shell .cs-footer .cs-footer-columns__nav { display: flex; justify-content: space-between; gap: 24px; margin: 0; padding: 0; list-style: none; }
html.fw-shell .cs-footer .cs-footer-columns__nav > li { flex: none; min-width: 0; }
html.fw-shell .cs-footer .cs-footer-columns__nav > li { display: block; align-self: start; margin: 0; padding: 0; border: 0; }
html.fw-shell .cs-footer .cs-footer-columns__nav > li > a { display: block; margin: 0 0 12px; padding: 0; font: 500 9px/1.3 var(--font-jetbrains), monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-subtle); pointer-events: none; }
html.fw-shell .cs-footer .cs-footer-columns__nav-arrow { display: none !important; }
html.fw-shell .cs-footer .cs-footer-columns__nav .sub-menu { display: block !important; position: static; max-height: none; height: auto; overflow: visible; opacity: 1; visibility: visible; margin: 0; padding: 0; list-style: none; transform: none; }
html.fw-shell .cs-footer .cs-footer-columns__nav .sub-menu li { margin: 0; padding: 0; }
html.fw-shell .cs-footer .cs-footer-columns__nav .sub-menu li + li { margin-top: 8px; }
html.fw-shell .cs-footer .cs-footer-columns__nav .sub-menu a { padding: 0; font: 500 13px/1.2 var(--font-oswald), sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--fw-text-muted); transition: color var(--fw-dur-state) ease; }
html.fw-shell .cs-footer .cs-footer-columns__nav .sub-menu a:hover { color: var(--fw-text); }

/* copyright and socials */
html.fw-shell .cs-footer .cs-footer__item-bottom-bar { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--fw-line); }
html.fw-shell .cs-footer .cs-footer__item-bottom-bar .cs-footer__item-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
html.fw-shell .cs-footer .cs-footer__copyright { font-size: 10px; line-height: 1.6; color: var(--fw-text-subtle); }
html.fw-shell .cs-footer .cs-footer__scheme-toggle { display: none; }
html.fw-shell .cs-footer .cs-social { display: flex; gap: 8px; margin: 0; }
html.fw-shell .cs-footer .cs-social__link { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%; overflow: hidden; color: var(--fw-text); }
html.fw-shell .cs-footer .cs-social__link svg { width: 32px; height: 32px; }
html.fw-shell .cs-footer .cs-social__link svg rect { fill: var(--fw-surface-2); transition: fill var(--fw-dur-state) ease; }
html.fw-shell .cs-footer .cs-social__link svg path { fill: var(--fw-text); transition: fill var(--fw-dur-state) ease; }
html.fw-shell .cs-footer .cs-social__link:hover svg rect { fill: var(--fw-inverse); }
html.fw-shell .cs-footer .cs-social__link:hover svg path { fill: var(--fw-bg); }

@media (max-width: 767px) {
  html.fw-shell .cs-footer .cs-footer__item-top-bar .cs-footer__item-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html.fw-shell .cs-footer .cs-subscribe { justify-self: stretch; max-width: none; }
  html.fw-shell .cs-footer .cs-footer-columns__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
  html.fw-shell .cs-footer .cs-footer__item-bottom-bar .cs-footer__item-inner { flex-direction: column-reverse; align-items: flex-start; }
}

/* «The newsletter only» (/newsletter/?only=…, log-newsletter.php): the popup's card on the page, one button. */
html.fw-shell .fwx-nlonly { max-width: 500px; margin: 40px auto 0; padding: 40px; border: 1px solid var(--fw-line); border-radius: var(--fw-corner-sm); background: var(--fw-bg); color: var(--fw-text); }
html.fw-shell .fwx-nlonly__kicker { margin: 0 0 12px; font: 400 11px/1.4 var(--font-jetbrains), monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--fw-text-muted); }
html.fw-shell .fwx-nlonly__title { margin: 0 0 16px; font: 700 28px/1.05 var(--font-oswald), sans-serif; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
html.fw-shell .fwx-nlonly__text { margin: 0; font: 400 14px/1.6 var(--font-jetbrains), monospace; color: var(--fw-text-muted); }
html.fw-shell .fwx-nlonly form { margin: 24px 0 0; }
html.fw-shell .fwx-nlonly__go { width: 100%; height: 48px; border: 0; border-radius: var(--fw-corner-sm); background: var(--fw-text); color: var(--fw-bg); font: 700 14px/1 var(--font-jetbrains), monospace; cursor: pointer; }
@media (max-width: 640px) { html.fw-shell .fwx-nlonly { margin-top: 16px; padding: 28px 20px 24px; } }
/* /submit/ as a page that sells (submit-showcase.php). CORE's tokens; the layout follows the width of the
   page column itself (container queries), so it holds with the rails open, closed, and on a phone. */
#fw-page .fwx-sales {
  --sales-display: var(--font-oswald), "Arial Narrow", sans-serif;
  --sales-mono: var(--font-jetbrains), ui-monospace, monospace;
  container-type: inline-size;
  /* Card titles share one size under the section heads, which take the LOG's own (log-cards.css). */
  --sales-card-title: 30px;
  display: flex; flex-direction: column; gap: var(--fw-log-gap-under); padding: 0 var(--fw-pad) 48px; font-family: var(--sales-mono); color: var(--fw-text);
}
#fw-page :where(.fwx-sales) :where(button) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; box-shadow: none; }
#fw-page :where(.fwx-sales) :where(a) { color: inherit; text-decoration: none; }
#fw-page :where(.fwx-sales) :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
#fw-page :where(.fwx-sales) :where(ul, ol) { list-style: none; }
#fw-page .fwx-sales img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The parts follow one another at the LOG's row gap. They stood a screen tall each until 2026-10-28, which left
   wide screens with long empty bands between them (boss). */
#fw-page .fwx-sales-screen { display: flex; flex-direction: column; gap: 56px; }
#fw-page .fwx-sales-label { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-subtle); }

/* buttons */
/* A door that opens Settings is a <button> (submit-reader.php): the same look as a link, its variants below. */
#fw-page .fwx-sales-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 1px solid transparent; background: transparent; cursor: pointer; border-radius: var(--fw-corner-sm); font: 700 11px/1 var(--sales-mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: opacity var(--fw-dur-state) ease, border-color var(--fw-dur-state) ease; }
#fw-page .fwx-sales-btn--ink { background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-sales-btn--paper { background: var(--fw-bg); color: var(--fw-inverse); }
#fw-page .fwx-sales-btn--line { border-color: var(--fw-border); color: var(--fw-text); }
#fw-page .fwx-sales-btn--ink:hover, #fw-page .fwx-sales-btn--paper:hover { opacity: .86; }
#fw-page .fwx-sales-btn--line:hover { border-color: var(--fw-text); }
#fw-page .fwx-sales-note { font-size: 11px; color: var(--fw-accent); }
#fw-page .fwx-sales-note:empty { display: none; }
#fw-page .fwx-sales-held { font-size: 11px; line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-sales-held a { text-decoration: underline; text-underline-offset: 3px; }

/* hero: one shape at every width of the column, rails open or closed (owner, 2026-10-28). The picture is always
   16:9 and the title always one line, sized to the width it has: the title runs 13.5 times its size, 14 keeps a
   margin. Wide, the text stands as one block beside the picture, from its top; narrower, the title rises over the
   text and the picture, the buttons on the picture's foot; narrower still, one column; on a phone the title wraps. */
#fw-page .fwx-sales-hero {
  --hero-gap: 32px;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas: "eyebrow pic" "title pic" "sub pic" "acts pic" ". pic"; gap: 18px var(--hero-gap);
}
#fw-page .fwx-sales-eyebrow { grid-area: eyebrow; display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-sales-eyebrow svg { flex: none; color: var(--fw-accent); }
#fw-page .fwx-sales-hero h1 { grid-area: title; font: 700 min(66px, (100cqi - var(--hero-gap)) * 6 / 11 / 14)/.94 var(--sales-display); letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; color: var(--fw-text); }
/* The lead's measure is a share of its column past 54ch: an ultrawide's wider canvas left it a narrow strip. */
#fw-page .fwx-sales-hero__sub { grid-area: sub; display: grid; gap: 0.9em; max-width: max(54ch, 50%); font-size: 14px; line-height: 1.65; color: var(--fw-text-muted); }
#fw-page .fwx-sales-hero__sub p { margin: 0; }
#fw-page .fwx-sales-hero__actions { grid-area: acts; display: flex; flex-wrap: wrap; gap: 10px; }
/* A signed-in artist's or gallery's profile under the head's buttons: its four parts (submit-reader.php). */
#fw-page .fwx-sales-state { flex-basis: 100%; display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font: 500 11px/1 var(--sales-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fw-text-muted); }
#fw-page .fwx-sales-state__meter { display: inline-flex; gap: 3px; }
#fw-page .fwx-sales-state__meter i { display: block; width: 18px; height: 4px; border-radius: 1px; background: color-mix(in srgb, var(--fw-text) 18%, transparent); }
#fw-page .fwx-sales-state__meter i.is-on { background: var(--fw-text); }
@container (max-width: 1199px) {
  #fw-page .fwx-sales-hero { grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "eyebrow eyebrow" "title title" "sub pic" ". pic" "acts pic"; }
  #fw-page .fwx-sales-hero h1 { font-size: min(66px, 100cqi / 14); }
}
@container (max-width: 799px) {
  #fw-page .fwx-sales-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "eyebrow" "title" "sub" "acts" "pic"; }
}

/* the carousel of published covers: a slow crossfade and a slight push-in */
#fw-page .fwx-sales-slides { grid-area: pic; align-self: start; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--fw-corner); background: #111; }
#fw-page .fwx-sales-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
#fw-page .fwx-sales-slide.is-on { opacity: 1; }
#fw-page .fwx-sales-slide img { position: absolute; inset: 0; transform: scale(1.05); transition: transform 3.6s linear; }
#fw-page .fwx-sales-slide.is-on img { transform: scale(1); }
#fw-page .fwx-sales-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / 0) 55%); }
#fw-page .fwx-sales-pub { position: absolute; right: 18px; bottom: 18px; left: 18px; z-index: 1; display: flex; flex-direction: column; gap: 8px; color: #fff; }
#fw-page .fwx-sales-pub__tag { align-self: flex-start; padding: 4px 7px; background: #fff; color: #0a0a0a; font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
#fw-page .fwx-sales-pub b { max-width: 22ch; font: 700 22px/1.1 var(--sales-display); text-transform: uppercase; }
#fw-page .fwx-sales-pub > span:last-child { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
#fw-page .fwx-sales-slides__bars { position: absolute; top: 14px; right: 18px; left: 18px; z-index: 2; display: flex; gap: 4px; }
#fw-page .fwx-sales-slides__bars button { flex: 1; height: 14px; }
#fw-page .fwx-sales-slides__bars button::before { content: ""; display: block; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .35); }
#fw-page .fwx-sales-slides__bars button:is(.is-on, .is-done)::before { background: #fff; }

/* the record in one line, then its venues scrolling */
#fw-page .fwx-sales-proof { display: flex; flex-direction: column; gap: 22px; padding: 22px 0; border-top: 1px solid var(--fw-line); border-bottom: 1px solid var(--fw-line); }
#fw-page .fwx-sales-proof__network { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* The four figures stand in one row at every width: each label beside its figure while the row holds the 1,090 px
   that takes, under it below that, two by two on a phone. */
#fw-page .fwx-sales-facts { display: flex; align-items: baseline; gap: 12px 32px; }
#fw-page .fwx-sales-facts div { display: flex; align-items: baseline; gap: 10px; }
#fw-page .fwx-sales-facts b { font: 500 52px/1 var(--sales-display); font-variant-numeric: tabular-nums; }
#fw-page .fwx-sales-facts i { align-self: center; width: 1px; height: 40px; background: var(--fw-line); }
@container (max-width: 1179px) {
  #fw-page .fwx-sales-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
  #fw-page .fwx-sales-facts div { flex-direction: column; align-items: flex-start; gap: 6px; }
  #fw-page .fwx-sales-facts i { display: none; }
}
#fw-page .fwx-sales-ticker { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
#fw-page .fwx-sales-ticker__track { display: flex; gap: 10px; width: max-content; animation: fwx-sales-ticker 48s linear infinite; }
#fw-page .fwx-sales-ticker:hover .fwx-sales-ticker__track { animation-play-state: paused; }
@keyframes fwx-sales-ticker { to { transform: translateX(-50%); } }
#fw-page .fwx-sales-venue { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); white-space: nowrap; }
#fw-page .fwx-sales-venue img { flex: none; width: 30px; height: 30px; border-radius: 2px; }
#fw-page .fwx-sales-venue b { font: 500 13px/1 var(--sales-display); letter-spacing: .02em; text-transform: uppercase; }
#fw-page .fwx-sales-venue span { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-subtle); }

/* section heads */
/* A section's head takes the LOG's measures (log-cards.css): its size, and its distance to what it names. */
#fw-page .fwx-sales-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--fw-log-head-below); scroll-margin-top: 90px; }
#fw-page .fwx-sales-head h2 { font: 700 var(--fw-log-head)/1.2 var(--sales-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sales-lead { max-width: 62ch; margin: -6px 0 24px; font-size: 14px; line-height: 1.65; color: var(--fw-text); }

/* the three ways in: Exhibition, Artist review, Galleries */
#fw-page .fwx-sales-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--fw-gutter); }
#fw-page .fwx-sales-product { display: flex; flex-direction: column; gap: 18px; overflow: hidden; padding: 22px; border-radius: var(--fw-corner); background: var(--fw-surface-2); color: var(--fw-text); }
/* Both cards open on their picture edge to edge, 16:9 of the card's width, the same in each (owner, 2026-10-28);
   the row gives up height first when the section must fit the screen (.fwx-sales-join). The photos sit out of
   the flow so their own proportions never set the row. */
#fw-page .fwx-sales-product__bleed { position: relative; display: block; flex: none; align-self: stretch; justify-self: stretch; aspect-ratio: 16 / 9; margin: -22px -22px 0; overflow: hidden; background: var(--fw-surface-3); }
#fw-page .fwx-sales-product__bleed img { position: absolute; inset: 0; }
#fw-page .fwx-sales-product h3 { font: 700 var(--sales-card-title)/1 var(--sales-display); text-transform: uppercase; text-wrap: balance; color: inherit; }
#fw-page .fwx-sales-product__for { padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: 12px; line-height: 1.55; opacity: .8; }
#fw-page .fwx-sales-product__list { display: flex; flex: 1; flex-direction: column; gap: 10px; }
#fw-page .fwx-sales-product__list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 12px; line-height: 1.5; }
#fw-page .fwx-sales-product__list svg { margin-top: 1px; }
#fw-page .fwx-sales-product .fwx-sales-btn { width: 100%; }
/* A gallery's card: its own profile beside Contact us, in the card's one row. */
#fw-page .fwx-sales-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
#fw-page .fwx-sales-product--talk .fwx-sales-pair .fwx-sales-btn--line { border-color: rgb(255 255 255 / .35); color: #fff; }
#fw-page .fwx-sales-product--talk .fwx-sales-pair .fwx-sales-btn--line:hover { border-color: #fff; }
/* the galleries' card: dark in both themes */
#fw-page .fwx-sales-product--talk { --fwx-talk-ground: #1a1a1c; --fwx-talk-text: #fff; --fwx-talk-ink: #0a0a0a; background: var(--fwx-talk-ground); color: var(--fwx-talk-text); }
#fw-page .fwx-sales-product__index li { padding: 9px 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 12px; line-height: 1.45; opacity: .92; }
#fw-page .fwx-sales-product__index li:first-child { padding-top: 0; border-top: 0; }
#fw-page .fwx-sales-product__index li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
#fw-page .fwx-sales-product__ask { font: 500 18px/1.2 var(--sales-display); letter-spacing: .04em; text-transform: uppercase; }
#fw-page .fwx-sales-btn--on-dark { background: var(--fwx-talk-text); color: var(--fwx-talk-ink); }
#fw-page .fwx-sales-btn--on-dark:hover { opacity: .86; }
/* the exhibition, sent directly: one wide card across the column, its picture beside its terms and its fee */
#fw-page .fwx-sales-wide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--fw-corner); background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-sales-wide__img { display: block; min-height: 380px; background: var(--fw-surface-3); }
#fw-page .fwx-sales-wide__body { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
#fw-page .fwx-sales-wide h3 { font: 700 var(--sales-card-title)/1 var(--sales-display); text-transform: uppercase; color: inherit; }
#fw-page .fwx-sales-wide .fwx-sales-product__list { flex: 1; }
#fw-page .fwx-sales-wide__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
#fw-page .fwx-sales-fee { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#fw-page .fwx-sales-fee b { font: 700 52px/.9 var(--sales-display); font-variant-numeric: tabular-nums; }
#fw-page .fwx-sales-fee .fwx-sales-label { color: inherit; opacity: .7; }
#fw-page .fwx-sales-wide__foot .fwx-sales-btn { min-width: 260px; }
#fw-page .fwx-sales-wide__note { font-size: 11px; line-height: 1.5; opacity: .7; }
/* My LOG draws a proposal with the same card (mylog-blocks.php): across its page at 21:9, its sender over the title,
   the step in hand marked red and the steps after it dimmed, its door red. */
/* On a tall screen the card stops where the page's head and the card fit together between the bar and the Ask. */
#fw-page .fwx-sales-wide--cinema { aspect-ratio: 21 / 9; max-height: calc(var(--fwx-screen) - var(--fw-log-head) - var(--fw-log-head-below)); }
#fw-page .fwx-sales-wide--cinema .fwx-sales-wide__img { min-height: 0; }
#fw-page .fwx-sales-wide--cinema .fwx-sales-fee b { text-transform: uppercase; }
#fw-page .fwx-sales-wide__meta { margin-bottom: -8px; color: inherit; opacity: .7; }
#fw-page .fwx-sales-product__list li > i { width: 8px; height: 8px; margin: 5px 4px 0; border-radius: 50%; }
#fw-page .fwx-sales-product__list li.is-now > i { background: var(--fw-accent); }
#fw-page .fwx-sales-product__list li.is-now span { font-weight: 700; }
#fw-page .fwx-sales-product__list li.is-next { opacity: .55; }
#fw-page .fwx-sales-btn--red { background: var(--fw-accent); color: #fff; }
#fw-page .fwx-sales-btn--red:hover { opacity: .86; }
/* The two ways in share five rows (picture, name, list, terms, door), so each part of one card stands level
   with the same part of the other, whatever the length of a name or a list. */
#fw-page .fwx-sales-products--two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(140px, 1fr) repeat(4, auto); }
/* The network's section, its head and both cards, stands whole between the bar and the ask, rails open or
   closed (owner, 2026-10-28): when the room runs short, the pictures' row gives up height first. */
#fw-page .fwx-sales-join { display: flex; flex-direction: column; max-height: var(--fwx-screen); }
#fw-page .fwx-sales-join > .fwx-sales-products--two { flex: 1 1 auto; min-height: 0; }
#fw-page .fwx-sales-products--two > .fwx-sales-product { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
#fw-page .fwx-sales-products--two .fwx-sales-product__list, #fw-page .fwx-sales-products--two .fwx-sales-product__index { align-self: start; }
/* the galleries' one sentence sits level with the artist's middle line, with no rule of its own (owner, 2026-10-28) */
#fw-page .fwx-sales-products--two .fwx-sales-product--talk .fwx-sales-product__index { align-self: center; }
#fw-page .fwx-sales-product--talk .fwx-sales-product__index li { padding: 0; border: 0; line-height: 1.5; }
/* how it works: each way in its own panel, its name and door above its four stops */
#fw-page .fwx-sales-track { display: flex; flex-direction: column; gap: 22px; padding: 24px; border-radius: var(--fw-corner); background: var(--fw-surface-2); }
#fw-page .fwx-sales-track__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--fw-line); }
#fw-page .fwx-sales-track__head h3 { font: 700 var(--sales-card-title)/1 var(--sales-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sales-track__head p { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--fw-text-muted); }
#fw-page .fwx-sales-track__head .fwx-sales-btn { min-width: 240px; }
#fw-page .fwx-sales-track .fwx-sales-vis { aspect-ratio: 16 / 9; background: var(--fw-bg); }
#fw-page .fwx-sales-sheet__row.fwx-sales-sheet__row--text { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#fw-page .fwx-sales-products__note { margin-top: 14px; font-size: 11px; color: var(--fw-text-subtle); text-align: center; }

/* what selection brings */
#fw-page .fwx-sales-brings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-gutter); margin-bottom: var(--fw-gutter); }
#fw-page .fwx-sales-outcome { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--fw-corner); background: var(--fw-surface-2); }
/* side by side at every width of the card, each figure over its label, the figures sized to the card */
#fw-page .fwx-sales-outcome__figs { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 16px clamp(16px, 8cqi, 48px); }
#fw-page .fwx-sales-outcome__fig { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#fw-page .fwx-sales-outcome__fig b { font: 700 clamp(52px, 17cqi, 80px)/.9 var(--sales-display); }
#fw-page .fwx-sales-outcome h3 { font: 700 22px/1.05 var(--sales-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sales-outcome p { font-size: 12.5px; line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-sales-loglist { display: flex; flex-direction: column; margin-top: auto; border-top: 1px solid var(--fw-line); }
#fw-page .fwx-sales-loglist span { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--fw-line); font: 500 12.5px/1.2 var(--sales-display); text-transform: uppercase; }
#fw-page .fwx-sales-loglist small { font: 400 9px/1.2 var(--sales-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fw-text-subtle); white-space: nowrap; }
#fw-page .fwx-sales-ig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: auto; }
#fw-page .fwx-sales-ig span { aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--fw-surface-3); }
#fw-page .fwx-sales-example { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; border-radius: var(--fw-corner); box-shadow: inset 0 0 0 1px var(--fw-line); }
#fw-page .fwx-sales-example__img { min-height: 340px; background: var(--fw-surface-3); }
#fw-page .fwx-sales-example__body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px; }
#fw-page .fwx-sales-example h3 { font: 700 26px/1.04 var(--sales-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sales-example p { font-size: 12.5px; line-height: 1.65; color: var(--fw-text-muted); }
#fw-page .fwx-sales-example__link { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* how it works: four stops on one line, each with a picture of what happens at it */
#fw-page .fwx-sales-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--fw-gutter); }
#fw-page .fwx-sales-line li { position: relative; display: flex; flex-direction: column; gap: 10px; }
#fw-page .fwx-sales-line__row { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
#fw-page .fwx-sales-line__dot { position: relative; z-index: 1; display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fw-surface); box-shadow: inset 0 0 0 1px var(--fw-border); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; }
#fw-page .fwx-sales-line li.is-end .fwx-sales-line__dot { background: var(--fw-inverse); color: var(--fw-bg); box-shadow: none; }
#fw-page .fwx-sales-line h3 { font: 700 17px/1.05 var(--sales-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sales-line p { padding-left: 42px; font-size: 11.5px; line-height: 1.5; color: var(--fw-text-muted); }
#fw-page .fwx-sales-vis { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--fw-corner); background: var(--fw-surface-2); }
#fw-page .fwx-sales-vis--fan span { position: absolute; top: 50%; left: 50%; width: 38%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--fw-surface-3); box-shadow: 0 8px 22px rgb(0 0 0 / .18); }
#fw-page .fwx-sales-vis--fan span:nth-child(1) { transform: translate(-95%, -48%) rotate(-9deg); }
#fw-page .fwx-sales-vis--fan span:nth-child(2) { z-index: 2; transform: translate(-50%, -54%); }
#fw-page .fwx-sales-vis--fan span:nth-child(3) { transform: translate(-5%, -48%) rotate(9deg); }
/* The submission and the offers as sheets made of the LOG's covers, beside the fan and the published piece. */
#fw-page .fwx-sales-sheet { display: flex; flex-direction: column; gap: 7px; width: 70%; padding: 10px; border-radius: var(--fw-corner-sm); background: var(--fw-surface); box-shadow: 0 8px 22px rgb(0 0 0 / .12); }
#fw-page .fwx-sales-sheet > small { overflow: hidden; font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: var(--fw-text-subtle); }
#fw-page .fwx-sales-sheet__views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#fw-page .fwx-sales-sheet__views img { height: auto; aspect-ratio: 1; border-radius: 2px; }
#fw-page .fwx-sales-sheet > b { font: 700 13px/1.05 var(--sales-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sales-sheet__row { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 2px 8px; padding-top: 7px; border-top: 1px solid var(--fw-line); }
#fw-page .fwx-sales-sheet__row img { grid-row: span 2; width: 30px; height: 30px; border-radius: 2px; }
#fw-page .fwx-sales-sheet__row b { font: 700 11px/1 var(--sales-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sales-sheet__row em { font-size: 7.5px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--fw-text-subtle); }
/* The account step: the join's two cards side by side, Member on the inverse ground. */
#fw-page .fwx-sales-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 84%; }
#fw-page .fwx-sales-plan { display: flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: var(--fw-corner-sm); background: var(--fw-surface); box-shadow: 0 8px 22px rgb(0 0 0 / .12); }
#fw-page .fwx-sales-plan.is-member { background: var(--fw-inverse); }
#fw-page .fwx-sales-plan b { margin-bottom: 3px; font: 700 13px/1.05 var(--sales-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sales-plan em { padding-top: 5px; border-top: 1px solid var(--fw-line); font-size: 7.5px; font-style: normal; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-sales-plan.is-member b { color: var(--fw-bg); }
#fw-page .fwx-sales-plan.is-member em { border-top-color: color-mix(in srgb, var(--fw-bg) 22%, transparent); color: color-mix(in srgb, var(--fw-bg) 70%, transparent); }
#fw-page .fwx-sales-sheet > i { align-self: flex-start; padding: 4px 8px; white-space: nowrap; border-radius: var(--fw-corner-pill); background: var(--fw-inverse); color: var(--fw-bg); font-size: 8px; font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
#fw-page .fwx-sales-mini { display: flex; flex-direction: column; gap: 6px; width: 64%; padding: 8px 8px 10px; border-radius: var(--fw-corner-sm); background: var(--fw-surface); box-shadow: 0 8px 22px rgb(0 0 0 / .12); }
#fw-page .fwx-sales-mini img { height: auto; aspect-ratio: 16 / 10; border-radius: 2px; }
#fw-page .fwx-sales-mini small { align-self: flex-start; padding: 3px 5px; background: var(--fw-inverse); color: var(--fw-bg); font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#fw-page .fwx-sales-mini span { font-size: 8.5px; letter-spacing: .1em; color: var(--fw-text-subtle); }

/* questions */
#fw-page .fwx-sales-faq { border-top: 1px solid var(--fw-line); }
#fw-page .fwx-sales-faq details { border-bottom: 1px solid var(--fw-line); }
#fw-page .fwx-sales-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; font: 700 16px/1.2 var(--sales-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sales-faq summary::-webkit-details-marker { display: none; }
#fw-page .fwx-sales-faq summary::after { content: "+"; font: 400 20px/1 var(--sales-mono); color: var(--fw-text-subtle); }
#fw-page .fwx-sales-faq details[open] summary::after { content: "−"; }
#fw-page .fwx-sales-faq p { max-width: 70ch; padding: 0 0 18px; font-size: 12.5px; line-height: 1.65; color: var(--fw-text-muted); }

/* closing band */
#fw-page .fwx-sales-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px; border-radius: var(--fw-corner); background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-sales-close b { font: 700 clamp(28px, 4.4cqi, 46px)/1 var(--sales-display); text-transform: uppercase; }
#fw-page .fwx-sales-close small { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }

@container (max-width: 900px) {
  #fw-page .fwx-sales-products, #fw-page .fwx-sales-brings, #fw-page .fwx-sales-example, #fw-page .fwx-sales-wide { grid-template-columns: minmax(0, 1fr); }
  #fw-page .fwx-sales-wide__img { min-height: 0; aspect-ratio: 16 / 9; }
  #fw-page .fwx-sales-wide--cinema { aspect-ratio: auto; max-height: none; }
  #fw-page .fwx-sales-products--two { grid-template-rows: none; }
  #fw-page .fwx-sales-join { max-height: none; }
  #fw-page .fwx-sales-products--two > .fwx-sales-product { display: flex; grid-row: auto; }
  #fw-page .fwx-sales-example__img { min-height: 220px; }
  #fw-page .fwx-sales-line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--fw-gutter); }
}
@container (max-width: 600px) {
  /* a query cannot restyle its own container, so the parts take the phone's size */
  #fw-page .fwx-sales-screen { --sales-card-title: 26px; }
  #fw-page .fwx-sales-hero h1 { font-size: 40px; }
  #fw-page .fwx-sales-hero__actions { flex-direction: column; }
  #fw-page .fwx-sales-hero__actions .fwx-sales-btn { width: 100%; }
  /* The buttons stand in a column there: a full basis would be a full height. */
  #fw-page .fwx-sales-state { flex-basis: auto; margin-top: 4px; }
  #fw-page .fwx-sales-pair { grid-template-columns: minmax(0, 1fr); }
  /* the carousel stands upright on a phone, with the section and the title only */
  #fw-page .fwx-sales-slides { aspect-ratio: 4 / 5; }
  #fw-page .fwx-sales-pub { right: 14px; bottom: 14px; left: 14px; gap: 6px; }
  #fw-page .fwx-sales-pub b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-top: 2px; font-size: 19px; line-height: 1.18; }
  #fw-page .fwx-sales-pub > span:last-child { display: none; }
  #fw-page .fwx-sales-slides__bars { top: 12px; right: 14px; left: 14px; }
  /* the record two by two, each figure over its label */
  #fw-page .fwx-sales-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  #fw-page .fwx-sales-facts div { flex-direction: column; align-items: flex-start; gap: 4px; }
  #fw-page .fwx-sales-facts i { display: none; }
  #fw-page .fwx-sales-facts b { font-size: 44px; }
  #fw-page .fwx-sales-example__body { padding: 20px 16px; }
  #fw-page .fwx-sales-line h3 { font-size: 15px; }
  /* two steps to a row: the pictures stand square so the sheets keep their rows */
  #fw-page .fwx-sales-line .fwx-sales-vis { aspect-ratio: 1; }
  #fw-page .fwx-sales-sheet { width: 86%; padding: 8px; }
  #fw-page .fwx-sales-line p { padding-left: 0; }
  #fw-page .fwx-sales-close { padding: 22px 18px; }
  #fw-page .fwx-sales-close .fwx-sales-btn { width: 100%; }
  #fw-page .fwx-sales-wide__body { padding: 22px 18px; }
  #fw-page .fwx-sales-fee b { font-size: 44px; }
  #fw-page .fwx-sales-wide__foot .fwx-sales-btn { width: 100%; min-width: 0; }
  /* a way in on a phone: its stops as one list, the pictures left to the computer */
  #fw-page .fwx-sales-track { padding: 18px; gap: 16px; }
  #fw-page .fwx-sales-track__head .fwx-sales-btn { width: 100%; min-width: 0; }
  #fw-page .fwx-sales-track .fwx-sales-vis { display: none; }
  #fw-page .fwx-sales-track .fwx-sales-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #fw-page .fwx-sales-track .fwx-sales-line li { gap: 4px; padding: 14px 0; border-top: 1px solid var(--fw-line); }
  #fw-page .fwx-sales-track .fwx-sales-line li:first-child { padding-top: 0; border-top: 0; }
  #fw-page .fwx-sales-track .fwx-sales-line p { padding-left: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  #fw-page .fwx-sales-slide, #fw-page .fwx-sales-slide img { transition: none; }
  #fw-page .fwx-sales-slide img { transform: none; }
  #fw-page .fwx-sales-ticker__track { animation: none; }
  #fw-page .fwx-sales-ticker { overflow-x: auto; }
}

/* /submit/gallery/ (gallery-contact.php): the contact on the left, the profile, recommended, on the right */
#fw-page .fwx-ga { display: flex; flex-direction: column; gap: 22px; padding-bottom: 40px; }
#fw-page .fwx-ga-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#fw-page .fwx-ga-head h1 { font: 700 clamp(34px, 5cqi, 56px)/.95 var(--sales-display); text-transform: uppercase; text-wrap: balance; color: var(--fw-text); }
#fw-page .fwx-ga-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--fw-gutter); }
#fw-page .fwx-ga-way { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: var(--fw-corner); background: var(--fw-surface-2); color: var(--fw-text); }
#fw-page .fwx-ga-way h2 { font: 700 30px/1 var(--sales-display); text-transform: uppercase; color: inherit; }
#fw-page .fwx-ga-way--first { background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-ga-lead { max-width: 52ch; font-size: 13px; line-height: 1.65; opacity: .85; }
#fw-page .fwx-ga-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#fw-page .fwx-ga-field { display: flex; flex-direction: column; gap: 6px; }
#fw-page .fwx-ga-field span { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-muted); }
#fw-page .fwx-ga-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#fw-page .fwx-ga-tag { align-self: flex-start; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--fw-corner-sm); background: var(--fw-accent); color: #fff; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
#fw-page .fwx-ga-way .fwx-sales-btn { align-self: flex-start; min-width: 240px; }
/* The profile's note under its door (boss, 2026-11-01) sits in room both cards keep at their foot, so the two doors
   stay level. */
#fw-page .fwx-ga-way { padding-bottom: 52px; }
#fw-page .fwx-ga-note { position: absolute; left: 26px; right: 26px; bottom: 18px; font-size: 10px; line-height: 1.4; letter-spacing: .04em; opacity: .7; }
/* the terms line drops to the foot, so both doors stand on the cards' last line */
#fw-page .fwx-ga-way--first .fwx-sales-product__ask { margin-top: auto; }
@container (max-width: 760px) {
  #fw-page .fwx-ga-ways, #fw-page .fwx-ga-grid { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the recommended way comes first */
  #fw-page .fwx-ga-way--first { order: -1; }
  #fw-page .fwx-ga-way { padding: 20px 18px; }
  #fw-page .fwx-ga-way .fwx-sales-btn { width: 100%; min-width: 0; }
  /* stacked, no door stands beside it: the note simply follows its own */
  #fw-page .fwx-ga-note { position: static; }
}
/* outweighs the dark theme's own field rule (html[data-theme] … .fw-submit-field), as the forms' blocks do */
#fw-page .fwx-ga .fwx-ga-field .fw-submit-field { width: 100%; background: var(--fw-bg); }
/* A candidature (91-submit-parts.js, 91-submit-menu.js): the page in the LOG's blocks, a menu of its
   sections held under the bar, and on a wide page each block in two columns, what it asks beside its
   fields. The layout follows the page column itself (container queries), rails open or closed. */
#fw-page .fwx-sf {
  --sf-display: var(--font-oswald), "Arial Narrow", sans-serif;
  --sf-mono: var(--font-jetbrains), ui-monospace, monospace;
  /* Held, the menu's chips stand where every page starts; in the flow it keeps the blocks' own gap. */
  --sf-held: calc(var(--fwx-ab) + var(--fwx-top) - var(--fw-log-gap));
  container-type: inline-size;
  display: flex; flex-direction: column; gap: var(--fw-log-gap); padding: 0 var(--fwx-edge) 48px; font-family: var(--sf-mono); color: var(--fw-text);
}
#fw-page :where(.fwx-sf) :where(h1, h2, p, ol) { margin: 0; padding: 0; }
#fw-page :where(.fwx-sf) :where(ol) { list-style: none; }
#fw-page :where(.fwx-sf) :where(button) { margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* The way back to /submit/, above the form's own name. */
#fw-page .fwx-sf-back { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-subtle); text-decoration: none; transition: color var(--fw-dur-state) ease; }
#fw-page .fwx-sf-back:hover { color: var(--fw-text); }
#fw-page .fwx-sf-back svg { transform: scaleX(-1); }
#fw-page .fwx-sf-eyebrow { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--fw-text-muted); }

/* blocks */
#fw-page .fwx-sf-block { display: grid; gap: 18px; padding: 24px 26px; border-radius: var(--fw-corner); background: var(--fw-surface-2); scroll-margin-top: calc(var(--sf-held) + 70px); }
#fw-page .fwx-sf-block__about { display: flex; flex-direction: column; gap: 8px; }
#fw-page .fwx-sf-block h2 { font: 700 22px/1 var(--sf-display); text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-sf-hint { max-width: 46ch; font-size: 12px; line-height: 1.6; color: var(--fw-text-subtle); }
#fw-page .fwx-sf-send__note { margin-top: 10px; font-size: 11px; }
#fw-page .fwx-sf-block__body { min-width: 0; }
#fw-page .fwx-sf .fwx-sf-block .fw-submit-field { background: var(--fw-bg); }
#fw-page .fwx-sf-error { margin-top: 12px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fw-accent); }
#fw-page .fwx-sf-error:empty { display: none; }
@container (min-width: 860px) {
  #fw-page .fwx-sf-block { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 48px; padding: 30px 32px; }
}

/* the head: what the form is for, and where the submission stands on its path */
#fw-page .fwx-sf-head { align-items: end; }
#fw-page .fwx-sf-head__text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#fw-page .fwx-sf-head h1 { font: 700 clamp(30px, 4.4cqi, 46px)/.96 var(--sf-display); text-transform: uppercase; text-wrap: balance; color: var(--fw-text); }
#fw-page .fwx-sf-intro { max-width: 60ch; font-size: 13px; line-height: 1.65; color: var(--fw-text-muted); }
#fw-page .fwx-sf-saving { color: var(--fw-text-subtle); }
#fw-page .fwx-sf-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fw-line); }
#fw-page .fwx-sf-path li { display: flex; flex-direction: column; gap: 6px; margin-top: -1px; padding: 11px 10px 0 0; border-top: 2px solid transparent; font: 700 14px/1 var(--sf-display); text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-sf-path li.is-here { border-top-color: var(--fw-text); color: var(--fw-text); }
#fw-page .fwx-sf-path small { font: 400 9px/1 var(--sf-mono); letter-spacing: .2em; }
@container (min-width: 860px) {
  #fw-page .fwx-sf-head { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* the menu of sections, held under the bar */
#fw-page .fwx-sf-menu { position: sticky; top: var(--sf-held); z-index: 5; display: flex; align-items: center; gap: 16px; margin: calc(-1 * var(--fw-log-gap)) 0; padding: var(--fw-log-gap) 0; background: var(--fwx-stage, var(--fw-bg)); }
#fw-page .fwx-sf-menu__track { display: flex; flex: 1; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#fw-page .fwx-sf-menu__track::-webkit-scrollbar { display: none; }
#fw-page .fwx-sf-menu button { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--fw-border); border-radius: var(--fw-corner-pill); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fw-text-secondary); transition: border-color var(--fw-dur-state) ease, background-color var(--fw-dur-state) ease, color var(--fw-dur-state) ease; }
#fw-page .fwx-sf-menu button small { font-size: 9px; letter-spacing: .14em; color: var(--fw-text-subtle); }
#fw-page .fwx-sf-menu button:hover { border-color: var(--fw-text); color: var(--fw-text); }
/* a section whose check passes carries a drawn tick */
#fw-page .fwx-sf-menu button.is-done::after { content: ""; width: 4px; height: 8px; margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
#fw-page .fwx-sf-menu button.is-here { border-color: var(--fw-inverse); background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-sf-menu button.is-here small { color: inherit; opacity: .7; }
#fw-page .fwx-sf-menu__count { flex: none; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-subtle); }

/* fields that are the form's own */
#fw-page .fwx-sf-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
#fw-page .fwx-sf-choice__row { display: flex; flex-wrap: wrap; gap: 8px; }
#fw-page .fwx-sf-choice label { position: relative; cursor: pointer; }
#fw-page .fwx-sf-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#fw-page .fwx-sf-choice span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--fw-border); border-radius: var(--fw-corner-pill); background: var(--fw-bg); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fw-text-secondary); transition: border-color var(--fw-dur-state) ease, background-color var(--fw-dur-state) ease, color var(--fw-dur-state) ease; }
#fw-page .fwx-sf-choice label:hover span { border-color: var(--fw-text); color: var(--fw-text); }
#fw-page .fwx-sf-choice input:checked + span { border-color: var(--fw-inverse); background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-sf-choice input:focus-visible + span { outline: 2px solid var(--fw-accent); outline-offset: 2px; }
#fw-page .fwx-sf-terms { max-width: 62ch; font-size: 12px; line-height: 1.7; color: var(--fw-text-secondary); }
#fw-page .fwx-sf-terms > * + * { margin-top: 10px; }
#fw-page .fwx-sf-terms ul { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; list-style: disc; }
#fw-page .fwx-sf-agree { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; cursor: pointer; }
#fw-page .fwx-sf-agree span { font-size: 11px; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; color: var(--fw-text-secondary); }

/* the send block and the buttons */
#fw-page .fwx-sf-send .fwx-sf-block__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
#fw-page .fwx-sf-send .fwx-sf-error { margin: 0; }
#fw-page .fwx-sf-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 26px; border-radius: var(--fw-corner-sm); background: var(--fw-accent); color: #fff; font: 700 13px/1 var(--sf-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: opacity var(--fw-dur-state) ease; }
#fw-page .fwx-sf-btn:hover { opacity: .88; }
#fw-page .fwx-sf-btn:disabled { opacity: .5; }
#fw-page .fwx-sf-btn--ink { background: var(--fw-inverse); color: var(--fw-bg); }

@media (max-width: 767px) {
  #fw-page .fwx-sf { --sf-held: calc(var(--fwx-ab) + var(--fwx-phone-top) - var(--fw-log-gap)); padding-bottom: 32px; }
  #fw-page .fwx-sf-block { padding: 20px 16px; }
  #fw-page .fwx-sf-menu__count { display: none; }
  #fw-page .fwx-sf-path li { padding-right: 6px; font-size: 12px; }
}
/* LITE's steps above an answer and the Hypercast moments under it (51-lite-steps.js). */
#fw-core .fwx-steps { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--fw-line); font-family: var(--font-jetbrains), monospace; font-size: 11px; line-height: 1.5; color: var(--fw-text-subtle); }
#fw-core .fw-msg:not([data-turn]) .fwx-steps { border-bottom: 0; }
#fw-core .fwx-step { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0; }
#fw-core .fwx-step i, #fw-core .fwx-fold i { flex: none; width: 5px; height: 5px; background: var(--fw-text-subtle); transform: translateY(-1px); }
#fw-core .fwx-step b { flex: none; font-weight: 400; color: var(--fw-text); }
#fw-core .fwx-step span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fw-core .fwx-step a { color: inherit; text-decoration: underline; text-decoration-color: var(--fw-line); text-underline-offset: 3px; }
#fw-core .fwx-step em { flex: none; margin-left: auto; font-style: normal; }
#fw-core .fwx-step.is-now i { background: var(--fw-text); animation: fwx-step-now 1s steps(2, end) infinite; }
#fw-core .fwx-step.is-now span { color: var(--fw-text); }
@keyframes fwx-step-now { 50% { opacity: 0.2; } }

#fw-core .fwx-fold { display: flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 10px; padding: 0; background: none; border: 0; font-family: var(--font-jetbrains), monospace; font-size: 11px; line-height: 1.5; color: var(--fw-text-subtle); text-align: left; cursor: pointer; }
#fw-core .fwx-fold u { flex: none; text-decoration: none; color: var(--fw-text); }
#fw-core .fwx-fold span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fw-core .fwx-fold svg { flex: none; transition: transform var(--fw-dur-state, 150ms); }
#fw-core .fwx-fold:hover u, #fw-core .fwx-fold:focus-visible u { text-decoration: underline; text-underline-offset: 3px; }

#fw-core .fwx-listens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#fw-core .fwx-listen { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 12px; background: none; border: 1px solid var(--fw-line); border-radius: var(--fw-corner-sm, 0); font-family: var(--font-jetbrains), monospace; font-size: 11px; line-height: 1.4; color: var(--fw-text-subtle); text-align: left; cursor: pointer; transition: border-color var(--fw-dur-state, 150ms), color var(--fw-dur-state, 150ms); }
#fw-core .fwx-listen svg { flex: none; color: var(--fw-text); }
#fw-core .fwx-listen b { flex: none; font-weight: 500; color: var(--fw-text); }
#fw-core .fwx-listen span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fw-core .fwx-listen:hover, #fw-core .fwx-listen:focus-visible { border-color: var(--fw-text); outline: none; }

@media (prefers-reduced-motion: reduce) {
  #fw-core .fwx-step.is-now i { animation: none; }
}
/* The agent's research (51-lite-web.js), as the mock PbeVanoC1V7GhtohtCZAan drew it: the stage and its note,
   the strip of sites, each step's icon, the web's sources, the checked facts, the numbers in the answer. */
#fw-core .fwx-live { display: grid; gap: 7px; margin: 2px 0 6px; font-family: var(--font-jetbrains), monospace; font-size: 11px; line-height: 1.5; }
#fw-core .fwx-live__row { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
#fw-core .fwx-live__row svg { flex: none; width: 12px; height: 12px; color: var(--fw-accent); }
#fw-core .fwx-live__row svg.is-pulse { animation: fwx-live-pulse 1.1s ease-in-out infinite; }
#fw-core .fwx-live__stage { color: var(--fw-text); white-space: nowrap; }
/* three dots composing one by one; a mono dot is 0.6em wide */
#fw-core .fwx-live__stage::after { content: "..."; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: fwx-live-dots 1.2s steps(4, end) infinite; }
#fw-core .fwx-live__note { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: italic; color: var(--fw-text-muted);
  animation: fwx-live-type calc(var(--fwx-type, 40) * 14ms) steps(var(--fwx-type, 40), end) both; }

#fw-core .fwx-strip { display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0; padding-left: 22px; font-size: 10px; }
#fw-core .fwx-strip__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--fw-text-muted); }
#fw-core .fwx-strip__count { flex: none; color: var(--fw-text-subtle); white-space: nowrap; }
#fw-core .fwx-marks { display: flex; flex: none; align-self: center; }
#fw-core .fwx-marks .fwx-fav + .fwx-fav { margin-left: -6px; }
#fw-core .fwx-fav {
  position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; overflow: hidden; border-radius: 50%;
  background: #fff; color: #0a0a0a; box-shadow: 0 0 0 1px var(--fw-line); font: 700 9px/1 var(--font-jetbrains), monospace;
}
#fw-core .fwx-fav img { width: 100%; height: 100%; padding: 3px; box-sizing: border-box; object-fit: contain; }
#fw-core .fwx-fav.is-on { z-index: 1; box-shadow: 0 0 0 1.5px var(--fw-accent); }
#fw-core .fwx-fav.is-out { opacity: 0.4; filter: grayscale(1); }
#fw-core .fwx-fav.is-new { animation: fwx-live-in 0.35s ease-out both; }
#fw-core .fwx-fav.is-sm { width: 15px; height: 15px; font-size: 7px; }
#fw-core .fwx-fav.is-sm img { padding: 2px; }
#fw-core .fwx-marks .fwx-fav.is-sm + .fwx-fav.is-sm { margin-left: -4px; }
#fw-core .fwx-fav.is-md { width: 30px; height: 30px; font-size: 11px; }
#fw-core .fwx-fav.is-md img { padding: 5px; }

#fw-core .fwx-step.is-warn b { color: var(--fw-accent); }

#fw-core .fwx-checked { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; font-family: var(--font-jetbrains), monospace; font-size: 10px; line-height: 1.5; letter-spacing: 0.04em; color: var(--fw-text-subtle); }
#fw-core .fwx-checked span { display: inline-flex; align-items: center; gap: 6px; }
#fw-core .fwx-checked span::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--fw-text); }
#fw-core .fwx-checked span.is-split::before { background: transparent; box-shadow: inset 0 0 0 1px var(--fw-text); }
#fw-core .fwx-checked + .fwx-sources { margin-top: 10px; }

/* the source's number, in the answer and on its card */
#fw-core .fwx-prose sup,
#fw-core .fwx-source--web sup {
  display: inline-grid; place-items: center; min-width: 15px; height: 15px; margin: 0 1px; padding: 0 3px; box-sizing: border-box; border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--fw-line); font: 400 9px/1 var(--font-jetbrains), monospace; color: var(--fw-text-subtle); vertical-align: 1px;
}
#fw-core .fwx-source--web sup { flex: none; margin-left: auto; }
#fw-core .fwx-source--web .fwx-source__text { flex: 1; }

/* while the answer is written out, what follows it waits */
#fw-core .fw-msg.is-revealing .fwx-checked,
#fw-core .fw-msg.is-revealing .fwx-sources,
#fw-core .fw-msg.is-revealing .fwx-listens,
#fw-core .fw-msg.is-revealing .fw-copy-message { visibility: hidden; }
#fw-core .fw-msg[data-turn] .fwx-sources,
#fw-core .fw-msg[data-turn] .fwx-checked { animation: fwx-live-rise 0.3s ease-out both; }

@keyframes fwx-live-pulse { 50% { opacity: 0.35; transform: scale(0.82); } }
@keyframes fwx-live-dots { to { width: 2.4em; } }
@keyframes fwx-live-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fwx-live-in { from { opacity: 0; transform: scale(0.4); } }
@keyframes fwx-live-rise { from { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  #fw-core .fwx-live__row svg.is-pulse, #fw-core .fwx-fav.is-new, #fw-core .fwx-live__note,
  #fw-core .fw-msg[data-turn] .fwx-sources, #fw-core .fw-msg[data-turn] .fwx-checked { animation: none; }
  #fw-core .fwx-live__stage::after { animation: none; width: 1.8em; }
}
/* The Fakewhale AI's column, a sheet on a phone (50-analysis.js, 52-ask-find.js): its name, the first
   questions of a fresh chat, the sources an answer drew on, a work's thread and moves, and on a phone the LOG's matches above the
   field while the reader types. */
#fw-core .fwx-ask-title { display: flex; align-items: center; gap: 8px; color: var(--fw-text); }
#fw-core .fwx-ask-title svg { flex: none; color: var(--fw-accent); }
#fw-core .fwx-ask-title span { color: var(--fw-text-subtle); }
#fw-core .fwx-ask-label { margin: 0 0 8px; font-family: var(--font-jetbrains), monospace; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fw-text-subtle); }

#fw-core .fwx-ask-first h3 { margin: 4px 0 6px; font-family: var(--font-oswald), sans-serif; font-size: 26px; font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--fw-text); }
#fw-core .fwx-ask-first > p:not(.fwx-ask-label) { margin: 0 0 14px; font-family: var(--font-jetbrains), monospace; font-size: 12px; line-height: 1.6; color: var(--fw-text-muted); }
#fw-core .fwx-ask-try { display: grid; gap: 8px; }
#fw-core .fwx-ask-try button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 12px; border: 0; border-radius: var(--fw-corner-sm);
  background: var(--fw-surface-2); color: var(--fw-text); text-align: left; font-family: var(--font-jetbrains), monospace; font-size: 12.5px; line-height: 1.4;
  cursor: pointer; transition: background var(--fw-dur-state);
}
#fw-core .fwx-ask-try button:hover, #fw-core .fwx-ask-try button:focus-visible { background: var(--fw-surface-3); outline: none; }
#fw-core .fwx-ask-try svg { flex: none; color: var(--fw-accent); }

#fw-core .fwx-sources { display: grid; gap: 2px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--fw-line); }
#fw-core .fwx-source { display: flex; align-items: center; gap: 12px; padding: 6px 2px; border-radius: var(--fw-corner-sm); color: var(--fw-text); text-decoration: none; }
#fw-core .fwx-source:hover, #fw-core .fwx-source:focus-visible { background: var(--fw-surface-2); outline: none; }
#fw-core .fwx-source__cover {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: var(--fw-corner-sm);
  background: var(--fw-surface-3); color: var(--fw-text-subtle); font-family: var(--font-jetbrains), monospace; font-size: 11px;
}
#fw-core .fwx-source__cover img { width: 100%; height: 100%; object-fit: cover; }
#fw-core .fwx-source__cover svg { color: var(--fw-accent); }
#fw-core .fwx-source__text { min-width: 0; display: grid; gap: 2px; }
#fw-core .fwx-source__text small { font-family: var(--font-jetbrains), monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-core .fwx-source__text b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-oswald), sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; text-transform: uppercase;
}
#fw-core .fwx-found { max-height: 38vh; overflow-y: auto; padding: 10px 18px 6px; border-top: 1px solid var(--fw-line); scrollbar-width: none; }
#fw-core .fwx-found::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  /* While the LOG answers the typing, the fresh chat's questions step aside for its matches. */
  #fw-core .fwx-column:has(.fwx-found) .fwx-ask-first { display: none; }
  /* Beside New chat the name keeps its first words whole. */
  #fw-core .fw-band:has([data-act="new-chat"]) .fwx-ask-title span { display: none; }
}
/* Inside a section the found list names it, and one tap widens it to the whole LOG (52-ask-find.js). */
#fw-core .fwx-found__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#fw-core .fwx-found__wide { flex: none; padding: 0; border: 0; background: none; font-family: var(--font-jetbrains), monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-text-secondary); text-decoration: underline; text-decoration-color: var(--fw-line); text-underline-offset: 3px; cursor: pointer; }

/* A work in progress (51-lite-work.js): its thread under the column's head, the moves under the newest answer, each
   with a few grey words on what it is for (mock SxhNe2DDHsWuz9P14EGyoh, guide in grey). */
#fw-core .fwx-thread { flex: none; display: grid; gap: 2px; margin: 10px 24px 0; padding: 9px 12px; border-radius: var(--fw-corner-sm, 4px); box-shadow: inset 0 0 0 1px var(--fw-line);
  font: 400 10.5px/1.45 var(--font-jetbrains), monospace; color: var(--fw-text-muted); }
#fw-core .fwx-thread b { margin-bottom: 1px; font-weight: 400; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-core .fwx-thread span { color: var(--fw-text); }
#fw-core .fwx-thread .fwx-thread__rest { color: var(--fw-text-muted); }
#fw-core .fwx-moves { display: grid; gap: 8px; margin-top: 14px; }
#fw-core .fwx-moves .fwx-ask-label { margin: 0 0 2px; }
#fw-core .fwx-move { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; width: 100%; padding: 11px 12px 12px; border: 0; border-radius: var(--fw-corner-sm, 4px);
  background: var(--fw-surface-2); color: var(--fw-text); text-align: left; cursor: pointer; transition: box-shadow var(--fw-dur-state, 150ms); }
#fw-core .fwx-move:hover, #fw-core .fwx-move:focus-visible { box-shadow: inset 0 0 0 1px var(--fw-text); outline: none; }
#fw-core .fwx-move__for { grid-column: 1 / -1; font: 400 10.5px/1.4 var(--font-jetbrains), monospace; letter-spacing: 0.08em; color: var(--fw-text-subtle); }
#fw-core .fwx-move__say { font: 400 12px/1.5 var(--font-jetbrains), monospace; }
#fw-core .fwx-move svg { margin-top: 3px; color: var(--fw-text-subtle); }
#fw-core .fw-msg.is-revealing .fwx-moves { visibility: hidden; }
@media (max-width: 767px) { #fw-core .fwx-thread { margin: 8px 18px 0; } }
/* A running take, over the composer's field. The draft stays in the field out of sight and the wave
   stands where the words would be, so nothing in the row moves while the reader talks. */
#fw-core .fwx-take-only { display: none; }

#fw-core form[data-take] .fw-compose-field,
#fw-core form[data-take] [data-fwx="hint"] { visibility: hidden; }

#fw-core form[data-take] [aria-label="Send"] { opacity: 0.4; pointer-events: none; }

#fw-core .fwx-take {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  pointer-events: none;
}

#fw-core form[data-take] .fwx-take { display: flex; }

#fw-core .fwx-take-bars {
  display: none;
  flex: 1;
  min-width: 0;
  height: var(--fwx-take-wave);
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

#fw-core .fwx-take-bars i {
  display: block;
  flex: none;
  width: var(--fwx-take-bar);
  background: var(--fw-accent);
  transition: height 90ms linear, opacity 90ms linear;
}

#fw-core form[data-take="listening"] .fwx-take-bars { display: flex; }

#fw-core .fwx-take-note {
  display: none;
  align-items: center;
  gap: var(--fwx-take-note-gap);
  color: var(--fw-text-muted);
  font-family: var(--font-jetbrains), monospace;
  font-size: var(--fwx-take-note);
}

#fw-core form[data-take="working"] .fwx-take-note { display: flex; }

#fw-core .fwx-take-ring {
  width: var(--fwx-take-ring);
  height: var(--fwx-take-ring);
  border: 1px solid var(--fw-line);
  border-top-color: var(--fw-text-muted);
  border-radius: 50%;
  animation: fwx-take-turn 800ms linear infinite;
}

@keyframes fwx-take-turn { to { transform: rotate(360deg); } }

@keyframes fwx-take-wait { 50% { opacity: 0.3; } }

#fw-core form[data-take="working"] [data-act="dictate"] {
  pointer-events: none;
  animation: fwx-take-wait 1200ms ease-in-out infinite;
}

/* Computer: a cross to drop the take and a tick to keep it, in the mic's own footprint. */
#fw-core form[data-take="listening"] [data-act="dictate"] { display: none; }
#fw-core form[data-take="listening"] [data-act="take-drop"],
#fw-core form[data-take="listening"] .fwx-take-keep { display: flex; }

#fw-core .fwx-take-keep { color: var(--fw-accent); }

@media (hover: hover) {
  #fw-core .fwx-take-keep:hover,
  #fw-core [data-act="take-drop"]:hover { background: var(--fw-surface-3); }
  #fw-core [data-act="take-drop"]:hover { color: var(--fw-text); }
}

#fw-core .fwx-take-tip {
  padding: var(--fwx-take-tip-pad);
  background: var(--fw-surface);
  box-shadow: var(--fw-seam);
  color: var(--fw-text);
  font-family: var(--font-jetbrains), monospace;
  font-size: var(--fwx-take-tip);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* Phone: the thumb is already on the send, so while a take runs it ends the take. */
#fw-core .fwx-take-stop i {
  display: block;
  width: var(--fwx-take-stop);
  height: var(--fwx-take-stop);
  background: currentColor;
}

@media (max-width: 767px) {
  #fw-core form[data-take="listening"] .fwx-take-keep { display: none; }
  #fw-core form[data-take="listening"] [aria-label="Send"] { display: none; }
  #fw-core form[data-take="listening"] .fwx-take-stop { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  #fw-core .fwx-take-ring,
  #fw-core form[data-take="working"] [data-act="dictate"] { animation: none; }
}
/* Images in the Fakewhale AI (56-uploads.js, 88-account-uploads.js): the composer's tray, the picker,
   the pictures in a turn, the chat's delete dialog, the row in Privacy and the library above Settings.
   Mock 2026-11-07, design/uploads-v1. */
#fw-core .fwx-up-tray:empty { display: none; }
#fw-core .fwx-up-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 8px; }
#fw-core .fwx-up-chip { position: relative; width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: var(--fw-corner-sm); background: var(--fw-surface-3); }
#fw-core .fwx-up-chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
#fw-core .fwx-up-chip button { position: absolute; top: 3px; right: 3px; display: flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: var(--fw-inverse); color: var(--fw-bg); }
#fw-core .fwx-up-chip.is-up img { opacity: .45; }
#fw-core .fwx-up-chip.is-out { outline: 1px solid var(--fw-accent); outline-offset: -1px; }
#fw-core .fwx-up-chip.is-out img { filter: grayscale(1) blur(6px); opacity: .5; }
#fw-core .fwx-up-spin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1px solid var(--fw-line); border-top-color: var(--fw-text); border-radius: 50%; animation: fwx-up-turn 800ms linear infinite; }
@keyframes fwx-up-turn { to { transform: rotate(360deg); } }
#fw-core .fwx-up-note { margin: 0 2px 8px; font-family: var(--font-jetbrains), monospace; font-size: 11px; line-height: 1.5; color: var(--fw-accent); }
#fw-core form[data-fwx="ask"].is-drop { outline: 1px dashed var(--fw-accent); outline-offset: -1px; }
#fw-core .fwx-up-drop { position: absolute; inset: 12px; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--fw-accent); border-radius: var(--fw-corner); background: color-mix(in srgb, var(--fw-surface) 88%, transparent); pointer-events: none; }
#fw-core .fwx-up-drop b { font: 700 22px/1.1 var(--font-oswald), sans-serif; text-transform: uppercase; color: var(--fw-text); }
#fw-core .fwx-up-drop span { font-family: var(--font-jetbrains), monospace; font-size: 11px; color: var(--fw-text-muted); }

#fw-core .fwx-up-pop { padding: 16px; border-radius: var(--fw-corner); background: var(--fw-surface); color: var(--fw-text); box-shadow: var(--fw-seam), var(--fw-over); }
#fw-core .fwx-up-sheet { padding: 6px 16px 16px; }
#fw-core .fwx-up-kicker { margin: 0; font-family: var(--font-jetbrains), monospace; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-core .fwx-up-title { margin: 2px 0 10px; font-family: var(--font-oswald), sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--fw-text); }
#fw-core .fwx-up-line { margin: 0 0 14px; font-family: var(--font-jetbrains), monospace; font-size: 12px; line-height: 1.6; color: var(--fw-text-muted); }
#fw-core .fwx-up-pop { width: 470px; }
#fw-core .fwx-up-kicker + .fwx-up-ways { margin-top: 10px; }
#fw-core .fwx-up-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#fw-core .fwx-up-ways.is-one, #fw-core .fwx-up-sheet .fwx-up-ways { grid-template-columns: minmax(0, 1fr); }
#fw-core .fwx-up-way { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); text-align: left; color: var(--fw-text); transition: background-color 120ms; }
@media (hover: hover) { #fw-core .fwx-up-way:hover { background: var(--fw-surface-3); } }
#fw-core .fwx-up-way:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: 2px; }
#fw-core .fwx-up-way svg { flex: none; margin-top: 1px; }
#fw-core .fwx-up-way b { display: block; font: 700 14px/1.2 var(--font-oswald), sans-serif; letter-spacing: .02em; text-transform: uppercase; }
#fw-core .fwx-up-way small { display: block; margin-top: 3px; font-family: var(--font-jetbrains), monospace; font-size: 10px; line-height: 1.4; color: var(--fw-text-muted); }
#fw-core .fwx-up-recent { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 8px; }
#fw-core .fwx-up-recent span { font-family: var(--font-jetbrains), monospace; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-core .fwx-up-recent button { font: 700 11px/1 var(--font-oswald), sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--fw-text); text-decoration: underline; text-underline-offset: 3px; }
#fw-core .fwx-up-recent-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#fw-core .fwx-up-sheet .fwx-up-recent-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#fw-core .fwx-up-sheet .fwx-up-recent-row .fwx-up-tile:nth-child(n+5) { display: none; }
#fw-core .fwx-up-tile { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; padding: 0; border-radius: var(--fw-corner-sm); background: var(--fw-surface-3); }
#fw-core .fwx-up-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
#fw-core .fwx-up-tile.is-on { outline: 2px solid var(--fw-accent); outline-offset: -2px; }
#fw-core .fwx-up-n { position: absolute; top: 5px; right: 5px; display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--fw-accent); color: #fff; font: 700 11px/1 var(--font-jetbrains), monospace; }
#fw-core .fwx-up-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
#fw-core .fwx-up-foot span { font-family: var(--font-jetbrains), monospace; font-size: 10px; line-height: 1.5; color: var(--fw-text-muted); }
#fw-core .fwx-up-ink, #fw-core .fwx-up-red, #fw-core .fwx-up-soft { display: inline-flex; flex: none; height: 36px; align-items: center; justify-content: center; padding: 0 14px; border-radius: var(--fw-corner-sm); font: 700 12px/1 var(--font-oswald), sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#fw-core .fwx-up-ink { background: var(--fw-inverse); color: var(--fw-bg); }
#fw-core .fwx-up-ink:disabled { opacity: .4; cursor: not-allowed; }
#fw-core .fwx-up-red { background: var(--fw-accent); color: #fff; }
#fw-core .fwx-up-soft { background: var(--fw-surface-2); color: var(--fw-text); }
@media (max-width: 767px) {
  #fw-core .fwx-up-sheet .fwx-up-foot { flex-direction: column; align-items: stretch; }
  #fw-core .fwx-up-sheet .fwx-up-ink, #fw-core .fwx-up-wide-phone { width: 100%; height: 44px; }
}

#fw-core .fwx-up-bubble { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
#fw-core .fwx-up-bubble img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--fw-corner-sm); background: var(--fw-surface-3); }
#fw-core .fwx-up-bubble img:not([src]) { visibility: hidden; }

#fw-core .fwx-up-veil { position: fixed; inset: 0; z-index: 139; background: rgb(0 0 0 / .45); }
#fw-core .fwx-up-dialog { position: fixed; left: 50%; top: 50%; z-index: 141; width: min(460px, calc(100vw - 32px)); padding: 22px; transform: translate(-50%, -50%); border-radius: var(--fw-corner); background: var(--fw-surface); color: var(--fw-text); box-shadow: var(--fw-seam), var(--fw-over); }
#fw-core .fwx-up-row { display: flex; flex-wrap: wrap; gap: 10px; }

#fw-core .fwx-up-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
@media (max-width: 767px) {
  #fw-core .fwx-up-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #fw-core .fwx-up-strip .fwx-up-tile:nth-child(n+5) { display: none; }
}

#fw-core .fwx-up-lib-veil { z-index: 124; }
#fw-core .fwx-up-lib { position: fixed; z-index: 125; left: 50%; top: 50%; display: flex; flex-direction: column; width: min(1600px, calc(100vw - 64px)); height: calc(100vh - 64px); transform: translate(-50%, -50%); overflow: hidden; border-radius: var(--fw-corner); background: var(--fw-surface); color: var(--fw-text); box-shadow: var(--fw-seam), var(--fw-over); }
#fw-core .fwx-up-lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--fw-line); }
#fw-core .fwx-up-lib-head .fwx-up-title { margin-bottom: 0; }
#fw-core .fwx-up-lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#fw-core .fwx-up-count { font-family: var(--font-jetbrains), monospace; font-size: 12px; color: var(--fw-text-muted); }
#fw-core .fwx-up-x { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); color: var(--fw-text); }
#fw-core .fwx-up-lib-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 22px; }
#fw-core .fwx-up-month { margin: 18px 0 8px; font-family: var(--font-jetbrains), monospace; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-core .fwx-up-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
#fw-core .fwx-up-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: rgb(0 0 0 / .25); }
#fw-core .fwx-up-check.is-on { border-color: var(--fw-accent); background: var(--fw-accent); }
#fw-core .fwx-up-lib-bar.is-pick { justify-content: flex-end; }
#fw-core .fwx-up-lib-bar { display: flex; gap: 10px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--fw-line); background: var(--fw-surface); }
#fw-core .fwx-up-view { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--fw-surface); }
#fw-core .fwx-up-view img { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: var(--fw-surface-2); }
#fw-core .fwx-up-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); font-family: var(--font-jetbrains), monospace; font-size: 12px; color: var(--fw-text-muted); }
#fw-core .fwx-up-above { z-index: 3; }
@media (max-width: 767px) {
  #fw-core .fwx-up-lib { left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0; }
  #fw-core .fwx-up-lib-head { flex-wrap: wrap; padding: max(16px, env(safe-area-inset-top, 0px)) 16px 12px; }
  #fw-core .fwx-up-lib-body { padding: 4px 16px 16px; }
  #fw-core .fwx-up-lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #fw-core .fwx-up-lib-bar, #fw-core .fwx-up-view-bar { padding-inline: 16px; }
  #fw-core .fwx-up-lib-bar .fwx-up-red, #fw-core .fwx-up-lib-bar .fwx-up-ink { flex: 1; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { #fw-core .fwx-up-spin { animation: none; } }
/* The LOG's cards (log-cards.php): the measures, one card in its shapes and title placements, the grid,
   the row and the section head. Every page picks a look in FW_LOG_LOOKS; nothing here names a page.

   The measures are the old LOG's at 1440 (owner and the editor, 2026-10-26) in screen pixels, counted
   in --fwx-px as the page's edge is (foundation.css). */
html.fw-shell {
  --fw-log-gap: calc(10 * var(--fwx-px));
  --fw-log-gap-under: calc(40 * var(--fwx-px));
  --fw-log-title: calc(20 * var(--fwx-px));
  --fw-log-meta: calc(11 * var(--fwx-px));
  --fw-log-over-pad: calc(24 * var(--fwx-px));
  --fw-log-under-pad: calc(10 * var(--fwx-px));
  --fw-log-head: calc(34 * var(--fwx-px));
  /* A section's name sits nearer the cards it names: on production its letters stand 12 to 13 px under the
     row above and 8 px over its own (measured on the glyphs, 2026-10-27). */
  --fw-log-head-above: calc(19 * var(--fwx-px));
  --fw-log-head-below: calc(12 * var(--fwx-px));
  /* The home's hero and the tiles under it keep a shape and stop at production's height (measured on
     log.fakewhale.xyz, 2026-10-27: 537 from 1320 px wide, 520 below). Each ratio is the narrowest full
     column of its band over that height, so a full column always meets the cap, as production does, and a
     column the rails narrow keeps the shape and scales like the other rows. */
  --fw-log-feature-h: calc(537 * var(--fwx-px));
  --fw-log-hero-ratio: 2.29;
  --fw-log-tile-ratio: 1.14;
  --fw-log-title-lines: 3;
  --fw-log-corner: var(--fw-corner);
  /* Words over a cover sit on its darkened foot, in both themes. */
  --fw-log-on-cover: #fff;
  --fw-log-scrim: rgb(0 0 0 / 0.8);
}
@media (max-width: 1319px) {
  html.fw-shell { --fw-log-feature-h: calc(520 * var(--fwx-px)); --fw-log-hero-ratio: 2.14; --fw-log-tile-ratio: 1.06; }
}
@media (max-width: 767px) {
  html.fw-shell {
    --fw-log-gap: 16px;
    --fw-log-head: 30px;
    --fw-log-head-below: 14px;
    /* The old LOG's phone cards ran to the screen's edge with their words 24px in; ours sit 10px in,
       so the words over a cover keep 14px to stand where they stood. */
    --fw-log-over-pad: 14px;
  }
}

/* ---------- the card ---------- */
:is(#fw-page, .fwx-scope) .fw-log-card { display: block; position: relative; color: inherit; text-decoration: none; border-radius: var(--fw-log-corner); }
:is(#fw-page, .fwx-scope) .fw-log-card:focus-visible { outline: 2px solid var(--fw-text); outline-offset: 3px; }
:is(#fw-page, .fwx-scope) .fw-log-card__media {
  display: block; position: relative; overflow: hidden; isolation: isolate;
  /* The width is the column's: a capped card stops growing in height and keeps the full width (left to
     itself, aspect-ratio would carry the cap over to the width and narrow the card). */
  width: 100%; aspect-ratio: var(--fw-log-card-ratio); max-height: var(--fw-log-card-max, none); border-radius: var(--fw-log-corner); background: var(--fw-surface-3);
}
:is(#fw-page, .fwx-scope) .fw-log-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.3, 1);
}
/* Only the cover moves under the pointer; the words stay where they are. */
:is(#fw-page, .fwx-scope) .fw-log-card:hover .fw-log-card__media img { transform: scale(1.04); }
:is(#fw-page, .fwx-scope) .fw-log-card__blank {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px;
  font-family: var(--font-oswald), sans-serif; font-weight: 700; font-size: clamp(24px, 6vw, 64px); line-height: 1;
  text-transform: uppercase; text-align: center; color: color-mix(in srgb, var(--fw-text-secondary) 20%, transparent);
}
:is(#fw-page, .fwx-scope) .fw-log-card__section { position: absolute; left: 8px; top: 8px; z-index: 2; }
:is(#fw-page, .fwx-scope) .fw-log-card__corner { position: absolute; right: 8px; top: 8px; z-index: 2; display: flex; gap: 4px; }
:is(#fw-page, .fwx-scope) .fw-tag--partner { background: var(--fwx-partner); color: var(--fw-accent); }
:is(#fw-page, .fwx-scope) .fw-log-card__body { display: block; }
:is(#fw-page, .fwx-scope) .fw-log-card__meta {
  display: block; margin-bottom: calc(6 * var(--fwx-px));
  font-family: var(--font-jetbrains), monospace; font-size: var(--fw-log-meta); font-weight: 500; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fw-text-muted);
}
:is(#fw-page, .fwx-scope) .fw-log-card__title {
  --fwx-clamp-lines: var(--fw-log-title-lines);
  font-family: var(--font-oswald), sans-serif; font-weight: 700; font-size: var(--fw-log-title);
  line-height: 1.3; letter-spacing: -0.02em; text-transform: uppercase; color: var(--fw-text); text-wrap: balance;
}

/* Shapes: a ratio each, and for the hero and the tiles the feature height as their cap. On a phone the old
   LOG stands the hero, the tiles and the wide covers at 3:4, uncapped. */
:is(#fw-page, .fwx-scope) .fw-log-card--hero { --fw-log-card-ratio: var(--fw-log-hero-ratio); --fw-log-card-max: var(--fw-log-feature-h); }
:is(#fw-page, .fwx-scope) .fw-log-card--tile { --fw-log-card-ratio: var(--fw-log-tile-ratio); --fw-log-card-max: var(--fw-log-feature-h); }
:is(#fw-page, .fwx-scope) .fw-log-card--wide { --fw-log-card-ratio: 16 / 9; }
/* CORE's reel: 21:9 at the column's full width, up to the whole room between the bar and the ask (an ultrawide). */
:is(#fw-page, .fwx-scope) .fw-log-card--cinema { --fw-log-card-ratio: 21 / 9; --fw-log-card-max: var(--fwx-screen); }
:is(#fw-page, .fwx-scope) .fw-log-card--landscape { --fw-log-card-ratio: 3 / 2; }
:is(#fw-page, .fwx-scope) .fw-log-card--tall { --fw-log-card-ratio: 3 / 4; }
@media (max-width: 767px) {
  :is(#fw-page, .fwx-scope) :is(.fw-log-card--hero, .fw-log-card--tile, .fw-log-card--wide, .fw-log-card--cinema) { --fw-log-card-ratio: 3 / 4; --fw-log-card-max: none; }
}

/* Title over the cover: on its darkened foot. */
:is(#fw-page, .fwx-scope) .fw-log-card--over .fw-log-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--fw-log-scrim), transparent 62%);
}
:is(#fw-page, .fwx-scope) .fw-log-card--over .fw-log-card__body { position: absolute; inset: auto 0 0; z-index: 2; padding: var(--fw-log-over-pad); max-width: 46em; pointer-events: none; }
:is(#fw-page, .fwx-scope) .fw-log-card--over :is(.fw-log-card__meta, .fw-log-card__title) { color: var(--fw-log-on-cover); }
:is(#fw-page, .fwx-scope) .fw-log-card--over .fw-log-card__meta { opacity: 0.75; }
/* Title under the cover: on the page itself, with no plate of its own. */
:is(#fw-page, .fwx-scope) .fw-log-card--under .fw-log-card__body { padding-top: var(--fw-log-under-pad); }

/* ---------- the grid ---------- */
:is(#fw-page, .fwx-scope) .fw-log-cards {
  --fw-log-cards-cols: 4;
  display: grid; column-gap: var(--fw-log-gap); row-gap: var(--fw-log-gap);
  grid-template-columns: repeat(min(var(--fw-log-cards-cols), var(--fwx-cols-cap, 4)), minmax(0, 1fr));
}
:is(#fw-page, .fwx-scope) .fw-log-cards--2 { --fw-log-cards-cols: 2; }
:is(#fw-page, .fwx-scope) .fw-log-cards--3 { --fw-log-cards-cols: 3; }
:is(#fw-page, .fwx-scope) .fw-log-cards--under { row-gap: var(--fw-log-gap-under); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  :is(#fw-page, .fwx-scope) .fw-log-cards { --fw-log-cards-cols: 2; }
}
@media (max-width: 767px) {
  :is(#fw-page, .fwx-scope) .fw-log-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the row: four to a screen, fewer with a side column open, one and a glimpse on a phone ---------- */
:is(#fw-page, .fwx-scope) .fw-log-strip {
  --fw-log-strip-cards: min(4, var(--fwx-cols-cap, 4));
  display: flex; column-gap: var(--fw-log-gap); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
:is(#fw-page, .fwx-scope) .fw-log-strip::-webkit-scrollbar { display: none; }
:is(#fw-page, .fwx-scope) .fw-log-strip > .fw-log-card {
  flex: 0 0 calc((100% - (var(--fw-log-strip-cards) - 1) * var(--fw-log-gap)) / var(--fw-log-strip-cards));
  scroll-snap-align: start;
}
@media (max-width: 767px) {
  :is(#fw-page, .fwx-scope) .fw-log-strip > .fw-log-card { flex-basis: 78%; }
}

/* ---------- the section head ---------- */
:is(#fw-page, .fwx-scope) .fw-log-head {
  display: flex; align-items: center; gap: 16px;
  margin: var(--fw-log-head-above) 0 var(--fw-log-head-below);
}
:is(#fw-page, .fwx-scope) .fw-log-head__name {
  margin: 0; font-family: var(--font-oswald), sans-serif; font-weight: 700; font-size: var(--fw-log-head);
  line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; color: var(--fw-text);
}
:is(#fw-page, .fwx-scope) .fw-log-head__arrows { display: flex; gap: 6px; margin-left: auto; }
:is(#fw-page, .fwx-scope) .fw-log-head__arrows[hidden] { display: none; }
:is(#fw-page, .fwx-scope) .fw-log-head__arrow {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); color: var(--fw-text-secondary);
  cursor: pointer; transition: background var(--fw-dur-state), color var(--fw-dur-state);
}
:is(#fw-page, .fwx-scope) .fw-log-head__arrow:hover { background: var(--fw-surface-3); color: var(--fw-text); }
:is(#fw-page, .fwx-scope) .fw-log-head .fw-log-head__link {
  margin-left: auto; font-family: var(--font-jetbrains), monospace; font-size: var(--fw-log-meta); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fw-text-secondary); text-decoration: underline; text-decoration-color: var(--fw-line); text-underline-offset: 4px;
}
:is(#fw-page, .fwx-scope) .fw-log-head .fw-log-head__link:hover { color: var(--fw-text); }
@media (max-width: 767px) {
  :is(#fw-page, .fwx-scope) .fw-log-head__arrows { display: none; }
}

/* ---------- where cards sit: a page of its own, and the front page's blocks ---------- */
:is(#fw-page, .fwx-scope).fw-log-page,
:is(#fw-page, .fwx-scope) .fw-log-page { padding: 0 var(--fwx-edge) var(--fw-log-gap-under); }
/* A word of a section's line that opens its way in (FW_LOG_LINES). */
:is(#fw-page, .fwx-scope) .fw-log-page__line .fw-log-page__door {
  color: var(--fw-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 4px;
}
:is(#fw-page, .fwx-scope) .fw-log-page__line .fw-log-page__door:hover { text-decoration-color: currentColor; }
/* :is(#fwx-weight, …) lends the id weight CORE's scoped rules carry, which a block's root also meets. */
html.fw-shell body.home .elementor :is(#fwx-weight, .fwx-scope) { padding-inline: var(--fwx-edge); }

@media (prefers-reduced-motion: reduce) {
  :is(#fw-page, .fwx-scope) .fw-log-card__media img { transition: none; }
  :is(#fw-page, .fwx-scope) .fw-log-card:hover .fw-log-card__media img { transform: none; }
}

/* ---------- CORE's home (log-core-home.php) ---------- */
#fw-page .fwx-core-home__head { padding-bottom: var(--fw-log-head-below); }
/* The reel: one essay at a time in a track that snaps (a swipe on a phone), an arrow on either side. */
#fw-page .fwx-core-reel { position: relative; }
/* 21:9 while the reel fits between the page's head and the ask; lower only when it would not (an ultrawide). The
   head's height comes from 97-core-reel.js. */
#fw-page .fwx-core-reel .fw-log-card--cinema { --fw-log-card-max: calc(var(--fwx-screen) - var(--fwx-core-head, 0px)); }
#fw-page .fwx-core-reel__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--fw-log-corner); }
#fw-page .fwx-core-reel__track::-webkit-scrollbar { display: none; }
#fw-page .fwx-core-reel__track > .fw-log-card { flex: 0 0 100%; scroll-snap-align: start; }
#fw-page .fwx-core-reel__arrow {
  position: absolute; z-index: 3; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--fw-corner-pill);
  background: rgba(0, 0, 0, 0.45); color: #fff; backdrop-filter: blur(6px); cursor: pointer;
  opacity: 0; transition: opacity var(--fw-dur-state, 150ms) ease;
}
#fw-page .fwx-core-reel__arrow--prev { left: 12px; }
#fw-page .fwx-core-reel__arrow--next { right: 12px; }
#fw-page .fwx-core-reel:hover .fwx-core-reel__arrow, #fw-page .fwx-core-reel__arrow:focus-visible { opacity: 1; }
/* The rest of CORE, right under the reel at the LOG's gap (as the home's tiles under its hero), four to a row. */
#fw-page .fwx-core-home__grid { margin-top: var(--fw-log-gap); }
@media (max-width: 767px) {
  #fw-page .fwx-core-reel__arrow { display: none; }
}
/* CORE's head (log-core-band.php): Fakewhale's pictures under the site's glass, CORE as tall as the three lines of words
   beside it, and the way in. Measures in screen pixels (--fwx-px). */
#fw-page .fwx-core-band {
  --fwx-band-size: calc(14.5 * var(--fwx-px));
  /* 97-core-band.js steps this down until the words take three lines. */
  --fwx-band-k: 1;
  --fwx-band-lead: 1.55;
  /* Cap height over size of the two faces the site loads (measured 2026-11-07): CORE's capitals stand from the top of
     the first line's capitals to the third line's baseline. */
  --fwx-cap-oswald: 0.81;
  --fwx-cap-mono: 0.73;
  --fwx-band-text: calc(var(--fwx-band-size) * var(--fwx-band-k));
  --fwx-band-name: calc((2 * var(--fwx-band-lead) + var(--fwx-cap-mono)) * var(--fwx-band-text) / var(--fwx-cap-oswald));
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--fw-log-corner);
  background: var(--fw-surface-3);
}
/* The pictures come blurred already and run past the band, so the glass reads the same to its very edge: near an edge
   the glass alone has less picture to blur and the shapes showed through. */
#fw-page .fwx-core-band__pics {
  position: absolute; inset: calc(-40 * var(--fwx-px)); z-index: -1;
  display: flex; flex-wrap: wrap; filter: blur(calc(16 * var(--fwx-px)));
}
#fw-page .fwx-core-band__pics img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; }
#fw-page .fwx-core-band__pane {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: calc(24 * var(--fwx-px));
  padding: calc(24 * var(--fwx-px)) calc(28 * var(--fwx-px));
  border-radius: inherit;
  background: var(--fw-glass-tint);
  -webkit-backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat));
  backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat));
  box-shadow: var(--fw-seam), var(--fw-lift);
}
#fw-page .fwx-core-band__name {
  margin: 0; font-family: var(--font-oswald), sans-serif; font-size: var(--fwx-band-name); font-weight: 700; line-height: 1;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--fw-text); text-box: trim-both cap alphabetic;
}
#fw-page .fwx-core-band__line {
  margin: 0; max-width: 100ch; font-family: var(--font-jetbrains), monospace; font-size: var(--fwx-band-text); line-height: var(--fwx-band-lead);
  letter-spacing: -0.01em; color: var(--fw-text-secondary); text-wrap: pretty; text-box: trim-both cap alphabetic;
}
#fw-page .fwx-keep { white-space: nowrap; }
/* The way in: the words in Oswald, the price under them, an arrow that leans forward under the pointer, in the theme's
   ink as the Membership strip's button. */
#fw-page .fwx-core-band__go {
  align-self: center; display: inline-flex; align-items: center; gap: calc(16 * var(--fwx-px));
  height: calc(64 * var(--fwx-px)); padding: 0 calc(14 * var(--fwx-px)) 0 calc(18 * var(--fwx-px));
  border: 0; border-radius: var(--fw-corner-sm, 4px); background: var(--fw-inverse); color: var(--fw-bg);
  box-shadow: var(--fw-lift); white-space: nowrap; text-align: left; cursor: pointer;
}
#fw-page .fwx-core-band__go:focus-visible { outline: 2px solid var(--fw-text); outline-offset: 3px; }
#fw-page .fwx-core-band__go-words { display: flex; flex-direction: column; gap: calc(7 * var(--fwx-px)); }
#fw-page .fwx-core-band__go-do {
  font-family: var(--font-oswald), sans-serif; font-size: calc(20 * var(--fwx-px)); font-weight: 700; line-height: 1;
  letter-spacing: 0.01em; text-transform: uppercase; text-box: trim-both cap alphabetic;
}
#fw-page .fwx-core-band__go-price {
  font-family: var(--font-jetbrains), monospace; font-size: calc(11 * var(--fwx-px)); line-height: 1; letter-spacing: 0.04em;
  opacity: 0.72; text-box: trim-both cap alphabetic;
}
#fw-page .fwx-core-band__go-price b { font-weight: 700; }
#fw-page .fwx-core-band__go-arrow { transition: transform var(--fw-dur-move, 0.2s) var(--fw-ease-out, ease); }
#fw-page .fwx-core-band__go:hover .fwx-core-band__go-arrow { transform: translateX(calc(4 * var(--fwx-px))); }
/* A member sees the cards' MEMBERS plate, a little larger, in the glass's top right corner. */
#fw-page .fwx-core-band__member { position: absolute; top: calc(14 * var(--fwx-px)); right: calc(14 * var(--fwx-px)); --fw-tag-scale: 1.4; }

@media (max-width: 767px) {
  /* A phone keeps CORE and the first sentence; the way in is the island's strip, a member's tag stays on the computer. */
  #fw-page .fwx-core-band { --fwx-band-size: 11.5px; --fwx-band-lead: 1.5; }
  #fw-page .fwx-core-band__pics img { flex-basis: 25%; height: 50%; }
  #fw-page .fwx-core-band__pane { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px 14px; }
  #fw-page :is(.fwx-core-band__rest, .fwx-core-band__go, .fwx-core-band__member) { display: none; }
  /* The reel keeps its 3:4 under the band: the page scrolls to it. */
  #fw-page .fwx-core-reel .fw-log-card--cinema { --fw-log-card-max: none; }
}
@media (prefers-reduced-motion: reduce) {
  #fw-page .fwx-core-band__go-arrow { transition: none; }
}
/* /network/ (log-network.php): the title with its tabs, the space between sections. Its way in is the page's strip (73-call.js).
   The page's links take the frame's link colour, so these name #fw-page to keep their own. */
#fw-page .fwx-net-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 14px 32px; }
#fw-page .fwx-net-sub { margin: 8px 0 0; font-family: var(--font-jetbrains), monospace; font-size: 13px; line-height: 1.5; color: var(--fw-text-muted); }
#fw-page .fwx-net-tabs { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
#fw-page .fwx-net-tabs::-webkit-scrollbar { display: none; }
#fw-page .fwx-net-tabs .fwx-net-tab { flex: none; padding-bottom: 7px; border-bottom: 2px solid transparent; font-family: var(--font-jetbrains), monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-text-subtle); text-decoration: none; transition: color var(--fw-dur-state, 150ms), border-color var(--fw-dur-state, 150ms); }
#fw-page .fwx-net-tabs .fwx-net-tab:hover, #fw-page .fwx-net-tabs .fwx-net-tab:focus-visible { color: var(--fw-text); outline: none; }
#fw-page .fwx-net-tabs .fwx-net-tab.is-on { color: var(--fw-text); border-bottom-color: var(--fw-text); }
#fw-page .fwx-net-section { margin-top: 34px; }
@media (max-width: 767px) {
  #fw-page .fwx-net-head { display: block; }
  #fw-page .fwx-net-sub { font-size: 12px; }
  #fw-page .fwx-net-tabs { margin-top: 14px; }
}
/* The Info page (log-info.php): a large banner, then the page's words at the LOG's body size with one door to the
   network on the left half and the enquiry form on the right half, both one height. Every measure is a share of
   the page, never a count of characters: the frame's zoom keeps a 1920 canvas on a 16:9 screen but widens it on
   an ultrawide, where a fixed measure left the words a narrow strip under a banner that filled the screen. The
   page's links take the frame's link colour, so these name #fw-page to keep their own. */
/* The page's own Elementor CSS (post-236.css) still loads and pads the theme's container with
   !important; the plugin draws this page, so that padding goes and it lines up with the others. */
html.fw-shell body.fwx-info-page .cs-container:has(#fw-page) { padding-inline: 0 !important; max-width: none; }

#fw-page .fwx-info { container-type: inline-size; }
/* 21:8 of the page's width, up to three quarters of the room between the bar and the ask (an ultrawide). The width
   is set, or the capped height would narrow it through the ratio. */
#fw-page .fwx-info-banner { position: relative; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 21 / 8; max-height: calc(var(--fwx-screen) * 0.75); overflow: hidden; border-radius: var(--fw-corner, 6px); background: var(--fw-surface-2) center 50% / cover no-repeat; }
#fw-page .fwx-info-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent 65%); }
#fw-page .fwx-info-banner > div { position: relative; padding: 26px; color: #fff; }
#fw-page .fwx-info-banner .fwx-info-kicker { color: rgba(255, 255, 255, 0.78); }
#fw-page .fwx-info-banner h1 { margin: 8px 0 0; color: #fff; max-width: 18ch; font-family: var(--font-oswald), sans-serif; font-size: clamp(26px, 3.4vw, 46px); font-weight: 700; line-height: 0.98; text-transform: uppercase; text-wrap: balance; }
#fw-page .fwx-info-kicker { margin: 0; font-family: var(--font-jetbrains), monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fw-text-subtle); }

/* Two halves of one height: the words, set close as one block, their door at the foot; the form beside them. */
#fw-page .fwx-info-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-log-gap-under); margin: var(--fw-log-gap-under) 0; }
#fw-page .fwx-info-about { display: flex; flex-direction: column; align-items: flex-start; }
#fw-page .fwx-info-about p { margin: 0; font-family: var(--font-jetbrains), monospace; font-size: var(--fwx-body); line-height: var(--fwx-body-line); color: var(--fw-text); }
#fw-page .fwx-info-about p:last-of-type { margin-bottom: var(--fw-log-gap-under); }
#fw-page .fwx-info-btn, #fw-page .fwx-info-form .wpcf7-submit { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border: 0; cursor: pointer; border-radius: var(--fw-corner-sm, 4px); background: var(--fw-accent); color: #fff; font-family: var(--font-jetbrains), monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: opacity var(--fw-dur-state, 150ms); }
#fw-page .fwx-info-btn { margin-top: auto; }
#fw-page .fwx-info-btn:hover, #fw-page .fwx-info-form .wpcf7-submit:hover { opacity: 0.86; }

/* general enquiries: the title over the form, the message filling what the words leave of the height */
#fw-page .fwx-info-contact { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#fw-page .fwx-info-contact h2 { margin: 0; font-family: var(--font-oswald), sans-serif; font-size: 20px; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--fw-text); }
#fw-page .fwx-info-form, #fw-page .fwx-info-form .wpcf7, #fw-page .fwx-info-form form { display: flex; flex: 1; flex-direction: column; }

/* The Contact Form 7 form, its markup untouched: the frame's fields and an ink button. */
#fw-page .fwx-info-form .cs-contact-form { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(132px, 1fr) auto; gap: 10px; }
#fw-page .fwx-info-form .wpcf7-form-control-wrap { display: block; min-width: 0; }
#fw-page .fwx-info-form .wpcf7-form-control-wrap[data-name="your-message"], #fw-page .fwx-info-form .cs-button-animated { grid-column: 1 / -1; }
#fw-page .fwx-info-form input:not([type="submit"]), #fw-page .fwx-info-form textarea { width: 100%; min-height: 40px; padding: 10px 12px; background: var(--fw-surface-2); border: 1px solid var(--fw-line); border-radius: var(--fw-corner-sm, 4px); font-family: var(--font-jetbrains), monospace; font-size: 13px; color: var(--fw-text); }
#fw-page .fwx-info-form .wpcf7-form-control-wrap[data-name="your-message"] { display: flex; }
#fw-page .fwx-info-form textarea { flex: 1; height: auto; resize: none; }
#fw-page .fwx-info-form input:focus, #fw-page .fwx-info-form textarea:focus { outline: 1px solid var(--fw-text-subtle); outline-offset: 0; }
#fw-page .fwx-info-form ::placeholder { color: var(--fw-text-subtle); }
/* Submit Request closes the right half at its right edge, as Learn more closes the left half at its left: the row
   reads as a mirror. */
#fw-page .fwx-info-form .cs-button-animated { justify-self: end; display: inline-flex; min-height: 0; padding: 0; background: none; border-radius: 0; }
#fw-page .fwx-info-form .cs-button-animated__circle { display: none; }
#fw-page .fwx-info-form .cs-button-animated__inner, #fw-page .fwx-info-form .cs-button-animated__text { display: inline-flex; align-items: center; min-height: 0; padding: 0; background: none; }
/* On a phone the frame sets every input to 16px or more, so iOS does not zoom into a field; the send
   button is no field and keeps the buttons' size. */
#fw-page .fwx-info-form input.wpcf7-submit { font-size: 11px !important; }
#fw-page .fwx-info-form .wpcf7-response-output { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--fw-line); font-family: var(--font-jetbrains), monospace; font-size: 12px; color: var(--fw-text-muted); }
#fw-page .fwx-info-form .wpcf7-not-valid-tip { margin-top: 4px; font-family: var(--font-jetbrains), monospace; font-size: 11px; }

@media (max-width: 767px) {
  #fw-page .fwx-info-banner { aspect-ratio: 4 / 3; }
  #fw-page .fwx-info-banner > div { padding: 18px; }
  #fw-page .fwx-info-btn { align-self: stretch; justify-content: center; }
  #fw-page .fwx-info-form .cs-contact-form { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(132px, 1fr) auto; }
  #fw-page .fwx-info-form .cs-button-animated, #fw-page .fwx-info-form .cs-button-animated__inner, #fw-page .fwx-info-form .cs-button-animated__text, #fw-page .fwx-info-form .wpcf7-submit { justify-self: stretch; width: 100%; justify-content: center; }
}
@container (max-width: 899px) {
  #fw-page .fwx-info-body { grid-template-columns: minmax(0, 1fr); }
}
/* My LOG (mylog-blocks.php, mock design/mylog-v4). Every measure counts --fwx-ml-u, four pixels of screen, so the page
   holds at the frame's zoom; widths follow the column through the fwx-ml container, so it holds with the rails open. */
#fw-page .fwx-mylog {
  container: fwx-ml / inline-size;
  --fwx-ml-u: calc(4 * var(--fwx-px));
  --fwx-ml-hair: var(--fwx-px);
  --fwx-ml-ink: var(--fw-inverse);
  --fwx-ml-paper: var(--fwx-stage);
  --fwx-ml-on-red: var(--fw-log-on-cover);
  /* A person without a picture: initials on black in both themes (owner 2026-11-11). */
  --fwx-ml-face-ground: #0a0a0a;
  --fwx-ml-face-ink: #ffffff;
  --fwx-ml-hero: calc(135 * var(--fwx-ml-u));
  --fwx-ml-hero-title: clamp(calc(8.5 * var(--fwx-ml-u)), 4.35cqi, calc(16 * var(--fwx-ml-u)));
  --fwx-ml-core-title: clamp(calc(7 * var(--fwx-ml-u)), 3.3cqi, calc(11.5 * var(--fwx-ml-u)));
  --fwx-ml-card-title: clamp(calc(6.5 * var(--fwx-ml-u)), 2.9cqi, calc(9.5 * var(--fwx-ml-u)));
  --fwx-ml-body: calc(13 * var(--fwx-px));
  --fwx-ml-small: calc(11 * var(--fwx-px));
  --fwx-ml-micro: calc(10 * var(--fwx-px));
  --fwx-ml-control: calc(11 * var(--fwx-ml-u));
  --fwx-ml-gutter: calc(9 * var(--fwx-ml-u));
  --fwx-ml-nav: calc(14 * var(--fwx-ml-u));
  --fwx-ml-identity: calc(14 * var(--fwx-ml-u));
  --fwx-ml-identity-title: calc(6 * var(--fwx-ml-u));
  --fwx-ml-identity-face: calc(8 * var(--fwx-ml-u));
  --fwx-ml-invite-image: calc(55 * var(--fwx-ml-u));
  --fwx-ml-invite-title: calc(8 * var(--fwx-ml-u));
  --fwx-ml-held: calc(var(--fwx-ab) + var(--fwx-top));
  --fwx-ml-accent-text: color-mix(in srgb, var(--fw-accent) 85%, var(--fw-text));
  --fwx-ml-rule: color-mix(in srgb, var(--fwx-ml-paper) 22%, transparent);
  --fwx-ml-soft: color-mix(in srgb, var(--fwx-ml-paper) 74%, transparent);
  --fwx-ml-smoke: color-mix(in srgb, var(--fw-text) 12%, var(--fw-glass-tint));
  --fwx-ml-subnav: color-mix(in srgb, var(--fw-text) 6%, var(--fw-glass-tint));
  --fwx-ml-font: var(--font-jetbrains), monospace;
  --fwx-ml-display: var(--font-oswald), sans-serif;
  display: block;
  padding-bottom: var(--fw-log-gap-under);
  color: var(--fw-text);
}
/* Ink and paper trade places with the scheme: the panels black on the light page are white on the dark one. */
html[data-theme="dark"] #fw-page .fwx-mylog { --fwx-ml-accent-text: color-mix(in srgb, var(--fw-accent) 65%, var(--fw-text)); }
#fw-page .fwx-mylog :is(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
#fw-page .fwx-mylog :is(ul, ol) { list-style: none; }
#fw-page .fwx-mylog :is(h1, h2, h3) { min-width: 0; font-style: normal; overflow-wrap: anywhere; color: inherit; }
#fw-page .fwx-mylog :is(a, button):focus-visible { outline: calc(2 * var(--fwx-ml-hair)) solid var(--fw-accent); outline-offset: var(--fwx-ml-u); }
#fw-page .fwx-mylog button { cursor: pointer; }
#fw-page .fwx-mylog svg { flex: none; width: calc(4 * var(--fwx-ml-u)); height: calc(4 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-hero img, #fw-page .fwx-ml-card-image img, #fw-page .fwx-ml-invite__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The account's bar */
#fw-page .fwx-ml-identity { position: sticky; top: var(--fwx-ml-held); z-index: 30; display: flex; align-items: center; gap: calc(5 * var(--fwx-ml-u)); height: var(--fwx-ml-identity); margin-bottom: calc(4 * var(--fwx-ml-u)); padding: 0 calc(3 * var(--fwx-ml-u)); border-radius: var(--fw-corner); background: var(--fwx-ml-subnav); backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat)); -webkit-backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat)); }
/* What scrolls under the bar stops at its top edge, so its two top corners would hold a sliver of it: the page fills them. */
#fw-page .fwx-ml-identity::before, #fw-page .fwx-ml-identity::after { content: ''; position: absolute; top: 0; width: var(--fw-corner); height: var(--fw-corner); pointer-events: none; }
#fw-page .fwx-ml-identity::before { left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--fw-corner) - .5px), var(--fwx-stage) var(--fw-corner)); }
#fw-page .fwx-ml-identity::after { right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--fw-corner) - .5px), var(--fwx-stage) var(--fw-corner)); }
#fw-page .fwx-ml-identity h1 { flex: none; font: 700 var(--fwx-ml-identity-title)/1 var(--fwx-ml-display); letter-spacing: -.015em; text-transform: uppercase; }
#fw-page .fwx-ml-identity__person { display: flex; align-items: center; gap: calc(3 * var(--fwx-ml-u)); min-width: 0; }
#fw-page .fwx-ml-identity__face { position: relative; flex: none; width: var(--fwx-ml-identity-face); height: var(--fwx-ml-identity-face); padding: 0; border: 0; border-radius: 50%; background: var(--fw-surface-3); overflow: clip; }
#fw-page .fwx-ml-identity__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
#fw-page .fwx-ml-identity__face:hover { opacity: .75; }
#fw-page .fwx-ml-identity__text { display: flex; align-items: baseline; gap: calc(3 * var(--fwx-ml-u)); min-width: 0; }
#fw-page .fwx-ml-identity__text b { font: 500 calc(4 * var(--fwx-ml-u))/1 var(--fwx-ml-display); white-space: nowrap; }
#fw-page .fwx-ml-identity__meta { display: flex; align-items: baseline; gap: calc(2 * var(--fwx-ml-u)); color: var(--fw-text-muted); font: 500 var(--fwx-ml-small)/1 var(--fwx-ml-font); white-space: nowrap; }
#fw-page .fwx-ml-identity__until { padding: calc(0.5 * var(--fwx-ml-u)) calc(1.5 * var(--fwx-ml-u)); border: var(--fwx-ml-hair) solid currentColor; border-radius: var(--fw-corner-pill); color: var(--fw-text); }
#fw-page .fwx-ml-identity__plan[data-plan="Member"] { color: var(--fwx-ml-accent-text); }
#fw-page .fwx-ml-identity :is(h1, b, .fwx-ml-identity__meta > span) { text-box-trim: trim-both; text-box-edge: cap alphabetic; }

/* The hero */
#fw-page .fwx-ml-hero { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); min-height: calc(108 * var(--fwx-ml-u)); max-height: var(--fwx-ml-hero); overflow: clip; border-radius: var(--fw-corner); background: var(--fwx-ml-ink); color: var(--fwx-ml-paper); }
#fw-page .fwx-ml-hero__image { position: relative; min-height: 100%; overflow: clip; background: var(--fw-surface-3); }
#fw-page .fwx-ml-hero__body { display: flex; flex-direction: column; gap: calc(4 * var(--fwx-ml-u)); min-width: 0; padding: var(--fwx-ml-gutter); }
#fw-page .fwx-ml-meta { font: 500 var(--fwx-ml-micro)/1.5 var(--fwx-ml-font); letter-spacing: .12em; text-transform: uppercase; }
#fw-page .fwx-ml-hero .fwx-ml-meta, #fw-page .fwx-ml-hero__line { color: var(--fwx-ml-soft); }
#fw-page .fwx-ml-hero h2 { font: 700 var(--fwx-ml-hero-title)/1.02 var(--fwx-ml-display); letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
#fw-page .fwx-ml-hero--core h2 { font-size: var(--fwx-ml-core-title); }
#fw-page .fwx-ml-hero__line { font: 500 var(--fwx-ml-body)/1.7 var(--fwx-ml-font); }
#fw-page .fwx-ml-hero__status { margin-top: auto; font: 600 calc(4.5 * var(--fwx-ml-u))/1.4 var(--fwx-ml-display); text-transform: uppercase; }
#fw-page .fwx-ml-includes { display: grid; gap: calc(2 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-includes li { position: relative; padding-left: calc(4 * var(--fwx-ml-u)); color: var(--fwx-ml-soft); font: 400 var(--fwx-ml-small)/1.65 var(--fwx-ml-font); }
#fw-page .fwx-ml-includes li::before { content: '+'; position: absolute; left: 0; color: var(--fwx-ml-paper); }
#fw-page .fwx-ml-hero__foot { display: flex; align-items: end; justify-content: space-between; gap: calc(6 * var(--fwx-ml-u)); margin-top: auto; padding-top: calc(5 * var(--fwx-ml-u)); border-top: var(--fwx-ml-hair) solid var(--fwx-ml-rule); }
#fw-page .fwx-ml-hero--package .fwx-ml-hero__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(5 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-hero--package .fwx-ml-btn { justify-self: start; min-width: 56%; }
#fw-page .fwx-ml-hero--core .fwx-ml-btn { margin-left: auto; }
#fw-page .fwx-ml-price { display: flex; flex-direction: column; gap: calc(2 * var(--fwx-ml-u)); font: 600 calc(12 * var(--fwx-ml-u))/.95 var(--fwx-ml-display); }
#fw-page .fwx-ml-price small { color: var(--fwx-ml-soft); font: 500 var(--fwx-ml-micro)/1.3 var(--fwx-ml-font); letter-spacing: .08em; text-transform: uppercase; }

/* Doors */
#fw-page .fwx-ml-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--fwx-ml-u)); min-height: var(--fwx-ml-control); padding: calc(3 * var(--fwx-ml-u)) calc(4 * var(--fwx-ml-u)); border: 0; border-radius: var(--fw-corner-sm); background: var(--fw-inverse); color: var(--fwx-stage); font: 600 var(--fwx-ml-small)/1 var(--fwx-ml-display); letter-spacing: .07em; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: opacity var(--fw-dur-state) var(--fw-ease-out); }
#fw-page .fwx-ml-btn:hover { opacity: .8; color: var(--fwx-stage); }
#fw-page .fwx-ml-btn:active { transform: translateY(var(--fwx-ml-hair)); }
#fw-page :is(.fwx-ml-hero, .fwx-ml-proposal) .fwx-ml-btn, #fw-page :is(.fwx-ml-hero, .fwx-ml-proposal) .fwx-ml-btn:hover { background: var(--fwx-ml-paper); color: var(--fwx-ml-ink); }
#fw-page .fwx-mylog .fwx-ml-btn--red, #fw-page .fwx-mylog .fwx-ml-btn--red:hover { background: var(--fw-accent); color: var(--fwx-ml-on-red); }

/* A path */
#fw-page .fwx-ml-steps { display: grid; grid-template-columns: repeat(var(--fwx-ml-n), minmax(0, 1fr)); gap: calc(2 * var(--fwx-ml-u)); width: 100%; }
#fw-page .fwx-ml-steps li { display: flex; flex-direction: column; gap: calc(2 * var(--fwx-ml-u)); min-width: 0; color: var(--fw-text-subtle); }
#fw-page .fwx-ml-steps i { display: block; height: calc(.75 * var(--fwx-ml-u)); border-radius: var(--fwx-ml-hair); background: var(--fw-line); }
#fw-page .fwx-ml-steps span { font: 500 var(--fwx-ml-micro)/1.4 var(--fwx-ml-font); }
#fw-page .fwx-ml-steps .is-done { color: var(--fw-text); }
#fw-page .fwx-ml-steps .is-done i { background: currentColor; }
#fw-page .fwx-ml-steps .is-current { color: var(--fw-accent); }
#fw-page .fwx-ml-steps .is-current i { background: var(--fw-accent); }
#fw-page .fwx-ml-hero .fwx-ml-steps li { color: var(--fwx-ml-soft); }
#fw-page .fwx-ml-hero .fwx-ml-steps i { background: var(--fwx-ml-rule); }
#fw-page .fwx-ml-hero .fwx-ml-steps .is-done, #fw-page .fwx-ml-hero .fwx-ml-steps .is-current { color: var(--fwx-ml-paper); }
#fw-page .fwx-ml-hero .fwx-ml-steps .is-done i { background: var(--fwx-ml-paper); }
#fw-page .fwx-ml-hero .fwx-ml-steps .is-current i { background: var(--fw-accent); }
#fw-page .fwx-ml-year { width: 100%; }
#fw-page .fwx-ml-year b { display: block; margin-bottom: calc(4 * var(--fwx-ml-u)); font: 500 var(--fwx-ml-body)/1.4 var(--fwx-ml-font); }

/* The sections' bar */
#fw-page .fwx-ml-nav { position: sticky; top: calc(var(--fwx-ml-held) + var(--fwx-ml-identity)); z-index: 20; display: flex; align-items: stretch; gap: calc(7 * var(--fwx-ml-u)); min-height: var(--fwx-ml-nav); margin: calc(3 * var(--fwx-ml-u)) 0 calc(9 * var(--fwx-ml-u)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-bottom: var(--fwx-ml-hair) solid var(--fw-line); background: var(--fwx-stage); }
#fw-page .fwx-ml-nav::-webkit-scrollbar { display: none; }
#fw-page .fwx-ml-nav a { position: relative; display: inline-flex; align-items: center; flex: none; color: var(--fw-text-muted); font: 500 var(--fwx-ml-small)/1 var(--fwx-ml-font); text-decoration: none; white-space: nowrap; }
#fw-page .fwx-ml-nav a[aria-current] { color: var(--fw-text); }
#fw-page .fwx-ml-nav a::after { content: ''; position: absolute; inset: auto 0 0; height: calc(.5 * var(--fwx-ml-u)); background: transparent; }
#fw-page .fwx-ml-nav a[aria-current]::after, #fw-page .fwx-ml-nav a:hover::after { background: var(--fw-text); }

/* Sections */
#fw-page .fwx-ml-sections { display: grid; gap: calc(13 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-section { min-width: 0; scroll-margin-top: calc(var(--fwx-ml-held) + var(--fwx-ml-identity) + var(--fwx-ml-nav) + 5 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-section .fw-log-head { display: flex; align-items: center; margin-top: 0; }
#fw-page .fwx-ml-arrows { display: flex; gap: calc(2 * var(--fwx-ml-u)); margin-left: auto; }
#fw-page .fwx-ml-arrows button { display: grid; place-items: center; width: calc(8 * var(--fwx-ml-u)); height: calc(8 * var(--fwx-ml-u)); padding: 0; border: 0; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); color: var(--fw-text); font-size: calc(6 * var(--fwx-ml-u)); line-height: 1; }
#fw-page .fwx-ml-arrows button:hover:not(:disabled) { background: var(--fw-surface-3); }
#fw-page .fwx-ml-arrows button:disabled { opacity: .45; cursor: default; }
#fw-page .fwx-ml-group + .fwx-ml-group { margin-top: calc(12 * var(--fwx-ml-u)); }
/* Under .fwx-mylog: the page's reset of headings would otherwise take the margin away. */
#fw-page .fwx-mylog .fwx-ml-row-label { display: flex; align-items: center; gap: calc(3 * var(--fwx-ml-u)); margin-bottom: calc(5 * var(--fwx-ml-u)); font: 600 calc(5 * var(--fwx-ml-u))/1 var(--fwx-ml-display); letter-spacing: .01em; text-transform: uppercase; }
#fw-page .fwx-ml-row-label span { color: var(--fw-text-subtle); font: 500 var(--fwx-ml-small)/1 var(--fwx-ml-font); }
#fw-page .fwx-ml-row-label::after { content: ''; flex: 1; height: var(--fwx-ml-hair); background: var(--fw-line); }
#fw-page .fwx-ml-row { display: flex; gap: var(--fw-log-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
#fw-page .fwx-ml-row::-webkit-scrollbar { display: none; }
#fw-page .fwx-ml-row > article { flex: 0 0 min(72%, calc(230 * var(--fwx-ml-u))); scroll-snap-align: start; }
#fw-page .fwx-ml-row > article:only-child { flex-basis: 100%; }
#fw-page .fwx-ml-card-image { position: relative; min-width: 0; overflow: clip; background: var(--fw-surface-3); }
#fw-page :is(.fwx-ml-proposal, .fwx-ml-package) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); overflow: clip; border-radius: var(--fw-corner); }
#fw-page :is(.fwx-ml-proposal, .fwx-ml-package) h3 { font: 700 var(--fwx-ml-card-title)/1.05 var(--fwx-ml-display); text-transform: uppercase; }
#fw-page .fwx-ml-proposal { min-height: calc(65 * var(--fwx-ml-u)); background: var(--fwx-ml-ink); color: var(--fwx-ml-paper); }
#fw-page .fwx-ml-proposal__body { display: flex; flex-direction: column; gap: calc(3 * var(--fwx-ml-u)); min-width: 0; padding: calc(6 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-proposal p { color: var(--fwx-ml-soft); font: 500 var(--fwx-ml-small)/1.6 var(--fwx-ml-font); }
#fw-page .fwx-ml-proposal__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--fwx-ml-u)); margin-top: auto; padding-top: calc(5 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-proposal__foot strong { font: 600 calc(8 * var(--fwx-ml-u))/1 var(--fwx-ml-display); }
#fw-page .fwx-ml-package { min-height: calc(77 * var(--fwx-ml-u)); border: var(--fwx-ml-hair) solid var(--fw-line); }
#fw-page .fwx-ml-package__body { display: grid; align-content: start; gap: calc(4 * var(--fwx-ml-u)); min-width: 0; padding: calc(6 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-package__body .fwx-ml-btn { justify-self: start; }
#fw-page .fwx-ml-package__body p { color: var(--fw-text-muted); font: 500 var(--fwx-ml-small)/1.65 var(--fwx-ml-font); }

/* The LOG's cards */
#fw-page .fwx-ml-card__link { display: block; color: inherit; text-decoration: none; }
#fw-page .fwx-ml-card__media { position: relative; }
#fw-page .fw-log-card__more { display: block; margin-top: calc(3 * var(--fwx-ml-u)); font: 500 var(--fwx-ml-small)/1.5 var(--fwx-ml-font); }
#fw-page .fwx-ml-status { position: absolute; left: calc(3 * var(--fwx-ml-u)); bottom: calc(3 * var(--fwx-ml-u)); padding: calc(2 * var(--fwx-ml-u)); border-radius: var(--fw-corner-xs); background: var(--fwx-ml-ink); color: var(--fwx-ml-paper); font: 500 var(--fwx-ml-micro)/1 var(--fwx-ml-font); }
#fw-page .fwx-ml-play { position: absolute; left: calc(3 * var(--fwx-ml-u)); bottom: calc(3 * var(--fwx-ml-u)); display: grid; place-items: center; width: var(--fwx-ml-control); height: var(--fwx-ml-control); padding: 0; border: 0; border-radius: 50%; background: var(--fwx-ml-ink); color: var(--fwx-ml-paper); }
#fw-page [data-fwx-card].is-playing .fwx-ml-play { background: var(--fw-accent); color: var(--fwx-ml-on-red); }
#fw-page .fwx-ml-reading { display: block; height: calc(.75 * var(--fwx-ml-u)); margin-top: calc(3 * var(--fwx-ml-u)); background: var(--fw-line); }
#fw-page .fwx-ml-reading i { display: block; height: 100%; background: var(--fw-text); }

/* Invitations */
#fw-page .fwx-ml-invitations { display: grid; gap: calc(5 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-invite { position: relative; display: grid; grid-template-columns: var(--fwx-ml-invite-image) minmax(0, 1fr) minmax(calc(48 * var(--fwx-ml-u)), .42fr); align-items: center; gap: calc(6 * var(--fwx-ml-u)); min-width: 0; padding: calc(5 * var(--fwx-ml-u)); border-radius: var(--fw-corner); background: var(--fwx-ml-smoke); box-shadow: var(--fw-seam), var(--fw-lift, var(--fw-over)); backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat)); -webkit-backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat)); scroll-margin-top: calc(var(--fwx-ml-held) + var(--fwx-ml-identity) + var(--fwx-ml-nav) + 4 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-invite__image { position: relative; align-self: stretch; min-height: calc(39 * var(--fwx-ml-u)); overflow: clip; border-radius: var(--fw-corner-sm); }
#fw-page .fwx-ml-initials { position: absolute; inset: 0; display: grid; place-items: center; background: var(--fwx-ml-face-ground); color: var(--fwx-ml-face-ink); font: 700 calc(16 * var(--fwx-ml-u))/1 var(--fwx-ml-display); letter-spacing: .02em; text-transform: uppercase; }
#fw-page .fwx-ml-invite__body { display: grid; gap: calc(2.5 * var(--fwx-ml-u)); min-width: 0; }
#fw-page .fwx-ml-invite__label { color: var(--fw-text-muted); font: 500 var(--fwx-ml-micro)/1.3 var(--fwx-ml-font); letter-spacing: .12em; text-transform: uppercase; }
#fw-page .fwx-ml-invite--membership .fwx-ml-invite__label { color: var(--fwx-ml-accent-text); }
#fw-page .fwx-ml-invite h3 { font: 700 var(--fwx-ml-invite-title)/1.08 var(--fwx-ml-display); letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance; }
#fw-page .fwx-ml-invite__line { max-width: 68ch; color: var(--fw-text-muted); font: 400 var(--fwx-ml-small)/1.65 var(--fwx-ml-font); }
#fw-page .fwx-ml-invite__action { display: grid; gap: calc(4 * var(--fwx-ml-u)); padding-right: calc(3 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-invite__action .fwx-ml-btn { width: 100%; min-width: 0; }
#fw-page .fwx-ml-invite__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(2 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-invite__price strong { font: 600 calc(11 * var(--fwx-ml-u))/1 var(--fwx-ml-display); }
#fw-page .fwx-ml-invite__price span { font: 500 var(--fwx-ml-small)/1.3 var(--fwx-ml-font); }
#fw-page .fwx-ml-invite--exhibition .fwx-ml-invite__price strong { color: var(--fw-accent); }
#fw-page .fwx-ml-invite__close { position: absolute; top: var(--fwx-ml-u); right: var(--fwx-ml-u); display: grid; place-items: center; width: calc(8 * var(--fwx-ml-u)); height: calc(8 * var(--fwx-ml-u)); padding: 0; border: 0; border-radius: var(--fw-corner-sm); background: transparent; color: var(--fw-text-muted); }
#fw-page .fwx-ml-invite__close:hover { background: var(--fw-surface-2); color: var(--fw-text); }
#fw-page .fwx-ml-invite__progress { display: flex; align-items: center; gap: calc(3 * var(--fwx-ml-u)); color: var(--fw-text); font: 500 var(--fwx-ml-micro)/1.2 var(--fwx-ml-font); }
#fw-page .fwx-ml-invite__progress > span:last-child { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fwx-ml-u); width: calc(28 * var(--fwx-ml-u)); }
#fw-page .fwx-ml-invite__progress i { display: block; height: calc(.75 * var(--fwx-ml-u)); background: var(--fw-line); }
#fw-page .fwx-ml-invite__progress .is-done { background: var(--fw-accent); }

/* A narrow column: the rails open, or a tablet. Container pixels are the frame's, so these read larger than the screen. */
@container fwx-ml (max-width: 1160px) {
  #fw-page .fwx-ml-hero { min-height: calc(110 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-hero__body { padding: calc(6 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-hero__foot { flex-wrap: wrap; }
  #fw-page .fwx-ml-row > article { flex-basis: 94%; }
  #fw-page .fwx-ml-invite { grid-template-columns: calc(30 * var(--fwx-ml-u)) minmax(0, 1fr); gap: calc(4 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-invite__image { grid-row: span 2; }
  #fw-page .fwx-ml-invite__action { grid-column: 2; display: flex; align-items: center; }
  #fw-page .fwx-ml-invite__action .fwx-ml-btn { flex: 1; }
  #fw-page .fwx-ml-invite__price { flex: none; flex-direction: column; align-items: start; gap: var(--fwx-ml-u); }
}

/* The phone: the island holds the top of the screen, so the account's bar leaves with the page and only the sections
   stay. Smaller type comes from the tokens. */
@media (max-width: 767px) {
  #fw-page .fwx-mylog {
    --fwx-ml-hero-title: calc(8.5 * var(--fwx-ml-u));
    --fwx-ml-body: calc(12 * var(--fwx-px));
    --fwx-ml-small: calc(10 * var(--fwx-px));
    --fwx-ml-gutter: calc(5.5 * var(--fwx-ml-u));
    --fwx-ml-nav: calc(13 * var(--fwx-ml-u));
    --fwx-ml-identity: calc(12 * var(--fwx-ml-u));
    --fwx-ml-identity-title: calc(5 * var(--fwx-ml-u));
    --fwx-ml-identity-face: calc(6 * var(--fwx-ml-u));
    --fwx-ml-held: calc(var(--fwx-ab) + var(--fwx-phone-top));
  }
  #fw-page .fwx-ml-identity { position: static; gap: calc(3 * var(--fwx-ml-u)); padding-inline: calc(2 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-identity__person, #fw-page .fwx-ml-identity__text { gap: calc(2 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-identity__text b { font-size: calc(3.5 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-identity__meta { gap: var(--fwx-ml-u); }
  #fw-page .fwx-ml-identity__face::after, #fw-page .fwx-ml-invite__close::after { content: ''; position: absolute; inset: calc(-2 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-nav { top: var(--fwx-ml-held); gap: calc(5 * var(--fwx-ml-u)); margin: 0 0 calc(8 * var(--fwx-ml-u)); padding-inline: calc(3 * var(--fwx-ml-u)); border-bottom: 0; border-radius: var(--fw-corner); background: var(--fw-glass-tint); box-shadow: var(--fw-seam), var(--fw-lift); backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat)); -webkit-backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat)); transition: top var(--fw-dur-move) var(--fw-ease-out); }
  html:not([data-theme="dark"]) #fw-page .fwx-ml-nav { box-shadow: inset 0 0 0 var(--fwx-ml-hair) var(--fw-line), var(--fw-lift); }
  /* Going down puts the phone's top chrome away (72-bars.js): the sections rise to where the island stood. */
  html:has(.fw-mobile-chrome__row[data-away]) #fw-page .fwx-ml-nav { top: calc(var(--fwx-ab) + var(--fwx-phone-top) - var(--fwx-island-h) - var(--fwx-under-bar)); }
  #fw-page .fwx-ml-nav a { font-size: var(--fwx-ml-micro); }
  #fw-page .fwx-ml-section { scroll-margin-top: calc(var(--fwx-ml-held) + var(--fwx-ml-nav) + 5 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-invite { scroll-margin-top: calc(var(--fwx-ml-held) + var(--fwx-ml-nav) + 4 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; max-height: none; }
  #fw-page .fwx-ml-hero__image { aspect-ratio: 16 / 10; min-height: 0; }
  #fw-page .fwx-ml-hero__body { gap: calc(3 * var(--fwx-ml-u)); padding: var(--fwx-ml-gutter); }
  #fw-page .fwx-ml-includes { display: none; }
  #fw-page .fwx-ml-hero__foot { flex-wrap: nowrap; align-items: center; gap: calc(4 * var(--fwx-ml-u)); margin-top: calc(2 * var(--fwx-ml-u)); padding-top: calc(4 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-hero__foot .fwx-ml-btn { flex: 1; }
  #fw-page .fwx-ml-price { font-size: calc(8 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-price small { font-size: calc(9 * var(--fwx-px)); }
  #fw-page .fwx-ml-hero--core h2 { font-size: calc(7 * var(--fwx-ml-u)); }
  #fw-page :is(.fwx-ml-hero--core, .fwx-ml-hero--package) .fwx-ml-btn { width: 100%; }
  #fw-page .fwx-ml-steps span { font-size: calc(9 * var(--fwx-px)); }
  #fw-page .fwx-ml-sections { gap: calc(10 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-arrows { display: none; }
  #fw-page .fwx-ml-row > article { flex-basis: 92%; }
  #fw-page :is(.fwx-ml-proposal, .fwx-ml-package) { grid-template-columns: minmax(0, 1fr); }
  #fw-page .fwx-ml-card-image { aspect-ratio: 16 / 9; }
  #fw-page :is(.fwx-ml-proposal__body, .fwx-ml-package__body) { padding: calc(5 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-proposal__foot .fwx-ml-btn { padding-inline: calc(3 * var(--fwx-ml-u)); }
  #fw-page .fwx-mylog .fw-log-strip > .fw-log-card { flex-basis: 82%; }
  #fw-page .fwx-ml-section .fw-log-head__name { font-size: calc(7 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-invite { grid-template-columns: minmax(0, 1fr); gap: calc(4 * var(--fwx-ml-u)); padding: calc(5 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-invite__image { position: absolute; top: calc(5 * var(--fwx-ml-u)); left: calc(5 * var(--fwx-ml-u)); grid-row: auto; width: calc(14 * var(--fwx-ml-u)); height: calc(14 * var(--fwx-ml-u)); min-height: 0; }
  #fw-page .fwx-ml-initials { font-size: calc(6 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-invite__body { padding-top: var(--fwx-ml-u); }
  #fw-page .fwx-ml-invite__label { display: flex; align-items: center; min-height: calc(14 * var(--fwx-ml-u)); margin-left: calc(17 * var(--fwx-ml-u)); padding-right: calc(2 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-invite h3 { font-size: calc(7 * var(--fwx-ml-u)); text-wrap: pretty; }
  #fw-page .fwx-ml-invite__line { font-size: calc(2.75 * var(--fwx-ml-u)); }
  #fw-page .fwx-ml-invite__action { grid-column: auto; display: grid; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { #fw-page .fwx-mylog * { transition: none !important; animation: none !important; } }

/* What each plan sees at the foot of My LOG (mylog-plan.php): the row that opens Membership, the band that opens the agent. */
#fw-page .fwx-mylog .fwx-ml-unlock__foot { display: flex; align-items: center; gap: calc(var(--fwx-ml-u) * 6); margin-top: calc(var(--fwx-ml-u) * 6); padding-top: calc(var(--fwx-ml-u) * 5); border-top: var(--fwx-ml-hair) solid var(--fw-line); }
#fw-page .fwx-mylog .fwx-ml-unlock__foot p { flex: 1; min-width: 0; color: var(--fw-text-muted); font: 500 var(--fwx-ml-micro)/1.5 var(--fwx-ml-font); }
#fw-page .fwx-mylog .fwx-ml-unlock__foot .fwx-ml-price { flex-direction: row; align-items: baseline; gap: calc(var(--fwx-ml-u) * 2); color: var(--fw-text); font-size: calc(var(--fwx-ml-u) * 7); }
#fw-page .fwx-mylog .fwx-ml-unlock__foot .fwx-ml-price small { color: var(--fw-text-muted); }
#fw-page .fwx-mylog .fwx-ml-ai__bar { display: flex; justify-content: space-between; gap: calc(var(--fwx-ml-u) * 4); color: var(--fw-text-muted); font: 500 var(--fwx-ml-micro)/1.5 var(--fwx-ml-font); }
#fw-page .fwx-mylog .fwx-ml-ai__field { display: flex; align-items: center; gap: calc(var(--fwx-ml-u) * 2); margin-top: calc(var(--fwx-ml-u) * 3); padding: calc(var(--fwx-ml-u) * 2) calc(var(--fwx-ml-u) * 2) calc(var(--fwx-ml-u) * 2) calc(var(--fwx-ml-u) * 4); border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); }
#fw-page .fwx-mylog .fwx-ml-ai__field input { flex: 1; min-width: 0; min-height: var(--fwx-ml-control); border: 0; outline: 0; background: transparent; color: var(--fw-text); font: 500 var(--fwx-ml-body)/1.4 var(--fwx-ml-font); }
#fw-page .fwx-mylog .fwx-ml-ai__field:focus-within { box-shadow: 0 0 0 var(--fwx-ml-hair) var(--fw-text); }
#fw-page .fwx-mylog .fwx-ml-ai__field button { display: grid; place-items: center; width: var(--fwx-ml-control); height: var(--fwx-ml-control); border-radius: var(--fw-corner-sm); background: var(--fw-text); color: var(--fw-surface); }
#fw-page .fwx-mylog .fwx-ml-ai__field svg { width: calc(4.5 * var(--fwx-ml-u)); height: calc(4.5 * var(--fwx-ml-u)); }
#fw-page .fwx-mylog .fwx-ml-ai__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--fw-log-gap); margin-top: calc(var(--fwx-ml-u) * 3); }
#fw-page .fwx-mylog .fwx-ml-ai__card { display: grid; grid-template-columns: calc(24 * var(--fwx-ml-u)) minmax(0,1fr); gap: calc(var(--fwx-ml-u) * 4); align-items: stretch; min-width: 0; padding: calc(var(--fwx-ml-u) * 3); border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); color: var(--fw-text); text-align: left; }
#fw-page .fwx-mylog .fwx-ml-ai__card:hover { background: var(--fw-surface-3); }
#fw-page .fwx-mylog .fwx-ml-ai__card:focus-visible { outline: var(--fwx-ml-hair) solid var(--fw-text); }
#fw-page .fwx-mylog .fwx-ml-ai__card img { width: calc(24 * var(--fwx-ml-u)); height: 100%; min-height: calc(24 * var(--fwx-ml-u)); object-fit: cover; border-radius: var(--fw-corner-sm); }
#fw-page .fwx-mylog .fwx-ml-ai__text { display: flex; flex-direction: column; gap: calc(var(--fwx-ml-u) * 2); min-width: 0; }
#fw-page .fwx-mylog .fwx-ml-ai__meta { color: var(--fw-text-muted); font: 500 var(--fwx-ml-micro)/1.5 var(--fwx-ml-font); }
#fw-page .fwx-mylog .fwx-ml-ai__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 700 calc(var(--fwx-ml-u) * 5)/1.15 var(--fwx-ml-display); text-transform: uppercase; }
#fw-page .fwx-mylog .fwx-ml-ai__question { display: flex; align-items: baseline; gap: calc(var(--fwx-ml-u) * 2); margin-top: auto; font: 500 var(--fwx-ml-micro)/1.5 var(--fwx-ml-font); }
#fw-page .fwx-mylog .fwx-ml-ai__question i { flex: none; width: calc(1.75 * var(--fwx-ml-u)); height: calc(1.75 * var(--fwx-ml-u)); background: var(--fw-accent); transform: translateY(-1px) rotate(45deg); }
@media(max-width:767px) {
  #fw-page .fwx-mylog .fwx-ml-unlock__foot { flex-wrap: wrap; }
  #fw-page .fwx-mylog .fwx-ml-unlock__foot p { flex-basis: 100%; }
  #fw-page .fwx-mylog .fwx-ml-unlock__foot .fwx-ml-btn { flex: 1; }
  #fw-page .fwx-mylog .fwx-ml-ai__grid { grid-template-columns: minmax(0,1fr); }
}
/* The Settings window's own pieces: the two plans side by side, the window before deleting an account, the Saved
   confirmation over the window (87-account-parts.js, acSaved). */
#fw-core .fwx-acc-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#fw-core .fwx-acc-plan { min-width: 0; padding: 14px; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); }
#fw-core .fwx-acc-plan.is-on { outline: 1px solid var(--fw-text); }
#fw-core .fwx-acc-until { display: inline-block; margin-bottom: 10px; padding: 3px 8px; border: 1px solid currentColor; border-radius: var(--fw-corner-pill); color: var(--fw-text); font: 500 10px/1.4 var(--font-jetbrains), monospace; }
#fw-core .fwx-acc-veil { position: fixed; inset: 0; z-index: 122; background: rgb(0 0 0 / .45); }
#fw-core .fwx-acc-dialog { position: fixed; left: 50%; top: 50%; z-index: 123; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; transform: translate(-50%, -50%); padding: 22px; border-radius: var(--fw-corner); background: var(--fw-surface); box-shadow: var(--fw-shadow-floating, 0 18px 48px rgb(0 0 0 / .3)); }
#fw-core .fwx-acc-leave-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; padding-left: 16px; color: var(--fw-text-muted); font: 500 11px/1.55 var(--font-jetbrains), monospace; list-style: disc; }
#fw-core .fwx-acc-notice-list { padding-left: 0; list-style: none; }
@media (max-width: 767px) { #fw-core .fwx-acc-plans { grid-template-columns: minmax(0, 1fr); } }
#fw-core .fwx-acc-saved {
  position: fixed; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); z-index: 124; display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 11px 18px; border-radius: var(--fw-corner-pill); background: var(--fw-inverse); color: var(--fw-bg); box-shadow: var(--fw-shadow-floating, 0 18px 48px rgb(0 0 0 / .3));
  font: 600 12px/1 var(--font-jetbrains), monospace; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  transform: translateX(-50%); animation: fwx-acc-saved-in 220ms var(--fw-ease-out) both; transition: opacity 280ms, transform 280ms;
}
#fw-core .fwx-acc-saved svg { flex: none; width: 15px; height: 15px; }
#fw-core .fwx-acc-saved.is-gone { opacity: 0; transform: translate(-50%, 6px); }
@keyframes fwx-acc-saved-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { #fw-core .fwx-acc-saved { animation: none; transition: none; } }
/* Our dropdown (05-select.js), for the frame and the sign-in page alike. data-fw-select="field" takes
   the look of the account window's fields (a tonal box, no line). */
:is(#fw-core, #fw-page, .fwx-scope) .fw-select { position: relative; width: 100%; min-width: 0; }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__button {
  position: relative; display: block; width: 100%; height: 40px; margin: 0; padding: 0 36px 0 12px;
  border: 1px solid var(--fw-border); border-radius: var(--fw-radius, var(--fw-corner-sm, 3px)); background: transparent;
  font-family: var(--font-jetbrains), monospace; font-size: 12px; line-height: 38px; color: var(--fw-text); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; outline: none;
}
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__button.is-empty { color: var(--fw-text-subtle); }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__button::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px;
  border-right: 1.5px solid var(--fw-text-muted); border-bottom: 1.5px solid var(--fw-text-muted);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.15s;
}
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__button[aria-expanded="true"]::after { transform: translateY(-25%) rotate(225deg); }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__button:focus-visible,
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__button[aria-expanded="true"] { border-color: var(--fw-text); }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow-y: auto; padding: 4px;
  border: 1px solid var(--fw-border); border-radius: var(--fw-radius, var(--fw-corner-sm, 3px)); background: var(--fw-surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__list[hidden] { display: none; }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 2px;
  font-family: var(--font-jetbrains), monospace; font-size: 12px; line-height: 1.3; color: var(--fw-text); cursor: pointer;
}
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__option.is-empty { color: var(--fw-text-subtle); }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__option.is-active { background: var(--fw-surface-2); }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__option[aria-selected="true"]::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fw-text); }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select--field .fw-select__button { height: 44px; line-height: 44px; border: 0; background: var(--fw-surface); font-size: 13px; }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select--field .fw-select__button:focus-visible,
:is(#fw-core, #fw-page, .fwx-scope) .fw-select--field .fw-select__button[aria-expanded="true"] { outline: 1px solid var(--fw-text-subtle); }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select.is-up .fw-select__list { top: auto; bottom: calc(100% + 4px); }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__list { scrollbar-width: thin; scrollbar-color: var(--fw-line) transparent; }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__list::-webkit-scrollbar { width: 8px; }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__list::-webkit-scrollbar-track { background: transparent; }
:is(#fw-core, #fw-page, .fwx-scope) .fw-select__list::-webkit-scrollbar-thumb { background-color: var(--fw-line); background-clip: padding-box; border: 2px solid transparent; border-radius: 999px; }
/* The private proposal (proposal-view.php), mock v4 on the LOG's ground: the verdict and the selection, the record,
   the packages on one grid so both cards share every row (one alone reads across the width), the Partner notes, the
   close and the notes. The page answers to its own width (the frame's columns narrow it), so it is a container. The
   outcome and the steps are in proposal-outcome.css, the account window in proposal-sheet.css. */
html.fw-shell {
  --fw-pp-1: 4px;
  --fw-pp-2: 8px;
  --fw-pp-3: 12px;
  --fw-pp-4: 16px;
  --fw-pp-5: 20px;
  --fw-pp-6: 24px;
  --fw-pp-7: 32px;
  --fw-pp-8: 40px;
  --fw-pp-hair: 1px;
  --fw-pp-nudge: 3px;
  --fw-pp-t-btn: 14px;
  --fw-pp-t-name: 22px;
  --fw-pp-views-h: 260px;
  --fw-pp-fade: 800ms;
  --fw-pp-views-h-sm: 220px;
  --fw-pp-t-micro: 9px;
  --fw-pp-t-label: 10px;
  --fw-pp-t-small: 11px;
  --fw-pp-t-body: 12px;
  --fw-pp-t-text: 13px;
  --fw-pp-t-lead: 15px;
  --fw-pp-t-step: 20px;
  --fw-pp-t-h1: clamp(52px, 8cqi, 96px);
  --fw-pp-t-h2: clamp(30px, 4.2cqi, 46px);
  --fw-pp-t-h3: clamp(30px, 3.8cqi, 44px);
  --fw-pp-t-price: clamp(46px, 6cqi, 72px);
  --fw-pp-t-ready: clamp(36px, 5.6cqi, 62px);
  --fw-pp-btn: 50px;
  --fw-pp-index: 28px;
  --fw-pp-dot: 5px;
  --fw-pp-tag-h: 20px;
  --fw-pp-dur: 0.16s;
  --fw-pp-measure: 60ch;
  --fw-pp-mono: var(--font-jetbrains), ui-monospace, monospace;
  --fw-pp-display: var(--font-oswald), "Arial Narrow", sans-serif;
}

#fw-page .fwx-pp { container: fwx-pp / inline-size; color: var(--fw-text); font: 400 var(--fw-pp-t-text)/1.6 var(--fw-pp-mono); text-wrap: pretty; }
#fw-page .fwx-pp :where(h1, h2, h3, p, ol, ul, figure) { margin: 0; padding: 0; list-style: none; }
#fw-page .fwx-pp :where(a) { color: inherit; }
#fw-page .fwx-pp :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#fw-page .fwx-pp :where(img) { display: block; max-width: 100%; }
#fw-page .fwx-pp-label { font-size: var(--fw-pp-t-label); line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pp-display { font-family: var(--fw-pp-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; text-wrap: balance; }

/* doors */
:is(#fw-page, .fwx-pp-sheet) .fwx-pp-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--fw-pp-4); height: var(--fw-pp-btn); padding: 0 var(--fw-pp-5); border-radius: var(--fw-corner-sm); font: 700 var(--fw-pp-t-btn)/1 var(--fw-pp-display); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: opacity var(--fw-pp-dur) ease, background var(--fw-pp-dur) ease; }
#fw-page .fwx-pp-btn svg { flex: none; }
#fw-page .fwx-pp-btn--ink { background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-pp-btn--ink:hover { opacity: 0.86; }
#fw-page .fwx-pp-btn--line { border: var(--fw-pp-hair) solid var(--fw-border); }
#fw-page .fwx-pp-btn--line:hover { background: var(--fw-surface-2); }

/* the verdict, and beside it a card as tall as the text */
/* The hero and the strip under it share two columns, so the record starts where the selection does at every width. */
#fw-page .fwx-pp-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-pp-8); align-items: stretch; padding-block: var(--fw-pp-7) var(--fw-pp-6); }
#fw-page .fwx-pp-hero__text { display: flex; flex-direction: column; min-width: 0; }
#fw-page .fwx-pp-eyebrow { font-size: var(--fw-pp-t-small); line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pp-hero h1 { margin-top: var(--fw-pp-3); font-size: var(--fw-pp-t-h1); line-height: 0.9; }
#fw-page .fwx-pp-hero__lead { margin-top: var(--fw-pp-5); max-width: var(--fw-pp-measure); font-size: var(--fw-pp-t-lead); line-height: 1.7; color: var(--fw-text-muted); }
#fw-page .fwx-pp-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--fw-pp-3); border-radius: var(--fw-corner); background: var(--fw-surface); border: var(--fw-pp-hair) solid var(--fw-line); }
#fw-page .fwx-pp-side > .fwx-pp-label { padding: 0 0 var(--fw-pp-3); }
#fw-page .fwx-pp-views { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fw-pp-1); }
#fw-page .fwx-pp-views[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
#fw-page .fwx-pp-views[data-count="2"] { grid-template-rows: minmax(0, 1fr); }
#fw-page .fwx-pp-views span { position: relative; overflow: hidden; border-radius: var(--fw-corner-sm); background: var(--fw-surface-3); }
#fw-page .fwx-pp-views span:first-child { grid-row: span 2; }
#fw-page .fwx-pp-views[data-count="2"] span:first-child { grid-row: auto; }
#fw-page .fwx-pp-views img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#fw-page .fwx-pp-views img { transition: opacity var(--fw-pp-fade) ease; }
#fw-page .fwx-pp-views img.is-coming { opacity: 0; }
#fw-page .fwx-pp-side__info { padding: var(--fw-pp-3) 0 0; }
#fw-page .fwx-pp-side__info b { display: block; font: 700 var(--fw-pp-t-name)/1 var(--fw-pp-display); text-transform: uppercase; }
#fw-page .fwx-pp-side__info p { margin-top: var(--fw-pp-2); font-size: var(--fw-pp-t-body); line-height: 1.5; color: var(--fw-text-muted); }

/* where to go, and the LOG's record */
#fw-page .fwx-pp-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--fw-pp-4) var(--fw-pp-8); padding: var(--fw-pp-3) 0; border-block: var(--fw-pp-hair) solid var(--fw-line); font-size: var(--fw-pp-t-small); letter-spacing: 0.16em; text-transform: uppercase; }
#fw-page .fwx-pp-jumps { display: flex; gap: var(--fw-pp-6); }
#fw-page .fwx-pp-jumps a { display: inline-flex; align-items: center; gap: var(--fw-pp-2); font-weight: 700; text-decoration: none; }
#fw-page .fwx-pp-jumps a:hover { color: var(--fw-text-subtle); }
#fw-page .fwx-pp-proof { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--fw-pp-1) var(--fw-pp-2); color: var(--fw-text-subtle); }
#fw-page .fwx-pp-proof span { white-space: nowrap; }
#fw-page .fwx-pp-proof i { font-style: normal; }
#fw-page .fwx-pp-proof b { color: var(--fw-text); font-weight: 700; }

/* section rhythm */
#fw-page .fwx-pp-block { padding-block: var(--fw-pp-8); scroll-margin-top: var(--fwx-top); }
#fw-page .fwx-pp-block + .fwx-pp-block { padding-top: 0; }
#fw-page .fwx-pp-head { margin-bottom: var(--fw-pp-4); }
#fw-page .fwx-pp-head h2 { margin-top: var(--fw-pp-2); font-size: var(--fw-pp-t-h2); line-height: 0.95; }
#fw-page .fwx-pp-head--centre { text-align: center; }

/* the packages: one grid, so the cards share every row */
#fw-page .fwx-pp-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); column-gap: var(--fw-pp-3); }
#fw-page .fwx-pp-pack { grid-row: span 7; display: grid; grid-template-rows: subgrid; min-width: 0; padding: var(--fw-pp-6) var(--fw-pp-6) var(--fw-pp-5); border-radius: var(--fw-corner); background: var(--fw-surface); border: var(--fw-pp-hair) solid var(--fw-line); }
#fw-page .fwx-pp-pack--ink { background: var(--fw-inverse); color: var(--fw-bg); border-color: transparent; }
#fw-page .fwx-pp-pack__for { font-size: var(--fw-pp-t-small); line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.68; }
/* The LOG paints every heading in the text colour; on the inverted card the name takes the card's own. */
#fw-page .fwx-pp-pack h3 { margin-top: var(--fw-pp-4); font-size: var(--fw-pp-t-h3); line-height: 0.95; color: inherit; }
#fw-page .fwx-pp-price { display: flex; align-items: baseline; gap: var(--fw-pp-3); margin-top: var(--fw-pp-3); padding-bottom: var(--fw-pp-5); }
#fw-page .fwx-pp-price b { font: 700 var(--fw-pp-t-price)/0.9 var(--fw-pp-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
#fw-page .fwx-pp-price small { font-size: var(--fw-pp-t-label); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.68; }
#fw-page .fwx-pp-holds { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
#fw-page .fwx-pp-holds li { display: grid; grid-template-columns: var(--fw-pp-index) minmax(0, 1fr); align-content: start; padding: var(--fw-pp-3) 0; border-top: var(--fw-pp-hair) solid var(--fw-line); line-height: 1.5; }
#fw-page .fwx-pp-pack--ink .fwx-pp-holds li { border-top-color: color-mix(in srgb, var(--fw-bg) 18%, transparent); }
#fw-page .fwx-pp-holds li i { padding-top: var(--fw-pp-nudge); font-size: var(--fw-pp-t-label); font-style: normal; font-weight: 700; letter-spacing: 0.1em; opacity: 0.55; }
#fw-page .fwx-pp-pack .fwx-pp-btn { align-self: end; margin-top: var(--fw-pp-4); }
#fw-page .fwx-pp-pack--ink .fwx-pp-btn--ink { background: var(--fw-bg); color: var(--fw-inverse); }
#fw-page .fwx-pp-packs--one { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
#fw-page .fwx-pp-pack--wide { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--fw-pp-8); }
#fw-page .fwx-pp-pack--wide .fwx-pp-pack__main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
#fw-page .fwx-pp-pack--wide .fwx-pp-pack__main .fwx-pp-btn { margin-top: auto; align-self: stretch; }
#fw-page .fwx-pp-pack--wide .fwx-pp-holds { grid-row: auto; display: flex; flex-direction: column; justify-content: center; }
#fw-page .fwx-pp-pack--wide .fwx-pp-holds li:last-child { border-bottom: var(--fw-pp-hair) solid color-mix(in srgb, var(--fw-bg) 18%, transparent); }

/* the Partner Program, stated beside the packages and shown inside the example */
:is(#fw-page, .fwx-pp-sheet) .fwx-pp-partner { display: inline-flex; align-items: center; flex: none; height: var(--fw-pp-tag-h); padding: 0 var(--fw-pp-2); border-radius: var(--fw-pp-nudge); background: var(--fwx-partner-tint); color: var(--fwx-partner-text); font: 400 var(--fw-pp-t-label)/1 var(--fw-pp-mono); letter-spacing: 0.14em; text-transform: uppercase; }
#fw-page .fwx-pp-pnotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-pp-3); margin-top: var(--fw-pp-3); }
#fw-page .fwx-pp-pn { display: flex; align-items: flex-start; gap: var(--fw-pp-3); padding: var(--fw-pp-3) var(--fw-pp-4); border-radius: var(--fw-corner); background: var(--fw-surface); border: var(--fw-pp-hair) solid var(--fw-line); font-size: var(--fw-pp-t-body); line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-pp-pn b { color: var(--fw-text); }
#fw-page .fwx-pp-pn svg { flex: none; margin-top: var(--fw-pp-1); }

/* the close, the notes, the foot */
#fw-page .fwx-pp-ready { padding-block: var(--fw-pp-8); text-align: center; }
#fw-page .fwx-pp-ready h2 { max-width: 14ch; margin-inline: auto; font-size: var(--fw-pp-t-ready); line-height: 0.94; }
#fw-page .fwx-pp-ready__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fw-pp-3); margin-top: var(--fw-pp-6); }
#fw-page .fwx-pp-notes { border-top: var(--fw-pp-hair) solid var(--fw-line); }
#fw-page .fwx-pp-notes li { display: flex; gap: var(--fw-pp-3); padding: var(--fw-pp-3) 0; border-bottom: var(--fw-pp-hair) solid var(--fw-line); font-size: var(--fw-pp-t-body); line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-pp-notes li::before { content: ""; flex: none; width: var(--fw-pp-dot); height: var(--fw-pp-dot); margin-top: var(--fw-pp-2); background: var(--fw-text-subtle); }
#fw-page .fwx-pp-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--fw-pp-4); margin-top: var(--fw-pp-8); padding-top: var(--fw-pp-7); border-top: var(--fw-pp-hair) solid var(--fw-line); }

/* the closed link */
#fw-page .fwx-pp-closed { display: flex; flex-direction: column; align-items: center; gap: var(--fw-pp-4); max-width: var(--fw-pp-measure); margin: 0 auto; padding-block: calc(2 * var(--fw-pp-8)); text-align: center; }
#fw-page .fwx-pp-closed h1 { font-size: var(--fw-pp-t-ready); line-height: 0.94; }
#fw-page .fwx-pp-closed__text { font-size: var(--fw-pp-t-lead); line-height: 1.7; color: var(--fw-text-muted); }

@container fwx-pp (max-width: 1000px) {
  #fw-page .fwx-pp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--fw-pp-5); }
  #fw-page .fwx-pp-strip { grid-template-columns: minmax(0, 1fr); }
  #fw-page .fwx-pp-proof { justify-content: flex-start; }
  #fw-page .fwx-pp-views { flex: none; height: var(--fw-pp-views-h); }
}
@container fwx-pp (max-width: 720px) {
  #fw-page .fwx-pp-hero { padding-block: var(--fw-pp-5); }
  #fw-page .fwx-pp-hero__lead { font-size: var(--fw-pp-t-text); }
  #fw-page .fwx-pp-views { height: var(--fw-pp-views-h-sm); }
  #fw-page .fwx-pp-strip { gap: var(--fw-pp-3); }
  #fw-page .fwx-pp-block { padding-block: var(--fw-pp-7); }
  #fw-page .fwx-pp-packs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 1fr; row-gap: var(--fw-pp-3); }
  #fw-page .fwx-pp-pack { grid-row: auto; display: flex; flex-direction: column; padding: var(--fw-pp-5) var(--fw-pp-4) var(--fw-pp-4); }
  #fw-page .fwx-pp-holds { display: block; margin-bottom: var(--fw-pp-4); }
  #fw-page .fwx-pp-pack .fwx-pp-btn { align-self: stretch; margin-top: auto; }
  #fw-page .fwx-pp-pack--wide .fwx-pp-pack__main { display: contents; }
  #fw-page .fwx-pp-pack--wide .fwx-pp-holds { order: 1; }
  #fw-page .fwx-pp-pack--wide .fwx-pp-pack__main .fwx-pp-btn { order: 2; }
  #fw-page .fwx-pp-pnotes { grid-template-columns: minmax(0, 1fr); }
  #fw-page .fwx-pp-ready__ctas { flex-direction: column; align-items: stretch; }
  #fw-page .fwx-pp-btn { white-space: normal; text-align: left; }
}
/* «The outcome» of a proposal (proposal-outcome.php): the article in a reader that scrolls itself
   (97-proposal-reader.js), the carousel as Instagram holds it with its controls under the post, never over a slide
   (97-proposal-carousel.js), then the four steps on one grid, each over a small picture of itself. Instagram's
   own black stays black in both themes: it is the carousel's ground, not the page's. */
html.fw-shell {
  --fw-pp-ig-w: 400px;
  /* The section stands whole between the bar and the Ask: the slide takes what its post's head and foot (chrome) and
     the section's heading, label and stage (around) leave, heights measured 2026-11-05. Stacked, only the post counts. */
  --fw-pp-ig-chrome: 170px;
  --fw-pp-ig-around: 142px;
  --fw-pp-ig-ground: #0a0a0a;
  --fw-pp-ig-ink: #fafafa;
  --fw-pp-ig-badge: rgb(10 10 10 / 0.7);
  --fw-pp-reader-h: 440px;
  --fw-pp-reader-h-md: 560px;
  --fw-pp-reader-h-sm: 520px;
  --fw-pp-reader-bar: 46px;
  --fw-pp-reader-w: 600px;
  --fw-pp-progress: 2px;
  --fw-pp-avatar: 32px;
  --fw-pp-step-ctl: 28px;
  --fw-pp-dot-ig: 6px;
  --fw-pp-step-h: 210px;
  --fw-pp-step-h-sm: 172px;
  --fw-pp-step-side: 136px;
  --fw-pp-visual: 236px;
  --fw-pp-t-rp: clamp(22px, 2.6cqi, 30px);
  --fw-pp-t-v: 18px;
  --fw-pp-t-v-sm: 8px;
  --fw-pp-t-v-xs: 13px;
  --fw-pp-t-v-xxs: 7px;
}

/* The article a little over half, the carousel's stage the rest (owner 2026-11-04). */
#fw-page .fwx-pp-outcome { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--fw-pp-3); align-items: stretch; }
#fw-page .fwx-pp-stage { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: var(--fw-pp-3); border-radius: var(--fw-corner); background: var(--fw-surface-2); }
#fw-page .fwx-pp-stage .fwx-pp-ig { width: 100%; max-width: calc((var(--fwx-screen) - var(--fw-pp-ig-chrome) - var(--fw-pp-ig-around)) * 3 / 4); }
#fw-page .fwx-pp-outcome--article { grid-template-columns: minmax(0, 1fr); }
#fw-page .fwx-pp-outcome > div { display: flex; flex-direction: column; min-width: 0; }
#fw-page .fwx-pp-outcome .fwx-pp-label { margin-bottom: var(--fw-pp-2); }
#fw-page .fwx-pp-outcome__cap { padding-top: var(--fw-pp-3); }

/* the article, as the LOG publishes it */
#fw-page .fwx-pp-reader { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-height: var(--fw-pp-reader-h); overflow: hidden; border-radius: var(--fw-corner); background: var(--fw-surface); border: var(--fw-pp-hair) solid var(--fw-line); }
#fw-page .fwx-pp-reader__bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--fw-pp-3); height: var(--fw-pp-reader-bar); padding: 0 var(--fw-pp-4); border-bottom: var(--fw-pp-hair) solid var(--fw-line); }
#fw-page .fwx-pp-reader__name { font: 700 var(--fw-pp-t-text)/1 var(--fw-pp-display); letter-spacing: 0.06em; text-transform: uppercase; }
#fw-page .fwx-pp-reader__progress { position: absolute; top: calc(var(--fw-pp-reader-bar) - var(--fw-pp-hair)); left: 0; right: 0; height: var(--fw-pp-progress); }
#fw-page .fwx-pp-reader__progress i { display: block; height: 100%; background: var(--fw-text); transform: scaleX(0); transform-origin: left; }
#fw-page .fwx-pp-reader__view { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transition: opacity 0.4s ease; }
#fw-page .fwx-pp-reader__view::-webkit-scrollbar { display: none; }
#fw-page .fwx-pp-reader__view.is-resetting { opacity: 0; }
#fw-page .fwx-pp-rp { max-width: var(--fw-pp-reader-w); margin: 0 auto; padding: var(--fw-pp-5) var(--fw-pp-6) var(--fw-pp-8); }
#fw-page .fwx-pp-rp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fw-pp-3); font-size: var(--fw-pp-t-small); color: var(--fw-text-muted); }
#fw-page .fwx-pp-rp__chip { display: inline-flex; align-items: center; height: var(--fw-pp-tag-h); padding: 0 var(--fw-pp-2); border-radius: var(--fw-pp-1); background: var(--fw-surface-2); font: 700 var(--fw-pp-t-small)/1 var(--fw-pp-display); color: var(--fw-text); text-transform: uppercase; }
#fw-page .fwx-pp-rp__title { margin-top: var(--fw-pp-3); font: 700 var(--fw-pp-t-rp)/1.16 var(--fw-pp-display); text-transform: uppercase; text-wrap: balance; }
#fw-page .fwx-pp-rp__by { margin-top: var(--fw-pp-2); font-size: var(--fw-pp-t-small); color: var(--fw-text-muted); }
#fw-page .fwx-pp-rp__by u { color: var(--fw-text); text-underline-offset: var(--fw-pp-nudge); }
#fw-page .fwx-pp-rp__fig { margin: var(--fw-pp-5) 0 var(--fw-pp-2); }
#fw-page .fwx-pp-rp__fig img { width: 100%; height: auto; }
#fw-page .fwx-pp-rp__fig figcaption { margin-top: var(--fw-pp-2); font-size: var(--fw-pp-t-label); line-height: 1.5; color: var(--fw-text-subtle); }
#fw-page .fwx-pp-rp__line { margin-top: var(--fw-pp-4); font-size: var(--fw-pp-t-small); line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-pp-rp__p { margin-top: var(--fw-pp-3); line-height: 2; }

/* the carousel, as Instagram shows it; a mouse drags the slides like a finger */
#fw-page .fwx-pp-ig { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--fw-corner); background: var(--fw-surface); border: var(--fw-pp-hair) solid var(--fw-line); }
#fw-page .fwx-pp-ig__head { display: flex; align-items: center; gap: var(--fw-pp-3); padding: var(--fw-pp-3); }
#fw-page .fwx-pp-ig__avatar { flex: none; width: var(--fw-pp-avatar); height: var(--fw-pp-avatar); border-radius: 50%; background: var(--fw-inverse); box-shadow: 0 0 0 var(--fw-pp-hair) var(--fw-line); }
#fw-page .fwx-pp-ig__name { font-weight: 700; }
#fw-page .fwx-pp-ig__followers { margin-left: auto; font-size: var(--fw-pp-t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-text-subtle); white-space: nowrap; }
#fw-page .fwx-pp-ig__track { position: relative; }
#fw-page .fwx-pp-ig__slides { display: flex; aspect-ratio: 3 / 4; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--fw-pp-ig-ground); cursor: grab; touch-action: pan-x pan-y; }
#fw-page .fwx-pp-ig__slides::-webkit-scrollbar { display: none; }
#fw-page .fwx-pp-ig__slides.is-dragging { cursor: grabbing; scroll-snap-type: none; }
#fw-page .fwx-pp-ig__slide { position: relative; flex: 0 0 100%; min-width: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
#fw-page .fwx-pp-ig__slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
#fw-page .fwx-pp-ig__count { position: absolute; top: var(--fw-pp-3); right: var(--fw-pp-3); padding: var(--fw-pp-1) var(--fw-pp-2); border-radius: var(--fw-corner-sm); background: var(--fw-pp-ig-badge); color: var(--fw-pp-ig-ink); font-size: var(--fw-pp-t-label); letter-spacing: 0.08em; pointer-events: none; }
#fw-page .fwx-pp-ig__foot { padding: var(--fw-pp-3); }
#fw-page .fwx-pp-ig__actions { display: flex; align-items: center; gap: var(--fw-pp-4); }
#fw-page .fwx-pp-ig__actions svg { display: block; }
#fw-page .fwx-pp-ig__save { margin-left: auto; }
#fw-page .fwx-pp-ig__nav { display: flex; align-items: center; justify-content: center; gap: var(--fw-pp-4); margin: var(--fw-pp-3) 0 var(--fw-pp-2); }
#fw-page .fwx-pp-ig__step { display: grid; place-items: center; width: var(--fw-pp-step-ctl); height: var(--fw-pp-step-ctl); border-radius: var(--fw-corner-sm); border: var(--fw-pp-hair) solid var(--fw-border); transition: background var(--fw-pp-dur) ease, opacity var(--fw-pp-dur) ease; }
#fw-page .fwx-pp-ig__step:hover { background: var(--fw-surface-2); }
#fw-page .fwx-pp-ig__step[disabled] { opacity: 0.3; cursor: default; background: none; }
#fw-page .fwx-pp-ig__dots { display: flex; justify-content: center; gap: var(--fw-pp-1); }
#fw-page .fwx-pp-ig__dots i { width: var(--fw-pp-dot-ig); height: var(--fw-pp-dot-ig); border-radius: 50%; background: var(--fw-surface-3); cursor: pointer; transition: background var(--fw-pp-dur) ease; }
#fw-page .fwx-pp-ig__dots i.is-on { background: var(--fw-text); }
#fw-page .fwx-pp-ig__caption { display: -webkit-box; overflow: hidden; font-size: var(--fw-pp-t-body); line-height: 1.5; color: var(--fw-text-muted); -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
#fw-page .fwx-pp-ig__caption b { margin-right: var(--fw-pp-2); color: var(--fw-text); }

/* four steps: one grid, every card the same rows */
#fw-page .fwx-pp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--fw-pp-3); }
#fw-page .fwx-pp-step { grid-row: span 4; display: grid; grid-template-rows: subgrid; justify-items: center; min-width: 0; padding: var(--fw-pp-3) var(--fw-pp-3) var(--fw-pp-5); border-radius: var(--fw-corner); background: var(--fw-surface); border: var(--fw-pp-hair) solid var(--fw-line); text-align: center; }
#fw-page .fwx-pp-step__visual { display: grid; place-items: center; width: 100%; height: var(--fw-pp-step-h); padding: var(--fw-pp-4); overflow: hidden; border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); }
/* In the dark scheme the steps stand on the Membership window's black. */
html[data-theme="dark"] #fw-page .fwx-pp-step { background: var(--fwx-catalog-ground); }
html[data-theme="dark"] #fw-page .fwx-pp-step__visual { background: var(--fwx-catalog-card); }
#fw-page .fwx-pp-step__n { margin-top: var(--fw-pp-4); font-size: var(--fw-pp-t-label); letter-spacing: 0.2em; color: var(--fw-text-subtle); }
#fw-page .fwx-pp-step h3 { margin-top: var(--fw-pp-2); font: 700 var(--fw-pp-t-step)/1 var(--fw-pp-display); text-transform: uppercase; }
#fw-page .fwx-pp-step p { max-width: 30ch; margin-top: var(--fw-pp-2); font-size: var(--fw-pp-t-body); line-height: 1.55; color: var(--fw-text-muted); }
#fw-page .fwx-pp-v { width: 100%; max-width: var(--fw-pp-visual); text-align: left; }
#fw-page .fwx-pp-v--tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-pp-2); }
#fw-page .fwx-pp-v--tiles span { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--fw-pp-1); aspect-ratio: 1; padding: var(--fw-pp-3); border-radius: var(--fw-pp-2); border: var(--fw-pp-hair) solid var(--fw-border); background: var(--fw-surface); }
#fw-page .fwx-pp-v--tiles span.is-on { border-color: var(--fw-text); box-shadow: inset 0 0 0 var(--fw-pp-hair) var(--fw-text); }
#fw-page .fwx-pp-v--tiles b { font: 700 var(--fw-pp-t-v)/1 var(--fw-pp-display); text-transform: uppercase; }
#fw-page .fwx-pp-v--tiles small { font-size: var(--fw-pp-t-v-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pp-v__tick { position: absolute; top: var(--fw-pp-2); right: var(--fw-pp-2); display: grid; place-items: center; width: var(--fw-pp-4); height: var(--fw-pp-4); border-radius: 50%; background: var(--fw-text); color: var(--fw-surface); }
#fw-page .fwx-pp-v__card { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.586; padding: var(--fw-pp-3); border-radius: var(--fw-pp-2); background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-pp-v__chip { width: var(--fw-pp-6); height: var(--fw-pp-5); border-radius: var(--fw-pp-1); background: color-mix(in srgb, var(--fw-bg) 20%, transparent); }
#fw-page .fwx-pp-v__num { font-size: var(--fw-pp-t-body); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
#fw-page .fwx-pp-v__total { display: flex; align-items: center; justify-content: space-between; gap: var(--fw-pp-2); margin-top: var(--fw-pp-3); padding: var(--fw-pp-2) var(--fw-pp-3); border-radius: var(--fw-corner-sm); border: var(--fw-pp-hair) solid var(--fw-border); background: var(--fw-surface); font-size: var(--fw-pp-t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fw-text-muted); }
#fw-page .fwx-pp-v__total b { font: 700 var(--fw-pp-t-v)/1 var(--fw-pp-display); color: var(--fw-text); }
#fw-page .fwx-pp-v--form { display: flex; flex-direction: column; gap: var(--fw-pp-3); padding: var(--fw-pp-3); border-radius: var(--fw-corner-sm); border: var(--fw-pp-hair) solid var(--fw-border); background: var(--fw-surface); }
#fw-page .fwx-pp-v--form span { font-size: var(--fw-pp-t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pp-v--form > div > i { display: block; height: var(--fw-pp-2); margin-top: var(--fw-pp-2); border-radius: var(--fw-pp-1); background: var(--fw-surface-2); }
#fw-page .fwx-pp-v--form > div > i.is-short { width: 58%; }
#fw-page .fwx-pp-v__th { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fw-pp-1); }
#fw-page .fwx-pp-v__th :is(img, em) { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--fw-pp-1); }
#fw-page .fwx-pp-v__th em { display: grid; place-items: center; border: var(--fw-pp-hair) dashed var(--fw-border); font-style: normal; color: var(--fw-text-subtle); }
#fw-page .fwx-pp-v--pub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fw-pp-2); }
#fw-page .fwx-pp-v--pub > div { overflow: hidden; border-radius: var(--fw-corner-sm); border: var(--fw-pp-hair) solid var(--fw-border); background: var(--fw-surface); }
#fw-page .fwx-pp-v--pub img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
#fw-page .fwx-pp-v__log div { padding: var(--fw-pp-2); }
#fw-page .fwx-pp-v__log em { font: 700 var(--fw-pp-t-v-sm)/1 var(--fw-pp-display); font-style: normal; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pp-v__log b { display: -webkit-box; margin-top: var(--fw-pp-1); overflow: hidden; font: 700 var(--fw-pp-t-v-sm)/1.15 var(--fw-pp-display); text-transform: uppercase; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#fw-page .fwx-pp-v__ig span { display: block; padding: var(--fw-pp-2); font-size: var(--fw-pp-t-v-sm); font-weight: 700; }
#fw-page .fwx-pp-v__ig i { display: block; height: var(--fw-pp-5); }

@container fwx-pp (max-width: 1000px) {
  #fw-page .fwx-pp-outcome { --fw-pp-ig-around: 0px; grid-template-columns: minmax(0, 1fr); }
  #fw-page .fwx-pp-ig__caption { -webkit-line-clamp: 2; }
  #fw-page .fwx-pp-reader { flex: none; height: var(--fw-pp-reader-h-md); }
  #fw-page .fwx-pp-ig { width: 100%; max-width: var(--fw-pp-ig-w); }
  #fw-page .fwx-pp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); row-gap: var(--fw-pp-3); }
}
@container fwx-pp (max-width: 720px) {
  #fw-page .fwx-pp-stage { padding: var(--fw-pp-2); }
  #fw-page .fwx-pp-reader { height: var(--fw-pp-reader-h-sm); }
  #fw-page .fwx-pp-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  #fw-page .fwx-pp-step { grid-row: auto; display: grid; grid-template-columns: var(--fw-pp-step-side) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--fw-pp-3); align-items: start; justify-items: start; padding: var(--fw-pp-2) var(--fw-pp-3) var(--fw-pp-3) var(--fw-pp-2); text-align: left; }
  #fw-page .fwx-pp-step__visual { grid-row: span 3; height: var(--fw-pp-step-h-sm); padding: var(--fw-pp-2); }
  #fw-page .fwx-pp-step__n { margin-top: var(--fw-pp-2); }
  #fw-page .fwx-pp-step p { max-width: none; }
  #fw-page .fwx-pp-v--tiles { gap: var(--fw-pp-1); }
  #fw-page .fwx-pp-v--tiles span { gap: 0; padding: var(--fw-pp-1) var(--fw-pp-2); }
  #fw-page .fwx-pp-v--tiles b { font-size: var(--fw-pp-t-v-xs); }
  #fw-page .fwx-pp-v--tiles small { font-size: var(--fw-pp-t-v-xxs); letter-spacing: 0.08em; }
  #fw-page .fwx-pp-v__tick { top: var(--fw-pp-1); right: var(--fw-pp-1); width: var(--fw-pp-3); height: var(--fw-pp-3); }
  #fw-page .fwx-pp-v__total { padding: var(--fw-pp-1) var(--fw-pp-2); }
  #fw-page .fwx-pp-v__total span { display: none; }
  #fw-page .fwx-pp-v__th { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #fw-page .fwx-pp-v__th > :nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #fw-page .fwx-pp-reader__view, #fw-page .fwx-pp-ig__slides { scroll-behavior: auto; transition: none; }
}
/* The proposal's account window (proposal-view.php, 97-proposal-sheet.js): the chosen package, Free or Member, the
   way to Stripe. A sheet from the right on a computer, from the foot on a phone, over everything the frame draws;
   it lives under <body>, outside the page, so the theme's wrappers never move it. The payment door wears the LOG's
   red, the one red action of the window. */
html.fw-shell {
  --fw-pp-sheet-w: 440px;
  --fw-pp-sheet-h: min(88vh, 720px);
  --fw-pp-pay: 54px;
  --fw-pp-radio: 18px;
  --fw-pp-sheet-x: 34px;
  --fw-pp-z-sheet: calc(var(--fwx-z) + 40);
  --fw-pp-veil: rgb(0 0 0 / 0.5);
  --fw-pp-sheet-shadow: -24px 0 60px rgb(0 0 0 / 0.25);
  --fw-pp-sheet-shadow-up: 0 -24px 60px rgb(0 0 0 / 0.25);
  --fw-pp-on-red: #fff;
  --fw-pp-t-sheet: 20px;
  --fw-pp-t-chosen: 24px;
  --fw-pp-t-sum: 28px;
  --fw-pp-t-plan: 16px;
  --fw-pp-t-pay: 15px;
  --fw-pp-run: 1.3s;
  --fw-pp-in: 28px;
  --fw-pp-blur: 2px;
  --fw-pp-run-h: 3px;
}

html.fw-shell .fwx-pp-veil { position: fixed; inset: 0; z-index: var(--fw-pp-z-sheet); background: var(--fw-pp-veil); backdrop-filter: blur(var(--fw-pp-blur)); }
html.fw-shell .fwx-pp-sheet { position: fixed; z-index: calc(var(--fw-pp-z-sheet) + 1); top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--fw-pp-4); width: min(var(--fw-pp-sheet-w), 100%); padding: var(--fw-pp-5) var(--fw-pp-6) max(var(--fw-pp-6), env(safe-area-inset-bottom, 0px)); overflow-y: auto; background: var(--fw-surface); color: var(--fw-text); box-shadow: var(--fw-pp-sheet-shadow); font: 400 var(--fw-pp-t-text)/1.6 var(--fw-pp-mono); animation: fwx-pp-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.fw-shell .fwx-pp-sheet { scrollbar-width: none; }
html.fw-shell .fwx-pp-sheet::-webkit-scrollbar { display: none; }
html.fw-shell :is(.fwx-pp-veil, .fwx-pp-sheet)[hidden] { display: none; }
@keyframes fwx-pp-in { from { transform: translateX(var(--fw-pp-in)); opacity: 0; } }
@keyframes fwx-pp-up { from { transform: translateY(var(--fw-pp-in)); opacity: 0; } }
html.fw-shell .fwx-pp-sheet :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
html.fw-shell .fwx-pp-sheet :where(p) { margin: 0; }
html.fw-shell .fwx-pp-sheet .fwx-pp-label { font-size: var(--fw-pp-t-label); line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fw-text-subtle); }
html.fw-shell .fwx-pp-sheet__bar { display: flex; align-items: center; justify-content: space-between; }
html.fw-shell .fwx-pp-sheet__title { font: 700 var(--fw-pp-t-sheet)/1 var(--fw-pp-display); text-transform: uppercase; }
html.fw-shell .fwx-pp-sheet__x { display: grid; place-items: center; width: var(--fw-pp-sheet-x); height: var(--fw-pp-sheet-x); border-radius: var(--fw-corner-sm); border: var(--fw-pp-hair) solid var(--fw-border) !important; }
html.fw-shell .fwx-pp-chosen { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fw-pp-3); padding: var(--fw-pp-4); border-radius: var(--fw-corner); background: var(--fw-surface-2); }
html.fw-shell .fwx-pp-chosen b { font: 700 var(--fw-pp-t-chosen)/1 var(--fw-pp-display); text-transform: uppercase; }
html.fw-shell .fwx-pp-chosen .fwx-pp-label { display: block; margin-top: var(--fw-pp-2); }
html.fw-shell .fwx-pp-chosen__sum { text-align: right; }
html.fw-shell .fwx-pp-chosen__sum b { font-size: var(--fw-pp-t-sum); font-variant-numeric: tabular-nums; }
html.fw-shell .fwx-pp-chosen__sum .fwx-pp-label { white-space: nowrap; }
html.fw-shell .fwx-pp-acct { display: flex; flex-direction: column; gap: var(--fw-pp-2); }
html.fw-shell .fwx-pp-acct label { display: grid; grid-template-columns: var(--fw-pp-radio) minmax(0, 1fr) auto; gap: var(--fw-pp-3); align-items: start; padding: var(--fw-pp-3); border: var(--fw-pp-hair) solid var(--fw-border); border-radius: var(--fw-corner); cursor: pointer; transition: border-color var(--fw-pp-dur) ease, background var(--fw-pp-dur) ease; }
html.fw-shell .fwx-pp-acct label:has(input:checked) { border-color: var(--fw-text); background: var(--fw-surface-2); }
html.fw-shell .fwx-pp-acct input { margin: var(--fw-pp-1) 0 0; accent-color: var(--fw-text); }
html.fw-shell .fwx-pp-acct strong { display: block; margin-bottom: var(--fw-pp-1); font: 700 var(--fw-pp-t-plan)/1.1 var(--fw-pp-display); text-transform: uppercase; }
html.fw-shell .fwx-pp-acct small { font-size: var(--fw-pp-t-body); line-height: 1.5; color: var(--fw-text-muted); }
html.fw-shell .fwx-pp-acct em { font: 700 var(--fw-pp-t-text)/1.2 var(--fw-pp-display); font-style: normal; text-align: right; white-space: nowrap; }
html.fw-shell .fwx-pp-acct em small { display: block; font: 400 var(--fw-pp-t-micro)/1.3 var(--fw-pp-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fw-text-subtle); }
html.fw-shell .fwx-pp-sheet__problem { font-size: var(--fw-pp-t-body); line-height: 1.5; color: var(--fw-accent); }
html.fw-shell .fwx-pp-pay { position: relative; display: flex !important; align-items: center; justify-content: space-between; height: var(--fw-pp-pay); padding: 0 var(--fw-pp-5) !important; overflow: hidden; border-radius: var(--fw-corner-sm); background: var(--fw-accent) !important; color: var(--fw-pp-on-red) !important; font: 700 var(--fw-pp-t-pay)/1 var(--fw-pp-display) !important; letter-spacing: 0.06em; text-transform: uppercase; }
html.fw-shell .fwx-pp-pay:hover { opacity: 0.92; }
html.fw-shell .fwx-pp-pay[disabled] { cursor: progress; }
html.fw-shell .fwx-pp-pay i { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--fw-pp-run-h); background: color-mix(in srgb, var(--fw-pp-on-red) 85%, transparent); transform: scaleX(0); transform-origin: left; }
html.fw-shell .fwx-pp-pay.is-going i { transform: scaleX(1); transition: transform var(--fw-pp-run) cubic-bezier(0.45, 0.05, 0.25, 1); }
html.fw-shell .fwx-pp-sheet__fine { display: flex; gap: var(--fw-pp-2); font-size: var(--fw-pp-t-small); line-height: 1.6; color: var(--fw-text-subtle); }
html.fw-shell .fwx-pp-sheet__fine svg { flex: none; margin-top: var(--fw-pp-1); }
html.fw-shell .fwx-pp-sheet__back { align-self: flex-start; font-size: var(--fw-pp-t-label) !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fw-text-subtle) !important; }
html.fw-shell .fwx-pp-sheet__back:hover { color: var(--fw-text) !important; }

@media (max-width: 767px) {
  html.fw-shell .fwx-pp-sheet { top: auto; width: 100%; max-height: var(--fw-pp-sheet-h); padding: var(--fw-pp-4) var(--fw-pp-5) max(var(--fw-pp-5), env(safe-area-inset-bottom, 0px)); border-radius: var(--fw-corner) var(--fw-corner) 0 0; box-shadow: var(--fw-pp-sheet-shadow-up); animation-name: fwx-pp-up; }
}
@media (prefers-reduced-motion: reduce) {
  html.fw-shell .fwx-pp-sheet { animation: none; }
  html.fw-shell .fwx-pp-pay.is-going i { transition: none; }
}
/* A package's page (packages-view.php) and its material form (92-package-*.js), after mock v4 «After payment»:
   the hero with the order beside it, the four steps as they stand, the year's table, the form in parts under a
   menu held below the bar, and «See yours». Measures are the --fwx-pk-* tokens of foundation.css; colours are the
   LOG's own, so light and dark follow the frame. The layout reads the page column (container queries). */
#fw-page .fwx-pk {
  --pk-display: var(--font-oswald), "Arial Narrow", sans-serif;
  --pk-mono: var(--font-jetbrains), ui-monospace, monospace;
  container-type: inline-size;
  display: flex; flex-direction: column; gap: var(--fwx-pk-s11);
  max-width: var(--fwx-pk-page); margin: 0 auto; padding: 0 var(--fwx-edge) var(--fwx-pk-s11);
  font-family: var(--pk-mono); color: var(--fw-text);
}
#fw-page :where(.fwx-pk) :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; }
#fw-page :where(.fwx-pk) :where(ol, .fwx-pk-rows) { list-style: none; }
#fw-page :where(.fwx-pk) :where(button) { margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
#fw-page .fwx-pk-display { font-family: var(--pk-display); font-weight: 700; text-transform: uppercase; text-wrap: balance; }
#fw-page .fwx-pk-label { font-size: var(--fwx-pk-t2); line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pk-ok { display: grid; flex: none; place-items: center; width: var(--fwx-pk-tick); height: var(--fwx-pk-tick); border-radius: 50%; background: var(--fw-text); color: var(--fw-bg); }
#fw-page .fwx-pk-wait { padding: var(--fwx-pk-s7) var(--fwx-pk-s8); border: var(--fwx-pk-hair) solid var(--fw-line); border-radius: var(--fw-corner); background: var(--fw-surface); font-size: var(--fwx-pk-t4); }

/* buttons */
#fw-page .fwx-pk-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--fwx-pk-s6); height: var(--fwx-pk-ctl); padding: 0 var(--fwx-pk-s9); border-radius: var(--fw-corner-sm); font: 700 var(--fwx-pk-t6)/1 var(--pk-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: opacity var(--fw-dur-state) ease, background-color var(--fw-dur-state) ease; }
#fw-page .fwx-pk-btn svg { flex: none; }
#fw-page .fwx-pk-btn--ink { background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-pk-btn--ink:hover { opacity: .86; }
#fw-page .fwx-pk-btn--line { border: var(--fwx-pk-hair) solid var(--fw-border); color: var(--fw-text); }
#fw-page .fwx-pk-btn--line:hover { background: var(--fw-surface-2); }
#fw-page .fwx-pk-btn--sm { height: var(--fwx-pk-ctl-sm); padding: 0 var(--fwx-pk-s6); font-size: var(--fwx-pk-t4); }
#fw-page .fwx-pk-btn.is-waiting { opacity: .45; }
#fw-page .fwx-pk-btn:disabled { opacity: .45; cursor: default; }
#fw-page .fwx-pk-link { font-size: var(--fwx-pk-t1); letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-subtle); text-decoration: underline; text-underline-offset: var(--fwx-pk-bar); }

/* the hero and the order */
#fw-page .fwx-pk-hero { display: grid; gap: var(--fwx-pk-s9); padding-top: var(--fwx-pk-s10); }
#fw-page .fwx-pk-hero__text { display: flex; flex-direction: column; min-width: 0; }
#fw-page .fwx-pk-eyebrow { display: flex; align-items: center; gap: var(--fwx-pk-s3); font-size: var(--fwx-pk-t3); line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pk-hero h1 { margin-top: var(--fwx-pk-s6); font-size: var(--fwx-pk-h1); line-height: .9; }
#fw-page .fwx-pk-lead { margin-top: var(--fwx-pk-s8); max-width: 60ch; font-size: var(--fwx-pk-t6); line-height: 1.7; color: var(--fw-text-muted); }
#fw-page .fwx-pk-order { display: flex; flex-direction: column; min-width: 0; padding: var(--fwx-pk-s8); border: var(--fwx-pk-hair) solid var(--fw-line); border-radius: var(--fw-corner); background: var(--fw-surface); }
#fw-page .fwx-pk-order__head { display: flex; justify-content: space-between; gap: var(--fwx-pk-s4); }
#fw-page .fwx-pk-order__name { margin-top: var(--fwx-pk-s6); font: 700 var(--fwx-pk-name)/.95 var(--pk-display); text-transform: uppercase; }
#fw-page .fwx-pk-order__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fwx-pk-hair); margin-top: var(--fwx-pk-s7); overflow: hidden; border: var(--fwx-pk-hair) solid var(--fw-line); border-radius: var(--fw-corner-sm); background: var(--fw-line); }
#fw-page .fwx-pk-order__rows div { padding: var(--fwx-pk-s4) var(--fwx-pk-s5); background: var(--fw-surface); }
#fw-page .fwx-pk-order__rows div:last-child { grid-column: span 2; }
#fw-page .fwx-pk-order__rows dt { font-size: var(--fwx-pk-t1); letter-spacing: .18em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pk-order__rows dd { margin-top: var(--fwx-pk-s1); font: 700 var(--fwx-pk-t8)/1 var(--pk-display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
#fw-page .fwx-pk-order__where { margin-top: var(--fwx-pk-s6); font-size: var(--fwx-pk-t4); line-height: 1.55; color: var(--fw-text-muted); }
#fw-page .fwx-pk-order__keep { display: flex; gap: var(--fwx-pk-s3); margin-top: auto; padding-top: var(--fwx-pk-s6); border-top: var(--fwx-pk-hair) solid var(--fw-line); font-size: var(--fwx-pk-t3); line-height: 1.55; color: var(--fw-text-subtle); }
#fw-page .fwx-pk-order__keep svg { flex: none; margin-top: var(--fwx-pk-bar); }

/* the four steps as they stand */
#fw-page .fwx-pk-tracker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fwx-pk-s8) var(--fwx-pk-s5); }
#fw-page .fwx-pk-tracker li { display: flex; flex-direction: column; gap: var(--fwx-pk-s3); padding-top: var(--fwx-pk-s5); border-top: var(--fwx-pk-bar) solid var(--fw-surface-3); }
#fw-page .fwx-pk-tracker li:is(.is-done, .is-now) { border-top-color: var(--fw-text); }
#fw-page .fwx-pk-tracker__row { display: flex; align-items: center; justify-content: space-between; gap: var(--fwx-pk-s3); min-height: var(--fwx-pk-tick); }
#fw-page .fwx-pk-tracker span { font-size: var(--fwx-pk-t2); letter-spacing: .2em; color: var(--fw-text-subtle); }
#fw-page .fwx-pk-tracker b { font: 700 var(--fwx-pk-t9)/1 var(--pk-display); text-transform: uppercase; }
#fw-page .fwx-pk-tracker li.is-next b { color: var(--fw-text-subtle); }
#fw-page .fwx-pk-tracker em { font-style: normal; font-size: var(--fwx-pk-t2); letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pk-tracker li.is-now em { padding: var(--fwx-pk-bar) var(--fwx-pk-s2); border-radius: var(--fw-corner-sm); background: var(--fw-inverse); color: var(--fw-bg); }

/* a block's head, the year and the notes */
#fw-page .fwx-pk-head { display: flex; flex-direction: column; gap: var(--fwx-pk-s2); margin-bottom: var(--fwx-pk-s7); }
#fw-page .fwx-pk-head h2 { font-size: var(--fwx-pk-h2); line-height: .95; }
#fw-page .fwx-pk-intro { max-width: 64ch; margin-top: var(--fwx-pk-s1); font-size: var(--fwx-pk-t4); line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-pk-year { border: var(--fwx-pk-hair) solid var(--fw-line); border-radius: var(--fw-corner); background: var(--fw-surface); }
#fw-page .fwx-pk-year li { display: grid; grid-template-columns: var(--fwx-pk-s10) minmax(0, 1fr); align-items: center; gap: var(--fwx-pk-s2) var(--fwx-pk-s4); padding: var(--fwx-pk-s6); border-top: var(--fwx-pk-hair) solid var(--fw-line); }
#fw-page .fwx-pk-year li:first-child { border-top: 0; }
#fw-page .fwx-pk-year__n { font-size: var(--fwx-pk-t2); letter-spacing: .2em; color: var(--fw-text-subtle); }
#fw-page .fwx-pk-year b { font: 700 var(--fwx-pk-t9)/1.05 var(--pk-display); text-transform: uppercase; }
#fw-page .fwx-pk-year__st { grid-column: 2; font-size: var(--fwx-pk-t4); color: var(--fw-text-muted); }
#fw-page .fwx-pk-year li.is-now .fwx-pk-year__st { font-weight: 700; color: var(--fw-text); }
#fw-page .fwx-pk-year .fwx-pk-btn { grid-column: 1 / -1; width: 100%; margin-top: var(--fwx-pk-s2); }
#fw-page .fwx-pk-note { margin-top: var(--fwx-pk-s5); font-size: var(--fwx-pk-t4); line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-pk-note:empty { display: none; }
#fw-page .fwx-pk-sent { display: flex; align-items: center; gap: var(--fwx-pk-s4); font-size: var(--fwx-pk-t3); letter-spacing: .14em; text-transform: uppercase; }

@container (min-width: 45rem) {
  #fw-page .fwx-pk-tracker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #fw-page .fwx-pk-year li { grid-template-columns: var(--fwx-pk-num) minmax(0, 1.2fr) minmax(0, 1.4fr) var(--fwx-pk-act); gap: var(--fwx-pk-s7); min-height: var(--fwx-pk-ctl); padding: var(--fwx-pk-s4) var(--fwx-pk-s7); }
  #fw-page .fwx-pk-year__st { grid-column: auto; }
  #fw-page .fwx-pk-year .fwx-pk-btn { grid-column: 4; margin-top: 0; }
  #fw-page .fwx-pk-order__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #fw-page .fwx-pk-order__rows div:last-child { grid-column: auto; }
}
@container (min-width: 62.5rem) {
  #fw-page .fwx-pk-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--fwx-pk-s11); }
}
/* The material form of a package (92-package-parts.js) and «See yours» (92-package-sim.js): the menu of parts held
   under the bar, each part with what it asks beside its fields on a wide column, the works one row each, the
   carousel picks, the licence, and the three canvases. Measures from foundation.css (--fwx-pk-*). */
#fw-page .fwx-pk-menu { position: sticky; top: var(--fwx-pk-held); z-index: 5; display: flex; gap: var(--fwx-pk-s2); overflow-x: auto; scrollbar-width: none; padding: var(--fwx-pk-s4) 0; border-bottom: var(--fwx-pk-hair) solid var(--fw-line); background: var(--fwx-stage, var(--fw-bg)); }
#fw-page .fwx-pk-menu::-webkit-scrollbar { display: none; }
#fw-page .fwx-pk-menu a { display: inline-flex; flex: none; align-items: center; gap: var(--fwx-pk-s3); height: var(--fwx-pk-chip); padding: 0 var(--fwx-pk-s5); border: var(--fwx-pk-hair) solid var(--fw-border); border-radius: var(--fw-corner-sm); font-size: var(--fwx-pk-t2); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--fw-text-muted); }
#fw-page .fwx-pk-menu a.is-on { border-color: transparent; background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-pk-tk { display: none; place-items: center; width: var(--fwx-pk-tk); height: var(--fwx-pk-tk); border-radius: 50%; background: currentColor; }
#fw-page .fwx-pk-tk svg { width: var(--fwx-pk-s4); height: var(--fwx-pk-s4); color: var(--fw-bg); }
#fw-page .fwx-pk-menu a.is-on .fwx-pk-tk svg { color: var(--fw-inverse); }
#fw-page .fwx-pk-menu a.is-done .fwx-pk-tk { display: grid; }

#fw-page .fwx-pk-part { display: grid; gap: var(--fwx-pk-s7); padding: var(--fwx-pk-s10) 0; border-bottom: var(--fwx-pk-hair) solid var(--fw-line); scroll-margin-top: calc(var(--fwx-pk-held) + var(--fwx-pk-ctl)); }
#fw-page .fwx-pk-send { border-bottom: 0; }
#fw-page .fwx-pk-part h3 { font: 700 var(--fwx-pk-t10)/1 var(--pk-display); text-transform: uppercase; }
#fw-page .fwx-pk-help { margin-top: var(--fwx-pk-s4); max-width: 34ch; font-size: var(--fwx-pk-t4); line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-pk-fields .fwx-pk-help { max-width: none; }
#fw-page .fwx-pk-problem { margin-top: var(--fwx-pk-s4); font-size: var(--fwx-pk-t4); line-height: 1.5; color: var(--fw-accent); }
#fw-page .fwx-pk-fields { display: flex; flex-direction: column; gap: var(--fwx-pk-s6); min-width: 0; }
#fw-page .fwx-pk-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fwx-pk-s6); }
#fw-page .fwx-pk-field label, #fw-page .fwx-pk-field__label { display: block; margin-bottom: var(--fwx-pk-s2); font-size: var(--fwx-pk-t2); letter-spacing: .18em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-pk-field :is(input, textarea) { width: 100%; padding: var(--fwx-pk-s5) var(--fwx-pk-s6); border: var(--fwx-pk-hair) solid var(--fw-border); border-radius: var(--fw-corner-sm); background: var(--fw-surface); color: var(--fw-text); font: var(--fwx-pk-t5)/1.6 var(--pk-mono); }
#fw-page .fwx-pk-field textarea { min-height: var(--fwx-pk-area); resize: vertical; }
#fw-page .fwx-pk-field :is(input, textarea):focus { outline: none; border-color: var(--fw-text); }
#fw-page .fwx-pk-field :is(input, textarea):disabled { opacity: .7; }
#fw-page .fwx-pk-from { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--fwx-pk-s2); height: var(--fwx-pk-s9); padding: 0 var(--fwx-pk-s3); border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); font-size: var(--fwx-pk-t2); letter-spacing: .14em; text-transform: uppercase; color: var(--fw-text-muted); }
#fw-page .fwx-pk-count { margin-top: calc(-1 * var(--fwx-pk-s2)); text-align: right; font-size: var(--fwx-pk-t1); letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-subtle); font-variant-numeric: tabular-nums; }
#fw-page .fwx-pk-count.is-ok { color: var(--fw-text); }

/* the works, the portrait, the picks */
#fw-page .fwx-pk-rows { display: flex; flex-direction: column; border: var(--fwx-pk-hair) solid var(--fw-border); border-radius: var(--fw-corner); background: var(--fw-surface); }
#fw-page .fwx-pk-rows li { display: grid; grid-template-columns: var(--fwx-pk-thumb-sm) minmax(0, 1fr); align-items: start; gap: var(--fwx-pk-s4); padding: var(--fwx-pk-s5); border-top: var(--fwx-pk-hair) solid var(--fw-line); }
#fw-page .fwx-pk-rows li:first-child { border-top: 0; }
#fw-page .fwx-pk-rows li > span { display: flex; flex-direction: column; align-items: center; gap: var(--fwx-pk-s2); }
#fw-page .fwx-pk-row-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fwx-pk-s3); }
#fw-page .fwx-pk-row-fields .fwx-pk-field label { margin-bottom: var(--fwx-pk-s1); font-size: var(--fwx-pk-t1); }
#fw-page .fwx-pk-row-fields .fwx-pk-field input { padding: var(--fwx-pk-s3) var(--fwx-pk-s4); background: var(--fw-bg); font-size: var(--fwx-pk-t4); }
#fw-page .fwx-pk-thumb { position: relative; display: block; width: var(--fwx-pk-thumb-sm); height: var(--fwx-pk-thumb-sm); overflow: hidden; border-radius: var(--fw-corner-sm); background: var(--fw-surface-3); }
#fw-page .fwx-pk-thumb img { width: 100%; height: 100%; object-fit: cover; }
#fw-page .fwx-pk-thumb em { position: absolute; inset: auto 0 0; padding: var(--fwx-pk-hair) var(--fwx-pk-s1); background: var(--fw-inverse); color: var(--fw-bg); font-style: normal; font-size: var(--fwx-pk-t1); letter-spacing: .08em; text-transform: uppercase; }
#fw-page .fwx-pk-drop { display: flex; align-items: center; justify-content: center; gap: var(--fwx-pk-s4); width: 100%; height: var(--fwx-pk-thumb-sm); border: var(--fwx-pk-hair) dashed var(--fw-border); border-radius: var(--fw-corner); font-size: var(--fwx-pk-t3); letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-muted); }
#fw-page .fwx-pk-portrait { display: flex; align-items: center; gap: var(--fwx-pk-s6); padding: var(--fwx-pk-s5); border: var(--fwx-pk-hair) solid var(--fw-border); border-radius: var(--fw-corner); background: var(--fw-surface); }
#fw-page .fwx-pk-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fwx-pk-s3); }
#fw-page .fwx-pk-pick { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--fw-corner-sm); background: var(--fw-surface-3); outline: var(--fwx-pk-hair) solid var(--fw-border); outline-offset: calc(-1 * var(--fwx-pk-hair)); }
#fw-page .fwx-pk-pick .fwx-pk-thumb { width: 100%; height: 100%; border-radius: 0; }
#fw-page .fwx-pk-pick img { opacity: .55; transition: opacity var(--fw-dur-state) ease; }
#fw-page .fwx-pk-pick.is-on { outline: calc(2 * var(--fwx-pk-hair)) solid var(--fw-text); outline-offset: calc(-2 * var(--fwx-pk-hair)); }
#fw-page .fwx-pk-pick.is-on img { opacity: 1; }
#fw-page .fwx-pk-pick b { position: absolute; top: var(--fwx-pk-s2); left: var(--fwx-pk-s2); display: grid; place-items: center; width: var(--fwx-pk-pick-n); height: var(--fwx-pk-pick-n); border-radius: 50%; background: var(--fw-inverse); color: var(--fw-bg); font: 700 var(--fwx-pk-t4)/1 var(--pk-display); }

/* the licence and the consent */
#fw-page .fwx-pk-terms { max-height: var(--fwx-pk-terms); overflow-y: auto; padding: var(--fwx-pk-s7) var(--fwx-pk-s8); border: var(--fwx-pk-hair) solid var(--fw-border); border-radius: var(--fw-corner); background: var(--fw-surface); font-size: var(--fwx-pk-t4); line-height: 1.7; color: var(--fw-text-muted); }
/* The LOG shows no system scrollbar anywhere: the licence scrolls by wheel, finger or keyboard. */
#fw-page .fwx-pk-terms { scrollbar-width: none; }
#fw-page .fwx-pk-terms::-webkit-scrollbar { display: none; }
#fw-page .fwx-pk-terms > * + * { margin-top: var(--fwx-pk-s4); }
#fw-page .fwx-pk-terms ul { display: flex; flex-direction: column; gap: var(--fwx-pk-s2); padding-left: var(--fwx-pk-s7); list-style: disc; }
#fw-page .fwx-pk-agree { display: flex; align-items: center; gap: var(--fwx-pk-s5); padding: var(--fwx-pk-s6) var(--fwx-pk-s7); border: var(--fwx-pk-hair) solid var(--fw-border); border-radius: var(--fw-corner); background: var(--fw-surface); font: 700 var(--fwx-pk-t6)/1 var(--pk-display); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
#fw-page .fwx-pk-agree input { width: var(--fwx-pk-tick); height: var(--fwx-pk-tick); margin: 0; accent-color: var(--fw-text); }
#fw-page .fwx-pk-agree:has(input:checked) { border-color: var(--fw-text); }
#fw-page .fwx-pk-send__row { display: flex; flex-direction: column; gap: var(--fwx-pk-s4); }

/* «See yours» */
#fw-page .fwx-pk-sim { display: flex; flex-direction: column; gap: var(--fwx-pk-s7); padding-top: var(--fwx-pk-s10); }
#fw-page .fwx-pk-sim[hidden] { display: none; }
#fw-page .fwx-pk-sim__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fwx-pk-s5); }
#fw-page .fwx-pk-sim__title { flex: 1 1 var(--fwx-pk-act); }
#fw-page .fwx-pk-sim__views { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fwx-pk-s5); }
#fw-page .fwx-pk-sim figure { display: flex; flex-direction: column; gap: var(--fwx-pk-s3); }
#fw-page .fwx-pk-sim canvas { width: 100%; height: auto; border: var(--fwx-pk-hair) solid var(--fw-line); border-radius: var(--fw-corner); background: var(--fw-surface-2); }

@container (min-width: 45rem) {
  #fw-page .fwx-pk-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #fw-page .fwx-pk-rows li { grid-template-columns: var(--fwx-pk-thumb) minmax(0, 1fr); gap: var(--fwx-pk-s6); }
  #fw-page .fwx-pk-thumb { width: var(--fwx-pk-thumb); height: var(--fwx-pk-thumb); }
  #fw-page .fwx-pk-picks { grid-template-columns: repeat(auto-fill, minmax(var(--fwx-pk-pick), 1fr)); }
  #fw-page .fwx-pk-send__row { flex-direction: row; }
  #fw-page .fwx-pk-sim__views { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
@container (min-width: 62.5rem) {
  #fw-page .fwx-pk-part { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--fwx-pk-s10); }
  #fw-page .fwx-pk-row-fields { grid-template-columns: minmax(0, 2fr) minmax(0, .7fr) minmax(0, 1.6fr) minmax(0, 1.3fr); }
  #fw-page .fwx-pk-row-fields:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, .7fr); }
}
/* My Submissions (submissions-mine.php): the package pages' look (packages.css, the .fwx-pk tokens), a row per
   submission with its cover, title and status, opening on what was sent. Container queries read the page column. */
#fw-page .fwx-pk.fwx-mine { max-width: none; gap: var(--fwx-pk-s11); }
#fw-page .fwx-mine__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--fwx-pk-s7); padding-top: var(--fwx-pk-s9); }
#fw-page .fwx-mine__intro { min-width: 0; }
#fw-page .fwx-mine__head h1 { margin-top: var(--fwx-pk-s3); font-size: var(--fwx-pk-h2); line-height: .95; }
#fw-page :is(.fwx-mine__lead, .fwx-mine__part-head p, .fwx-mine__empty) { max-width: 60ch; font-size: var(--fwx-pk-t4); line-height: 1.7; color: var(--fw-text-muted); }
#fw-page .fwx-mine__lead { margin-top: var(--fwx-pk-s5); }
#fw-page .fwx-mine__part { display: flex; flex-direction: column; gap: var(--fwx-pk-s7); }
#fw-page .fwx-mine__part-head { display: flex; flex-direction: column; gap: var(--fwx-pk-s3); }
#fw-page .fwx-mine__part-head h2 { font-size: var(--fwx-pk-t10); line-height: 1; }
#fw-page .fwx-mine__rows { display: flex; flex-direction: column; gap: var(--fwx-pk-s4); }

/* a row */
#fw-page .fwx-mine-row { overflow: clip; border: var(--fwx-pk-hair) solid var(--fw-line); border-radius: var(--fw-corner); background: var(--fw-surface); }
#fw-page .fwx-mine-row__line { display: grid; grid-template-columns: var(--fwx-mine-thumb) minmax(0, 1fr) auto; align-items: center; gap: var(--fwx-pk-s7); padding: var(--fwx-pk-s5); list-style: none; }
#fw-page summary.fwx-mine-row__line { cursor: pointer; }
#fw-page summary.fwx-mine-row__line::-webkit-details-marker { display: none; }
#fw-page summary.fwx-mine-row__line:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: -2px; border-radius: var(--fw-corner); }
#fw-page .fwx-mine-row__thumb { position: relative; display: block; aspect-ratio: var(--fwx-cover-wide); overflow: clip; border-radius: var(--fw-corner-sm); background: var(--fw-surface-3); }
#fw-page .fwx-mine-row__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#fw-page .fwx-mine-row__text { display: flex; flex-direction: column; gap: var(--fwx-pk-s2); min-width: 0; }
#fw-page .fwx-mine-row__title { overflow: hidden; font: 700 var(--fwx-pk-t10)/1.05 var(--pk-display); text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
#fw-page .fwx-mine-row__detail { overflow: hidden; font-size: var(--fwx-pk-t3); color: var(--fw-text-muted); text-overflow: ellipsis; white-space: nowrap; }
#fw-page .fwx-mine-row__end { display: flex; align-items: center; gap: var(--fwx-pk-s5); }
#fw-page .fwx-mine-row__more { display: grid; place-items: center; color: var(--fw-text-muted); transition: transform .2s ease; }
#fw-page .fwx-mine-row[open] .fwx-mine-row__more { transform: rotate(180deg); }
#fw-page summary.fwx-mine-row__line:hover .fwx-mine-row__more { color: var(--fw-text); }

/* the status, one word, its weight rising as the submission moves on */
#fw-page .fwx-mine-status { display: inline-flex; align-items: center; gap: var(--fwx-pk-s3); height: var(--fwx-pk-chip); padding: 0 var(--fwx-pk-s6); border: var(--fwx-pk-hair) solid var(--fw-line); border-radius: var(--fw-corner-pill); font-size: var(--fwx-pk-t2); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
#fw-page .fwx-mine-status::before { content: ''; width: var(--fwx-pk-s2); height: var(--fwx-pk-s2); border: var(--fwx-pk-hair) solid currentColor; border-radius: 50%; }
#fw-page .fwx-mine-status[data-state="accepted"]::before { background: currentColor; }
#fw-page .fwx-mine-status[data-state="published"] { border-color: var(--fw-inverse); background: var(--fw-inverse); color: var(--fw-bg); }
#fw-page .fwx-mine-status[data-state="published"]::before { background: currentColor; }
#fw-page .fwx-mine-status[data-state="declined"] { color: var(--fw-text-muted); }

/* what was sent, to read only */
#fw-page .fwx-mine-recap { display: flex; flex-direction: column; gap: var(--fwx-pk-s9); padding: var(--fwx-pk-s9); border-top: var(--fwx-pk-hair) solid var(--fw-line); }
#fw-page .fwx-mine-recap__state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fwx-pk-s6); padding: var(--fwx-pk-s7) var(--fwx-pk-s8); border-radius: var(--fw-corner-sm); background: var(--fw-surface-2); }
#fw-page .fwx-mine-recap__state p { max-width: 70ch; font-size: var(--fwx-pk-t5); line-height: 1.6; }
#fw-page .fwx-mine-recap__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fwx-mine-fact)), 1fr)); gap: var(--fwx-pk-s7) var(--fwx-pk-s9); }
#fw-page .fwx-mine-recap__facts dt { font-size: var(--fwx-pk-t1); letter-spacing: .18em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-mine-recap__facts dd { margin-top: var(--fwx-pk-s2); font-size: var(--fwx-pk-t5); line-height: 1.5; overflow-wrap: anywhere; }
#fw-page .fwx-mine-recap__facts a { color: inherit; text-decoration: underline; text-underline-offset: var(--fwx-pk-bar); }
#fw-page .fwx-mine-recap__text { display: flex; flex-direction: column; gap: var(--fwx-pk-s4); max-width: 72ch; }
#fw-page .fwx-mine-recap__text p:not(.fwx-pk-label) { font-size: var(--fwx-pk-t5); line-height: 1.75; color: var(--fw-text-muted); }
#fw-page .fwx-mine-recap__pictures { display: flex; flex-direction: column; gap: var(--fwx-pk-s5); }
#fw-page .fwx-mine-recap__covers { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fwx-pk-s5); }
#fw-page .fwx-mine-recap__cover { max-width: 100%; }
#fw-page .fwx-mine-recap__cover img { display: block; height: var(--fwx-mine-cover); max-width: 100%; border-radius: var(--fw-corner-sm); object-fit: cover; }
#fw-page .fwx-mine-recap__cover--wide img { aspect-ratio: var(--fwx-cover-wide); }
#fw-page .fwx-mine-recap__cover--tall img { aspect-ratio: var(--fwx-cover-tall); }
#fw-page .fwx-mine-recap__views { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fwx-mine-view)), 1fr)); gap: var(--fwx-pk-s5); }
#fw-page .fwx-mine-recap__views img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--fw-corner-sm); background: var(--fw-surface-3); object-fit: cover; }
#fw-page .fwx-mine-recap figcaption { margin-top: var(--fwx-pk-s2); font-size: var(--fwx-pk-t2); line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; color: var(--fw-text-muted); }

/* a narrow column: the thumbnail shrinks, the status goes under the title */
@container (max-width: 40rem) {
  #fw-page .fwx-mine-row__line { grid-template-columns: var(--fwx-mine-thumb-sm) minmax(0, 1fr); gap: var(--fwx-pk-s5); }
  #fw-page .fwx-mine-row__end { grid-column: 2; justify-content: space-between; }
  #fw-page .fwx-mine-row--draft .fwx-mine-row__line > .fwx-pk-btn { grid-column: 2; justify-self: start; }
  #fw-page .fwx-mine-row__title { font-size: var(--fwx-pk-t9); white-space: normal; }
  #fw-page .fwx-mine-recap { padding: var(--fwx-pk-s7) var(--fwx-pk-s5); }
}
/* The covers' part (90-covers.js) in the package forms and the exhibition form: the wide and the vertical frame
   side by side at one height, each in its own shape, starting on one line whatever their labels' length (a
   subgrid of label, frame and foot); on a narrow column they stack, the vertical one narrower.
   Measures from foundation.css (--fwx-cover-*, --fwx-pk-*). */
#fw-page .fwx-covers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fwx-pk-s7); }
#fw-page .fwx-cover { display: flex; flex-direction: column; gap: var(--fwx-pk-s3); min-width: 0; }
#fw-page .fwx-cover--tall { max-width: var(--fwx-cover-tall-alone); }
#fw-page .fwx-cover__label { font-size: var(--fwx-pk-t2); letter-spacing: .18em; text-transform: uppercase; color: var(--fw-text-subtle); }
#fw-page .fwx-cover__frame { position: relative; display: block; width: 100%; aspect-ratio: var(--fwx-cover-wide); overflow: hidden; border-radius: var(--fw-corner-sm); background: var(--fw-surface-3); }
#fw-page .fwx-cover--tall .fwx-cover__frame { aspect-ratio: var(--fwx-cover-tall); }
#fw-page .fwx-cover__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
#fw-page .fwx-cover__frame em { position: absolute; inset: auto 0 0; padding: var(--fwx-pk-hair) var(--fwx-pk-s1); background: var(--fw-inverse); color: var(--fw-bg); font-style: normal; font-size: var(--fwx-pk-t1); letter-spacing: .08em; text-transform: uppercase; }
#fw-page .fwx-cover__add { display: flex; align-items: center; justify-content: center; border: var(--fwx-pk-hair) dashed var(--fw-border); background: transparent; font-size: var(--fwx-pk-t3); letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-muted); cursor: pointer; }
#fw-page .fwx-cover__add:hover:not(:disabled) { border-color: var(--fw-text); color: var(--fw-text); }
#fw-page .fwx-cover__add:disabled { cursor: default; opacity: .7; }
#fw-page :is(.fwx-cover__add, .fwx-cover__remove):focus-visible { outline: var(--fwx-pk-hair) solid var(--fw-text); outline-offset: var(--fwx-pk-bar); }
#fw-page .fwx-cover__foot { display: flex; flex-direction: column; gap: var(--fwx-pk-s3); }
#fw-page .fwx-cover__hint { font-size: var(--fwx-pk-t4); line-height: 1.6; color: var(--fw-text-muted); }
#fw-page .fwx-cover__miss { font-size: var(--fwx-pk-t4); line-height: 1.5; color: var(--fw-accent); }
#fw-page .fwx-cover__remove { align-self: flex-start; font-size: var(--fwx-pk-t1); letter-spacing: .16em; text-transform: uppercase; color: var(--fw-text-subtle); text-decoration: underline; text-underline-offset: var(--fwx-pk-bar); }

@container (min-width: 36rem) {
  #fw-page .fwx-covers { grid-template-columns: var(--fwx-cover-cols); row-gap: var(--fwx-pk-s3); }
  #fw-page .fwx-cover { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  #fw-page .fwx-cover--tall { max-width: none; }
}
/* Complianz's cookie banner drawn in the frame's language (owner, 2026-11-09): the same words, choices and
   settings as the old LOG, on the island's glass, set clear of the ask on a computer and of the island on a
   phone. Complianz styles itself through its own variables, so the colours are those variables pointed at
   our tokens; the shape needs the container's id to outweigh its four-class selectors. Its floating
   «Manage consent» tab would sit under the ask: the footer carries that button instead (87-cookies.js). */
html.fw-shell {
  --fwx-cookie-w: 420px;
  /* denser than the island's tint: the banner is a paragraph read over photographs */
  --fwx-cookie-ground: color-mix(in srgb, var(--fw-glass-solid) 88%, transparent);
  --fwx-cookie-seam: inset 0 0 0 1px var(--fw-line);
  /* the phone's foot island: 52px of glass standing 16px (or the safe area) over the screen's edge */
  --fwx-cookie-phone-bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 52px + var(--fwx-gap));
  --cmplz_banner_width: var(--fwx-cookie-w);
  --cmplz_banner_background_color: var(--fwx-cookie-ground);
  --cmplz_banner_border_color: transparent;
  --cmplz_banner_border_width: 0;
  --cmplz_banner_border_radius: var(--fw-corner);
  --cmplz_banner_margin: 8px;
  --cmplz_title_font_size: 15px;
  --cmplz_text_color: var(--fw-text);
  --cmplz_hyperlink_color: var(--fw-text-muted);
  --cmplz_text_font_size: 13px;
  --cmplz_link_font_size: 11px;
  --cmplz_category_body_font_size: 12px;
  --cmplz_button_accept_background_color: var(--fw-inverse);
  --cmplz_button_accept_border_color: var(--fw-inverse);
  --cmplz_button_accept_text_color: var(--fw-bg);
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: var(--fw-line);
  --cmplz_button_deny_text_color: var(--fw-text);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--fw-line);
  --cmplz_button_settings_text_color: var(--fw-text);
  --cmplz_button_border_radius: var(--fw-corner-sm);
  --cmplz_button_font_size: 13px;
  --cmplz_category_header_always_active_color: var(--fw-text-subtle);
  --cmplz_category_header_title_font_size: 12px;
  --cmplz_category_header_active_font_size: 11px;
  --cmplz_slider_active_color: var(--fw-text);
  --cmplz_slider_inactive_color: color-mix(in srgb, var(--fw-text) 28%, transparent);
  --cmplz_slider_bullet_color: var(--fw-bg);
}
html.fw-shell[data-theme="dark"] { --fwx-cookie-seam: inset 0 0 0 1px #ffffff1f, inset 0 1px 0 #ffffff29; }

html.fw-shell #cmplz-cookiebanner-container .cmplz-cookiebanner {
  top: auto;
  left: auto;
  right: calc(var(--fwx-r) + var(--fwx-edge));
  bottom: calc(var(--fwx-edge) + var(--fwx-gap));
  width: var(--fwx-cookie-w);
  min-width: 0;
  max-width: calc(100vw - var(--fwx-l) - var(--fwx-r) - 2 * var(--fwx-edge));
  max-height: calc(var(--fw-vh, 100vh) - var(--fwx-top) - var(--fwx-ask-room));
  transform: none;
  gap: 12px;
  padding: 16px 18px 14px;
  border: 0;
  -webkit-backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat));
  backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-sat));
  box-shadow: var(--fwx-cookie-seam), var(--fw-lift);
  color: var(--fw-text);
  font-family: var(--font-jetbrains), ui-monospace, monospace;
}
html.fw-shell #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover { box-shadow: var(--fwx-cookie-seam), var(--fw-lift); }
/* Over the ask's room on a computer, as the floating player is. */
html.fw-shell.fwx-ask-room #cmplz-cookiebanner-container .cmplz-cookiebanner { bottom: calc(var(--fwx-ask-room) + var(--fwx-gap)); }

html.fw-shell #cmplz-cookiebanner-container .cmplz-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-logo { display: none; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-title {
  display: block; grid-column-start: 1; justify-self: start; margin: 0;
  font: 700 15px/1.1 var(--font-oswald), sans-serif; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fw-text);
}
html.fw-shell #cmplz-cookiebanner-container .cmplz-close {
  grid-column-start: 2; display: grid; place-items: center; width: 28px; height: 28px; margin: -6px -8px -6px 0;
  border-radius: var(--fw-corner-sm); color: var(--fw-text-muted); line-height: 1;
}
html.fw-shell #cmplz-cookiebanner-container .cmplz-close:hover { color: var(--fw-text); font-size: inherit; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-close svg { width: 13px; height: 13px; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-divider { display: none; }

html.fw-shell #cmplz-cookiebanner-container .cmplz-body { min-width: 0; max-height: none; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fw-text) 30%, transparent) transparent; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-body::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--fw-text) 30%, transparent); }
html.fw-shell #cmplz-cookiebanner-container .cmplz-message,
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories { width: auto; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-message { margin: 0; line-height: 1.6; letter-spacing: -0.01em; color: var(--fw-text-secondary); }

/* the categories, once «View preferences» opens them */
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories.cmplz-fade-in { margin-top: 12px; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories .cmplz-category { border-radius: var(--fw-corner-sm); background-color: color-mix(in srgb, var(--fw-text) 6%, transparent); }
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 6px; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header { padding: 10px 12px; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { font-weight: 400; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories .cmplz-icon { color: var(--fw-text-muted); }
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories .cmplz-icon svg { width: 12px; height: 12px; fill: currentColor; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-categories .cmplz-description { padding: 0 12px 12px; line-height: 1.6; color: var(--fw-text-muted); }
html.fw-shell #cmplz-cookiebanner-container .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before { box-shadow: 0 0 0 2px var(--fw-text); }
html.fw-shell #cmplz-cookiebanner-container .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus:not(:focus-visible) + .cmplz-label::before { box-shadow: none; }

html.fw-shell #cmplz-cookiebanner-container .cmplz-buttons { flex-direction: row; flex-wrap: wrap; gap: 8px; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
  flex: 1 1 0; min-width: max-content; height: 40px; padding: 0 14px;
  font: 700 13px/1 var(--font-oswald), sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  transition: opacity var(--fw-dur-state), background-color var(--fw-dur-state);
}
html.fw-shell #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:hover { opacity: 0.85; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:not(.cmplz-accept):hover { background-color: color-mix(in srgb, var(--fw-text) 6%, transparent); }
html.fw-shell #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:focus-visible,
html.fw-shell #cmplz-cookiebanner-container .cmplz-close:focus-visible,
html.fw-shell #cmplz-cookiebanner-container summary:focus-visible { outline: 2px solid var(--fw-text); outline-offset: 2px; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-links .cmplz-link { letter-spacing: 0.02em; text-underline-offset: 3px; }
html.fw-shell #cmplz-cookiebanner-container .cmplz-links .cmplz-link:hover { color: var(--fw-text); }

/* The floating tab gives way to the footer's button. */
html.fw-shell #cmplz-manage-consent { display: none; }

@media (max-width: 767px) {
  html.fw-shell #cmplz-cookiebanner-container .cmplz-cookiebanner,
  html.fw-shell.fwx-ask-room #cmplz-cookiebanner-container .cmplz-cookiebanner {
    left: var(--fwx-edge); right: var(--fwx-edge); bottom: var(--fwx-cookie-phone-bottom);
    width: auto; max-width: none;
    max-height: calc(var(--fw-vh, 100vh) - var(--fwx-phone-top) - var(--fwx-cookie-phone-bottom));
    padding: 14px 14px 12px;
  }
  html.fw-shell #cmplz-cookiebanner-container .cmplz-header .cmplz-title { display: block; }
  html.fw-shell { --cmplz_text_font_size: 12px; }
  /* Each button as wide as its word: «View preferences» needs more than a third of a phone. */
  html.fw-shell #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn { flex: 1 1 auto; width: auto; padding: 0 10px; font-size: 12px; letter-spacing: 0.04em; }
  html.fw-shell #cmplz-cookiebanner-container .cmplz-category .cmplz-category-header { grid-template-columns: minmax(0, 1fr) auto 15px !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html.fw-shell #cmplz-cookiebanner-container .cmplz-cookiebanner { background: var(--fw-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* the footer's way back to the choices */
html.fw-shell .cs-footer .fwx-cookie-prefs {
  appearance: none; display: block; margin: 4px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 10px/1.6 var(--font-jetbrains), ui-monospace, monospace; color: var(--fw-text-subtle);
  text-decoration: underline; text-underline-offset: 3px;
}
html.fw-shell .cs-footer .fwx-cookie-prefs:hover { color: var(--fw-text); }
html.fw-shell .cs-footer .fwx-cookie-prefs:focus-visible { outline: 2px solid var(--fw-text); outline-offset: 2px; }