/* The site's own layer over the vendored design (brand/web/site*.css): what a real page needs that the mockup frame
   gave for free. Fonts are self-hosted; light and dark follow the visitor's system setting (tokens.css). */
@font-face { font-family: "Cardo"; font-weight: 400; font-style: normal; font-display: swap; src: url("../../fonts/cardo/Cardo-Regular.woff2") format("woff2"); }
@font-face { font-family: "Cardo"; font-weight: 700; font-style: normal; font-display: swap; src: url("../../fonts/cardo/Cardo-Bold.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; src: url("../../fonts/archivo/Archivo-VF.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../../fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../../fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2") format("woff2"); }

html { color-scheme: light dark; background: var(--t-surface); }
body { margin: 0; background: var(--t-surface); }
.w-page { overflow: visible; min-height: 100vh; }

/* the moving cloth fills its box at any size (the site's <tartan-hero>) */
.w-cloth tartan-hero { position: absolute; inset: 0; display: block; }
.w-cloth tartan-hero svg { display: block; width: 100%; height: 100%; }

/* the console screenshot follows the system theme */
@media (prefers-color-scheme: dark) { .w-shot .lt { display: none; } .w-shot .dk { display: block; } }

/* the phone menu */
.w-burger { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
@container (max-width: 760px) {
  .w-nav.is-open .w-links { display: flex; flex-direction: column; gap: 0; position: absolute; top: 60px; left: 0; right: 0; z-index: 20;
    margin: 0; padding: 8px 0; background: var(--t-header); color: var(--t-on-header); box-shadow: 0 18px 40px rgba(0,0,0,.35); border-top: 2px solid var(--t-gold); }
  .w-nav.is-open .w-links a { padding: 14px 20px; font-size: 17px; }
  .w-nav.is-open .w-links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--t-gold); padding-bottom: 14px; }
}

/* the pop-ups: real modals over the window */
.w-scrim { position: fixed; z-index: 50; }
.w-scrim[hidden] { display: none; }
/* the pop-up's panel a shade lighter than the page in dark mode, so it stands clear (SITE4; the design's [data-theme] rule, by system setting) */
@media (prefers-color-scheme: dark) { .w-dlg { background: #15231F; } }
body.has-modal { overflow: hidden; }
.w-dlg__x:focus-visible, .w-btn:focus-visible, .w-page a:focus-visible, .w-burger:focus-visible { outline: 2px solid var(--t-gold); outline-offset: 3px; }