/* ──────────────────────────────────────────────────────────────────────────
   THE HOUSE TYPE SCALE — her word, 9 Oct 2026:
   "all the changes you saw sa index.html in terms of sizing, iapply mo ang
    reference for desktop, pad and mobile. Sync althrought even in sa admin,
    hub, journal, forum, shop."

   Every number below was read off the home page after she sized it piece by
   piece on all three screens. Nothing here is invented: these are the steps
   she actually used, counted up and given names, so the rest of the house can
   be set to the same ladder instead of each room guessing.

   Where her numbers came from (desktop / pad / phone):
     display  150 / 100 / 100   "WEAR WHAT / YOU STAND FOR"
     hero     100 /  75 /  50   the Community and Final headlines
     h1        75 /  50 /  35   "Types & colors"
     h2        50 /  30 /  25   "Dutertismo is not a slogan,"
     h3        35 /  25 /  25   the six cut names, the manifesto lines
     h4        25 /  20 /  20   "— a culture you belong to"
     lede      20 /  20 / 17.5  the manifesto pull quote
     mid     17.5 / 17.5 / 17.5 the prices
     body      15 /  15 /  15   every paragraph, sub and blurb she touched
     small     12 /  12 /  12   the buttons, the labels, the copyright line
     tiny      12 /  10 / 7.5   the small print, already settled by her
                                earlier that day — left exactly as it was.

   Two rooms, one ladder. A poster reads at the top of the ladder; a tool reads
   at the bottom. So the dashboards, Studio and the hub take the interface
   steps (--t-ui-*) — the same numbers, lower down — because a shop heading at
   75px would be a wall in a room full of tables. The steps are hers; which
   step a room stands on is the only choice made here.

   How it applies:
     · The plain element rules carry no class, so every rule a section of hers
       already has beats them. Her designed sections and every size she set by
       hand stay exactly as they are; only text nobody had styled follows the
       ladder.
     · A room that should follow it outright carries class="ts-house" (and
       class="ts-ui" for a tool), and loads this file last so it wins.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --t-display: 150px;
  --t-hero: 100px;
  --t-h1: 75px;
  --t-h2: 50px;
  --t-h3: 35px;
  --t-h4: 25px;
  --t-lede: 20px;
  --t-mid: 17.5px;
  --t-body: 15px;
  --t-small: 12px;
  /* The smallest words keep the number she settled earlier the same day:
     12px on a desktop, 10px on a pad, 7.5px on a phone. It is declared here
     too, with the same values the shop declares, so a room that never loads
     the shop's stylesheet — the journal, the forum — still has it. */
  --tiny: 12px;
  --t-tiny: var(--tiny);

  /* the same ladder, read from lower down, for the rooms that are tools */
  --t-ui-h1: var(--t-h3);
  --t-ui-h2: var(--t-h4);
  --t-ui-h3: var(--t-lede);
  --t-ui-h4: var(--t-mid);

  --t-lh: 1.55;          /* her body text reads at 15px; it needs the air */
  --t-lh-tight: 1.1;     /* and a headline does not */
}

@media (max-width: 1024px) {
  :root {
    --t-display: 100px; --t-hero: 75px; --t-h1: 50px; --t-h2: 30px;
    --t-h3: 25px; --t-h4: 20px; --t-lede: 20px;
    --tiny: 10px;
  }
}
@media (max-width: 700px) {
  :root {
    --t-display: 100px; --t-hero: 50px; --t-h1: 35px; --t-h2: 25px;
    --t-h3: 25px; --t-h4: 20px; --t-lede: 17.5px;
    --tiny: 7.5px;
  }
}

/* ---------------------------------------------- the ladder, for plain text
   No class anywhere in these selectors, on purpose: anything a section of
   hers already styles wins without a fight. */
body { font-size: var(--t-body); line-height: var(--t-lh); }
p, li, dd, dt, td, th, blockquote { font-size: var(--t-body); }
h1 { font-size: var(--t-h1); line-height: var(--t-lh-tight); }
h2 { font-size: var(--t-h2); line-height: var(--t-lh-tight); }
h3 { font-size: var(--t-h3); line-height: 1.2; }
h4 { font-size: var(--t-h4); line-height: 1.25; }
h5 { font-size: var(--t-lede); }
h6 { font-size: var(--t-mid); }
button, input, select, textarea, label { font-size: var(--t-small); }
small, figcaption { font-size: var(--t-tiny); }

/* ------------------------------------------- a room that follows it outright
   The shop's other pages, the journal and the forum: pages read top to bottom.

   `:not([data-sec] *)` keeps every designed section out of it. Those sections
   are hers — she sized them piece by piece on all three screens — and the
   ladder has no business inside them. It is the pages built out of plain
   furniture (the grid, a product, the cart, the checkout, a journal post) that
   follow it. Anything she sized by hand is written on the element itself, so
   it wins over all of this regardless. */
.ts-house, body/* What the ladder does NOT reach: a designed section of hers, and the page's own
   furniture. The header, the footer, the announcement and the sub-menu are
   chrome — their sizes were chosen for what they are, and the ladder had been
   turning the footer's 12px mono labels into 35px headings ever since it went
   in (10 Oct 2026). Anything she has sized by hand is written on the element
   itself and wins over all of this regardless.
   The Privacy Policy is left out too: its small writing, the navy heading boxes
   and the title box were set by her on 6 Oct, and the ladder had been blowing
   them up to 15 / 50 / 75px (her word, 14 Oct 2026). */
.ts-house, body.ts-house { font-size: var(--t-body); line-height: var(--t-lh); }
.ts-house h1:not([data-sec] *, .site-head *, .site-foot *, .announce *, .subnav *, .typewriter *, .page:has(.typewriter) > h1, .page[data-page="payments"] > h1, .page[data-page="shipping"] > h1, .status:has(.track-form) > h1, .checkout .co-form > h1) { font-size: var(--t-h1); line-height: var(--t-lh-tight); }
.ts-house h2:not([data-sec] *, .site-head *, .site-foot *, .announce *, .subnav *, .typewriter *) { font-size: var(--t-h2); line-height: var(--t-lh-tight); }
.ts-house h3:not([data-sec] *, .site-head *, .site-foot *, .announce *, .subnav *, .typewriter *) { font-size: var(--t-h3); line-height: 1.2; }
.ts-house h4:not([data-sec] *, .site-head *, .site-foot *, .announce *, .subnav *, .typewriter *) { font-size: var(--t-h4); }
.ts-house :is(p, li, dd, dt, td, th, blockquote):not([data-sec] *, .site-head *, .site-foot *, .announce *, .subnav *, .typewriter *) { font-size: var(--t-body); }
.ts-house :is(.lede, .excerpt, .sub):not([data-sec] *, .site-head *, .site-foot *, .announce *, .subnav *, .typewriter *) { font-size: var(--t-lede); }
.ts-house :is(small, figcaption, .meta, .tiny, .kicker):not([data-sec] *, .site-head *, .site-foot *, .announce *, .subnav *, .typewriter *) { font-size: var(--t-tiny); }

/* ------------------------------------------------------- a room that is a tool
   The dashboards, Studio, the hub: the same numbers, further down the ladder,
   so a table stays a table. */
.ts-ui, body.ts-ui { font-size: var(--t-body); line-height: var(--t-lh); }
.ts-ui h1 { font-size: var(--t-ui-h1); line-height: 1.2; }
.ts-ui h2 { font-size: var(--t-ui-h2); line-height: 1.25; }
.ts-ui h3 { font-size: var(--t-ui-h3); }
.ts-ui h4, .ts-ui h5 { font-size: var(--t-ui-h4); }
.ts-ui p, .ts-ui li, .ts-ui dd, .ts-ui dt, .ts-ui td, .ts-ui th,
.ts-ui label, .ts-ui input, .ts-ui select, .ts-ui textarea, .ts-ui button {
  font-size: var(--t-body);
}
.ts-ui small, .ts-ui .muted, .ts-ui .hint, .ts-ui .tiny, .ts-ui .kicker,
.ts-ui th { font-size: var(--t-small); }