/* ==========================================================================
   STONEGRAPH — desktop parity on small screens
   --------------------------------------------------------------------------
   THE BRIEF, IN ONE LINE: the phone should show the laptop's page, not a
   different page that happens to contain the same words.

   What it was doing instead: every grid on the site collapsed to a single
   column somewhere between 900px and 620px, so "Four ways into the workshop"
   — four cards in a 2x2 on a laptop — became four cards stacked in a line, the
   picture-and-text features became a picture with the text under it, the
   constellation put its network above its headline instead of behind it, and
   the page ran to several times its laptop height. Four things in a row reads
   as a composition. Four things in a column reads as a list, and a page made
   of lists reads as cheap however good the type is.

   So this stylesheet puts the arrangement back. It loads last, and it does two
   things and only two:

     1. RESTORES THE COLUMNS. Every collapse rule that turned a row into a
        stack is overridden back to the shape it has on a laptop.

     2. SCALES THE TYPE TO FIT THEM. A 2x2 of cards on a 375px screen gives
        each card about 165px, and 16px body copy in 165px is four words a
        line. The root size comes down on a curve instead, so the composition
        holds and the type stays proportional to it — which is what actually
        makes a small screen look like the large one, rather than merely
        having the same number of columns.

   What is deliberately NOT forced back: the nav's own menu, the contact panel
   and its form, and the lightbox. Those are controls, not composition — a
   two-column form with 140px fields is not "the laptop look", it is a form
   nobody can fill in.
   ========================================================================== */

/* ==========================================================================
   1. THE TYPE SCALE
   --------------------------------------------------------------------------
   Everything on this site is sized in rem or in clamp() against the viewport,
   so moving the root size moves the whole page together — headings, body,
   labels, gaps and padding stay in the proportion they were designed in.

   The curve: full size at 1024px and above, and 62.5% of it at 360px, which
   is what makes a 12-column editorial grid legible on a phone at all. Below
   that it holds rather than shrinking further.
   ========================================================================== */
/* THE SHRINK IS GONE. The root is 16px on a phone, the same as everywhere.

   What was here: `clamp(13.5px, 8.6px + 1.3vw, 16px)`, which on every phone
   made in the last decade resolves to the floor — 13.5px flat. The reasoning
   above it argued 13.5px was "small but properly set", and checked that
   against body copy. It was never checked against the rest of the page, and
   the rest of the page is where this site does its labelling: a great deal of
   it is set in mono at between 0.46rem and 0.68rem, which is a deliberate,
   handsome choice at a 16px root and is not one at 13.5.

   Measured on collections.html at 375px, before this change:

     .ag-head__s, .ag-msg__k   6.75px
     .spine__label             7.16px
     .foot__head, .chan__k     7.43px
     .spec__k                  8.64px
     .toc__d                   8.91px   ("3D CNC reliefs · feature walls")
     button                   10.50px

   Seven-pixel type is not a small version of the page. It is the thing the
   whole file was written to avoid, arrived at from the other direction.

   THE OBJECTION THIS ANSWERS. The shrink was buying room for the multi-column
   compositions below — the argument being that 16px type cannot fit a grid
   held at its laptop shape. That was worth testing rather than assuming, so it
   was: every page was rendered at 375px AND at 320px with the root forced to
   16px, and `documentElement.scrollWidth` never exceeded the viewport on any
   of them. Nothing overflows. The room was not needed, so the type is not
   worth what it was costing.

   The rows that genuinely could not hold 16px type had already collapsed on
   their own — `.stats` measures two columns on a phone, not four. */
@media (max-width: 1023px) {
  html { font-size: 16px; }
}

/* The viewport-relative half of every clamp() is now doing two jobs at once —
   it shrinks with the screen AND the root size shrinks under it — so the
   largest display type would come down twice. These hold it up. */
@media (max-width: 1023px) {
  .display.d-xxl { font-size: clamp(2rem, 7.4vw, 5rem); }
  .display.d-xl  { font-size: clamp(1.7rem, 6.2vw, 3.4rem); }
  .display.d-lg  { font-size: clamp(1.5rem, 5.4vw, 2.8rem); }
  .display.d-md  { font-size: clamp(1.3rem, 4.4vw, 2.2rem); }
}

/* ==========================================================================
   2. THE EDITORIAL GRID
   --------------------------------------------------------------------------
   This is the rule that did most of the damage. Every section on the site
   places its blocks with an inline `grid-column` — `1 / span 6`, `8 / span 5`
   and so on — and below 900px a single rule threw all of them to full width
   with !important. One override, and every two-column section on every page
   became one column.
   ========================================================================== */
/* THIS RULE IS GONE, AND IT WAS THE WORST THING IN THIS FILE.

   It was:

     @media (max-width: 900px) {
       .grid > [style*="grid-column"] { grid-column: unset !important; }
       .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
     }

   overriding components.css, which says at the same width:

     .grid > [style*="grid-column"] { grid-column: 1 / -1 !important; }

   under a comment reading "Below tablet they must all collapse."

   `unset` on grid-column does not mean "full width". It reverts the property
   to `auto`, which is auto-placement — one track. The twelve tracks were kept,
   so on a 375px screen every editorial block on the site was placed in a
   column **thirteen pixels wide**.

   Measured on collections.html at 375px, before this change:

     span.display   "Bespoke murals"        27.2px type in a 13px box
     p.mono         "3D CNC stone murals..." 64 characters in a 13px box
     span.display   "Surfaces & inlays"     17 characters in a 13px box

   Text does not wrap into 13px; it overflows. So every one of those blocks
   drew itself straight over whatever was beside it, in a stack down the left
   edge, with the remaining eleven-twelfths of the row empty. That is both
   reports at once — "text coming on text", and "all the text on one side and
   the right side blank". One property.

   Removing the override lets components.css do exactly what it already says it
   does. Below 900px an editorial block is full width and blocks stack, which
   is the only thing a 375px screen can carry: a 5-of-12 column needs a 620px
   viewport before it holds a 260px measure, and this site is read on 375.

   The rest of this file stands. The grids it keeps side by side below are the
   ones with an explicit column count and an explicit minimum width, which is
   the difference between holding a composition and asserting one. */

/* ---- picture beside text, down to the width that can carry it ----
   Held side by side to 700px and stacked below it. A `span 5` text column is
   five twelfths of the viewport: 292px at 700, and 156px at 375. Three words
   a line is not the laptop's composition rendered small, it is a different and
   worse composition. Below 700 the picture goes over the words, which is the
   arrangement the page already falls back to. */
@media (min-width: 700px) and (max-width: 1000px) {
  .feature__media { grid-column: 1 / span 7; grid-row: 1; }
  .feature__text  { grid-column: 8 / span 5; grid-row: 1; }
  .feature--flip .feature__media { grid-column: 6 / span 7; grid-row: 1; }
  .feature--flip .feature__text  { grid-column: 1 / span 5; grid-row: 1; }
  .feature__stamp { position: absolute; margin-top: 0; }
}

/* ---- the four ways in, as a 2x2 ---- */
@media (max-width: 760px) {
  .ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- panels, pillars, posts, cards: rows, not stacks ---- */
@media (max-width: 900px) {
  /* A COUNT THAT FALLS OUT OF THE WIDTH, not one asserted at it.
     `repeat(3, ...)` gave each pillar 115px on a 360px screen, and
     "Technological edge" needs 124 — so the heading ran out of its own column.
     auto-fit with a 150px floor is three pillars wherever three fit and two
     where they do not, which is the same composition arriving honestly. */
  .pillars { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pillar + .pillar { border-left: 1px solid var(--rule); border-top: 0; }
  /* NOT three columns. `.hero__foot` holds exactly one child — the pair of
     hero buttons — so splitting it into thirds put both buttons in a third of
     the screen. Measured at 390px: a 101px box holding "Start a commission",
     which needs 122px, so the label ran out of its own button.
     components.css already sets one column here; it is left to do that. */
  /* Two columns of 176px and 144px, both carrying sentences. Stacked below
     620px, side by side above it. */
  .cta__inner { grid-template-columns: 1.1fr .9fr; }
}
@media (max-width: 620px) {
  .cta__inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .post { grid-template-columns: 1fr 3fr; gap: 22px; }
  .post__full { grid-column: auto; }
}
@media (max-width: 620px) {
  .process,
  .process[style*="grid-template-columns"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .process[style*="repeat(4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .stats, .markets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .process[style*="repeat(3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .process[style*="repeat(4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---- the work grid keeps its editorial spans ---- */
@media (max-width: 620px) {
  .works { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); }
  .works > .w-7 { grid-column: span 7; }
  .works > .w-5 { grid-column: span 5; }
  .works > .w-6 { grid-column: span 6; }
  .works > .w-8 { grid-column: span 8; }
  .works > .w-4 { grid-column: span 4; }
  .works > .w-12 { grid-column: span 12; }
  .works > .work:first-child,
  .works > .work:last-child { grid-column: span 12; }
}

/* ==========================================================================
   3. THE PAGES BUILT FOR THIS SITE
   ========================================================================== */
@media (max-width: 860px) {
  /* the four deep-dive pages */
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shot { --shot-h: min(46vh, 380px); }

  /* `.handoff { flex-wrap: nowrap }` WAS HERE, AND IT WAS THE LAST ONE.

     .handoff is a paragraph and a call to action, and pages.css declares it
     `display: flex; flex-wrap: wrap` precisely so the button drops below the
     writing when there is no room beside it. `nowrap` forced the two to share
     one row at every width — and the button is `flex: none`, so it never gives
     any of that row up. The paragraph got whatever was left.

     Measured on story.html at 375px: `.handoff` is 335px wide and the text
     column inside it came out at EIGHTY. "Four stages, and a piece does not
     leave the yard until the last one is signed off" was set one or two words
     to a line down an 80px ribbon, with the button beside it and the rest of
     the row empty. The same block appears on getting-it-to-you, collections
     and how-its-made, which is why it was on every screenshot.

     Removed. It wraps, as its own stylesheet always intended: the paragraph
     takes the full width and the button sits under it.

     The alignment is kept — flex-end is right while the two ARE side by side,
     and pages.css already switches to flex-start below 860 for when they are
     not. So that override goes too. */

  /* the commission layout on Where it stands */
  .cmsn__head { grid-column: 1 / span 4; }
  .cmsn__body { grid-column: 6 / span 4; }
  .cmsn__work { grid-column: 10 / span 3; }

  /* the catalogue */
  .toc__r a { grid-template-columns: 62px minmax(0, 5fr) minmax(0, 6fr) 22px; gap: 16px; }
  .toc__d { grid-column: auto; }
  .toc__go { grid-row: auto; }
  .spec__r { grid-template-columns: minmax(90px, 2fr) minmax(0, 9fr); gap: 10px 20px; }
}
@media (max-width: 1000px) {
  .cmsn__head { grid-column: 1 / span 4; }
  .cmsn__body { grid-column: 6 / span 4; }
  .cmsn__work { grid-column: 10 / span 3; }
}

/* ---- the studio page ---- */
@media (max-width: 859px) {
  .stu-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stu-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stu-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .stu-head--split .stu-head__aside { max-width: 27rem; }
  .stu-prin { grid-template-columns: 2fr 10fr; gap: 40px; }
  .stu-area { grid-template-columns: 2fr 10fr; gap: 40px; }
  .stu-track::before { left: calc(16.666% - .5px); }
  .stu-area__mark::before { left: auto; right: -7.5px; }
  .stu-dept { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 64px); }
  .stu-dept--flip .stu-dept__fig { order: 2; }
  .stu-dept--flip .stu-dept__txt { order: 1; }
  .stu-countries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stu-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}
@media (max-width: 639px) {
  .stu-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stu-stats { flex-direction: row; justify-content: center; gap: clamp(18px, 6vw, 48px); }
  .stu-stat__bar { display: block; }
  .stu-hero__sig { display: flex; }
  .stu-hero__grid { display: block; }
}

/* ==========================================================================
   4. THE CONSTELLATION
   --------------------------------------------------------------------------
   The phone was given a layout of its own: the network in a tall band with the
   headline BELOW it. That is the thing the brief calls out by name — the
   images ended up on top and the words underneath, and the section lost the
   one idea it exists to carry, which is the words standing inside the network.

   The stacking is undone here and the section keeps the laptop's composition
   at every width. The script's own breakpoint is moved to match (see
   constellation.js), so the wide 1440-unit layout is the one being solved.
   ========================================================================== */
@media (max-width: 860px) {
  .cn {
    display: grid;
    align-items: center;
    min-height: clamp(420px, 62vh, 820px);
  }
  .cn__stage {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    grid-area: 1 / 1;
  }
  .cn__inner {
    grid-area: 1 / 1;
    /* Narrower than the section, and that is the whole trick.

       On a laptop the words occupy 560 of 1440 units — 39% — and the network
       lives in the 30% of clear ground either side of them. Given the full
       width the block leaves no side margins at all, the solver has nowhere
       legal to put a plate, and twenty-five of them end up back on the
       headline. Held to two thirds, the phone gets the same proportion the
       laptop has and the same composition falls out of it. */
    max-width: 68%;
    margin-inline: auto;
    padding: clamp(14px, 3.5vh, 40px) 0;
  }
}
@media (max-width: 620px) {
  /* Narrower still on a phone, and the number is not arbitrary: the widest
     label on the canvas is "Architectural elements" at about 79px, and it has
     to fit in the margin beside the words or the solver has nowhere legal to
     put it — which is exactly where it kept ending up, half over the
     standfirst. 56% of 375px leaves 82px each side. The label fits, and the
     clearing holds. */
  .cn__inner { max-width: 56%; }
  .cn__title { font-size: clamp(1.15rem, 5.6vw, 2.6rem); }
  .cn__sub { font-size: clamp(.86rem, 3.3vw, 1rem); max-width: 34ch; }
  .cn__act { margin-top: clamp(14px, 3vw, 30px); }
  .cn__act .btn { padding: 10px 16px; font-size: .58rem; }
  .cn__inner::before { display: block; }
  /* The label size is NOT set here. It is written onto each <text> by
     constellation.js, because the offset between a label's two lines has to be
     computed from the same number — set here, the stylesheet moved the type
     and left the line spacing behind, and every hub printed its second word on
     top of its first. */
}

/* ==========================================================================
   5. WHAT STAYS A COLUMN
   --------------------------------------------------------------------------
   Controls, not composition. A form field at 140px is not the laptop look.
   ========================================================================== */
@media (max-width: 900px) {
  .form { grid-template-columns: 1fr; }
  .field--full { grid-column: 1 / -1; }
  .panel__card { grid-template-columns: 1fr; }
}


/* ==========================================================================
   6. HOW MANY COLUMNS A PHONE CAN ACTUALLY CARRY
   --------------------------------------------------------------------------
   Holding every row at its laptop count put three cards across a 375px screen
   at 98px each. Ninety-eight pixels is about eight characters a line: the
   composition survived and the writing did not.

   So the rule is not "the same number of columns", it is "the same idea": a
   row of things, side by side, in a grid — never a stack. Four-up and three-up
   come down to two-up on a phone, which is the widest column that still reads
   as an arrangement rather than as a list, and is what makes room for type at
   a size somebody can read.
   ========================================================================== */
@media (max-width: 620px) {
  .stu-grid3,
  .trio,
  .stu-countries { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .process,
  .process[style*="grid-template-columns"],
  .process[style*="repeat(3"],
  .process[style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .stats, .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar:nth-child(odd) { border-left: 0; }

  /* The commission layout: the heading takes the width, the account and the
     specification sit beside each other under it. */
  .cmsn__head { grid-column: 1 / -1; }
  .cmsn__body { grid-column: 1 / span 7; }
  .cmsn__work { grid-column: 8 / span 5; }

  /* Three short figures stay three: they are a number and two words each. */
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The process cards keep two columns, but not 30px of padding each side of
     them. At 375px the column is 167px and the card's own padding was taking
     60 of it, leaving 127px for a sentence. The padding comes down with the
     column, the way everything else here does. */
  .proc { padding: 20px 16px; }

  /* The contents rows drop their description column rather than squeezing it
     — the collection name and its number are what the row is for. */
  .toc__r a { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 12px; }
  .toc__d { display: none; }

  /* THE FEATURE SPLIT IS GONE HERE TOO, and this was the copy that mattered.

     There were two of these blocks. The one higher up in this file was already
     narrowed to a 700px floor; this one is inside `max-width: 620px` and so it
     is the one that was actually running on a phone, six tracks to the picture
     and six to the words.

     Six of twelve at 375px is 160px. Measured: `.feature__text` 160px wide,
     `.feature__media` 160px beside it. A paragraph set in 160px is three words
     a line, and the picture next to it is a thumbnail — which is neither the
     laptop's composition nor a usable phone one. "The widest useful ratio" was
     the right instinct applied below the width where any ratio is useful.

     components.css stacks them at 900px and is left to. The picture goes over
     the words, full width, which is what every one of these blocks was
     designed to fall back to. */
}


/* ==========================================================================
   7. iOS AND ANDROID
   --------------------------------------------------------------------------
   The site was already careful about most of this — safe-area insets on the
   fixed call bar, -webkit-text-size-adjust pinned at 100% so iOS cannot
   inflate the type and undo the scale above, touch-action on the controls.
   What is left is the handful of things that only show up on a real handset.
   ========================================================================== */

/* `svh` is the unit that means "the viewport with the toolbars showing", and
   it is what stops a full-height hero being taller than the screen on a
   phone. Safari only learned it in 15.4, so the older unit is declared first
   and overridden — a browser that does not understand the second line keeps
   the first and gets a hero that is merely a little tall. */
.hero, .stu-hero {
  min-height: 100vh;
  min-height: 100svh;
}

/* Momentum scrolling inside anything that scrolls on its own, and a stop on
   the rubber-band chaining that lets a scrolled-to-the-end overlay start
   dragging the page behind it. */
.lb, .panel, .nav__links {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Tapping should never wait for a double-tap-to-zoom that this layout does not
   use, and never leave a grey flash behind. */
a, button, .btn, .stu-btn, .way, .piece, .toc__r a, .ilink, .stu-way {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* An entrance is a gesture, not a hover state, so the touch device gets the
   same one. What it does not get is the pointer-driven lift, which on a
   touchscreen fires on tap and reads as the card flinching away from the
   finger. */
@media (hover: none) and (pointer: coarse) {
  .stu-card:hover,
  .way:hover { transform: none; }
  .stu-card:active { transform: translate3d(0, -2px, 0); transition: transform .2s ease-out; }

  /* Android Chrome and iOS Safari both re-composite a backdrop-filter on every
     frame of a scroll. There are enough of them on a long page to cost real
     frames, and the entrance animations are what drops first. */
  .piece__more { backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* ==========================================================================
   8. THE TWO HEROES
   --------------------------------------------------------------------------
   A hero headline is the one place where holding the laptop's proportion is
   wrong. Every other clamp on this site is a body of text that has to stay
   readable; a headline standing alone on a dark full-height screen has to
   carry the screen, and 23px does not. These are set against the viewport
   rather than the root so they scale with the phone, not with the type ramp.
   ========================================================================== */
@media (max-width: 620px) {
  .stu-hero__h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .18em;
    width: min(100%, 350px);
    font-size: clamp(1.95rem, 8vw, 2.25rem);
    line-height: 1.16;
  }
  .stu-hero__h1 br { display: none; }
  .stu-hero__h1 > span,
  .stu-hero__h1 > em { display: block; max-width: 100%; }
  .stu-hero__sub { font-size: clamp(.72rem, 2.9vw, .84rem); letter-spacing: .16em; }
  .stu-hero__inner { padding: 118px 22px 96px; }
  .stu-hero__status { top: 74px; }
  .stu-pill { font-size: .68rem; padding: 6px 12px; }
  .stu-btn { padding: 12px 20px; font-size: .82rem; }

  /* The section rhythm: a laptop's 160px of air above a band is a quarter of a
     phone screen spent on nothing. Kept generous, not vast. */
  .stu-sec { padding: clamp(56px, 13vw, 160px) 0; }
  .stu-wrap, .stu-wrap--narrow { width: min(1180px, 100% - 36px); }
}


/* ==========================================================================
   9. THE FLOOR UNDER THE SMALL LABELS
   --------------------------------------------------------------------------
   Restoring the root to 16px fixes most of the page at a stroke. It leaves one
   family behind: the mono, uppercase, letter-spaced labels this site labels
   everything with. Sixty rules set one, between 0.46rem and 0.71rem — 7.4px to
   11.4px — chosen against a laptop, where a label sits beside type ten times
   its size and reads as a caption rather than as text.

   THIS DOES NOT INVENT A SIZE. components.css already answered this question,
   in a block called SMALL-SCREEN LEGIBILITY: at 720px and below, mono labels
   go to 0.82rem with 0.13em of tracking, "so mono labels are still legible at
   phone arm's length". That decision is right and it stands. The trouble is
   that it is written as one long list of single-class selectors, so anything
   the site addresses more specifically — `.foot__col .foot__head` at two
   classes in site.css — simply beat it and kept the desktop size. The block
   was correct and could not reach.

   So the same 29 selectors are restated here at their real specificity,
   and the remaining 30 — which that block never listed — get a plain
   11px floor. `max()` either way, so anything already large enough is left
   exactly as it is.

   The list is DERIVED, not written: every rule in site.css, components.css,
   pages.css, art.css, studio.css and constellation.css setting a font-size
   under 0.72rem. Not a judgement about which labels matter — all of them, so
   none can be missed and none can drift back.

   .stu-plate__cap is left alone: studio.css sets it to 9px at 620px
   deliberately, because the plate it sits in is 136px wide on a phone and
   the caption has to fit inside it.

   TRUE DESKTOP IS UNTOUCHED, and the boundary is 1023px rather than 760.
   760 was the first choice and it left a hole: a 768px tablet sat above the
   query and below the laptop, so it kept the root at 16px and got the
   DESKTOP label sizes — thirty elements under 10.4px on collections.html
   alone, which is the same complaint one screen size along. 1023 is the
   width the rest of this file already treats as "not a laptop", so the
   floor ends where everything else here ends. At 1024 the design is the
   design.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Already decided by components.css — restated so it can win. */

  .piece__m { font-size: max(0.82rem, 0.46rem); letter-spacing: 0.13em; }

  .brand__sub { font-size: max(0.82rem, 0.5rem); letter-spacing: 0.13em; }

  .pcard__badge { font-size: max(0.82rem, 0.53rem); letter-spacing: 0.13em; }

  /* The lineage strip is the one place this floor did not fit its own words.
     Three columns under the hero headline are 112px each on a 375px screen,
     which leaves 96px of text box. At 0.82rem with 0.13em of tracking that is
     9.6px a character, so eleven characters need 105px — and the strip has two
     eleven-character words in it. ENTERPRISES and ESTABLISHED broke mid-word:

         KUMAWAT
         ENTERPRISE
         S
         ESTABLI
         SHED

     which reads as a page that has come apart. The type stays well above the
     11px this floor exists to hold; it gives back a little of the tracking
     instead, which at this size was the part costing the most and buying the
     least. Only the strip, and only where the columns are genuinely narrow. */
  .specs__l { font-size: max(0.82rem, 0.54rem); letter-spacing: 0.13em; }

  .card__k { font-size: max(0.82rem, 0.55rem); letter-spacing: 0.13em; }

  .card__no { font-size: max(0.82rem, 0.55rem); letter-spacing: 0.13em; }

  .cdl__k { font-size: max(0.82rem, 0.55rem); letter-spacing: 0.13em; }

  .feature__stamp .mono { font-size: max(0.82rem, 0.55rem); letter-spacing: 0.13em; }

  .foot__col .foot__head { font-size: max(0.82rem, 0.55rem); letter-spacing: 0.13em; }

  .form__note { font-size: max(0.82rem, 0.55rem); letter-spacing: 0.13em; }

  .pcard__meta { font-size: max(0.82rem, 0.55rem); letter-spacing: 0.13em; }

  .post__tag { font-size: max(0.82rem, 0.55rem); letter-spacing: 0.13em; }

  .work__meta { font-size: max(0.82rem, 0.55rem); letter-spacing: 0.13em; }

  .market__d { font-size: max(0.82rem, 0.56rem); letter-spacing: 0.13em; }

  .pillar__i { font-size: max(0.82rem, 0.56rem); letter-spacing: 0.13em; }

  .plate__tag { font-size: max(0.82rem, 0.56rem); letter-spacing: 0.13em; }

  .proc__k { font-size: max(0.82rem, 0.56rem); letter-spacing: 0.13em; }

  .field label { font-size: max(0.82rem, 0.57rem); letter-spacing: 0.13em; }

  .phead__crumb { font-size: max(0.82rem, 0.57rem); letter-spacing: 0.13em; }

  .stat__l { font-size: max(0.82rem, 0.57rem); letter-spacing: 0.13em; }

  .lb__count { font-size: max(0.82rem, 0.58rem); letter-spacing: 0.13em; }

  .post__n { font-size: max(0.82rem, 0.6rem); letter-spacing: 0.13em; }

  .proc__list li { font-size: max(0.82rem, 0.6rem); letter-spacing: 0.13em; }

  .tl__yr { font-size: max(0.82rem, 0.62rem); letter-spacing: 0.13em; }

  .nav__link { font-size: max(0.82rem, 0.63rem); letter-spacing: 0.13em; }

  .tlink { font-size: max(0.82rem, 0.64rem); letter-spacing: 0.13em; }

  .btn { font-size: max(0.82rem, 0.66rem); letter-spacing: 0.13em; }

  .ticker__item { font-size: max(0.82rem, 0.66rem); letter-spacing: 0.13em; }

  .piece__below .piece__m { font-size: max(0.82rem, 0.7rem); letter-spacing: 0.13em; }



  /* Never listed there. Eleven pixels, which is the floor for

     uppercase mono carrying the tracking these already have. */

  .ag-head__s { font-size: max(11px, 0.5rem); }

  .ag-msg__k { font-size: max(11px, 0.5rem); }

  .ag-note { font-size: max(11px, 0.5rem); }

  .chan__k { font-size: max(11px, 0.5rem); }

  .piece__more { font-size: max(11px, 0.5rem); }

  .works > .work:not(:first-child):not(:last-child) .work__s, .works > .w-5 .work__s { font-size: max(11px, 0.52rem); }

  .spine__label { font-size: max(11px, 0.53rem); }

  .ag-chip { font-size: max(11px, 0.55rem); }

  .chan__addr-go { font-size: max(11px, 0.55rem); }

  .foot__bottom p, .foot__legal a, .foot__legal span { font-size: max(11px, 0.55rem); }

  .frame__note { font-size: max(11px, 0.55rem); }

  .ag-launch__t { font-size: max(11px, 0.56rem); }

  .callbar__btn { font-size: max(11px, 0.58rem); }

  .btn--nav { font-size: max(11px, 0.6rem); }

  .cn__eyebrow { font-size: max(11px, 0.6rem); }

  .foot__hours { font-size: max(11px, 0.6rem); }

  .way__go { font-size: max(11px, 0.6rem); }

  .stu-hero__sig p { font-size: max(11px, 0.62rem); }

  .stu-stat__l { font-size: max(11px, 0.62rem); }

  .stu-way__k { font-size: max(11px, 0.62rem); }

  .cwork__k { font-size: max(11px, 0.64rem); }

  .spec__k { font-size: max(11px, 0.64rem); }

  .shot__cap { font-size: max(11px, 0.66rem); }

  .toc__d { font-size: max(11px, 0.66rem); }

  .stu-eyebrow-row .stu-key { font-size: max(11px, 0.68rem); }

  .stu-key { font-size: max(11px, 0.68rem); }

  .stu-work__m { font-size: max(11px, 0.68rem); }

  .ilink { font-size: max(11px, 0.7rem); }

  .latest__m { font-size: max(11px, 0.7rem); }

  .toc__n { font-size: max(11px, 0.7rem); }



  /* Set in px rather than rem, so the sweep above did not see it —

     and its own comment says it is 'deliberately identical to

     .foot__head', which the block above lifts. It follows. */

  .fadr__k { font-size: 0.82rem; letter-spacing: 0.13em; }

}


/* ==========================================================================
   10. NO WORD LARGER THAN ITS OWN COLUMN
   --------------------------------------------------------------------------
   Everything above makes columns wide enough for the writing in them. This is
   the guard for the case that survives it: a single word longer than whatever
   column it lands in.

   "Technological" sets at 124px in the pillar heading. On a 360px screen the
   pillar column is 160px and the card's own padding takes 44 of that, so the
   word had 116px and overflowed its box by eight — printing over the card
   beside it. Nothing about the grid was wrong; the word was simply bigger than
   the space, which no amount of column arithmetic prevents for every string
   somebody might type into the panel tomorrow.

   `break-word` only acts when a word would otherwise overflow, so ordinary
   text is untouched and this costs nothing anywhere it is not needed. It is
   the difference between a rare ugly hyphenation and a permanent overlap.
   ========================================================================== */
@media (max-width: 1023px) {
  h1, h2, h3, h4, p, li, a, span, figcaption, dd, dt, .mono, .eyebrow,
  .pillar__t, .card__t, .piece__t, .post__t, .toc__t, .stu-work__t {
    overflow-wrap: break-word;
  }

  /* And the pillar gets its padding back in proportion. 22px each side out of
     a 160px column is more than a quarter of the card spent on air, which is
     right at 300px and wrong at 160. */
  .pillar { padding-left: 14px; padding-right: 14px; }
}

/* ========================================================================== 
   CONTENT-FIRST SMALL-SCREEN GEOMETRY
   --------------------------------------------------------------------------
   A desktop column count is not a desktop composition once each text measure
   is only 130–170px wide. Counts below are derived from a minimum readable
   measure: cards wrap to the next row before prose becomes a vertical ribbon,
   and an odd final card expands instead of leaving a blank third of the grid.
   ========================================================================== */
@media (max-width: 859px) {
  .stu-grid3,
  .stu-grid2,
  .stu-panel__grid,
  .stu-dept,
  .ways__grid,
  .trio,
  .pillars,
  .process,
  .process[style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }

  .stu-head--split {
    flex-direction: column;
    align-items: flex-start;
  }

  .stu-head--split .stu-head__aside { max-width: 42rem; }
  .stu-prin,
  .stu-area { grid-template-columns: 1fr; gap: 14px; }
  .stu-track::before { left: 7px; }
  .stu-area__mark::before { right: auto; left: 0; }

  .stu-countries {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  }

  /* Three long-form cards become two readable columns on a tablet. Let the
     final card use the whole second row instead of leaving a dead half-row. */
  .stu-grid3 > :last-child:nth-child(odd),
  .ways__grid > :last-child:nth-child(odd),
  .trio > :last-child:nth-child(odd),
  .pillars > :last-child:nth-child(odd),
  .process > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .cmsn__head,
  .cmsn__body,
  .cmsn__work {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .ways__grid,
  .trio,
  .pillars,
  .post,
  .stu-grid3,
  .stu-grid2,
  .stu-panel__grid,
  .stu-dept,
  .stu-ways {
    grid-template-columns: minmax(0, 1fr);
  }

  .process,
  .process[style*="grid-template-columns"],
  .process[style*="repeat(3"],
  .process[style*="repeat(4"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .stats,
  .markets,
  .stu-countries {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  }

  .works {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .works > .work,
  .works > .w-4,
  .works > .w-5,
  .works > .w-6,
  .works > .w-7,
  .works > .w-8,
  .works > .w-12,
  .works > .work:first-child,
  .works > .work:last-child {
    grid-column: auto !important;
  }

  .stu-dept--flip .stu-dept__fig,
  .stu-dept--flip .stu-dept__txt { order: initial; }

  .stu-stats {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 18px;
  }
  .stu-stat__bar { display: none; }

  .stu-card {
    min-width: 0;
    padding: clamp(20px, 6vw, 26px);
  }
}


/* ==========================================================================
   THE LINEAGE STRIP FITS ITS OWN WORDS
   See the note beside .specs__l in the legibility floor above. This has to sit
   after that rule rather than in components.css, because parity.css is the
   last stylesheet the page loads and its floor would otherwise win.
   ========================================================================== */
@media (max-width: 620px) {
  .specs__l {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    /* A word that still cannot fit breaks at a character rather than pushing
       the column into its neighbour — but at this size none of them does. */
    overflow-wrap: break-word;
  }
  /* The last column has no rule beside it to separate from, so its right
     gutter was ten of the ninety-six pixels spent on nothing. */
  .specs__item:last-child { padding-right: 0; }
}