/* ==========================================================================
   poggy.app: the Poggy look, in poggy_core's Ambarino Frost theme
   (midnight and ice). Loaded first on every page by includes/header.php.

   The token block repeats poggy_core's --pg-* names (ui/hub/theme.css,
   docs/how-to-build-a-poggy-script/poggy-ui-starter.css) with the Ambarino
   values from poggy_core common/shared/sh_theme.lua. The derived shades
   (deep, raise, accent-hi, on-accent) are worked out exactly as poggy_core's
   theme.js does. No colour is named anywhere else on the site: every other
   stylesheet uses these tokens, or an alpha of a triple.

   The older store stylesheet speaks --st-*; those names are mapped onto the
   --pg-* tokens at the bottom of the token block, so the store keeps its
   layout and takes this look.
   ========================================================================== */

/* IM Fell English (display font), served from this site. SIL Open Font
   Licence 1.1: fonts/OFL.txt. */
@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IMFeENrm28P.ttf') format('truetype');
}
@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IMFeENit28P.ttf') format('truetype');
}

/* -- tokens: base (Ambarino Frost) ---------------------------------------- */
:root {
  --pg-bg-rgb:        15, 21, 28;     /* #0f151c midnight */
  --pg-deep-rgb:      11, 15, 20;     /* bg 30% toward black */
  --pg-raise-rgb:     24, 30, 37;     /* bg 4% toward text */
  --pg-raise-hi-rgb:  33, 39, 46;     /* bg 8% toward text (hover panels) */
  --pg-text-rgb:      234, 243, 247;  /* #eaf3f7 ice white */
  --pg-accent-rgb:    143, 208, 230;  /* #8fd0e6 glacier blue */
  --pg-accent-hi-rgb: 171, 220, 236;  /* accent 25% toward white */
  --pg-on-accent-rgb: 11, 15, 20;     /* text on a filled accent */
  /* Sub-accent: trailer gold. The title-line colour of every Poggy script
     trailer (trailers/stage.css --gold, the .caption .l2 title and its rule),
     itself taken from the store key art's lettering (assets/products/*.jpg
     title text samples at about #d09840). Blue stays the main accent: links,
     primary buttons, focus, selected states. Gold is for what ties the page
     to the thumbnails: prices, eyebrow labels, the short rule under a heading,
     best-seller and All Access marks. Never a primary button fill.
     Contrast: 8.75:1 on bg, 8.0:1 on a raised panel, 7.2:1 on raise-hi. */
  --pg-accent2-rgb:    232, 203, 146; /* #e8cb92 pastel of the trailer gold #e3a93f (same hue, softer beside the blue) */
  --pg-accent2-hi-rgb: 243, 224, 186; /* #f3e0ba */
  --pg-on-accent2-rgb: 11, 15, 20;    /* text on a filled accent2 (9.2:1) */
  --pg-success-rgb:   143, 201, 168;  /* #8fc9a8 */
  --pg-danger-rgb:    224, 140, 140;  /* #e08c8c */
  --pg-warning-rgb:   230, 193, 112;  /* #e6c170 */
  --pg-info-rgb:      167, 196, 236;  /* #a7c4ec */
  --pg-shade-rgb:     0, 0, 0;
  --pg-panel-alpha:   0.94;

  --pg-font-display: 'IM Fell English', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --pg-font-body:    'Segoe UI', Arial, Helvetica, sans-serif;
  --pg-font-mono:    'Source Code Pro', Consolas, 'Courier New', monospace;
  --pg-radius:       0px;
  --pg-radius-sm:    0px;
}

/* -- tokens: derived (never set these; use them) ----------------------------- */
:root {
  --pg-bg:          rgb(var(--pg-bg-rgb));
  --pg-panel:       rgba(var(--pg-raise-rgb), var(--pg-panel-alpha));
  --pg-panel-solid: rgb(var(--pg-raise-rgb));
  --pg-deep:        rgba(var(--pg-deep-rgb), 0.88);
  --pg-raise:       rgba(var(--pg-raise-rgb), 0.99);

  --pg-text:        rgb(var(--pg-text-rgb));
  --pg-text-soft:   rgba(var(--pg-text-rgb), 0.82);
  --pg-text-muted:  rgba(var(--pg-text-rgb), 0.62);
  --pg-text-dim:    rgba(var(--pg-text-rgb), 0.38);

  --pg-accent:       rgb(var(--pg-accent-rgb));
  --pg-accent-hi:    rgb(var(--pg-accent-hi-rgb));
  --pg-accent-soft:  rgba(var(--pg-accent-rgb), 0.35);
  --pg-accent-glow:  rgba(var(--pg-accent-rgb), 0.50);
  --pg-accent-faint: rgba(var(--pg-accent-rgb), 0.12);
  --pg-on-accent:    rgb(var(--pg-on-accent-rgb));

  --pg-accent2:       rgb(var(--pg-accent2-rgb));
  --pg-accent2-hi:    rgb(var(--pg-accent2-hi-rgb));
  --pg-accent2-soft:  rgba(var(--pg-accent2-rgb), 0.38);
  --pg-accent2-faint: rgba(var(--pg-accent2-rgb), 0.10);
  --pg-on-accent2:    rgb(var(--pg-on-accent2-rgb));

  /* The site backdrop: the Rosewood store art (assets/store_background.*)
     under a midnight sheet, with a faint fall of glacier blue from the top
     so it reads as cold night air over the picture, not a coloured wash. */
  --pg-backdrop-veil:  rgba(var(--pg-bg-rgb), 0.82);
  --pg-backdrop-frost: rgba(var(--pg-accent-rgb), 0.12);
  --pg-backdrop-veil-layers:
      radial-gradient(ellipse 90% 55% at 50% -8%, var(--pg-backdrop-frost), transparent 70%),
      linear-gradient(180deg, rgba(var(--pg-accent-rgb), 0.05), transparent 45%),
      linear-gradient(var(--pg-backdrop-veil), var(--pg-backdrop-veil));

  --pg-success:      rgb(var(--pg-success-rgb));
  --pg-success-soft: rgba(var(--pg-success-rgb), 0.14);
  --pg-danger:       rgb(var(--pg-danger-rgb));
  --pg-danger-soft:  rgba(var(--pg-danger-rgb), 0.14);
  --pg-warning:      rgb(var(--pg-warning-rgb));
  --pg-warning-soft: rgba(var(--pg-warning-rgb), 0.14);
  --pg-info:         rgb(var(--pg-info-rgb));
  --pg-info-soft:    rgba(var(--pg-info-rgb), 0.14);

  --pg-surface:        rgba(var(--pg-text-rgb), 0.04);
  --pg-surface-hover:  rgba(var(--pg-text-rgb), 0.08);
  --pg-surface-strong: rgba(var(--pg-text-rgb), 0.12);

  --pg-border:        rgba(var(--pg-text-rgb), 0.14);
  --pg-border-soft:   rgba(var(--pg-text-rgb), 0.09);
  --pg-border-strong: rgba(var(--pg-text-rgb), 0.26);

  --pg-veil:          rgba(var(--pg-shade-rgb), 0.55);
  --pg-shadow:        0 1.2rem 3rem rgba(var(--pg-shade-rgb), 0.45);
  --pg-shadow-strong: 0 1.2rem 3rem rgba(var(--pg-shade-rgb), 0.70);

  --pg-panel-bg:
      linear-gradient(180deg, rgba(var(--pg-text-rgb), 0.06), transparent 12%),
      radial-gradient(circle at top right, rgba(var(--pg-text-rgb), 0.06), transparent 28%),
      linear-gradient(135deg, rgba(var(--pg-text-rgb), 0.02), transparent 40%),
      var(--pg-panel);

  --pg-focus-ring:   0 0 0 2px var(--pg-accent-soft);

  /* -- the store stylesheet's names, on these tokens ---------------------- */
  --st-panel:       var(--pg-panel);
  --st-panel-solid: var(--pg-panel-solid);
  --st-panel-hi:    rgba(var(--pg-raise-hi-rgb), 0.97);
  --st-rule:        var(--pg-border);
  --st-rule-strong: var(--pg-border-strong);
  --st-ink:         var(--pg-text);
  --st-ink-soft:    var(--pg-text-soft);
  --st-ink-faint:   var(--pg-text-muted);
  --st-tan:         var(--pg-accent);        /* links and highlights */
  --st-clay:        var(--pg-accent);        /* primary action */
  --st-clay-lift:   var(--pg-accent-hi);
  --st-brass:       var(--pg-accent2);       /* All Access: trailer gold */
  --st-green:       var(--pg-success);
  --st-crimson:     var(--pg-danger);
  --st-go:          var(--pg-success);       /* commit money */
  --st-go-lift:     rgb(170, 216, 190);      /* success 25% toward white */
  --st-ease:        cubic-bezier(.2, .7, .3, 1);
  --st-hover:       .28s var(--st-ease);
  --st-radius:      var(--pg-radius);
  --st-shadow:      var(--pg-shadow);
}

/* -- the page ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--pg-text);
  font-family: var(--pg-font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-color: rgb(var(--pg-deep-rgb));
  overflow-x: hidden;
}
/* The backdrop (the Rosewood store art under the midnight veil) sits on a
   fixed layer behind the page rather than on body with background-attachment:
   fixed, so it stays put on phones too (iOS ignores attachment: fixed and
   would stretch the picture down the whole page). Every panel is 0.94 opaque
   over it; running text outside a panel sits on the 0.82 veil
   (muted text stays above 4.5:1 even over the lamp, the brightest spot). The picture
   (::before) and the veil (::after) are separate layers so the image-set
   line holds no var(): an older browser drops it and keeps the jpg. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background-color: rgb(var(--pg-deep-rgb));
  background-image: url('/assets/store_background.jpg');
  background-image: image-set(url('/assets/store_background.webp') type('image/webp'), url('/assets/store_background.jpg') type('image/jpeg'));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
body::after { background: var(--pg-backdrop-veil-layers); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pg-font-display);
  font-weight: 400;
  color: var(--pg-text);
  margin-top: 0;
  letter-spacing: 0.01em;
}
p { line-height: 1.6; }
a { color: var(--pg-accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--pg-accent-hi); }
a:visited { color: var(--pg-accent); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
code { font-family: var(--pg-font-mono); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 2px; }
::selection { background: var(--pg-accent-soft); color: var(--pg-text); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(var(--pg-shade-rgb), 0.25); }
::-webkit-scrollbar-thumb { background: var(--pg-accent-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--pg-accent); }
.hidden { display: none !important; }

/* The header shows images/brand/wordmark.png; this text wordmark is only the
   fallback if that file is missing. */
.pg-wordmark {
  font-family: var(--pg-font-display);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--pg-text);
}
.pg-wordmark::first-letter { color: var(--pg-accent); }
.pg-logo { display: block; height: 40px; width: auto; max-width: 132px; }

/* Numbers never in the display font (its figures are old-style): wrap a number
   that sits inside a display-font label, such as a button, in .pg-num. */
.pg-num { font-family: var(--pg-font-body); letter-spacing: 0; text-transform: none; }