/* CTH theme base: the design system's components/bundle.css (dark scope, type roles,
   spacing aliases, motion, crown / monotone / scrim classes, element base), copied as-is,
   followed by theme additions. */

/* Dark section scope — apply to any full-bleed black band. */
.cth-dark{
  --surface-page:var(--cth-black);
  --surface-card:var(--cth-ink-900);
  --surface-raised:var(--cth-ink-800);
  --surface-sunken:var(--cth-black);
  --text-body:var(--cth-ink-300);
  --text-heading:var(--cth-white);
  --text-muted:var(--cth-ink-400);
  --text-faint:var(--cth-ink-500);
  --text-link:var(--cth-gold-500);
  --text-link-hover:var(--cth-gold-400);
  --text-brand:var(--cth-red-500);
  --border-hairline:rgba(255,255,255,.14);
  --border-strong:var(--cth-white);
}

/* Reusable type roles */
.cth-mega{font-family:var(--font-display);font-size:var(--text-mega);line-height:var(--leading-mega);letter-spacing:var(--tracking-mega);text-transform:uppercase;color:var(--text-heading);margin:0}
.cth-display{font-family:var(--font-display);font-size:var(--text-display-2);line-height:var(--leading-display);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--text-heading);margin:0}
.cth-heading{font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-h3);line-height:var(--leading-heading);color:var(--text-heading);margin:0}
.cth-eyebrow{font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-brand);margin:0}
.cth-body{font-family:var(--font-sans);font-weight:var(--weight-book);font-size:var(--text-body-size);line-height:var(--leading-body);color:var(--text-body);text-wrap:pretty}
.cth-lead{font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-lead);line-height:1.5;color:var(--text-body);text-wrap:pretty}
.cth-caption{font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-caption);line-height:1.45;color:var(--text-muted)}

:root{
  /* Semantic spacing — aliases of the spacing scale in tokens.json */
  --gap-inline:var(--space-3);
  --gap-stack:var(--space-4);
  --gap-cards:var(--space-5);
  --pad-card:var(--space-5);
  --pad-card-lg:var(--space-6);
  --pad-section:var(--space-9);
  --pad-gutter:var(--space-6);

  /* Focus shadow — follows --focus-ring */
  --shadow-focus:0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.45,.05,.55,.95); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
}

/* CTH's two signature graphic devices, expressed as pure CSS so they compose anywhere:
   1. the CROWN ANGLE — the zigzag of the logo's red banner, used for rules, separators and edges
   2. the MONOTONE — photography turned black and white under a semi-opaque wash of one brand color */

/* --- Crown angle -------------------------------------------------------- */
/* Horizontal zigzag rule. Set color with `color:` or --crown-color. */
.cth-crown-rule{height:var(--crown-tooth-h);width:100%;background:var(--crown-color);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--crown-tooth-w) 100%;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--crown-tooth-w) 100%}
/* Teeth pointing down — use to close a band. */
.cth-crown-rule-down{height:var(--crown-tooth-h);width:100%;background:var(--crown-color);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--crown-tooth-w) 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--crown-tooth-w) 100%}

/* Vertical crown edge, mirroring the logo's banner: apply to a block to notch its right edge. */
.cth-crown-edge-right{-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 22px) 12.5%,100% 25%,calc(100% - 22px) 37.5%,100% 50%,calc(100% - 22px) 62.5%,100% 75%,calc(100% - 22px) 87.5%,100% 100%,0 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 12.5%,100% 25%,calc(100% - 22px) 37.5%,100% 50%,calc(100% - 22px) 62.5%,100% 75%,calc(100% - 22px) 87.5%,100% 100%,0 100%)}
.cth-crown-edge-left{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%,22px 87.5%,0 75%,22px 62.5%,0 50%,22px 37.5%,0 25%,22px 12.5%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,22px 87.5%,0 75%,22px 62.5%,0 50%,22px 37.5%,0 25%,22px 12.5%)}

/* Crown header edge: the bottom of a major header band cut into the crown's silhouette.
   4 valleys at the band's full height, 3 uneven peaks rising into it, the tallest on the left.
   Height-independent: set --crown-edge-depth (the tallest peak) per use; the token is 50px,
   and the fallback repeats it. A percentage is a share of the band's height. */
.cth-crown-header-edge{
  -webkit-clip-path:polygon(0 0,100% 0,100% 100%,
    83% calc(100% - var(--crown-edge-depth,50px) * .84),67% 100%,
    50% calc(100% - var(--crown-edge-depth,50px) * .72),33% 100%,
    17% calc(100% - var(--crown-edge-depth,50px)),0 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,
    83% calc(100% - var(--crown-edge-depth,50px) * .84),67% 100%,
    50% calc(100% - var(--crown-edge-depth,50px) * .72),33% 100%,
    17% calc(100% - var(--crown-edge-depth,50px)),0 100%);
}

/* Single angled cut — the quiet version of the motif, for card and band edges. */
.cth-angle-cut-br{-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%)}
.cth-angle-cut-tl{-webkit-clip-path:polygon(32px 0,100% 0,100% 100%,0 100%,0 32px);clip-path:polygon(32px 0,100% 0,100% 100%,0 100%,0 32px)}

/* --- Monotone ----------------------------------------------------------- */
/* The photo treatment: the photo goes black and white, and a semi-opaque layer of one brand
   color sits over it, so the photo becomes a colored background for type.
   Markup: .cth-monotone.cth-monotone-<red|black|gold> > img.cth-monotone-photo + .cth-monotone-wash.
   Both layers sit below the element's own content, so children need no positioning.
   The wash opacity comes from the mono-wash-* tokens; the fallbacks repeat their values. */
.cth-monotone{position:relative;overflow:hidden;isolation:isolate;--mono-tone:var(--cth-red-600);--mono-layer:var(--mono-wash-red,.8);background:var(--mono-tone)}
.cth-monotone-red{--mono-tone:var(--cth-red-600);--mono-layer:var(--mono-wash-red,.8)}
.cth-monotone-black{--mono-tone:var(--cth-black);--mono-layer:var(--mono-wash-black,.6)}
.cth-monotone-gold{--mono-tone:var(--cth-gold-500);--mono-layer:var(--mono-wash-gold,.8)}
.cth-monotone-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;filter:grayscale(1) contrast(var(--mono-contrast,1.15))}
.cth-monotone-wash{position:absolute;inset:0;z-index:-1;background:var(--mono-tone);opacity:var(--mono-layer);pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}
/* Low-level duotone: a grayscale image that takes the hue of the color behind it (luminosity blend).
   For a photo used as a background, use .cth-monotone. */
.cth-duotone{filter:grayscale(1) contrast(1.15);mix-blend-mode:luminosity}

/* --- Protection gradient ------------------------------------------------ */
.cth-scrim-bottom{background:linear-gradient(to top,rgba(11,11,11,.92) 0%,rgba(11,11,11,.6) 38%,rgba(11,11,11,0) 78%)}
.cth-scrim-full{background:linear-gradient(to right,rgba(11,11,11,.9) 0%,rgba(11,11,11,.55) 55%,rgba(11,11,11,.15) 100%)}

/* Element base */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-weight:var(--weight-book);font-size:var(--text-body-size);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-family:var(--font-sans);font-weight:var(--weight-bold);line-height:var(--leading-heading)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid currentColor;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);border-bottom-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}
hr{border:0;border-top:var(--border-rule) solid var(--border-strong);margin:var(--space-6) 0}
::selection{background:var(--cth-red-600);color:#fff}

/* --- Theme additions ----------------------------------------------------- */
a:has(> img), .cth-logo, .custom-logo-link { border-bottom: 0; }
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip: auto; clip-path: none; height: auto; width: auto; }

/* Eyebrow with the brand's trailing colon (READ: WATCH: SHOP:) */
.cth-eyebrow-colon::after { content: ":"; }

/* Display headings set by the design system's type roles */
.cth-display-1 { font-family: var(--font-display); font-size: var(--text-display-1); line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--text-heading); margin: 0; font-weight: 400; }
.cth-display, .cth-mega { font-weight: 400; }
.cth-condensed { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* Crown rule sizes and colors (README: 28x14 default, 44x22 hero breaks, 16x8 inline, 22x11 stub) */
.cth-crown-sm { --crown-tooth-w: 16px; --crown-tooth-h: 8px; }
.cth-crown-md { --crown-tooth-w: 28px; --crown-tooth-h: 14px; }
.cth-crown-lg { --crown-tooth-w: 34px; --crown-tooth-h: 17px; }
.cth-crown-xl { --crown-tooth-w: 44px; --crown-tooth-h: 22px; }
.cth-crown-stub { --crown-tooth-w: 22px; --crown-tooth-h: 11px; width: 96px; }
.cth-crown-color-red { --crown-color: var(--cth-red-600); }
.cth-crown-color-black { --crown-color: var(--cth-black); }
.cth-crown-color-gold { --crown-color: var(--cth-gold-500); }
.cth-crown-color-white { --crown-color: var(--cth-white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}