/* =====================================================================
   Foxfire marketing SHELL — nav, footer, FAQ accordion (SOURCE OF TRUTH)
   ---------------------------------------------------------------------
   Every page under website/public/** is hand-authored HTML carrying its
   own inline <style>. The nav, footer and FAQ rules were duplicated
   verbatim across ~23 of them, so changing the nav type meant 23
   near-identical edits and the next change meant 23 more. Worse, they had
   already drifted: /legal/state-guide/ was running a 72px bar with an
   inline-styled logo while everything else ran 96px.

   This file is the one definition. Link it BETWEEN the brand sheet and the
   page's own inline block:

       <link rel="stylesheet" href="/_brand.generated.css">
       <link rel="stylesheet" href="/_shell.css">
       <style> ...page-specific rules only... </style>
       ...
       <link rel="stylesheet" href="/foxfire-glass.css">   <- stays LAST

   That order is deliberate. Glass keeps its required last position so it
   still wins by source order, and a page can still override a shell rule
   from its own inline block when it genuinely needs to.

   cohesion:check enforces the link via PAGE_FORMAT_PARTS in
   scripts/check-cohesion.mjs, the same way it already enforces the brand
   sheet and the glass sheet.

   Motion here spends the named tokens from tokens.json (--fox-dur-*,
   --fox-ease-*) rather than typing a duration from memory, and every
   moving part is transform or opacity behind prefers-reduced-motion
   (ADR 0013).
   ===================================================================== */

/* ---- NAV: the bar ---------------------------------------------------
   Measured, not guessed. The mark was 80px tall in a 96px bar, so it
   filled 83% of the chrome and read as a badge rather than a mark. The
   links were 18.4px at weight 700, heavier than the body copy they sit
   above, which is what made the bar feel loud instead of considered.
   Now: a smaller mark in a 74px bar, small-caps links with real tracking,
   and a hairline that draws in on hover. */
nav#topnav{position:fixed;inset-inline:0;top:0;z-index:50;transition:background var(--fox-dur-3) ease,border-color var(--fox-dur-3) ease;border-bottom:1px solid transparent}
nav#topnav.scrolled{background:rgba(13,13,13,.78);backdrop-filter:blur(14px);border-color:var(--border)}

/* The mark sits out of flow at the left rail and the link list centres on the
   FULL bar, which is what makes the bar read balanced rather than left-loaded.

   This was briefly a three-column flex layout, to make room for two account
   slots in the right rail. Those slots are gone (Cole, 2026-08-06), and with
   them the reason for the columns: six links and a mark have always fitted,
   and centring on the bar rather than on the leftover space is the difference
   between a considered bar and one that looks pushed over. Measured with the
   slots present, the columns were load-bearing: without them the list ran
   34.3px into the fox and 14.4px into the account group at every width from
   1281 to 1920. Without the slots there is nothing on the right to collide
   with, so the centred layout is safe again.

   If a right-hand item is ever added back, go back to columns. Do not centre
   a list on the full width while something else is absolutely positioned over
   the same space; that is exactly the bug that produced HOME on top of the fox.

   .nav-panel exists for the collapse: display:contents makes it vanish as a box
   at desktop so the list itself is the flex child, and below the breakpoint it
   becomes the disclosure panel. */
.nav-inner{max-width:1280px;margin-inline:auto;padding:0 clamp(1.25rem,4vw,3rem);height:74px;display:flex;align-items:center;position:relative;justify-content:center;gap:1.5rem}
.nav-panel{display:contents}

.nav-mark{position:absolute;left:clamp(1.25rem,4vw,3rem);top:50%;transform:translateY(-50%);display:block;line-height:0}
.nav-mark img{display:block;height:clamp(32px,3.1vw,44px);width:auto;transform-origin:left center;transition:transform var(--fox-dur-3) var(--fox-ease-out)}
/* The mark settles a little smaller once the page is scrolled. Scale, not
   height, so it composites instead of re-running layout every frame. */
#topnav.scrolled .nav-mark img{transform:scale(.88)}
@media (prefers-reduced-motion:reduce){.nav-mark img{transition:none}}

/* Legacy alias. Some pages sized the mark with a .nav-logo class instead
   of .nav-mark; both resolve to the same drawing at the same size here so
   no page carries its own logo sizing. */
.nav-logo{height:clamp(32px,3.1vw,44px);width:auto;display:block;flex:0 0 auto;max-width:none}

.nav-toggle{display:none;position:absolute;right:clamp(1.25rem,4vw,3rem);top:50%;transform:translateY(-50%);background:none;border:1px solid var(--border);color:var(--fg);width:2.4rem;height:2.4rem;border-radius:.6rem;cursor:pointer;align-items:center;justify-content:center;transition:border-color var(--fox-dur-2) ease,color var(--fox-dur-2) ease}
.nav-toggle:hover{border-color:var(--secondary);color:var(--secondary)}

/* ---- NAV: the links -------------------------------------------------
   The list and its items stretch to the full bar height. That is what lets
   the dropdown anchor to the BOTTOM EDGE of the bar: top:100% on a
   vertically centred li would land in the middle of the chrome.

   Type: 13.5px at weight 700, tracking .11em. The premium pass had taken
   these to 12.5px/600, which fixed the "louder than the body copy" problem
   but overshot and read too light. Tracking eases from .13em to .11em
   because a heavier uppercase face needs less letterspacing to stay open.
   These are Inter, which is variable 400-900, so 700 is a REAL weight and
   not a synthesized one. (The display face ships 500 and 700 only, which
   is why every "bolder" move in this file is on an Inter element.) */
.nav-links{display:flex;gap:2.1rem;list-style:none;align-items:stretch;align-self:stretch}
.nav-links>li{position:relative;display:flex;align-items:center}
.nav-links a{display:inline-block;font-size:.845rem;white-space:nowrap;font-weight:700;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;color:var(--muted-fg);transition:color var(--fox-dur-2) ease;padding-block:.5rem;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--secondary)}
/* The hairline draws in from the leading edge and retracts to the trailing
   one, so hovering across the bar reads as one movement. Marketing nav has
   no pill: the orange pill is an APP pattern, so hover and active are THE
   blue (.claude/rules/ui-cohesion.md). */
.nav-links>li>a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:var(--secondary);transform:scaleX(0);transform-origin:right center;transition:transform var(--fox-dur-3) var(--fox-ease-out)}
.nav-links>li>a:hover::after,.nav-links>li>a.active::after{transform:scaleX(1);transform-origin:left center}
@media (prefers-reduced-motion:reduce){.nav-links>li>a::after{transition:none}}

/* ---- NAV: the dropdown ----------------------------------------------
   Built to be extended. A section becomes a menu by adding class "has-sub"
   to its <li>, a <button class="sub-toggle"> for the chevron, and a
   <ul class="subnav"> of links. Nothing else changes, and the stagger below
   is capped so the panel still lands inside 300ms however many pages get
   added later.
   Desktop opens on hover AND on :focus-within, so a keyboard user tabbing
   through the bar gets the same menu without touching the button. The
   button exists for touch, and it is what carries aria-expanded. */
.sub-toggle{background:none;border:0;cursor:pointer;padding:.35rem .2rem;margin-left:.15rem;display:inline-flex;align-items:center;line-height:0;color:var(--muted-fg);transition:color var(--fox-dur-2) ease;font-family:inherit}
.has-sub:hover .sub-toggle,.has-sub:focus-within .sub-toggle,.has-sub.open .sub-toggle{color:var(--secondary)}
.sub-toggle svg{transition:transform var(--fox-dur-3) var(--fox-ease-out)}
.has-sub:hover .sub-toggle svg,.has-sub:focus-within .sub-toggle svg,.has-sub.open .sub-toggle svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.sub-toggle svg{transition:none}}

/* The panel is part of the bar, not a card floating on top of it. It hangs
   flush from the bar's bottom edge and carries NO top border, so the bar's
   bottom hairline runs unbroken across the full width and the menu reads as
   the bar extending downward. Flush also fixes a real usability bug: a gap
   between bar and panel is dead space, and crossing it with the pointer
   closes the menu before you reach it.
   left is -1.25rem so the first item's TEXT lines up with the parent link,
   not the panel edge (.45rem panel padding + .8rem item padding). */
.subnav{position:absolute;top:100%;left:-1.25rem;min-width:15.5rem;list-style:none;padding:.45rem;margin:0;background:rgba(13,13,13,.94);-webkit-backdrop-filter:blur(18px) saturate(165%);backdrop-filter:blur(18px) saturate(165%);border:1px solid rgba(255,255,255,.14);border-top:0;border-radius:0 0 14px 14px;box-shadow:0 22px 44px rgba(0,0,0,.5);opacity:0;pointer-events:none;z-index:60}
.subnav li{width:100%}
.subnav a{display:block;width:100%;padding:.62rem .8rem;border-radius:9px;font-size:.75rem;letter-spacing:.09em;color:rgba(250,250,250,.7);transition:color var(--fox-dur-2) ease,background var(--fox-dur-2) ease}
.subnav a:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.has-sub:hover .subnav,.has-sub:focus-within .subnav,.has-sub.open .subnav{opacity:1;pointer-events:auto}
/* Bar and panel share one tone while a menu is open. :has() is the whole
   trick; where it is unsupported the panel is simply a touch darker than
   the bar, which is a soft landing rather than a broken one. */
nav#topnav:has(.has-sub:hover),nav#topnav:has(.has-sub:focus-within),nav#topnav:has(.has-sub.open){background:rgba(13,13,13,.94)}
@media (prefers-reduced-motion:no-preference){
  /* No travel on the panel itself: flush against the bar, any slide would
     overlap up into the chrome. The per-item stagger carries the motion. */
  .subnav{transition:opacity var(--fox-dur-2) ease}
  .subnav li{opacity:0;transform:translateY(-5px);transition:opacity var(--fox-dur-2) ease,transform var(--fox-dur-3) var(--fox-ease-out)}
  .has-sub:hover .subnav li,.has-sub:focus-within .subnav li,.has-sub.open .subnav li{opacity:1;transform:none}
  .subnav li:nth-child(1){transition-delay:.05s}
  .subnav li:nth-child(2){transition-delay:.09s}
  .subnav li:nth-child(3){transition-delay:.13s}
  .subnav li:nth-child(4){transition-delay:.17s}
  .subnav li:nth-child(n+5){transition-delay:.2s}
}

.nav-cta{font-size:.845rem;white-space:nowrap;font-weight:700;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;padding:.55rem 1.25rem;border-radius:999px;border:1px solid var(--border);color:var(--fg);transition:border-color var(--fox-dur-2) ease,color var(--fox-dur-2) ease}
.nav-cta:hover{border-color:var(--secondary);color:var(--secondary)}
/* Some pages render the CTA as a <button> so it can open the booking modal. */
button.nav-cta{background:none;cursor:pointer;font-family:inherit}

/* ---- NAV: the collapse ----------------------------------------------
   Back to 1180px. It went to 1280px only to fit the two account slots, and
   those are gone, so holding the higher breakpoint would collapse the bar on
   laptops that have room for it. The panel offset below tracks the 74px bar;
   when those two numbers disagree the menu floats or overlaps, which is the
   same class of bug that produced the black band under the hero (see
   --fox-nav-h in foxfire-glass.css). */
@media (max-width:1180px){
  /* The disclosure panel. It wraps the list so the menu is one scrollable,
     dismissable thing rather than a bare <ul> doing double duty.

     The fill is SOLID, not the rgba(13,13,13,.97) this used to be, and that is
     measured rather than taste. The panel covers a large part of the hero on a
     phone, so what bleeds through a translucent fill is a headline, not
     background texture. Its backdrop-filter also never actually ran: nav#topnav
     already sets one (foxfire-glass.css), which makes the nav a backdrop root,
     so the panel's blur saw only the nav's own empty backdrop. The blur is
     dropped rather than left in as decoration that does nothing. */
  .nav-panel{position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--border);padding:.4rem 0;display:none;max-height:calc(100svh - 74px);overflow-y:auto}
  #topnav.menu-open .nav-panel{display:block}
  .nav-links{position:static;flex-direction:column;gap:0;align-items:stretch;justify-content:flex-start}
  .nav-links li{width:100%}
  .nav-links>li{flex-wrap:wrap}
  .nav-links a{display:block;padding:.9rem clamp(1.25rem,4vw,3rem);font-size:.9rem}
  .nav-links>li>a{flex:1}
  .nav-links>li>a::after{display:none}
  .nav-toggle{display:inline-flex}
  .sub-toggle{padding:.9rem clamp(1.25rem,4vw,3rem) .9rem .6rem}
  /* A floating panel has nowhere to go on a phone, so the menu becomes an
     inline disclosure. `display` is not in the hover rule above, so hover
     on a narrow desktop window cannot pop it open. */
  /* flex-basis 100% is load-bearing. The parent li is a wrapping flex row
     holding the link, the chevron button and this list. Left at basis auto the
     list stayed on the SAME line as the link, measured 188px wide starting at
     x=187, so the submenu rendered as a half-width block beside "Industries"
     instead of underneath it. Taking a full basis is what forces the wrap. */
  .subnav{position:static;display:none;flex-basis:100%;width:100%;opacity:1;pointer-events:auto;min-width:0;border:0;border-radius:0;box-shadow:none;background:rgba(255,255,255,.03);padding:.2rem 0 .5rem;-webkit-backdrop-filter:none;backdrop-filter:none}
  .has-sub.open .subnav{display:block}
  .subnav li{opacity:1;transform:none}
  .subnav a{padding-left:calc(clamp(1.25rem,4vw,3rem) + 1rem);font-size:.82rem}
}

/* ---- Anchor targets clear the fixed bar -----------------------------
   #topnav is position:fixed, so a jump to an in-page anchor lands the target
   at y=0 with the bar sitting on top of it. Measured before this rule: opening
   /#how-it-works put that section's h2 above the top of the viewport entirely,
   underneath the chrome.

   It spends --fox-nav-h rather than a literal, so it tracks the bar the same
   way the hero offset does. A stale copy of this rule is what the note in
   foxfire-glass.css refers to: it once hardcoded 90px and compensated for a
   bar that had accidentally stopped being fixed at all. Deriving it is what
   stops that pairing drifting again. */
:target{scroll-margin-top:calc(var(--fox-nav-h,75px) + 1.5rem)}
section[id],[id].anchor{scroll-margin-top:calc(var(--fox-nav-h,75px) + 1.5rem)}

/* ---- FAQ accordion --------------------------------------------------
   One rule set for every Q&A and FAQ dropdown on the site. The question was
   17px/600 in a 1.15rem row, which read as body copy rather than as the
   thing you click. Now 1.2rem at weight 700 in a 1.5rem row: a heavier
   question with room around it instead of crowding its own rule line.
   `summary` is body copy, so this is Inter and 700 is a real weight. */
.faq-list details{border-bottom:1px solid var(--border)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem 0;cursor:pointer;list-style:none;font-weight:700;font-size:1.2rem;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--money);font-weight:400;font-size:1.45rem;line-height:1;flex-shrink:0;transition:transform var(--fox-dur-2) var(--fox-ease-out)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding-bottom:1.5rem;color:var(--muted-fg);font-size:.95rem;line-height:1.7}
@media (prefers-reduced-motion:reduce){.faq-list summary::after{transition:none}}

/* ---- Footer ---------------------------------------------------------
   The mark is the full Foxfire lockup now, not a 48px fox above a text
   span: the simple fox on top with FOXFIRE GAMES in the silver wordmark
   beneath it, at 96px, twice the height of the fox it replaces. The
   .f-logo-text span is gone because the wordmark is in the artwork.

   The silver wordmark is DARK-SURFACE ONLY. It measures 9.2:1 to 18:1 on
   the #0D0D0D canvas and 1.08:1 to 2.12:1 on white, so it would be
   invisible in print or on any light background. Every marketing footer is
   dark, so the contrast case holds here and only here.

   This deviates from the under-250px small-fox rule in ADR 0009/0011/0012,
   which listed the marketing footer under the small fox and said the lockup
   "is not the default anywhere else". cohesion:check does NOT catch it: its
   mark patterns match mark-* and fox-small-* but never lockup-*. So it is
   recorded as a decision rather than left as a silent deviation. See
   docs/design-system/decisions/0015-marketing-footer-lockup.md. */
footer{padding:4rem 0 3rem;text-align:center}
footer .f-logo{display:inline-flex;flex-direction:column;align-items:center;margin-bottom:2rem;text-decoration:none}
/* 151px, and the number is measured rather than picked.

   Cole asked for the fox at TWICE the 48px one it replaces. Sizing the whole
   lockup to 96px does not do that: the artwork is fox-above-wordmark, so at
   96px total the fox itself renders 53.1px, which is 1.1x, not 2x. The height
   that puts the FOX at 96px is 151px of total artwork (measured 95.9px).

   The cut is `-line`, FOXFIRE GAMES on ONE line under the fox, not the
   `-stacked` two-line break. viewBox 1.0400 x 0.4448, so 151px tall renders
   about 353px wide. Set height and let width follow. */
footer .f-logo img{height:151px;width:auto}
/* At 353px the lockup is wider than a narrow phone, so it has to be allowed
   to shrink there or it forces a horizontal scrollbar on the whole page. */
@media (max-width:420px){footer .f-logo img{height:auto;width:min(300px,86vw)}}
.f-contact{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2rem}
.f-contact a,.f-contact span{font-size:.85rem;color:rgba(250,250,250,.8);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:.5rem 1.1rem;transition:color var(--fox-dur-2) ease,border-color var(--fox-dur-2) ease}
.f-contact a:hover{color:var(--primary);border-color:rgba(254,112,5,.4)}
.f-nav{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;margin-bottom:2rem}
.f-nav a{font-size:.85rem;color:var(--muted-fg);text-decoration:none;transition:color var(--fox-dur-2) ease}
.f-nav a:hover{color:var(--primary)}
.f-legal{border-top:1px solid var(--border);padding-top:2rem;margin-top:.5rem}
.f-legal p{font-size:.75rem;color:rgba(250,250,250,.5);max-width:56rem;margin-inline:auto;line-height:1.7}
.f-copy{margin-top:1.75rem;font-size:.85rem;color:rgba(250,250,250,.5)}
.f-sign{margin-top:2rem;font-family:var(--font-display);font-weight:700;font-size:0.906rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,250,250,.55)}

/* =====================================================================
   Shared UI widgets (injected by /js/ui.js, styled here)
   ---------------------------------------------------------------------
   Every widget below is created in JS and appended to <body>, so it does
   not appear in page markup and the box-coverage gate never sees a bespoke
   box. Colour is functional and pulled from tokens: blue is the marketing
   hover/indicator colour, orange owns the primary contact action. Motion is
   transform/opacity only and every non-indicator transition drops under
   prefers-reduced-motion. There is no coloured glow AT REST (marketing rule);
   the blue halo only appears on hover.
   ===================================================================== */

/* ---- Scroll progress bar --------------------------------------------
   A hairline under the fixed bar whose width tracks scroll depth. It sits at
   the bar's bottom edge (top = --fox-nav-h) and is driven by scaleX from
   ui.js, so it has NO transition: it must track the scroll frame-for-frame,
   not lag behind it. */
.f-progress{position:fixed;top:var(--fox-nav-h,75px);left:0;width:100%;height:3px;z-index:49;background:var(--secondary);transform:scaleX(0);transform-origin:left center;will-change:transform;pointer-events:none}

/* ---- Corner stack: back-to-top sits ABOVE the contact FAB ------------
   Both anchor to the bottom-right. The FAB is the lower, primary item; the
   back-to-top button stacks above it and only appears once you are a screen
   deep, so the two never overlap. */
.f-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:46;display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:999px;border:0;cursor:pointer;background:var(--primary);color:#0D0D0D;font-family:var(--font-body);font-size:.85rem;font-weight:700;letter-spacing:.02em;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform var(--fox-dur-2) var(--fox-ease-out),filter var(--fox-dur-2) ease}
.f-fab svg{display:block}
.f-fab:hover{filter:brightness(1.06);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.f-fab{transition:filter var(--fox-dur-2) ease}.f-fab:hover{transform:none}}

.f-backtop{position:fixed;right:1.55rem;bottom:5.1rem;z-index:46;width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--fg);background:rgba(13,13,13,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--fox-dur-3) ease,transform var(--fox-dur-3) var(--fox-ease-out),border-color var(--fox-dur-2) ease,color var(--fox-dur-2) ease,box-shadow var(--fox-dur-2) ease}
.f-backtop.is-in{opacity:1;transform:none;pointer-events:auto}
.f-backtop:hover{color:var(--secondary);border-color:var(--secondary);box-shadow:0 0 0 1px var(--secondary),0 8px 24px rgba(7,175,253,.22)}
.f-backtop svg{display:block}
@media (prefers-reduced-motion:reduce){.f-backtop{transition:opacity var(--fox-dur-3) ease,border-color var(--fox-dur-2) ease,color var(--fox-dur-2) ease,box-shadow var(--fox-dur-2) ease}.f-backtop.is-in{transform:none}}

/* Contact FAB label collapses to the icon on the narrowest phones so the
   pill never crowds the back-to-top button above it. */
@media (max-width:420px){.f-fab{padding:.7rem;gap:0}.f-fab-label{display:none}.f-backtop{right:1.35rem;bottom:4.6rem}}

/* ---- Announcement banner --------------------------------------------
   OFF by default (ui.js BANNER.enabled=false). When on, it is a fixed strip
   ABOVE the bar; body gets padding-top and the fixed bar + progress bar drop
   by the banner height so nothing is hidden behind it. Anchor scroll-margin
   grows to match, same derive-don't-guess approach as the base :target rule. */
.f-banner{position:fixed;top:0;left:0;right:0;z-index:55;min-height:var(--fox-banner-h,2.75rem);display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem clamp(1.25rem,4vw,3rem);background:rgba(13,13,13,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.f-banner-msg{margin:0;font-size:.85rem;color:var(--fg);text-align:center;line-height:1.4}
.f-banner-link{color:var(--secondary);text-decoration:none;font-weight:700;white-space:nowrap}
.f-banner-link:hover{text-decoration:underline}
.f-banner-close{position:absolute;right:clamp(1.25rem,4vw,3rem);top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted-fg);cursor:pointer;line-height:0;padding:.35rem;transition:color var(--fox-dur-2) ease}
.f-banner-close:hover{color:var(--fg)}
body.has-banner{padding-top:var(--fox-banner-h,2.75rem)}
body.has-banner #topnav{top:var(--fox-banner-h,2.75rem)}
body.has-banner .f-progress{top:calc(var(--fox-nav-h,75px) + var(--fox-banner-h,2.75rem))}
body.has-banner :target,body.has-banner section[id],body.has-banner [id].anchor{scroll-margin-top:calc(var(--fox-nav-h,75px) + var(--fox-banner-h,2.75rem) + 1.5rem)}

/* ---- Print --------------------------------------------------------------
   Marketing pages had no print rules, so printing a page carried the fixed
   bar, the flame layer, and these floating widgets onto paper. Hide the
   chrome, drop to black-on-white, and expand link URLs so a printed page is
   readable on its own. */
@media print{
  #topnav,.flame-layer,.f-progress,.f-backtop,.f-fab,.f-banner,#booking-modal,.skip-link{display:none!important}
  body.has-banner{padding-top:0}
  html,body{background:#fff!important;color:#000!important}
  a{color:#000!important;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  footer{border-top:1px solid #ccc}
}