/* Reprogenetics Institute site: the port of BGP's inline page styles (main.html,
   new_buttons_panel.html, home/explore/events/about/assist), without the background pictures.
   Dark mode is the default (since 2026-10-04); [data-theme="dark"] is BGP's original dark palette. The mock site
   (site-local/theme.css, written by the logo tuner) may set the --mock-* variables to recolour
   links and rules from a draft logo; in production theme.css is empty and the fallbacks apply. */

/* ---- palette ------------------------------------------------------------------------ */
:root {
   --bg: #f5efe3;               /* neutral cream (Tsvi, 2026-10-04) */
   --text: rgba(20, 16, 14, .86);
   --muted: #6d6660;
   --rule: var(--mock-rule-light, #9a948e);
   --panel: #efeae3;                /* hover tints only */
   --panel-strong: #e6e0d8;
   /* Width of the soft fade around text blocks: the page colour is fully opaque over the block
      and its alpha falls off to nothing this far outside it (the "halo" over the DNA letters). */
   /* The page as a nucleus (below the DNA letters): the logo's first colour tints the edges (the
      lamina and its silent heterochromatin), fading inward; its second colour glows faintly at
      the centre (gene-rich, active chromatin, near the speckles). In the mock site, theme.css's
      --primary/--secondary (the tuner's colours) take over. Light mode has none of it since
      2026-10-04 (Tsvi: "just have a nice neutral cream colored background"): both alphas are 0,
      so the gradient is invisible and the ground is plain --bg. Dark mode still has it. */
   --nuc-rim: var(--primary, #5A55A5);
   --nuc-core: var(--secondary, #3E7E5F);
   --nuc-rim-alpha: 0%;
   --nuc-core-alpha: 0%;
   --nucleus:
      radial-gradient(ellipse 150% 140% at 50% 62%, transparent 42%,
         color-mix(in srgb, var(--nuc-rim) calc(var(--nuc-rim-alpha) * .35), transparent) 62%,
         color-mix(in srgb, var(--nuc-rim) calc(var(--nuc-rim-alpha) * .75), transparent) 76%,
         color-mix(in srgb, var(--nuc-rim) var(--nuc-rim-alpha), transparent) 88%),
      radial-gradient(ellipse 48% 42% at 50% 52%,
         color-mix(in srgb, var(--nuc-core) var(--nuc-core-alpha), transparent) 0%,
         color-mix(in srgb, var(--nuc-core) calc(var(--nuc-core-alpha) * .45), transparent) 50%,
         transparent 100%);
   /* Diffusion blobs (diffusion.js, canvas #pattern; only on pages that opt in with PATTERN in
      base.html, none since 2026-10-23): colour and peak opacity. 0 = not drawn, and the simulation
      does not run. Light mode has none (plain cream ground); dark mode sets it. */
   --pattern-color: var(--nuc-core);
   --pattern-alpha: 0;
   --fade: 20px;
   --fade-in: 6px;              /* how far the fade reaches in over the block's padding */
   --link-int: var(--mock-link-int-light, #9b2e8c);          /* BGP's pink, deepened for paper */
   --link-int-underline: color-mix(in srgb, var(--link-int) 60%, transparent);
   --link-ext: var(--mock-link-ext-light, #2f7a2f);          /* BGP's green, deepened for paper */
   --link-ext-underline: color-mix(in srgb, var(--link-ext) 50%, transparent);
   --toggle-on: rgba(28, 24, 23, .12);
   /* DNA background letters: peak opacity when the moving centre is on a letter, and the
      saturation and lightness (%) of the wandering pastel hues (dna.js) */
   --dna-peak: 0.6;
   --dna-sat: 70;
   --dna-light: 62;
}

:root[data-theme="dark"] {
   --bg: rgb(28, 24, 23);
   --text: rgba(255, 255, 255, .81);
   --muted: #a9a29c;
   --rule: var(--mock-rule-dark, #777);
   --panel: #2a2524;
   --panel-strong: #363030;
   --link-int: var(--mock-link-int-dark, rgb(240, 184, 233));
   --link-int-underline: color-mix(in srgb, var(--link-int) 60%, transparent);
   --link-ext: var(--mock-link-ext-dark, rgba(144, 238, 144, .76));
   --link-ext-underline: color-mix(in srgb, var(--link-ext) 50%, transparent);
   --toggle-on: rgba(255, 255, 255, .16);
   --dna-peak: 0.55;
   /* No rim gradient either (2026-10-23). The article column and the text halos paint the same
      gradient with background-attachment: fixed to blend with the ground, but Chrome drops fixed
      attachment on masked elements, so the column painted its own gradient relative to itself
      (plain dark in the middle) and showed as a dark rectangle against the purple-tinted ground
      (Tsvi: "there is a weird purple rectangle on article pages?"). With the alpha at 0 every
      surface is plain --bg and they match. To bring the rim back, the column and halos must stop
      painting the gradient, which means another way of hiding the letters near text. */
   --nuc-rim-alpha: 0%;
   --nuc-core-alpha: 0%;        /* no green centre glow (Tsvi, 2026-10-23: "get rid of the whole green thingy"); the purple rim stays */
   --pattern-alpha: 0.15;      /* subtler (Tsvi, 2026-10-23: "too distinct", then "still too much green"; 0.4 → 0.22 → 0.15) */
   --dna-sat: 85;
   --dna-light: 78;
}

/* BGP's variable names, so ported article and event templates keep working unchanged. */
:root {
   --main_background_color: var(--bg);
   --main_background_color_halfish: color-mix(in srgb, var(--bg) 70%, transparent);
   --main_text_color: var(--text);
   --internal_link_color: var(--link-int);
   --internal_link_color_underline: var(--link-int-underline);
   --external_link_color: var(--link-ext);
   --external_link_color_underline: var(--link-ext-underline);
}

/* ---- fonts: Rosarivo (SIL OFL), self-hosted; used on article pages as on BGP ---------- */
@font-face {
   font-family: 'Rosarivo'; font-style: normal; font-weight: 400; font-display: swap;
   src: url(/fonts/rosarivo-regular-latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Rosarivo'; font-style: normal; font-weight: 400; font-display: swap;
   src: url(/fonts/rosarivo-regular-latin-ext.woff2) format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Rosarivo'; font-style: italic; font-weight: 400; font-display: swap;
   src: url(/fonts/rosarivo-italic-latin.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Rosarivo'; font-style: italic; font-weight: 400; font-display: swap;
   src: url(/fonts/rosarivo-italic-latin-ext.woff2) format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lexend (SIL OFL 1.1, text in /fonts/LEXEND-OFL.txt; latin subset from Google Fonts, fetched 2026-10-24): the
   wordmark and the banner buttons (Tsvi, 2026-10-24: "make it be Lexend for now"). Chosen from a shortlist with the
   dev panel's font cycler; docs/FONTS.md has the shortlist. */
@font-face {
   font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap;
   src: url(/fonts/lexend-400.woff2) format('woff2');
}
@font-face {
   font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap;
   src: url(/fonts/lexend-700.woff2) format('woff2');
}

/* ---- base (BGP main.html) ------------------------------------------------------------- */
html, body, blockquote, code, h1, h2, h3, h4, h5, h6, p, pre { margin: 0; padding: 0; }
html { overflow-y: scroll; background: var(--bg); }
ul li { margin: .25em; }

body {
   background-color: var(--bg);
   color: var(--text);
   margin: 0;
   padding: 0;
   line-height: 1.34em;
   font-size: 1.23em;
   font-family: 'Charter', 'Iowan Old Style', 'Palatino', Georgia, serif;
   min-height: 100vh;
}

/* The DNA letters are drawn on a fixed canvas behind everything; .page sits above it. */
#nucleus {
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background: var(--nucleus);
}
#dna {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none;
}
/* The diffusion blobs: a fixed canvas inside .page, so it paints above the text halos (which are at
   z-index -1 in .page's stacking context) and below the text; the blobs show over everything but
   the letters are still hidden near text. */
#pattern {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none;
}
.page {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   width: 100%;
}

a { color: var(--link-ext); text-decoration-color: var(--link-ext-underline); text-underline-offset: .12em; }

.visually_hidden {
   position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- top banner ----------------------------------------------------------------------- */
.topbar {
   width: 100%;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: .2em;
   padding: .3em .6em;
   position: relative;
}
.home_link { display: flex; align-items: center; gap: .5em; margin-right: .8em; color: var(--text); text-decoration: none; }
.home_icon { height: 3.4em; width: auto; display: block; }
.wordmark { font-family: 'Lexend', 'Charter', 'Iowan Old Style', 'Palatino', Georgia, serif;   /* Lexend (Tsvi, 2026-10-24), see @font-face above */
            font-size: 1.05em; font-weight: bold; line-height: 1.1em; letter-spacing: .01em; }
.page_links { display: flex; flex-wrap: wrap; align-items: center; gap: .15em; }
.page_link {
   font-family: 'Lexend', 'Charter', 'Iowan Old Style', 'Palatino', Georgia, serif;   /* same font as the wordmark (Tsvi, 2026-10-24) */
   font-size: 1.15em;
   font-weight: bold;
   padding: .45em .8em;
   border-radius: .4em;
   color: var(--text);
   text-decoration: none;
   border: 1px solid transparent;
}
.page_link:hover { background: var(--panel-strong); }
.page_link.is_current { border-color: var(--rule); background: var(--panel); }
.wordmark, .page_link { font-variant-caps: small-caps; }   /* banner in small caps (Tsvi, 2026-10-24: "in the local version, make the banner have small caps"); Lexend has no true small caps, so the browser synthesizes them */
.theme_toggle { margin-left: auto; display: flex; gap: .15em; }
#swoops-off { margin-left: .4em; }
.theme_button {
   appearance: none;
   background: transparent;
   border: 1px solid transparent;
   border-radius: .4em;
   color: var(--muted);
   padding: .35em .45em;
   cursor: pointer;
   line-height: 0;
}
.theme_button:hover { color: var(--text); }
.theme_button[aria-pressed="true"] { color: var(--text); background: var(--toggle-on); border-color: var(--rule); }

/* ---- footer (BGP main.html) ----------------------------------------------------------- */
.site_footer {
   margin-top: auto;
   font-size: .65em;
   text-align: center;
   padding: 1em 1.5em;
   margin-bottom: 1em;
}
.site_footer { color: var(--muted); }

/* ---- home ------------------------------------------------------------------------------ */
.homepage {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 96%;
   max-width: 1600px;
}
.header_container {
   max-width: 92%;
   margin-top: 5em;
   margin-bottom: 5em;
   padding: 1em 1.4em;
}
.big_header {                   /* "Our mission:" above the mission line (2026-10-24); BGP had the class unstyled */
   font-variant: small-caps;
   font-size: 1.3em;
   text-align: left;             /* Tsvi, 2026-10-24: left aligned in the element */
   margin: .5em .5em 0;          /* same side margin as .big_text, so it starts flush with the line */
}
.big_text {
   max-width: 820px;            /* the slogan wraps to three lines (Tsvi, 2026-10-23: "less wide"; was 1100) */
   font-size: 1.8em;
   line-height: 1.3em;
   margin: .5em;
   padding-left: 1em;            /* Tsvi, 2026-10-24: 'indent "Unlock the promis.." a bit' (the whole block, so wrapped lines too) */
   text-align: left;             /* Tsvi, 2026-10-24: "make the bigger mission statement also be left-justified" */
}
.mission_text {                 /* the paragraph under the mission line; Tsvi's cue "[smaller]" (2026-10-24) */
   max-width: 820px;
   font-size: 1.1em;
   line-height: 1.45em;
   margin: 1.2em .5em .5em;
   text-align: left;
}
.home_panels {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
}
.main_text {
   box-sizing: border-box;
   max-width: 1000px;
   width: 100%;
   margin: .3em;
   margin-bottom: 1.3em;
   padding: 1em;
}
.main_text p { margin: .6em; }
.header {
   box-sizing: border-box;
   padding-bottom: .2em;
   font-variant: small-caps;
   font-size: 2em;
   border-bottom: 1px solid var(--rule);
}

/* ---- explore ---------------------------------------------------------------------------- */
.explore_page { margin: .2em; max-width: 98%; display: flex; flex-direction: column; align-items: center; }
.explore_page h1 {
   margin-top: .3em; margin-bottom: .4em; padding-bottom: .18em;
   border-bottom: 1px solid var(--rule);
}
.link_panel { margin-top: .5em; }
.explore_link { font-size: 1.1em; font-weight: bold; cursor: pointer; text-decoration: none; }
.article_link { color: var(--link-int); border-bottom: 1px dotted var(--link-int-underline); }
.external_link { color: var(--link-ext); border-bottom: 1px dotted var(--link-ext-underline); }
.box_item {
   box-sizing: border-box;
   max-width: 800px;
   width: 100%;
   margin: .4em;
   margin-top: 1em;
   padding: .7em;
}

/* ---- events ----------------------------------------------------------------------------- */
.outer_event_thing { margin: .5em; max-width: 96%; box-sizing: border-box; padding: .2em 1.4em 1.4em; }
.outer_event_thing h1 {
   margin-top: 2em; margin-bottom: 1em; padding-bottom: .18em;
   border-bottom: 1px solid var(--rule);
}
.full_event_thing { display: flex; flex-direction: row; }
.vertical_bar { margin-left: .35em; width: 0; height: 3em; border-left: 2px solid var(--muted); }
.dashed { border-left: 2px dashed var(--muted); }
.after_text { max-width: 400px; margin-top: 7em; }

.year { color: var(--muted); padding-left: .6em; padding-right: .1em; }
.date { padding-left: .6em; padding-right: .6em; width: 7em; }
.major_event_panel {
   outline: 2px solid var(--text);
   outline-offset: 5px;
   margin-left: .5em;
   border-radius: 7px;
}
.major_event_panel a { color: var(--text); }
.major_event_page_link {
   font-size: 1.35em; padding: .5em; transform: translateY(13%);
   color: var(--text); font-weight: bold; cursor: pointer; text-decoration: none;
}
.minor_event_page_link { font-size: 1.2em; color: var(--text); font-weight: bold; text-decoration: none; }
a.minor_event_page_link { cursor: pointer; }

/* ---- about / assist / 404 ---------------------------------------------------------------- */
.about_page { display: flex; flex-direction: column; align-items: center; max-width: 96%; width: 100%; }
.about_item {
   box-sizing: border-box;
   max-width: 1000px;
   width: 87%;
   margin: 1em;
   padding: 1em;
}
.about_item p { margin: .5em 0; }
.about_item h1, .about_item h2 { margin-top: .6em; }

/* Article and event pages: the text column is opaque, so the letters show only beside it. */
body.article .page::before, body.event .page::before {
   content: '';
   position: absolute;
   top: 0; bottom: 0; left: 50%;
   transform: translateX(-50%);
   width: min(100%, 1040px);
   background: var(--nucleus), var(--bg);
   background-attachment: fixed;
   z-index: -1;
}
body.article .page, body.event .page { isolation: isolate; }

/* ---- placeholders ------------------------------------------------------------------------- */
.lorem { color: var(--muted); font-style: italic; }

/* ---- wide screens ------------------------------------------------------------------------- */
@media (min-width: 1400px) {
   .home_panels { flex-direction: row; align-items: stretch; justify-content: center; gap: 1em; }
   .main_text { max-width: 760px; }
   .explore_page { flex-direction: row; align-items: flex-start; justify-content: center; gap: 1em; }
   .box_item { width: 620px; }
   .header_container { margin-top: 6em; margin-bottom: 6em; }
   .big_text { max-width: 920px; font-size: 2em; }   /* was 1300 */
   .mission_text { max-width: 920px; font-size: 1.2em; }
}

/* ---- small screens (BGP's breakpoints) ------------------------------------------------------- */
@media (max-width: 750px) {
   .date { padding-left: .2em; padding-right: .3em; width: 5.5em; }
   .major_event_panel { margin-left: .2em; }
   .major_event_page_link { padding: .3em; }
   .header_container { margin-top: 2.5em; margin-bottom: 2.5em; }
   .big_text { font-size: 1.4em; }
   .mission_text { font-size: 1em; }
   .about_item { width: 100%; }
}
@media (max-width: 500px) {
   body { font-size: 1.1em; }
   .page_link { font-size: .9em; padding: .4em .55em; }
   .home_icon { height: 2.6em; }
   .wordmark { font-size: .85em; }
   .topbar { padding: .25em .4em; }
   .header { font-size: 1.6em; }
}

/* Text blocks: no box. Behind each one, a layer of the page colour covers the block and fades out
   around it (alpha eased from 1 at the block's edge to 0 at --fade beyond it), so the DNA letters
   dim as they approach text and never cross it. */
.topbar, .header_container, .main_text, .box_item, .about_item, .outer_event_thing, .site_footer, .event_contents {
   position: relative;          /* no z-index: the fade layers all join .page's stacking context at */
   background: transparent;     /* z-index -1, so every fade paints below every block's text */
}
.topbar::before, .header_container::before, .main_text::before, .box_item::before, .about_item::before,
.outer_event_thing::before, .site_footer::before, .event_contents::before {
   content: '';
   position: absolute;
   /* the opaque core hugs the text: it starts --inner-y/--inner-x inside the block (≈ its padding) */
   inset: calc(var(--inner-y, 0px) + var(--fade-in) - var(--fade)) calc(var(--inner-x, 0px) + var(--fade-in) - var(--fade));
   z-index: -1;
   pointer-events: none;
   background: var(--nucleus), var(--bg);
   background-attachment: fixed;   /* same viewport-fixed gradient as #nucleus, so the halo matches the ground */
   -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.12) calc(var(--fade) * 0.167), rgba(0,0,0,0.28) calc(var(--fade) * 0.333), rgba(0,0,0,0.45) calc(var(--fade) * 0.500), rgba(0,0,0,0.62) calc(var(--fade) * 0.667), rgba(0,0,0,0.8) calc(var(--fade) * 0.833), #000 var(--fade), #000 calc(100% - var(--fade)), rgba(0,0,0,0.8) calc(100% - var(--fade) * 0.833), rgba(0,0,0,0.62) calc(100% - var(--fade) * 0.667), rgba(0,0,0,0.45) calc(100% - var(--fade) * 0.500), rgba(0,0,0,0.28) calc(100% - var(--fade) * 0.333), rgba(0,0,0,0.12) calc(100% - var(--fade) * 0.167), transparent 100%),
                       linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.12) calc(var(--fade) * 0.167), rgba(0,0,0,0.28) calc(var(--fade) * 0.333), rgba(0,0,0,0.45) calc(var(--fade) * 0.500), rgba(0,0,0,0.62) calc(var(--fade) * 0.667), rgba(0,0,0,0.8) calc(var(--fade) * 0.833), #000 var(--fade), #000 calc(100% - var(--fade)), rgba(0,0,0,0.8) calc(100% - var(--fade) * 0.833), rgba(0,0,0,0.62) calc(100% - var(--fade) * 0.667), rgba(0,0,0,0.45) calc(100% - var(--fade) * 0.500), rgba(0,0,0,0.28) calc(100% - var(--fade) * 0.333), rgba(0,0,0,0.12) calc(100% - var(--fade) * 0.167), transparent 100%);
   -webkit-mask-composite: source-in;
           mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.12) calc(var(--fade) * 0.167), rgba(0,0,0,0.28) calc(var(--fade) * 0.333), rgba(0,0,0,0.45) calc(var(--fade) * 0.500), rgba(0,0,0,0.62) calc(var(--fade) * 0.667), rgba(0,0,0,0.8) calc(var(--fade) * 0.833), #000 var(--fade), #000 calc(100% - var(--fade)), rgba(0,0,0,0.8) calc(100% - var(--fade) * 0.833), rgba(0,0,0,0.62) calc(100% - var(--fade) * 0.667), rgba(0,0,0,0.45) calc(100% - var(--fade) * 0.500), rgba(0,0,0,0.28) calc(100% - var(--fade) * 0.333), rgba(0,0,0,0.12) calc(100% - var(--fade) * 0.167), transparent 100%),
                       linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.12) calc(var(--fade) * 0.167), rgba(0,0,0,0.28) calc(var(--fade) * 0.333), rgba(0,0,0,0.45) calc(var(--fade) * 0.500), rgba(0,0,0,0.62) calc(var(--fade) * 0.667), rgba(0,0,0,0.8) calc(var(--fade) * 0.833), #000 var(--fade), #000 calc(100% - var(--fade)), rgba(0,0,0,0.8) calc(100% - var(--fade) * 0.833), rgba(0,0,0,0.62) calc(100% - var(--fade) * 0.667), rgba(0,0,0,0.45) calc(100% - var(--fade) * 0.500), rgba(0,0,0,0.28) calc(100% - var(--fade) * 0.333), rgba(0,0,0,0.12) calc(100% - var(--fade) * 0.167), transparent 100%);
           mask-composite: intersect;
}
/* How far inside each block its text begins (padding plus the text's own margin), roughly. */
.header_container { --inner-y: 1.5em; --inner-x: 1.6em; }
.main_text, .about_item { --inner-y: .8em; --inner-x: .8em; }
.box_item { --inner-y: .6em; --inner-x: .6em; }
.outer_event_thing { --inner-y: .2em; --inner-x: 1.2em; }
.site_footer { --inner-y: .8em; --inner-x: 1.3em; }

/* The article/event column fades at its sides only. */
body.article .page::before, body.event .page::before {
   left: 50%;
   width: calc(min(100%, 1040px) + 2 * var(--fade));
   -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.12) calc(var(--fade) * 0.167), rgba(0,0,0,0.28) calc(var(--fade) * 0.333), rgba(0,0,0,0.45) calc(var(--fade) * 0.500), rgba(0,0,0,0.62) calc(var(--fade) * 0.667), rgba(0,0,0,0.8) calc(var(--fade) * 0.833), #000 var(--fade), #000 calc(100% - var(--fade)), rgba(0,0,0,0.8) calc(100% - var(--fade) * 0.833), rgba(0,0,0,0.62) calc(100% - var(--fade) * 0.667), rgba(0,0,0,0.45) calc(100% - var(--fade) * 0.500), rgba(0,0,0,0.28) calc(100% - var(--fade) * 0.333), rgba(0,0,0,0.12) calc(100% - var(--fade) * 0.167), transparent 100%);
           mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.12) calc(var(--fade) * 0.167), rgba(0,0,0,0.28) calc(var(--fade) * 0.333), rgba(0,0,0,0.45) calc(var(--fade) * 0.500), rgba(0,0,0,0.62) calc(var(--fade) * 0.667), rgba(0,0,0,0.8) calc(var(--fade) * 0.833), #000 var(--fade), #000 calc(100% - var(--fade)), rgba(0,0,0,0.8) calc(100% - var(--fade) * 0.833), rgba(0,0,0,0.62) calc(100% - var(--fade) * 0.667), rgba(0,0,0,0.45) calc(100% - var(--fade) * 0.500), rgba(0,0,0,0.28) calc(100% - var(--fade) * 0.333), rgba(0,0,0,0.12) calc(100% - var(--fade) * 0.167), transparent 100%);
}
/* The fades may reach past the window's edge; never let them cause sideways scrolling. */
html, body { overflow-x: clip; }

/* Phones: no text surfaces at all. The letters are fainter, and every glyph carries a soft halo
   of the page colour (text-shadow, inherited from body) that dims any swoop right next to it. */
@media (max-width: 750px) {
   :root { --dna-peak: 0.45; }
   body { text-shadow: 0 0 1px var(--bg), 0 0 2px var(--bg), 0 0 3px var(--bg), 0 0 5px var(--bg); }
   .topbar, .header_container, .main_text, .box_item, .about_item, .outer_event_thing, .site_footer, .event_contents {
      background: transparent;
      box-shadow: none;
   }
   body.article .page::before, body.event .page::before { display: none; }
   .topbar::before, .header_container::before, .main_text::before, .box_item::before, .about_item::before,
   .outer_event_thing::before, .site_footer::before, .event_contents::before { display: none; }
   .header_container { margin-top: 2em; margin-bottom: 2em; }
   .main_text { margin-bottom: 1.6em; }
}


/* Home is the slogan alone (2026-10-23): it sits in the middle of the first screen. */
.homepage.slogan_only { justify-content: center; min-height: calc(100vh - 14em); }