@fluid-theme/core 0.4.3 → 2.1.0

package/src/fluid.css

@@ -4,7 +4,7 @@
  *
  * Like water: adaptable, natural, powerful yet gentle.
  *
- * @version 0.4.3
+ * @version 2.1.0
  * @license MIT
  *
  * Layer Architecture:
@@ -50,9 +50,6 @@
 @import "./components/form.css";
 @import "./components/hero.css";
 @import "./components/indicator.css";
-@import "./components/settings-panel.css";
-@import "./components/scroll-progress.css";
-@import "./components/themed-images.css";
 @import "./components/modal.css";
 @import "./components/tooltip.css";
 @import "./components/accordion.css";
@@ -66,7 +63,8 @@
 @import "./components/step-indicator.css";
 @import "./components/search-input.css";
 @import "./components/chip.css";
-@import "./components/version-badge.css";
+@import "./components/gallery.css";
+@import "./components/compare.css";
 
 
 /* ========================================
@@ -118,7 +116,7 @@
 
   /* Focus utility - show only with focus-visible */
   .focus-ring:focus-visible {
-    outline: 2px solid var(--color-focus);
+    outline: var(--focus-ring-width) solid var(--color-focus);
     outline-offset: 3px;
   }
 
@@ -127,11 +125,47 @@
     margin-block-start: var(--flow-space, var(--space-5));
   }
 
-  /* Prose utility - optimal reading width */
-  .prose {
+  /* Prose utility - optimal reading width (a .content-grid sets its own) */
+  .prose:not(.content-grid) {
     max-inline-size: var(--container-prose);
   }
 
+  /* ========================================
+     TEXT OVERFLOW CONTROL
+     Headings hyphenate overlong words by default (see base.css).
+     data-text-overflow overrides the handling per element:
+
+       data-text-overflow="hyphenate"  break + hyphen (the heading default)
+       data-text-overflow="break"      hard break, no hyphen
+       data-text-overflow="clip"       single line, ellipsis
+       data-text-overflow="normal"     browser default (opt back out)
+
+     For shrink-to-fit sizing instead, add data-fit-text and include
+     assets/js/fit-text.js (progressive enhancement — these CSS
+     rules remain the no-JS safety net).
+     ======================================== */
+
+  [data-text-overflow="hyphenate"] {
+    overflow-wrap: break-word;
+    hyphens: auto;
+  }
+
+  [data-text-overflow="break"] {
+    overflow-wrap: anywhere;
+    hyphens: none;
+  }
+
+  [data-text-overflow="clip"] {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  [data-text-overflow="normal"] {
+    overflow-wrap: normal;
+    hyphens: manual;
+  }
+
   /* Center utility - horizontally centered content */
   .center {
     display: grid;
@@ -192,14 +226,16 @@
 
 /* ========================================
    LAYOUTS LAYER
-   Basic layout utilities until Phase 3
+   Container, primitives, prose rhythm, the content grid, section bands
+   and the section head.
    ======================================== */
 
 @layer layouts {
-  /* Container - constrained width with centered content */
+  /* Container: --page-edge on EACH side (the gutter knob, never below 3vi),
+     the same edge .content-grid, the hero and the section components use. */
   .container {
     --_container-size: var(--container-content, var(--container-xl));
-    inline-size: min(100% - var(--space-gutter, var(--space-8)), var(--_container-size));
+    inline-size: min(100% - 2 * var(--page-edge), var(--_container-size));
     margin-inline: auto;
     container-type: inline-size;
   }
@@ -210,14 +246,18 @@
   .container--xl { --_container-size: var(--container-xl); }
   .container--2xl { --_container-size: var(--container-2xl); }
 
-  /* Stack - vertical flow with consistent gaps */
+  /* A display headline fills the column it sits in. */
+  .entry-header {
+    container-type: inline-size;
+    padding-block: var(--space-xl) var(--space-l);
+  }
+
   .stack {
     display: flex;
     flex-direction: column;
     gap: var(--stack-gap, var(--space-5));
   }
 
-  /* Cluster - horizontal flow that wraps */
   .cluster {
     display: flex;
     flex-wrap: wrap;
@@ -225,18 +265,219 @@
     align-items: var(--cluster-align, center);
   }
 
-  /* Grid - auto-responsive grid */
   .grid {
     display: grid;
-    gap: var(--grid-gap, var(--space-5));
+    gap: var(--grid-gap, var(--space-l) var(--space-m));
     grid-template-columns: repeat(
       auto-fit,
       minmax(min(100%, var(--grid-min, 16rem)), 1fr)
     );
   }
 
-  /* Section - consistent vertical padding */
-  .section {
+
+  /* ========================================
+     PROSE RHYTHM
+     More space above a heading than below it; figures and quotes get a
+     larger beat. Old-style figures in running text.
+     ======================================== */
+
+  .prose { font-variant-numeric: oldstyle-nums proportional-nums; }
+  .prose > * { margin-block: 0; }
+  .prose > * + * { margin-block-start: var(--flow, 1.1em); }
+  /* A chapter (h2) opens with a hairline and 1.5× the beat; a subsection
+     (h3) stays close to its chapter. The outline reads at a glance. */
+  .prose > h2 {
+    margin-block-start: calc(var(--space-xl) * 1.5);
+    padding-block-start: var(--space-m);
+    border-block-start: var(--border-width) solid var(--color-border);
+  }
+  .prose > h3 { margin-block-start: var(--space-l); }
+  .prose > :is(h2, h3, h4) + * { margin-block-start: var(--space-s); }
+  /* Top margins only: .prose is a grid, and grid items' margins add up
+     instead of collapsing (48 + 120px stacked above an h2). A block gets
+     the larger beat above it, and the text after it gets the same. */
+  .prose > :is(figure, blockquote, .pullquote, table, pre, .gallery, hr) { margin-block: var(--space-l) 0; }
+  .prose > :is(figure, blockquote, .pullquote, table, pre, .gallery) + :not(h2, h3) { margin-block-start: var(--space-l); }
+  .prose > hr { margin-block-start: var(--space-xl); }
+  /* A rule already separates: the chapter after it drops its hairline. */
+  .prose > hr + h2 { margin-block-start: var(--space-xl); border-block-start: 0; padding-block-start: 0; }
+  .prose > :first-child { margin-block-start: 0; }
+  .prose :is(p, li, dd, blockquote) { max-inline-size: var(--measure); }
+  :is(h2, h3)[id] { scroll-margin-block-start: var(--space-l); }
+
+
+  /* ========================================
+     CONTENT GRID: content, wide, full
+     Children sit in the reading column; data-bleed="wide" (or WordPress
+     .alignwide) takes the wide column, data-bleed="full" (.alignfull) the
+     whole width, its text returning to the wide column. The side and rail
+     tracks shrink to 0 on narrow screens with no media query. A wider
+     --rail moves the column off-centre and frees a start-side label track.
+     ======================================== */
+
+  .content-grid {
+    --_edge: var(--page-edge);
+    --_side: max(0rem, (var(--container-content) - var(--measure) - var(--rail)) / 2);
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns:
+      [full-start] minmax(var(--_edge), 1fr)
+      [wide-start] minmax(0, var(--rail)) [rail-end] minmax(0, var(--_side))
+      [content-start] min(var(--measure), 100% - 2 * var(--_edge)) [content-end]
+      minmax(0, var(--_side)) [wide-end]
+      minmax(var(--_edge), 1fr) [full-end];
+  }
+
+  .content-grid > * { grid-column: content; }
+
+  /* .content-grid is itself a size container, so a display headline placed
+     straight in it would fit the whole grid (the viewport), not its column. */
+  .content-grid > :is(.display, .hero__headline) {
+    font-size: var(--hero-headline-size,
+               clamp(var(--step-4), min(100cqi, var(--measure)) / var(--fit, 8), min(var(--display-max), 15svh)));
+  }
+  .content-grid > :is([data-bleed="wide"], .alignwide) { grid-column: wide; }
+
+  .content-grid > :is([data-bleed="full"], .alignfull) {
+    grid-column: full;
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  .content-grid > :is([data-bleed="full"], .alignfull) > * { grid-column: wide; }
+
+  .content-grid > :is([data-bleed="full"], .alignfull) > :is(img, picture, video) {
+    grid-column: full;
+    inline-size: 100%;
+    border-radius: 0;
+  }
+
+
+  /* ========================================
+     SECTION BANDS
+     data-bg: none or "plain" (page), "tinted" ("alt" is an alias),
+     "inverse" (the dark band; its roles live in tokens.css), "accent" (the
+     15% accent wash), "accent-strong" (solid accent; at most one a page).
+     Sections are told apart by tone, and by a rule or the section head's
+     thick rule when two plain ones meet. Never shadows, gradients or
+     rounded panels between sections.
+     ======================================== */
+
+  .section { padding-block: var(--space-section); }
+
+  /* Every band is a size container, so what sits in it (a side caption,
+     a display headline) reads the band's width with or without a .container. */
+  :is(.section, .features, .stats, .team, .testimonials, .cta) { container-type: inline-size; }
+
+  /* The section components take the band's full width and put their
+     content on the .container edges. */
+  :is(.features, .stats, .team, .testimonials) {
     padding-block: var(--space-section);
+    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
+  }
+
+  /* The band paint. Each band also sets --_band-bg, the hook a component
+     band (.cta) reads for its own background, so a band always beats the
+     component's default without a :not([data-bg]) guard. A section resets
+     it, so a nested band never inherits its parent's paint. Never put an
+     accent band next to an accent-strong one: the wash kills the punch. */
+  :is(.section, section, .cta) { --_band-bg: initial; }
+
+  :is(.section, section)[data-bg="plain"] { --_band-bg: transparent; }
+
+  :is(.section, section)[data-bg="tinted"],
+  :is(.section, section)[data-bg="alt"] {
+    --_band-bg: var(--color-surface);
+    background-color: var(--color-surface);
+  }
+
+  :is(.section, section)[data-bg="accent"] {
+    --_band-bg: var(--accent-subtle);
+    background-color: var(--accent-subtle);
+  }
+
+  /* The dark band (its roles and scheme: tokens.css). The text colour is
+     set here: inherited colour was already resolved on body. */
+  :is(.section, section)[data-bg="inverse"] {
+    --_band-bg: var(--band-inverse);
+    background-color: var(--band-inverse);
+    color: var(--color-text);
+  }
+
+  /* Solid accent, shared with .hero[data-theme="accent"]: the roles point
+     at --on-accent, and buttons invert through the --_btn-* hooks. */
+  :is(.section, section)[data-bg="accent-strong"],
+  .hero[data-theme="accent"] {
+    --color-text: var(--on-accent);
+    --color-text-muted: var(--on-accent);
+    --color-text-subtle: var(--on-accent);
+    --color-background: var(--accent);
+    --color-border: color-mix(in oklch, var(--on-accent) 40%, transparent);
+    --color-border-strong: var(--on-accent);
+    --accent-ink: var(--on-accent);
+    --color-focus: var(--on-accent);
+    /* The error red vanishes on the accent (1.1 to 2.9:1); an invalid
+       field keeps its heavy start edge (form.css) in --on-accent. */
+    --color-error: var(--on-accent);
+    --_btn-color: var(--accent);
+    --_btn-bg: var(--on-accent);
+    --_btn-bg-hover: color-mix(in oklch, var(--on-accent) 85%, var(--accent));
+    --_band-bg: var(--accent);
+    background-color: var(--accent);
+    color: var(--color-text);
+  }
+
+  /* Two plain sections in a row: the second loses its top padding. Its
+     section head's thick rule separates them; without a head, a hairline
+     on its .container does. A default .cta is painted (surface), so it is
+     not plain. Needs :has(); older browsers keep the padding. */
+  @supports selector(:has(*)) {
+    :is(.section, section):not([data-bg]:not([data-bg="plain"]), .hero, .cta:not([data-bg])) + :is(.section, section):not([data-bg]:not([data-bg="plain"]), .hero, .cta:not([data-bg])) {
+      padding-block-start: 0;
+
+      &:not(:has(:is(.section__head, .features__header, .stats__header, .team__header, .testimonials__header))) > .container {
+        border-block-start: var(--border-width) solid var(--color-border);
+        padding-block-start: calc(var(--space-section) / 2);
+      }
+    }
   }
+
+  /* A plate between two sections (a .content-grid straight in <main>)
+     keeps the section rhythm: the band's space under its caption, and a
+     plain section after it starts at the plate's edge. */
+  main > .content-grid { padding-block-end: var(--space-section); }
+  main > .content-grid + :is(.section, section):not([data-bg]:not([data-bg="plain"])) { padding-block-start: 0; }
+
+
+  /* ========================================
+     SECTION HEAD: the default strong separator
+     <header class="section__head">
+       <p class="eyebrow"><span class="section__num">02</span> Work</p>
+       <h2>Quiet things, <em>made loud</em></h2>
+       <p class="lede">One or two sentences.</p>
+     </header>
+     Start-aligned, one edge: the eyebrow over the h2 over the lede, under a
+     thick ink rule. (A label column beside the h2 gave every section two
+     start edges, the body back at the page edge under an indented lede; a
+     child theme with a rail can hang the eyebrow.) --section-rule (a hook,
+     not a knob) sets the rule's width; 0 removes it.
+     ======================================== */
+
+  :is(.section__head, .features__header, .stats__header, .team__header, .testimonials__header) {
+    display: grid;
+    row-gap: var(--space-s);
+    text-align: start;
+    border-block-start: var(--section-rule, var(--border-width-thick)) solid var(--color-border-strong);
+    padding-block-start: var(--space-s);
+    margin-block-end: var(--space-xl);
+  }
+
+  :is(.section__head, .features__header, .stats__header, .team__header, .testimonials__header) > * { margin: 0; }
+
+  :is(.section__head, .features__header, .stats__header, .team__header, .testimonials__header) h2 {
+    font-size: var(--step-3);
+    max-inline-size: 18em;
+  }
+
+  .section__num { font-variant-numeric: lining-nums tabular-nums; }
 }

package/src/fonts/OFL-newsreader.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Newsreader Project Authors (http://github.com/productiontype/Newsreader) Newsreader-Italic[opsz,wght].ttf: Copyright 2020 The Newsreader Project Authors (http://github.com/productiontype/Newsreader)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/fonts/OFL-schibsted-grotesk.txt

@@ -0,0 +1,93 @@
+Copyright 2023 The Schibsted-Grotesk Project Authors (https://github.com/schibsted/schibsted-grotesk) SchibstedGrotesk-Italic[wght].ttf: Copyright 2023 The Schibsted-Grotesk Project Authors (https://github.com/schibsted/schibsted-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/fonts/fluid-fonts.css

@@ -0,0 +1,55 @@
+/**
+ * Fluid Theme - the default type pairing (opt-in second stylesheet)
+ * Built to dist/fluid-fonts.min.css; the woff2 files go to dist/fonts/.
+ *
+ *   <link rel="preload" href="/fonts/newsreader-latin-opsz-normal.woff2"
+ *         as="font" type="font/woff2" crossorigin>
+ *   <link rel="stylesheet" href="/fluid.min.css">
+ *   <link rel="stylesheet" href="/fluid-fonts.min.css">
+ *
+ * Newsreader (display and headings; opsz 6-72, wght 200-800, true italic)
+ * over Schibsted Grotesk (text and UI; wght 400-900). Both SIL OFL 1.1
+ * (OFL-*.txt beside this file). Latin only. The italic files are fetched
+ * only when a page sets italic text in that face.
+ *
+ * The build puts the metric-matched fallback faces ("Newsreader Fallback",
+ * "Schibsted Fallback") in front of these, generated with capsize from the
+ * real font metrics: never tune them by hand. Without this file the stacks
+ * in tokens.css fall back to system serif over system sans.
+ */
+
+@font-face {
+  font-family: "Newsreader Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url("./newsreader-latin-opsz-normal.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: "Newsreader Variable";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url("./newsreader-latin-opsz-italic.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: "Schibsted Grotesk Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400 900;
+  src: url("./schibsted-grotesk-latin-wght-normal.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: "Schibsted Grotesk Variable";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400 900;
+  src: url("./schibsted-grotesk-latin-wght-italic.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;
+}

package/src/layouts/positioning.css

@@ -113,8 +113,11 @@
     text-align: center;
   }
 
+  /* min(100%, …): these layouts shrink-wrap their children, and an auto-fill
+     grid (.grid, .gallery) sizes itself from its max width, not the screen,
+     so without the 100% cap it ran ~1000px wide on a phone. */
   [data-layout="center"] > * {
-    max-inline-size: var(--content-width, var(--container-md));
+    max-inline-size: min(100%, var(--content-width, var(--container-md)));
   }
 
   /*
@@ -130,7 +133,7 @@
   }
 
   [data-layout="left"] > * {
-    max-inline-size: var(--content-width, var(--container-md));
+    max-inline-size: min(100%, var(--content-width, var(--container-md)));
   }
 
   /*
@@ -146,7 +149,7 @@
   }
 
   [data-layout="right"] > * {
-    max-inline-size: var(--content-width, var(--container-md));
+    max-inline-size: min(100%, var(--content-width, var(--container-md)));
   }
 
   /*