/* SHARED CHROME FOR THE THREE LEGAL PAGES (slice 11, 2026-08-16).
   Authored once here instead of three times in three <style> blocks. See
   legal-chrome.js for why this exists at all — six divergences from one cause.

   THE FOOTER MATCHES THE HOME FOOTER'S LAYOUT, not just its link set. Slice 10
   made all six footers carry the same seven links; Carlos's point was that
   these three still did not LOOK like the home footer. What actually differed,
   measured before this file existed:
       home                        these three
       .footgrid 3-col 1.1fr 1fr 1fr   a plain 3-col grid with no brand column
       .footbrand column with logo     a bare <div> with an inline-styled logo
       h2.footh headings               <h4> headings, different size/spacing
       .footlinks two-column grid      a loose stack of block anchors
       .footbase three-part rule       a .copy strip with two spans
   Those are now the same structures with the same class names, so the two
   surfaces cannot drift on shape either. */

/* ------------------------------------------------------------ page ground */
/* the two page-level rules that lived in each page's own <style> block */
body { margin: 0; background: #0a0a0a; }

/* ============================================================
   THE FOOTER WAS PAINTING OVER THE POLICY TEXT (slice 15 item 1)
   ============================================================
   THE CAUSE IS THE RUNTIME'S FULL-PAGE ASSUMPTION, not spacing and not the
   chrome being "out of the flow". support.js boot() appends this to <head>:

       html,body{height:100%;margin:0}
       #dc-root,#dc-root>.sc-host{height:100%}

   i.e. the page IS the app — one viewport-tall root that scrolls itself. That
   is correct for index.html, whose every screen lives inside the root. It
   became wrong the moment slice 11 mounted the nav, the crumb and the footer
   in <body> BESIDE that root, which it did deliberately so they survive a
   runtime that never boots (slice 9 found these three pages rendering blank).

   MEASURED on Privacy at 320 before this rule: body 844px, #dc-root 844px, the
   <section> inside it 2384px and overflowing VISIBLY, footer laid out at
   y=1047 — six headings and paragraphs inside the footer's box. Across the
   three pages and four widths: 1 to 9 elements overlapping every time. The
   footer sat exactly where the layout put it; the CONTENT was painting on top
   of it, because the flow believed it ended at the fold.

   So this un-clamps the root and lets the page be as tall as what is in it.
   Every selector below deliberately OUTRANKS the runtime's, because that style
   element is appended at boot and would otherwise win on source order alone:
       html:root                 (0,1,1)  beats  html,body            (0,0,1)
       html body                 (0,0,2)  beats  html,body            (0,0,1)
       body > #dc-root           (1,0,1)  beats  #dc-root             (1,0,0)
       body > #dc-root > .sc-host (1,1,1) beats  #dc-root>.sc-host    (1,1,0)
   Specificity rather than !important, so a later legitimate rule can still
   speak.

   BOTH ELEMENTS, and the first version of this rule only did BODY. That fixed
   the overlap and left <html> clamped at 844px with a 2878px body inside it,
   so the page stopped scrolling altogether: the footer's last line sat 2006px
   below the fold with nothing able to reach it. Caught by the scroll assertion
   in block 58.1 rather than by looking, which is the whole reason that
   assertion sits beside the overlap one — a page that cannot scroll has no
   overlap either, and would otherwise have read as a clean fix.

   THE COLUMN IS A STICKY FOOTER, not just `height:auto`: min-height keeps a
   SHORT page's footer at the bottom of the window instead of leaving a band of
   body background under it. The nav stays position:sticky — a flex item can be
   sticky, and the scroller is still the document. */
html:root { height: auto; min-height: 100%; }
html body {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
body > #dc-root { height: auto; flex: 1 0 auto; }
body > #dc-root > .sc-host { height: auto; }
body > .legal-nav,
body > .legal-crumb-wrap,
body > .footer { flex: 0 0 auto; }

/* THE 20px GUTTER (Director's ruling, slice 10). globals.css gives .wrap
   `padding: 0 24px`; the skin surfaces use 20px, and two wrap rules producing
   20 vs 24 on pages inside one navigation is drift, not design.

   THE FOUR GUTTER FAMILIES, recorded so nobody harmonises the rest:
       page surfaces (the skin AND these pages)   20px
       the join popup card                        37px   <- keep
       the item drawer                            52px collapsed / 69 open
   The two card values are measured from the CARD's own left edge rather than
   the page's — a different measurement against a different origin. */
.wrap { padding-left: 20px; padding-right: 20px; }

/* ---------------------------------------------------------------- masthead */
.legal-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.legal-nav .wrap {
  display: flex;
  align-items: center;
  /* WRAPS RATHER THAN CLIPS. At 320 in the FALLBACK face the brand and the
     back link together want more than the 280px of usable width, and the
     project has already paid twice for a breakpoint set from the loaded-font
     measurement. Letting the row wrap means neither state depends on a font
     file arriving. */
  flex-wrap: wrap;
  gap: 4px 16px;
  min-height: 72px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* BACK TO THE SHOP — top right, matching .caterpage-back on the franchise,
   about and gallery pages. Authored again here rather than shared because
   .caterpage-back is scoped inside .skin-home, which these pages are not in;
   the values are copied deliberately so the two read as one control.
   margin-left:auto pins it to the right of whatever the brand measures. */
.legal-back {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  /* the padding is cancelled on the right so the link's INK, not its tap box,
     lines up with the gutter the rest of the page uses */
  margin-right: -14px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #E8B23A;
  text-decoration: none;
}
.legal-back:hover { color: #FFD98A; }
/* THE MASTHEAD CARRIES THE BADGE, THE WORDMARK AND THE WAY BACK. No Order Now,
   still, by slice 11's ruling: nobody orders a burger from a privacy policy.
   Back to the shop is a different thing — it is the exit, the same control the
   franchise, about and gallery pages have carried since slice 7 — and Carlos
   asked for it here in slice 15. Removing the ORDER button is still what took
   the 74px of overflow off this row at 320. */

/* ------------------------------------------------------------------- brand */
.legal-nav .logo,
.footer .logo {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  color: #FFF8EC;
  text-decoration: none;
}
.legal-nav .logo .mark,
.footer .logo .mark {
  display: block;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
}
/* .word is a SPAN so SMASH and TIME are one flex item. A bare text node beside
   the <b> makes them two, and the 11px gap paints between them — the exact
   "SMASH TIME" defect slice 10 fixed. */
.legal-nav .logo .word,
.footer .logo .word {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}
.legal-nav .logo b,
.footer .logo b { color: #C8322A; font-weight: 400; }
.legal-nav .logo:focus-visible,
.footer a:focus-visible { outline: 3px solid #E8B23A; outline-offset: 3px; }

/* ------------------------------------------------------------------ footer */
.footer {
  background: #0E0B09;
  color: #E9E4DA;
  border-top: 1px solid rgba(233, 228, 218, 0.1);
  padding: 54px 0 0;
  margin-top: 64px;
}
.footer .wrap { max-width: 1100px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
/* THE SAME TWO GEOMETRIES AS THE HOME FOOTER (slice 15 item 3) — the whole
   point of this file is that the two surfaces cannot drift on shape, so the
   arrangement and the reasoning live in home-additions.css and the values are
   mirrored here. `auto` on the third track is what stops the link block being
   squeezed into a wrap. */
.footgrid {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 40px;
}
.footgrid > * { align-content: start; }
.footbrand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.foottag { margin: 0; font-family: var(--body); font-size: 0.95rem; line-height: 1.6; color: #A8A6A2; }
/* the heads share a first-line box with the brand's 44px logo, so all three
   column headings sit on one baseline without a hard-coded height */
.footh,
.footbrand .logo {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin: 0;
}
.footh {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #E9E4DA;
}
.footaddr { display: flex; flex-direction: column; gap: 6px; font-style: normal; }
.footaddr-line { display: block; font-family: var(--body); font-size: 0.95rem; line-height: 1.6; color: #A8A6A2; }
.footaddr-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: #E9E4DA;
  text-decoration: none;
}
.footaddr-tel:hover { color: #E8B23A; }

/* THE LINK BLOCK HAS A DELIBERATE SHAPE (slice 11 item 3). It was a two-column
   grid with the long Instagram label spanning both, which produced a 1/2/2/1
   staircase — Instagram alone, two pairs, then Accessibility alone on its own
   row. Measured natural label widths: Instagram 185.34, Franchise 140.42,
   Join 110.64, Privacy 100.42, Accessibility 90.53, SMS 82.23.
   The shape chosen is THREE ROWS BY TWO COLUMNS, filled COLUMN-FIRST, so the
   three widest labels take the left column and the three narrowest the right:
       Instagram        Privacy Policy
       Join the VIP     SMS Terms
       Franchise        Accessibility
   Column widths are content-sized (185.34 + 100.42 + 18 = 303.76px), which
   fits every footer column at 360 and up. Nothing is centred, nothing spans,
   and every row holds exactly two. */
.footlinks {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 18px;
  justify-content: start;
}
.footlinks a {
  display: block;
  min-height: 44px;
  padding: 10.5px 0;
  box-sizing: border-box;
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #E9E4DA;
  text-decoration: none;
}
.footlinks a:hover { color: #E8B23A; }

.footbase {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 40px;
  padding-top: 20px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(233, 228, 218, 0.1);
}
.footbase p { margin: 0; font-family: var(--body); font-size: 0.8rem; color: #8A7F70; }

/* § 17-195.1, THE SAME LINE AS index.html's, AND IT NEEDS ITS OWN RULE HERE.
   These three pages never load home.css, so the rule that makes this line the
   footer's body size cannot reach them by TWO independent routes: that
   stylesheet is not linked at all, and the runtime-built footer has no
   .skin-home ancestor either. Either one alone would be enough to break it.

   Without this rule the line falls through to `.footbase p` directly above and
   ships as the copyright's small print - measured 2026-09-13 on all three
   pages at iPhone 14: 12.80px in #8A7F70, which is 5.00:1 on the #0E0B09
   ground. That is a link the statute requires be posted "conspicuously",
   rendered smaller and fainter than every other line in the footer.

   The values MIRROR .footlinks a (0.95rem / #E9E4DA, measured 15.48:1) rather
   than being chosen here, for the reason this whole file exists: the two
   footers must not drift on shape or on treatment.

   `flex: 1 0 100%` gives it its own row. As a third item in this wrapping
   strip it would land between the copyright and "Tell us how we did" and read
   as a third piece of small print - the same arrangement, and the same
   reasoning, as the home rule.

   SPECIFICITY IS THE WHOLE TRICK HERE: `.footbase p` is (0,1,1) and sets
   font-size, so a bare `.foothealth` (0,1,0) would LOSE to it and this rule
   would never paint a pixel. Written at (0,2,0) on purpose - the same
   selector-form trap this project graduated for the footer clearance, one
   property along. */
.footbase .foothealth {
  flex: 1 0 100%;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #E9E4DA;
}
/* ⚠️ display:inline IS LOAD-BEARING, AND IT IS THE HOME PAGE'S OWN TREATMENT.
   globals.css carries a base rule `footer p, footer a { display: block }` which
   the .dc pages load and the home skin does not - so the SAME markup is an
   inline link inside a sentence on index.html and a full-width block here.
   Measured at iPhone 14: 315.31x19 inline on index.html, 350x27.95 block on
   /Privacy.dc.html.

   That drift is a real defect, not a cosmetic one. Block 54 flags any
   standalone tap target under 44px and deliberately EXEMPTS `display:inline`
   links, because a link inside a sentence cannot be dragged to 44px without
   wrecking the prose around it - the same exemption WCAG 2.5.8 makes in the
   same words ("in a sentence or block of text"). As a block this link stopped
   being a sentence's link and became a 27.95px standalone target, and block 54
   went red on all three pages at 360, 390 and 430.

   So this is not the guard being quieted: it makes the element genuinely BE the
   inline-in-a-sentence link it is on the other property, which is the entire
   reason this file exists - the two footers must not drift. */
.footbase .foothealth-link {
  display: inline;
  /* INHERIT, NOT A SECOND COPY OF THE NUMBER. globals.css:303 sets
     `footer p, footer a { font-size: .92rem }`, so without this the LINK renders
     at 14.72px inside its own 15.2px sentence - the lookup itself smaller than
     the words introducing it, which is the wrong half to shrink on a line the
     statute wants conspicuous. Inheriting from .foothealth means the two can
     never drift apart again, where retyping 0.95rem here would be a second copy
     of a number that already lives one rule above. */
  font-size: inherit;
  color: #E9E4DA;
  text-decoration: underline;
}
.footbase .foothealth-link:hover { color: #E8B23A; }

/* ------------------------------- the Instagram mark, mirroring the home rule */
/* THE CENTRING RULE HAD NEVER APPLIED, ON ANY PAGE, SINCE SLICE 15 ITEM 4.
   `.foot-ig` is (0,1,0) and loses to
   `.footlinks a { display: block }` at (0,1,1) - which sets
   display on the very element this rule is trying to make a flex container.
   A `block` box ignores align-items and gap outright, so the glyph fell back to
   inline layout on the text baseline and the 8px gap never existed. Measured
   identically on all six rendered footers (index.html plus the three .dc pages,
   desktop and iPhone 14): glyph centre 3.50px ABOVE the handle's, glyph-to-text
   gap 0.00px against the 8px asked for.

   Written in the same selector FORM as whatever sets the property elsewhere,
   which is the rule CLAUDE.md already carries for the footer's clearance -
   same failure, one property along. A centring rule that has never been seen
   applying is not a centring rule; it is a comment. */
.footlinks a.foot-ig { display: inline-flex; align-items: center; gap: 8px; }
.foot-ig-glyph { flex: 0 0 auto; width: 18px; height: 18px; }
.foot-ig-handle { white-space: nowrap; }

/* ------------------------------------------------------------------- phone */
@media (max-width: 720px) {
  .footer { padding-top: 32px; }
  /* VISIT AND EXPLORE SIT SIDE BY SIDE under the full-width brand, and the
     link block drops to one column while it is in that pair — see the measured
     widths in home-additions.css. */
  .footgrid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    column-gap: 14px;
  }
  .footbrand { grid-column: 1 / -1; gap: 12px; }
  .footlinks { grid-auto-flow: row; grid-template-columns: auto; }
  .footaddr { min-width: 0; }
  .footbase { margin-top: 22px; }
}
@media (max-width: 360px) {
  .footaddr-tel { font-size: 1.1rem; }
}

/* THE BREADCRUMB (slice 14 item 4). Sits above the page body in the same wrap
   the copy uses, so it shares the 20px gutter rather than inventing its own.
   Matches the franchise page's .subpage-crumb, which has had this since slice
   7 — one shape for "how do I get back out of here", not two. */
.legal-crumb-wrap { max-width: 1100px; margin: 0 auto; padding-top: 22px; }
.legal-crumb {
  margin: 0;
  font-family: var(--body);
  font-size: 0.82rem;
  color: #8A7F70;
}
/* THE 44px FLOOR, and it earned it. Block 54 measured this at 36.73x28.31 the
   moment it existed. It is not a link inside a sentence — it is the primary
   way back out of a policy page, which is the whole reason the crumb was
   asked for — so it gets the thumb floor rather than the inline exemption
   WCAG 2.5.8 would allow. The padding does the work; the crumb line grows,
   nothing else moves. */
.legal-crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* "Home" is only 36.73px of ink, so the box needs padding on BOTH axes to
     reach the floor — height alone left it 40.73 wide. The negative margin
     cancels the horizontal padding so the crumb still starts on the gutter. */
  min-width: 44px;
  padding: 0 6px;
  margin: 0 -6px;
  color: #E8B23A;
  text-decoration: none;
}
.legal-crumb a:hover { text-decoration: underline; }

/* the suggestion box's way in — see legal-chrome.js for why it is here rather
   than in the link block */
.footsuggest {
  /* the 44px tap floor, mirroring the home rule — see the note there. Block 54
     measures these three pages at the same four widths. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--body);
  font-size: 0.8rem;
  color: #8A7F70;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footsuggest:hover { color: #E8B23A; }

/* THE MASTHEAD FOLLOWS THE HOME MASTHEAD (slice 24). Block 55 1a asserts these
   three pages carry the same brand block as index.html, which is the whole
   point of the slice 11 consolidation - so when the home badge shrank 44 -> 34
   and the wordmark 22.4 -> 18px to fit four nav links on one row, the legal
   pages had to move with it or the guard would be reporting real drift. Same
   breakpoint, same numbers, on purpose: two files, one masthead. */
@media (max-width: 767px) {
  .legal-nav .logo .mark { width: 34px; height: 34px; }
  .legal-nav .logo .word { font-size: 1.125rem; }
  .legal-nav .logo { gap: 8px; }
}