/* OHD (Outlaw Hollow Distilling Co.) theme 01.00.06 for DNN 10.4. Built by ohd-build/theme/src/build_css.py from
   design/outlaw-base/mockup-v1 css/tokens.css + css/site.css (v1.1) + src/skin-additions.css. Do not edit here. */
/* Outlaw Hollow Distilling Co. — design tokens (mockup-v1)
   Palette from logo-r1/NOTES.md. Contrast ratios measured (WCAG 2.x):
   cream/ink 15.1 · muted/ink 10.9 · amber/ink 8.2 · copper/ink 4.65 · ink/cream 15.1
   saddle/cream 8.5 · rust/cream 5.8 · rust-deep/cream 7.2 · ink/amber 8.2 · ink/copper 4.65 · white/rust 7.1
   RULES: no small white-on-copper text (4.0:1). Copper on cream (3.25:1) = graphics/large display only. */
/* Fonts: self-hosted (skin fonts/ folder, OFL). Heading = Roboto Serif (working draft), one family, one variable. */
@font-face{font-family:"OH Heading";src:url("../fonts/roboto-serif-narrow-700.latin.woff2?v=01.00.06") format("woff2");font-weight:650 900;font-style:normal;font-display:swap}
@font-face{font-family:"OH Heading";src:url("../fonts/roboto-serif-semicondensed-600.latin.woff2?v=01.00.06") format("woff2");font-weight:100 649;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-400-700.latin.woff2?v=01.00.06") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* brand palette */
  --oh-ink:#1A1108; --oh-char:#352413; --oh-saddle:#5C3618; --oh-rust:#8E4216;
  --oh-copper:#C9621C; --oh-amber:#E0A04A; --oh-cream:#F4E6CC;
  /* derived */
  --oh-paper:#F4E6CC; --oh-paper-2:#EAD7B2; --oh-rust-deep:#7A3712;
  --oh-muted:#D8C4A0;             /* secondary text on ink/char */
  --oh-line-dark:rgba(224,160,74,.28); --oh-line-paper:rgba(92,54,24,.28);
  --oh-shadow:0 18px 40px -18px rgba(0,0,0,.65);

  /* roles (dark surface is the default) */
  --oh-bg:var(--oh-ink); --oh-fg:var(--oh-cream); --oh-fg-2:var(--oh-muted);
  --oh-link:var(--oh-amber); --oh-accent:var(--oh-copper); --oh-focus:var(--oh-amber);
  --oh-line:var(--oh-line-dark);

  /* type */
  --oh-font-heading:"OH Heading",Georgia,"Times New Roman",serif; /* THE heading font (one variable) */
  --oh-font-display:var(--oh-font-heading); /* display weight 700 */
  --oh-font-serif:var(--oh-font-heading); /* serif weight 600 */
  --oh-font-body:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --oh-fs-xs:.8125rem;  /* 13 */
  --oh-fs-sm:.9375rem;  /* 15 */
  --oh-fs-md:1.0625rem; /* 17 body */
  --oh-fs-lg:clamp(1.125rem,1.02rem + .45vw,1.3125rem);
  --oh-fs-h4:clamp(1.25rem,1.12rem + .55vw,1.5rem);
  --oh-fs-h3:clamp(1.4rem,1.2rem + .9vw,1.875rem);
  --oh-fs-h2:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
  --oh-fs-h1:clamp(2.125rem,1.6rem + 2.6vw,4rem);
  --oh-fs-hero:clamp(2.5rem,1.7rem + 4vw,5.5rem);
  --oh-lh-tight:1.08; --oh-lh-head:1.15; --oh-lh-body:1.65;
  --oh-track-caps:.14em;

  /* spacing (4px base) */
  --oh-space-1:.25rem; --oh-space-2:.5rem; --oh-space-3:.75rem; --oh-space-4:1rem;
  --oh-space-5:1.5rem; --oh-space-6:2rem; --oh-space-7:3rem; --oh-space-8:4rem; --oh-space-9:6rem;
  --oh-section-y:clamp(3rem,2rem + 4vw,6rem);
  --oh-gutter:clamp(1rem,.6rem + 2vw,2.5rem);
  --oh-container:72rem; --oh-measure:42rem;

  /* radii */
  --oh-radius-sm:2px; --oh-radius-md:4px; --oh-radius-lg:10px; --oh-radius-pill:999px;

  /* touch */
  --oh-tap:44px;
}
/* paper surface: switch roles */
.oh-paper{--oh-bg:var(--oh-paper); --oh-fg:var(--oh-ink); --oh-fg-2:var(--oh-saddle);
  --oh-link:var(--oh-rust); --oh-accent:var(--oh-rust); --oh-focus:var(--oh-rust-deep); --oh-line:var(--oh-line-paper)}
.oh-char{--oh-bg:var(--oh-char)}

/* Outlaw Hollow Distilling Co. — site styles (mockup-v1). Requires tokens.css.
   Naming: .oh-<block>__<element>--<modifier>. No inline styles anywhere (DNN conversion maps classes 1:1). */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:6rem}
body{margin:0;background:var(--oh-ink);color:var(--oh-cream);font-family:var(--oh-font-body);font-size:var(--oh-fs-md);line-height:var(--oh-lh-body);overflow-wrap:break-word}
body:is(:visited,:hover,:focus,:active){color:var(--oh-cream)}
img,svg,picture{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--oh-font-display);font-weight:700;line-height:var(--oh-lh-head);margin:0 0 var(--oh-space-4);letter-spacing:-.005em;text-wrap:balance}
h1{font-size:var(--oh-fs-h1);line-height:var(--oh-lh-tight)}
h2{font-size:var(--oh-fs-h2)}
h3{font-size:var(--oh-fs-h3)}
h4{font-size:var(--oh-fs-h4)}
p{margin:0 0 var(--oh-space-4)}
a{color:var(--oh-link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:is(:visited,:hover,:focus,:active){color:var(--oh-link);text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:hover:is(:visited,:hover,:focus,:active){text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--oh-focus);outline-offset:3px;border-radius:var(--oh-radius-sm)}
main:focus{outline:none}
.oh-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.oh-skip-link{position:absolute;left:var(--oh-space-4);top:-100px;z-index:100;background:var(--oh-amber);color:var(--oh-ink);font-weight:700;padding:var(--oh-space-3) var(--oh-space-4);border-radius:var(--oh-radius-md);text-decoration:none}
.oh-skip-link:is(:visited,:hover,:focus,:active){color:var(--oh-ink);text-decoration:none}
.oh-skip-link:focus{top:var(--oh-space-3);outline:3px solid var(--oh-cream);outline-offset:2px}
.oh-container{width:100%;max-width:var(--oh-container);margin-inline:auto;padding-inline:var(--oh-gutter)}
.oh-container--narrow{max-width:calc(var(--oh-measure) + 2*var(--oh-gutter))}
.oh-nowrap{white-space:nowrap}
.oh-paper,.oh-char,.oh-ink{background:var(--oh-bg);color:var(--oh-fg)}
.oh-paper:is(:visited,:hover,:focus,:active),.oh-char:is(:visited,:hover,:focus,:active),.oh-ink:is(:visited,:hover,:focus,:active){color:var(--oh-fg)}
/* aged paper: two soft radial stains + an SVG grain (original, generated in CSS) */
.oh-paper{background-color:var(--oh-paper);background-image:
  radial-gradient(120% 80% at 0% 0%,rgba(142,66,22,.10),transparent 55%),
  radial-gradient(90% 70% at 100% 100%,rgba(92,54,24,.12),transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .21 0 0 0 0 .09 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.oh-char{background-image:radial-gradient(80% 120% at 50% 0%,rgba(201,98,28,.10),transparent 60%)}
.oh-section{padding-block:var(--oh-section-y)}
.oh-section--tight{padding-block:calc(var(--oh-section-y)*.6)}

/* ---------- type helpers ---------- */
.oh-eyebrow{display:inline-block;font-family:var(--oh-font-body);font-size:var(--oh-fs-xs);font-weight:700;letter-spacing:var(--oh-track-caps);text-transform:uppercase;color:var(--oh-amber);margin:0 0 var(--oh-space-3)}
.oh-eyebrow:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-paper .oh-eyebrow{color:var(--oh-rust)}
.oh-paper .oh-eyebrow:is(:visited,:hover,:focus,:active){color:var(--oh-rust)}
.oh-lead{font-size:var(--oh-fs-lg);line-height:1.55;color:var(--oh-fg-2,var(--oh-muted));max-width:var(--oh-measure)}
.oh-lead:is(:visited,:hover,:focus,:active){color:var(--oh-fg-2,var(--oh-muted))}
.oh-subtitle{font-family:var(--oh-font-serif);font-weight:600;font-size:var(--oh-fs-h4);line-height:1.3;color:var(--oh-amber);margin:0 0 var(--oh-space-4)}
.oh-subtitle:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-paper .oh-subtitle{color:var(--oh-rust)}
.oh-paper .oh-subtitle:is(:visited,:hover,:focus,:active){color:var(--oh-rust)}
.oh-small{font-size:var(--oh-fs-sm);color:var(--oh-fg-2)}
.oh-small:is(:visited,:hover,:focus,:active){color:var(--oh-fg-2)}
.oh-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-weight:400}
/* copper rule with a diamond: the recurring brand divider */
.oh-rule{display:flex;align-items:center;gap:var(--oh-space-3);color:var(--oh-copper);margin:var(--oh-space-5) 0;max-width:22rem}
.oh-rule:is(:visited,:hover,:focus,:active){color:var(--oh-copper)}
.oh-rule::before,.oh-rule::after{content:"";height:2px;flex:1;background:currentColor;opacity:.85}
.oh-rule__gem{width:10px;height:10px;transform:rotate(45deg);border:2px solid currentColor;flex:none}
.oh-rule--center{margin-inline:auto}
.oh-paper .oh-rule{color:var(--oh-rust)}
.oh-paper .oh-rule:is(:visited,:hover,:focus,:active){color:var(--oh-rust)}

/* ---------- buttons ---------- */
.oh-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--oh-tap);padding:.7rem 1.4rem;border:2px solid transparent;border-radius:var(--oh-radius-md);font-family:var(--oh-font-body);font-weight:700;font-size:var(--oh-fs-sm);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.oh-button:is(:visited,:hover,:focus,:active){text-decoration:none}
.oh-button--primary{background:var(--oh-amber);color:var(--oh-ink)}
.oh-button--primary:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-button--primary:hover{background:var(--oh-copper);color:var(--oh-ink)}
.oh-button--primary:hover:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-button--ghost{border-color:var(--oh-amber);color:var(--oh-cream);background:transparent}
.oh-button--ghost:is(:visited,:hover,:focus,:active){color:var(--oh-cream)}
.oh-button--ghost:hover{background:rgba(224,160,74,.14)}
.oh-paper .oh-button--ghost{border-color:var(--oh-rust);color:var(--oh-ink)}
.oh-paper .oh-button--ghost:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-paper .oh-button--ghost:hover{background:rgba(142,66,22,.10)}
.oh-button--rust{background:var(--oh-rust);color:#fff}
.oh-button--rust:is(:visited,:hover,:focus,:active){color:#fff}
.oh-button--rust:hover{background:var(--oh-rust-deep);color:#fff}
.oh-button--rust:hover:is(:visited,:hover,:focus,:active){color:#fff}
.oh-button-row{display:flex;flex-wrap:wrap;gap:var(--oh-space-3);align-items:center}
.oh-ext::after{content:" \2197";font-weight:700}

/* ---------- header + nav ---------- */
.oh-header{position:sticky;top:0;z-index:50;background:rgba(26,17,8,.97);border-bottom:1px solid var(--oh-line-dark);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.oh-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--oh-space-4);min-height:76px}
.oh-brand{display:inline-flex;align-items:center;flex:none;border-radius:var(--oh-radius-sm)}
.oh-brand img{height:54px;width:auto}
.oh-nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--oh-space-1)}
.oh-nav__item{position:relative}
.oh-nav__link{display:inline-flex;align-items:center;gap:.35em;min-height:var(--oh-tap);padding:0 .9rem;color:var(--oh-cream);font-weight:600;font-size:var(--oh-fs-sm);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:var(--oh-radius-sm);background:none;border:0;font-family:inherit;cursor:pointer}
.oh-nav__link:is(:visited,:hover,:focus,:active){color:var(--oh-cream);text-decoration:none}
.oh-nav__link:hover,.oh-nav__item:focus-within>.oh-nav__link{color:var(--oh-amber)}
.oh-nav__link:hover:is(:visited,:hover,:focus,:active),.oh-nav__item:focus-within>.oh-nav__link:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-nav__link[aria-current="page"],.oh-nav__item--active>.oh-nav__link{color:var(--oh-amber);box-shadow:inset 0 -3px 0 var(--oh-copper)}
.oh-nav__link[aria-current="page"]:is(:visited,:hover,:focus,:active),.oh-nav__item--active>.oh-nav__link:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-nav__caret{width:.55em;height:.55em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.oh-subnav{list-style:none;margin:0;padding:var(--oh-space-2);position:absolute;top:100%;left:0;min-width:15rem;background:var(--oh-char);border:1px solid var(--oh-line-dark);border-top:3px solid var(--oh-copper);border-radius:0 0 var(--oh-radius-md) var(--oh-radius-md);box-shadow:var(--oh-shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s}
.oh-nav__item:hover>.oh-subnav,.oh-nav__item:focus-within>.oh-subnav{opacity:1;visibility:visible;transform:none}
.oh-subnav a{display:flex;align-items:center;min-height:var(--oh-tap);padding:0 var(--oh-space-3);color:var(--oh-cream);text-decoration:none;font-weight:500;border-radius:var(--oh-radius-sm)}
.oh-subnav a:is(:visited,:hover,:focus,:active){color:var(--oh-cream);text-decoration:none}
.oh-subnav a:hover,.oh-subnav a[aria-current="page"]{background:rgba(224,160,74,.12);color:var(--oh-amber)}
.oh-subnav a:hover:is(:visited,:hover,:focus,:active),.oh-subnav a[aria-current="page"]:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-nav-toggle{display:none}
.oh-nav__close{display:none}

@media (max-width:63.99em){
  .oh-header__inner{min-height:64px}
  .oh-brand img{height:40px}
  .oh-nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:var(--oh-tap);min-height:var(--oh-tap);padding:0 .75rem;color:var(--oh-cream);border:2px solid var(--oh-line-dark);border-radius:var(--oh-radius-md);text-decoration:none;font-weight:700;font-size:var(--oh-fs-xs);letter-spacing:.12em;text-transform:uppercase;background:transparent}
.oh-nav-toggle:is(:visited,:hover,:focus,:active){color:var(--oh-cream);text-decoration:none}
  .oh-nav-toggle__bars,.oh-nav-toggle__bars::before,.oh-nav-toggle__bars::after{display:block;width:18px;height:2px;background:var(--oh-amber);position:relative;content:""}
  .oh-nav-toggle__bars::before{position:absolute;top:-6px}.oh-nav-toggle__bars::after{position:absolute;top:6px}
  .oh-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--oh-ink);border-bottom:3px solid var(--oh-copper);max-height:calc(100vh - 64px);overflow-y:auto;box-shadow:var(--oh-shadow)}
  .oh-nav:target,.oh-nav.is-open{display:block}
  .oh-js .oh-nav:target:not(.is-open){display:none}
  .oh-nav__list{flex-direction:column;align-items:stretch;padding:var(--oh-space-3) var(--oh-gutter) var(--oh-space-5);gap:0}
  .oh-nav__item{border-bottom:1px solid var(--oh-line-dark)}
  .oh-nav__link{width:100%;justify-content:space-between;min-height:52px;padding:0 var(--oh-space-2);font-size:var(--oh-fs-md)}
  .oh-nav__link[aria-current="page"],.oh-nav__item--active>.oh-nav__link{box-shadow:none}
  .oh-nav__caret{display:none}
  .oh-subnav{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:0 0 var(--oh-space-3) var(--oh-space-4);min-width:0}
  .oh-nav__close{display:inline-flex;align-items:center;min-height:var(--oh-tap);margin:var(--oh-space-3) var(--oh-gutter) var(--oh-space-4);color:var(--oh-amber);font-weight:600}
.oh-nav__close:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
  .oh-js .oh-nav__close{display:none}
}

/* ---------- hero (home) ---------- */
.oh-hero{position:relative;isolation:isolate;min-height:min(88vh,52rem);display:flex;align-items:flex-end;overflow:hidden;background:var(--oh-ink)}
.oh-hero__media,.oh-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;z-index:-2}
.oh-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(26,17,8,.94) 0%,rgba(26,17,8,.78) 38%,rgba(26,17,8,.2) 72%,rgba(26,17,8,.35) 100%),
  linear-gradient(0deg,rgba(26,17,8,.95) 0%,rgba(26,17,8,0) 45%)}
.oh-hero__inner{padding-block:clamp(6rem,10vw,9rem) clamp(3rem,6vw,5.5rem)}
.oh-hero__title{font-size:var(--oh-fs-hero);line-height:1.02;max-width:13ch;margin-bottom:var(--oh-space-5);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.oh-hero__title span{display:block;color:var(--oh-amber)}
.oh-hero__title span:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-hero__lead{font-size:var(--oh-fs-lg);max-width:34rem;color:var(--oh-cream);margin-bottom:var(--oh-space-6)}
.oh-hero__lead:is(:visited,:hover,:focus,:active){color:var(--oh-cream)}
@media (max-width:47.99em){
  .oh-hero{min-height:auto}
  .oh-hero__media img{object-position:50% 30%}
  .oh-hero::after{background:linear-gradient(0deg,rgba(26,17,8,.97) 0%,rgba(26,17,8,.86) 48%,rgba(26,17,8,.35) 100%)}
  .oh-hero__inner{padding-top:16rem}
}

/* ---------- page head (inner pages) ---------- */
.oh-page-head{position:relative;isolation:isolate;overflow:hidden;background:var(--oh-ink);border-bottom:1px solid var(--oh-line-dark)}
.oh-page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 140% at 85% 0%,rgba(201,98,28,.22),transparent 60%),radial-gradient(50% 90% at 0% 100%,rgba(92,54,24,.45),transparent 70%)}
.oh-page-head__inner{padding-block:clamp(2.5rem,2rem + 3vw,5rem) clamp(2rem,1.5rem + 2.5vw,4rem)}
.oh-page-head__title{max-width:22ch}
.oh-page-head__title--long{font-size:clamp(1.875rem,1.4rem + 2.2vw,3.5rem);max-width:28ch}
.oh-page-head__title-sub{display:block;font-size:.55em;color:var(--oh-amber);margin-top:.35em;line-height:1.2}
.oh-page-head__title-sub:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-page-head--image .oh-page-head__bg{position:absolute;inset:0;z-index:-2}
.oh-page-head--image .oh-page-head__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.5}
.oh-page-head--image::before{background:linear-gradient(90deg,rgba(26,17,8,.96) 0%,rgba(26,17,8,.86) 50%,rgba(26,17,8,.55) 100%)}
.oh-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin:0 0 var(--oh-space-4);padding:0;font-size:var(--oh-fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--oh-muted)}
.oh-breadcrumb ol:is(:visited,:hover,:focus,:active){color:var(--oh-muted)}
.oh-breadcrumb li+li::before{content:"\25C6";color:var(--oh-copper);font-size:.6em;margin-right:.5rem;vertical-align:.15em}
.oh-breadcrumb li+li:is(:visited,:hover,:focus,:active)::before{color:var(--oh-copper)}
.oh-breadcrumb a{color:var(--oh-muted);display:inline-block;padding-block:.35rem}
.oh-breadcrumb a:is(:visited,:hover,:focus,:active){color:var(--oh-muted)}
.oh-breadcrumb a:hover{color:var(--oh-amber)}
.oh-breadcrumb a:hover:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}

/* ---------- layout helpers ---------- */
.oh-split{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (min-width:56em){.oh-split{grid-template-columns:1.1fr .9fr}.oh-split--media-first{grid-template-columns:.9fr 1.1fr}.oh-split--top{align-items:start}}
.oh-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,.6rem + 1.5vw,2rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.oh-grid--2{grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr))}
.oh-section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--oh-space-4);margin-bottom:var(--oh-space-6)}
.oh-section-head h2{margin:0}

/* ---------- framed photo ---------- */
.oh-frame{margin:0;position:relative;padding:10px;background:linear-gradient(135deg,var(--oh-copper),var(--oh-saddle) 60%,var(--oh-rust));border-radius:var(--oh-radius-md);box-shadow:var(--oh-shadow)}
.oh-frame img{width:100%;border-radius:2px}
.oh-frame figcaption{font-size:var(--oh-fs-xs);color:var(--oh-cream);padding:var(--oh-space-2) var(--oh-space-1) 0}
.oh-frame figcaption:is(:visited,:hover,:focus,:active){color:var(--oh-cream)}

/* ---------- prose (paper) ---------- */
.oh-prose{max-width:var(--oh-measure)}
.oh-prose p,.oh-prose li{font-size:var(--oh-fs-md)}
.oh-prose h2{font-size:var(--oh-fs-h3);margin-top:var(--oh-space-7)}
.oh-prose h2:first-child{margin-top:0}
.oh-prose > p:first-of-type::first-letter{font-family:var(--oh-font-display);font-weight:700;float:left;font-size:3.6em;line-height:.85;padding:.06em .1em 0 0;color:var(--oh-rust)}
.oh-prose > p:first-of-type:is(:visited,:hover,:focus,:active)::first-letter{color:var(--oh-rust)}
.oh-prose--plain > p:first-of-type::first-letter{all:unset}
.oh-prose strong{font-weight:700}
.oh-signoff{font-family:var(--oh-font-serif);font-weight:600;font-size:var(--oh-fs-lg);line-height:1.45;border-left:4px solid var(--oh-rust);padding:var(--oh-space-1) 0 var(--oh-space-1) var(--oh-space-4);margin:var(--oh-space-6) 0 0}
.oh-signoff p{margin:0 0 var(--oh-space-2)}

/* ---------- cards ---------- */
.oh-card{height:100%;display:flex;flex-direction:column;background:var(--oh-char);border:1px solid var(--oh-line-dark);border-radius:var(--oh-radius-md);overflow:hidden;position:relative;transition:transform .2s,border-color .2s}
.oh-card:hover{transform:translateY(-3px);border-color:var(--oh-copper)}
.oh-card__media{aspect-ratio:4/5;overflow:hidden;background:var(--oh-ink)}
.oh-card__media img{width:100%;height:100%;object-fit:cover}
.oh-card__media--wide{aspect-ratio:16/10}
.oh-card__body{padding:var(--oh-space-5);display:flex;flex-direction:column;flex:1}
.oh-card__title{font-size:var(--oh-fs-h4);margin:0 0 var(--oh-space-3)}
.oh-card__title a{color:var(--oh-cream);text-decoration:none}
.oh-card__title a:is(:visited,:hover,:focus,:active){color:var(--oh-cream);text-decoration:none}
.oh-card__title a::after{content:"";position:absolute;inset:0}
.oh-card__title a:focus-visible{outline:none}
.oh-card:focus-within{outline:3px solid var(--oh-amber);outline-offset:3px}
.oh-card__text{color:var(--oh-muted);font-size:var(--oh-fs-sm);margin:0 0 var(--oh-space-4)}
.oh-card__text:is(:visited,:hover,:focus,:active){color:var(--oh-muted)}
.oh-card__more{margin-top:auto;font-weight:700;font-size:var(--oh-fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--oh-amber)}
.oh-card__more:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-card__meta{font-size:var(--oh-fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--oh-amber);margin:0 0 var(--oh-space-2)}
.oh-card__meta:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-paper .oh-card{background:#FBF3E3;border-color:var(--oh-line-paper)}
.oh-paper .oh-card:hover{border-color:var(--oh-rust)}
.oh-paper .oh-card__title a{color:var(--oh-ink)}
.oh-paper .oh-card__title a:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-paper .oh-card__text{color:var(--oh-saddle)}
.oh-paper .oh-card__text:is(:visited,:hover,:focus,:active){color:var(--oh-saddle)}
.oh-paper .oh-card__more,.oh-paper .oh-card__meta{color:var(--oh-rust)}
.oh-paper .oh-card__more:is(:visited,:hover,:focus,:active),.oh-paper .oh-card__meta:is(:visited,:hover,:focus,:active){color:var(--oh-rust)}
.oh-paper .oh-card:focus-within{outline-color:var(--oh-rust-deep)}

/* typographic post card (no usable image) */
.oh-card__type{aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--oh-space-2);padding:var(--oh-space-4);text-align:center;background:radial-gradient(90% 90% at 50% 40%,var(--oh-saddle),var(--oh-ink));color:var(--oh-amber);border-bottom:3px solid var(--oh-copper)}
.oh-card__type:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-card__type-mark{width:56px;height:56px;opacity:.95}
.oh-card__type-label{font-family:var(--oh-font-display);font-weight:700;font-size:1.25rem;letter-spacing:.04em;color:var(--oh-cream)}
.oh-card__type-label:is(:visited,:hover,:focus,:active){color:var(--oh-cream)}

/* featured post */
.oh-feature{display:grid;gap:0;background:var(--oh-char);border:1px solid var(--oh-line-dark);border-radius:var(--oh-radius-md);overflow:hidden;position:relative;margin-bottom:clamp(1rem,.6rem + 1.5vw,2rem)}
@media (min-width:56em){.oh-feature{grid-template-columns:1.2fr 1fr}}
.oh-feature .oh-card__media{aspect-ratio:16/10}
.oh-feature .oh-card__body{padding:clamp(1.5rem,1rem + 2vw,3rem);justify-content:center}
.oh-feature .oh-card__title{font-size:var(--oh-fs-h3)}
.oh-feature:focus-within{outline:3px solid var(--oh-amber);outline-offset:3px}
.oh-pin{display:inline-flex;align-self:flex-start;align-items:center;gap:.4em;font-size:var(--oh-fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--oh-ink);background:var(--oh-amber);border-radius:var(--oh-radius-pill);padding:.2rem .7rem;margin-bottom:var(--oh-space-3)}
.oh-pin:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}

/* category chips */
.oh-chips{list-style:none;margin:0 0 var(--oh-space-6);padding:0;display:flex;flex-wrap:wrap;gap:var(--oh-space-2)}
.oh-chips a{display:inline-flex;align-items:center;min-height:var(--oh-tap);padding:0 1.1rem;border:1px solid var(--oh-line-dark);border-radius:var(--oh-radius-pill);color:var(--oh-cream);text-decoration:none;font-size:var(--oh-fs-sm);font-weight:600}
.oh-chips a:is(:visited,:hover,:focus,:active){color:var(--oh-cream);text-decoration:none}
.oh-chips a:hover{border-color:var(--oh-amber);color:var(--oh-amber)}
.oh-chips a:hover:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-chips a[aria-current="page"]{background:var(--oh-amber);border-color:var(--oh-amber);color:var(--oh-ink)}
.oh-chips a[aria-current="page"]:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}

/* ---------- product (label-style spec card) ---------- */
.oh-product{display:grid;gap:clamp(2rem,1rem + 4vw,4rem);align-items:start}
@media (min-width:56em){.oh-product{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.oh-product__media{position:relative}
@media (min-width:56em){.oh-product__media{position:sticky;top:7rem}}
.oh-label{position:relative;background:var(--oh-paper);color:var(--oh-ink);padding:clamp(1.5rem,1rem + 2vw,2.5rem);border-radius:var(--oh-radius-md);box-shadow:var(--oh-shadow);outline:2px solid var(--oh-rust);outline-offset:-10px}
.oh-label:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-label::before{content:"";position:absolute;inset:16px;border:1px solid var(--oh-line-paper);pointer-events:none;border-radius:2px}
.oh-label__kicker{font-size:var(--oh-fs-xs);font-weight:700;letter-spacing:var(--oh-track-caps);text-transform:uppercase;color:var(--oh-rust);margin:0 0 var(--oh-space-2)}
.oh-label__kicker:is(:visited,:hover,:focus,:active){color:var(--oh-rust)}
.oh-label__name{font-size:var(--oh-fs-h2);margin:0 0 var(--oh-space-2);color:var(--oh-ink)}
.oh-label__name:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-label__sub{font-family:var(--oh-font-serif);font-weight:600;font-size:var(--oh-fs-lg);color:var(--oh-saddle);margin:0 0 var(--oh-space-5)}
.oh-label__sub:is(:visited,:hover,:focus,:active){color:var(--oh-saddle)}
.oh-spec{display:grid;grid-template-columns:max-content 1fr;gap:var(--oh-space-2) var(--oh-space-5);margin:0;border-top:2px solid var(--oh-rust);padding-top:var(--oh-space-4)}
.oh-spec dt{font-size:var(--oh-fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oh-rust);padding-top:.2rem}
.oh-spec dt:is(:visited,:hover,:focus,:active){color:var(--oh-rust)}
.oh-spec dd{margin:0;font-weight:500}
@media (max-width:30em){.oh-spec{grid-template-columns:1fr;gap:0}.oh-spec dd{margin-bottom:var(--oh-space-3)}}
.oh-notes{display:grid;gap:var(--oh-space-3);margin:0 0 var(--oh-space-5)}
.oh-notes div{display:grid;grid-template-columns:8.5rem 1fr;gap:var(--oh-space-3);padding:var(--oh-space-3) 0;border-bottom:1px solid var(--oh-line)}
.oh-notes dt{font-family:var(--oh-font-serif);font-weight:600;color:var(--oh-amber)}
.oh-notes dt:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-paper .oh-notes dt{color:var(--oh-rust)}
.oh-paper .oh-notes dt:is(:visited,:hover,:focus,:active){color:var(--oh-rust)}
.oh-notes dd{margin:0}
@media (max-width:30em){.oh-notes div{grid-template-columns:1fr;gap:0}}
.oh-tagline{margin:var(--oh-space-6) 0 0;padding:var(--oh-space-5) var(--oh-space-5) var(--oh-space-5) var(--oh-space-6);background:var(--oh-char);border-left:6px solid var(--oh-copper);border-radius:0 var(--oh-radius-md) var(--oh-radius-md) 0;font-family:var(--oh-font-display);font-weight:700;font-size:var(--oh-fs-h4);line-height:1.3;color:var(--oh-cream)}
.oh-tagline:is(:visited,:hover,:focus,:active){color:var(--oh-cream)}
.oh-tagline p{margin:0 0 var(--oh-space-2)}.oh-tagline p:last-child{margin:0;color:var(--oh-amber)}
.oh-tagline p:last-child:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-copy p{color:var(--oh-cream)}
.oh-copy p:is(:visited,:hover,:focus,:active){color:var(--oh-cream)}
.oh-copy h2{font-size:var(--oh-fs-h3);margin-top:var(--oh-space-6)}
.oh-copy h2:first-child{margin-top:0}

/* SFK badge (inline SVG) */
.oh-badge{width:min(15rem,60%);position:absolute;right:-.75rem;bottom:-1.5rem;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.oh-badge--inline{position:static;width:9rem;margin:0 0 var(--oh-space-4)}
.oh-badge text{font-family:var(--oh-font-display);font-weight:700}

/* gallery */
.oh-gallery{list-style:none;margin:0;padding:0;display:grid;gap:var(--oh-space-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr))}
.oh-gallery li{margin:0}
.oh-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--oh-radius-md);border:1px solid var(--oh-line-dark)}

/* internal placeholder (dev-only; remove before launch) */
.oh-tbd{display:inline-block;font-family:var(--oh-font-body);font-size:var(--oh-fs-xs);font-weight:700;letter-spacing:.02em;color:var(--oh-ink);background:#F2D27A;border:1px dashed var(--oh-ink);border-radius:var(--oh-radius-sm);padding:.1rem .45rem;text-transform:none}
.oh-tbd:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-placeholder{display:grid;place-items:center;gap:var(--oh-space-2);min-height:14rem;padding:var(--oh-space-5);border:2px dashed var(--oh-amber);border-radius:var(--oh-radius-md);text-align:center;color:var(--oh-muted);background:repeating-linear-gradient(135deg,rgba(224,160,74,.05) 0 12px,transparent 12px 24px)}
.oh-placeholder:is(:visited,:hover,:focus,:active){color:var(--oh-muted)}

/* ---------- drinks feature rows ---------- */
.oh-feature-row{display:grid;gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center;padding-block:var(--oh-space-7);border-bottom:1px solid var(--oh-line)}
.oh-feature-row:last-child{border-bottom:0}
@media (min-width:56em){.oh-feature-row{grid-template-columns:1fr 1fr}.oh-feature-row:nth-child(even) .oh-feature-row__media{order:2}}
.oh-feature-row__media img{border-radius:var(--oh-radius-md);box-shadow:var(--oh-shadow);aspect-ratio:3/2;object-fit:cover;width:100%}
.oh-feature-row__media a{display:block;border-radius:var(--oh-radius-md)}

/* ---------- article ---------- */
.oh-article{display:grid;gap:clamp(2rem,1rem + 4vw,4rem)}
@media (min-width:64em){.oh-article{grid-template-columns:minmax(0,1fr) 18rem}}
.oh-article__meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-size:var(--oh-fs-sm);color:var(--oh-muted);margin:0}
.oh-article__meta:is(:visited,:hover,:focus,:active){color:var(--oh-muted)}
.oh-article__meta a{color:var(--oh-amber)}
.oh-article__meta a:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-article__hero{margin:0 0 var(--oh-space-6)}
.oh-article__hero img{width:100%;border-radius:var(--oh-radius-md);box-shadow:var(--oh-shadow)}
.oh-share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--oh-space-2);margin-top:var(--oh-space-7);padding-top:var(--oh-space-5);border-top:1px solid var(--oh-line)}
.oh-share p{margin:0 var(--oh-space-2) 0 0;font-weight:700}
.oh-share a{display:inline-flex;align-items:center;justify-content:center;width:var(--oh-tap);height:var(--oh-tap);border:1px solid var(--oh-line);border-radius:50%;color:var(--oh-link)}
.oh-share a:is(:visited,:hover,:focus,:active){color:var(--oh-link)}
.oh-share svg{width:18px;height:18px;fill:currentColor}
.oh-sidebar{display:grid;gap:var(--oh-space-6);align-content:start}
.oh-sidebar__box{background:#FBF3E3;border:1px solid var(--oh-line-paper);border-top:4px solid var(--oh-rust);border-radius:var(--oh-radius-md);padding:var(--oh-space-5)}
.oh-sidebar__box h2{font-size:var(--oh-fs-h4);margin-bottom:var(--oh-space-3)}
.oh-sidebar__box ul{list-style:none;margin:0;padding:0}
.oh-sidebar__box li{border-bottom:1px solid var(--oh-line-paper)}
.oh-sidebar__box li:last-child{border-bottom:0}
.oh-sidebar__box a{display:flex;align-items:center;min-height:var(--oh-tap);padding:.35rem 0;font-weight:600;text-decoration:none}
.oh-sidebar__box a:is(:visited,:hover,:focus,:active){text-decoration:none}
.oh-sidebar__box a:hover{text-decoration:underline}
.oh-sidebar__box a:hover:is(:visited,:hover,:focus,:active){text-decoration:underline}
.oh-sidebar__box .oh-small{display:block;margin:-.25rem 0 .5rem}

/* ---------- merch ---------- */
.oh-merch .oh-card__media{aspect-ratio:1;background:#fff}
.oh-merch .oh-card__media img{object-fit:contain}
.oh-price{display:flex;align-items:center;gap:var(--oh-space-2);margin:0 0 var(--oh-space-4)}
.oh-shop-banner{display:flex;flex-wrap:wrap;gap:var(--oh-space-4);align-items:center;justify-content:space-between;padding:var(--oh-space-5);margin-bottom:var(--oh-space-6);background:var(--oh-char);border:1px solid var(--oh-line-dark);border-left:6px solid var(--oh-copper);border-radius:var(--oh-radius-md)}
.oh-shop-banner p{margin:0}



.oh-field{display:grid;gap:var(--oh-space-2)}
.oh-field label{font-weight:700;font-size:var(--oh-fs-sm)}
.oh-field input,.oh-field textarea{width:100%;min-height:var(--oh-tap);padding:.75rem .9rem;font:inherit;color:var(--oh-ink);background:#FFFBF3;border:2px solid var(--oh-saddle);border-radius:var(--oh-radius-md)}
.oh-field input:is(:visited,:hover,:focus,:active),.oh-field textarea:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-field textarea{min-height:10rem;resize:vertical}
.oh-field input:focus-visible,.oh-field textarea:focus-visible{outline:3px solid var(--oh-rust-deep);outline-offset:2px;border-color:var(--oh-rust-deep)}
.oh-req{color:var(--oh-rust);font-weight:700}
.oh-req:is(:visited,:hover,:focus,:active){color:var(--oh-rust)}




/* ---------- social ---------- */
.oh-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--oh-space-3)}
.oh-social a{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--oh-tap);padding:0 1rem 0 .4rem;border:1px solid var(--oh-line-dark);border-radius:var(--oh-radius-pill);color:var(--oh-cream);text-decoration:none;font-weight:600;font-size:var(--oh-fs-sm)}
.oh-social a:is(:visited,:hover,:focus,:active){color:var(--oh-cream);text-decoration:none}
.oh-social a:hover{border-color:var(--oh-amber);color:var(--oh-amber)}
.oh-social a:hover:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-social__icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--oh-amber);color:var(--oh-ink)}
.oh-social__icon:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-social__icon svg{width:17px;height:17px;fill:currentColor}

/* ---------- footer ---------- */
.oh-footer{background:var(--oh-ink);border-top:4px solid var(--oh-copper);color:var(--oh-muted);font-size:var(--oh-fs-sm)}
.oh-footer:is(:visited,:hover,:focus,:active){color:var(--oh-muted)}
.oh-footer__connect{background:var(--oh-char);border-bottom:1px solid var(--oh-line-dark)}
.oh-footer__connect-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--oh-space-5);padding-block:var(--oh-space-6)}
.oh-footer__connect h2{font-size:var(--oh-fs-h3);margin:0;color:var(--oh-cream)}
.oh-footer__connect h2:is(:visited,:hover,:focus,:active){color:var(--oh-cream)}
.oh-footer__grid{display:grid;gap:var(--oh-space-6);padding-block:var(--oh-space-7);grid-template-columns:1fr}
@media (min-width:48em){.oh-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.oh-footer__brand img{height:64px;width:auto;margin-bottom:var(--oh-space-4)}
.oh-footer__brand p{max-width:26rem}
.oh-footer__title{font-family:var(--oh-font-body);font-size:var(--oh-fs-xs);font-weight:700;letter-spacing:var(--oh-track-caps);text-transform:uppercase;color:var(--oh-amber);margin:0 0 var(--oh-space-3)}
.oh-footer__title:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-footer__links{list-style:none;margin:0;padding:0}
.oh-footer__links a{display:inline-flex;align-items:center;min-height:36px;color:var(--oh-cream);text-decoration:none}
.oh-footer__links a:is(:visited,:hover,:focus,:active){color:var(--oh-cream);text-decoration:none}
.oh-footer__links a:hover{color:var(--oh-amber);text-decoration:underline}
.oh-footer__links a:hover:is(:visited,:hover,:focus,:active){color:var(--oh-amber);text-decoration:underline}
.oh-footer__bar{border-top:1px solid var(--oh-line-dark);padding-block:var(--oh-space-5);display:flex;flex-wrap:wrap;gap:var(--oh-space-3);justify-content:space-between}
.oh-footer__bar p{margin:0}
@media (max-width:47.99em){.oh-footer__links a{min-height:var(--oh-tap)}}

/* ---------- age gate (component; DNN module or skin object) ---------- */
.oh-gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--oh-gutter);background:rgba(16,10,4,.86);backdrop-filter:blur(4px)}
.oh-gate[hidden]{display:none}
.oh-gate__panel{width:min(34rem,100%);max-height:calc(100vh - 2rem);overflow:auto;text-align:center;padding:clamp(1.5rem,1rem + 3vw,3rem)}
.oh-gate__panel img{height:56px;width:auto;margin:0 auto var(--oh-space-5)}
.oh-gate__panel h2{font-size:var(--oh-fs-h4);line-height:1.35}
.oh-gate__panel ul{text-align:left;margin:0 auto var(--oh-space-4);padding-left:1.2rem;max-width:26rem}
.oh-gate__panel li{margin-bottom:var(--oh-space-2)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.oh-header,.oh-footer__connect,.oh-nav-toggle{display:none}body{background:#fff;color:#000}
body:is(:visited,:hover,:focus,:active){color:#000}}

/* ---------- late additions ---------- */
.oh-tagline .oh-label__kicker{color:var(--oh-amber);font-family:var(--oh-font-body);font-size:var(--oh-fs-xs);margin-bottom:var(--oh-space-3)}
.oh-tagline .oh-label__kicker:is(:visited,:hover,:focus,:active){color:var(--oh-amber)}
.oh-tagline .oh-label__kicker + p{color:var(--oh-cream)}
.oh-tagline .oh-label__kicker + p:is(:visited,:hover,:focus,:active){color:var(--oh-cream)}
.oh-card__media--post{aspect-ratio:1/1}
.oh-card__media--post img{object-position:center top}
.oh-feature .oh-card__media--post{aspect-ratio:auto;max-height:34rem}
.oh-article__meta span{color:var(--oh-copper)}
.oh-article__meta span:is(:visited,:hover,:focus,:active){color:var(--oh-copper)}
/* tap targets (WCAG 2.5.8 is 24px; brief asks 44px for standalone controls) */
.oh-brand{min-height:var(--oh-tap)}
.oh-breadcrumb a,.oh-article__meta a{display:inline-flex;align-items:center;min-height:var(--oh-tap)}
.oh-card__title a,.oh-gate a{display:inline-block;padding-block:.7rem;margin-block:-.7rem}
/* v1.1 */
.oh-button-row--center{justify-content:center;margin-top:var(--oh-space-6)}
.oh-sidebar__all{display:inline-flex;align-items:center;min-height:var(--oh-tap);font-weight:600}
.oh-contact{display:grid;gap:var(--oh-space-5);align-content:start}
.oh-social--large{flex-direction:column;align-items:flex-start;gap:var(--oh-space-3)}
.oh-social--large a{font-size:var(--oh-fs-md);padding-inline:1.1rem 1.4rem}
.oh-paper .oh-social a{color:var(--oh-ink);border-color:var(--oh-line-paper);background:rgba(255,255,255,.35)}
.oh-paper .oh-social a:is(:visited,:hover,:focus,:active){color:var(--oh-ink)}
.oh-paper .oh-social a:hover{color:var(--oh-rust-deep);border-color:var(--oh-rust)}
.oh-paper .oh-social a:hover:is(:visited,:hover,:focus,:active){color:var(--oh-rust-deep)}

/* =====================================================================================================================
   DNN integration (src/skin-additions.css). Everything above this line is the approved mockup v1.1 CSS
   (css/tokens.css + css/site.css), changed only by src/build_css.py's listed, mechanical transforms.
   ===================================================================================================================== */

/* DNN wraps the skin in its page Form element (#Form); module wrappers and the HTML module's .Normal must not add their own type. */
#Form{margin:0}
.oh-theme .Normal,.oh-gate .Normal{font-size:inherit;line-height:inherit;color:inherit;font-family:inherit}
.oh-theme .DnnModule,.oh-theme .DNNModuleContent{margin:0;padding:0}

/* Empty panes collapse in view mode; in edit mode they stay visible and droppable. */
body:not(.dnnEditState) .oh-pane.DNNEmptyPane{display:none}
.dnnEditState .oh-pane{min-height:4rem;outline:1px dashed var(--oh-line)}

/* The skin's age gate: lock page scroll while it is open (html.oh-gated is set by the gate's inline check). */
html.oh-gated,html.oh-gated body{overflow:hidden}

/* ---------------------------------------------------------------------------------------------------------------------
   Pre-theme portal-2 content (loaded 2026-10-25 06:00 ET, one HTML module per page, classes ohd-*). It used to be styled
   by the PageHeaderTag_OHD-AgeGate portal setting (removed with the old gate when this theme is applied). Until the mockup
   content (content/*.html from gen_content.py) replaces it, the theme gives it the mockup's container, type and colours.
   A module whose content brings its own oh- classes (the mockup content) is left alone.
   --------------------------------------------------------------------------------------------------------------------- */
.oh-pane .Normal:not(:has(> [class^="oh-"],> [class*=" oh-"])){width:min(100% - 2*var(--oh-gutter),var(--oh-container));margin-inline:auto;padding-block:var(--oh-space-7) var(--oh-space-8)}
.oh-pane .Normal:not(:has(> [class^="oh-"],> [class*=" oh-"])) > *{max-width:var(--oh-measure)}
.oh-pane .Normal:not(:has(> [class^="oh-"],> [class*=" oh-"])) > :is(img,.ohd-cards,.ohd-gallery,h1){max-width:100%}
.oh-pane .Normal:not(:has(> [class^="oh-"],> [class*=" oh-"])) img{height:auto;border-radius:var(--oh-radius-md)}
.oh-pane .Normal:not(:has(> [class^="oh-"],> [class*=" oh-"])) h2{margin-top:var(--oh-space-7)}
.ohd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--oh-tap);padding:.7em 1.4em;background:var(--oh-rust);color:var(--oh-cream);font-family:var(--oh-font-body);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-radius:var(--oh-radius-sm)}
.ohd-btn:is(:visited,:hover,:focus,:active){color:var(--oh-cream);text-decoration:none}
.ohd-btn:hover{background:var(--oh-rust-deep)}
.ohd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--oh-space-5);margin:var(--oh-space-5) 0;padding:0;list-style:none}
.ohd-card{background:var(--oh-char);border:1px solid var(--oh-line);border-radius:var(--oh-radius-lg);padding:var(--oh-space-4)}
.ohd-card h2{font-size:var(--oh-fs-h4);margin:var(--oh-space-3) 0}
.ohd-card img{display:block;width:100%}
.ohd-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--oh-space-3);margin:var(--oh-space-4) 0}
.ohd-gallery figure{margin:0}
.ohd-gallery img{width:100%;height:auto;display:block}
.ohd-posts{list-style:none;padding:0}
.ohd-posts li{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--oh-space-3);padding:var(--oh-space-2) 0;border-bottom:1px solid var(--oh-line)}
.ohd-posts a,.ohd-card h2 a{display:inline-flex;align-items:center;min-height:var(--oh-tap)}
.ohd-date{color:var(--oh-fg-2);font-size:var(--oh-fs-sm)}
/* Each pre-theme page also has a "Footer" HTML module (CONNECT WITH US with three social links, SHOP, (c) 2025).
   The skin footer replaces it (v1.1: X and YouTube only), so it is hidden, not deleted. To show it again, delete this rule. */
.ohd-footer{display:none}
/* 01.00.01 (Carla, 2026-10-25): on small screens the overlap medallion (the .oh-badge over a product photo, e.g. Six Finger Kat
   Doppelbock) shrinks from 240px to ~140px (at most 38% of the photo minus .5rem, so it stays clear of the bottle label) and sits
   inside the photo's bottom-right corner, 1rem (16px) from both edges, instead of overhanging it.
   Desktop and the inline variant (.oh-badge--inline) are unchanged. */
/* 01.00.04 (Carla N7): the 16px inset is now measured to the PHOTO edge, not the 10px copper frame: calc(1rem + 10px).
   Size recomputed so the medallion stays clear of the bottle label after moving 10px further in: the label's right edge is at
   56.7% of the photo width (measured on oh-sfk-bottle-hand-720.webp, x=408 of 720), so the badge must be narrower than
   43.3% of the photo - 26px; min(8.75rem, 42% - 2.25rem) gives 140/113/85px at 480/390/320 (>=15px clear of the label). */
@media (max-width:30em){.oh-product__media>.oh-badge:not(.oh-badge--inline){width:min(8.75rem,42% - 2.25rem);right:calc(1rem + 10px);bottom:calc(1rem + 10px)}}

/* 01.00.04 (Carla N6, same approach as SPS 01.00.04 + its m4 lesson): the Menu toggle never shrinks, and below 362px it is an
   icon-only 44x44 hamburger. The "Menu"/"Close" text stays in the DOM (visually hidden), so the accessible name is unchanged.
   Between 362px and ~374px the header lockup may shrink a few px (it keeps its aspect ratio) instead of the toggle overflowing. */
.oh-nav-toggle{flex-shrink:0}
@media (max-width:63.99em){
  .oh-brand{flex:0 1 auto;min-width:0}
  .oh-brand img{width:calc(40px * 673 / 120);max-width:100%;height:auto}
}
@media (max-width:361.98px){
  .oh-nav-toggle{width:2.75rem;height:2.75rem;min-width:2.75rem;padding:0;gap:0;justify-content:center}
  .oh-nav-toggle__text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}
/* 01.00.04 (Carla N2): breadcrumb = DNN BREADCRUMB skin object, RenderingVersion 2 (see default.ascx). The mockup's
   .oh-breadcrumb ol/li/a rules style it. Extras for DNN's markup: hide the empty separator spans (the diamond comes from the
   mockup's li+li::before), hide disabled non-link parent levels (Elixirs, About have no page) so the trail reads like the mockup
   (Home > Spirits > The Widow's Son), and the no-JS fallback band (shown above the page head when the script does not run). */
.oh-breadcrumb li>span[aria-hidden="true"]:empty{display:none}
.oh-breadcrumb li{display:flex;align-items:center;min-width:0}
.oh-breadcrumb [aria-current] a{text-decoration:none}
.oh-breadcrumb [aria-current] a:is(:visited,:hover,:focus,:active){text-decoration:none}
.oh-breadcrumb li:not([aria-current]):has(>span[itemprop="name"]){display:none}
.oh-main>.oh-breadcrumb{background:var(--oh-ink)}
.oh-main>.oh-breadcrumb>nav{width:100%;max-width:var(--oh-container);margin-inline:auto;padding:var(--oh-space-5) var(--oh-gutter) 0}
.oh-main>.oh-breadcrumb ol{margin-bottom:0}
/* 01.00.04 (Roggie: real-people photos -> typographic title cards): the blog index's .oh-card__type card can stand in for a post
   image (hero figure, or inside a framed figure). Keep the mark at its card size there (the hero/frame img rules set width:100%). */
.oh-article__hero>.oh-card__type{border-radius:var(--oh-radius-md);box-shadow:var(--oh-shadow)}
.oh-frame .oh-card__type{border-radius:2px}
.oh-article__hero .oh-card__type-mark,.oh-frame .oh-card__type-mark{width:56px;height:56px;border-radius:0;box-shadow:none}
.oh-frame>a:has(>.oh-card__type){display:block;border-radius:2px}
/* 01.00.05 (Carla, 0104 follow-up): dark variant of the title card for a post image that links to a video (Popcorn Sutton
   documentary), with a centered play-triangle glyph. Markup: <div class="oh-card__type oh-card__type--dark" aria-hidden="true">
   <img class="oh-card__type-mark" ...><svg class="oh-card__play" ...><circle/><path/></svg></div>; the link keeps its own name. */
.oh-card__type--dark{position:relative;background:radial-gradient(90% 90% at 50% 40%,var(--oh-char),#0B0704)}
.oh-card__type--dark .oh-card__type-mark{opacity:.3}
.oh-card__play{--oh-play:clamp(48px,14vw,72px);position:absolute;top:50%;left:50%;width:var(--oh-play);height:var(--oh-play);max-width:none;transform:translate(-50%,-50%);color:var(--oh-amber);pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.oh-card__play circle{fill:rgba(11,7,4,.6);stroke:currentColor;stroke-width:3}
.oh-card__play path{fill:currentColor}
a:is(:hover,:focus-visible) .oh-card__play{color:var(--oh-cream)}
@media (prefers-reduced-motion:no-preference){.oh-card__play{transition:color .15s ease}}

/* 01.00.06 (Roggie: "fix that page layout", 2026-10-25): DNN 10.4 Account Login (/login, ?ctl=Login) and SendPassword
   (/Home/ctl/SendPassword) views. These are DNN admin controls (module wrapper .DnnModule-Admin) styled by DNN's default.css and
   DesktopModules/Admin/Authentication/module.css (500px floated panel, 32% right-aligned floated labels, 200px inputs, DNN blue/red
   buttons): the labels wrapped one letter per line and the panel overflowed at 390/320. Every rule below is scoped to an admin
   module that contains .dnnLogin or .dnnSendPassword, so no other page or module is matched (no layout change elsewhere).
   Result: one centred OHD card (char on ink), labels above full-width 48px inputs, 44px+ OHD buttons, no overflow at 320.
   Markup, auth settings and links are untouched (no Register link is added; DNN shows one only when registration is on). */
.oh-theme .DnnModule-Admin:has(.dnnLogin,.dnnSendPassword){padding:clamp(2rem,1rem + 5vw,5rem) var(--oh-gutter) clamp(3rem,2rem + 5vw,6rem)}
.oh-theme .DnnModule-Admin :is(.dnnForm.dnnLogin,.dnnForm.dnnSendPassword){box-sizing:border-box;width:100%;max-width:28rem;margin-inline:auto;padding:clamp(1.5rem,1rem + 2vw,2.5rem);background:var(--oh-char);border:1px solid var(--oh-line-dark);border-top:3px solid var(--oh-copper);border-radius:var(--oh-radius-lg);box-shadow:var(--oh-shadow);color:var(--oh-cream);font-family:var(--oh-font-body);font-size:var(--oh-fs-md);line-height:1.5}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) *,.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) *::before,.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) *::after{box-sizing:border-box}
/* Visual card title (hidden from assistive tech with the empty alt text; the page <title> names the view). */
.oh-theme .DnnModule-Admin :is(.dnnForm.dnnLogin,.dnnForm.dnnSendPassword)::before{display:block;margin:0 0 var(--oh-space-5);font-family:var(--oh-font-heading);font-weight:700;font-size:var(--oh-fs-h3);line-height:var(--oh-lh-head);color:var(--oh-cream)}
.oh-theme .DnnModule-Admin .dnnForm.dnnLogin::before{content:"Sign In" / ""}
.oh-theme .DnnModule-Admin .dnnForm.dnnSendPassword::before{content:"Reset Password" / ""}
/* Undo the DNN floats and fixed widths. */
.oh-theme .DnnModule-Admin .dnnLogin :is(.LoginPanel,.loginContent,.dnnLoginService,#socialControls){float:none;width:auto;max-width:100%;padding:0;margin:0}
.oh-theme .DnnModule-Admin .dnnLogin .dnnSocialRegistration:not(:has(li)){display:none}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) .dnnFormItem{display:block;clear:both;float:none;width:100%;margin:0 0 var(--oh-space-4);text-align:left}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) :is(.dnnLabel,.dnnFormItem>label.dnnFormLabel){display:block;float:none;width:auto;margin:0 0 var(--oh-space-2);padding:0;text-align:left}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) .dnnFormItem>span.dnnFormLabel{display:none}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) .dnnLabel label{display:inline;float:none;width:auto;margin:0;padding:0;color:var(--oh-cream);font-family:var(--oh-font-body);font-size:var(--oh-fs-sm);font-weight:700;letter-spacing:.04em;text-align:left}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) .dnnLabel label>span{text-align:left}
/* Inputs: full width, 48px, 16px text (no iOS zoom), ink field with a light edge (>3:1), amber focus ring. */
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) .dnnFormItem :is(input[type=text],input[type=password],input[type=email]){display:block;width:100%;min-width:0;max-width:none;min-height:3rem;margin:0;padding:.65rem .85rem;background:var(--oh-ink);border:1px solid var(--oh-muted);border-radius:var(--oh-radius-md);box-shadow:none;color:var(--oh-cream);font-family:var(--oh-font-body);font-size:1rem;line-height:1.4}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) .dnnFormItem :is(input[type=text],input[type=password],input[type=email]):focus{background:var(--oh-ink);border-color:var(--oh-amber);box-shadow:none;color:var(--oh-cream);outline:3px solid var(--oh-amber);outline-offset:2px}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) .dnnFormItem input:invalid{background-color:var(--oh-ink)}
/* Remember Login: 20px checkbox + label in a 44px row. */
.oh-theme .DnnModule-Admin .dnnLogin .dnnLoginRememberMe{display:flex;align-items:center;gap:var(--oh-space-3);min-height:var(--oh-tap);margin:0}
.oh-theme .DnnModule-Admin .dnnLogin .dnnLoginRememberMe input[type=checkbox]{flex:none;width:1.25rem;height:1.25rem;margin:0;accent-color:var(--oh-copper);cursor:pointer}
.oh-theme .DnnModule-Admin .dnnLogin .dnnLoginRememberMe label{display:inline-flex;align-items:center;min-height:var(--oh-tap);margin:0;color:var(--oh-cream);font-size:var(--oh-fs-sm);cursor:pointer}
/* Buttons (DNN renders them as links). Primary = OHD rust; secondary = outlined amber. Row on wide cards, stacked full width below 26em. */
.oh-theme .DnnModule-Admin .dnnLogin .dnnFormItem:has(>a.dnnPrimaryAction){display:flex;flex-wrap:wrap;gap:var(--oh-space-3);margin-top:var(--oh-space-5)}
.oh-theme .DnnModule-Admin .dnnSendPassword ul.dnnActions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:var(--oh-space-3);float:none;margin:var(--oh-space-5) 0 0;padding:0;list-style:none}
.oh-theme .DnnModule-Admin .dnnSendPassword ul.dnnActions li{float:none;flex:1 1 13rem;margin:0;list-style:none}
.oh-theme .DnnModule-Admin .dnnSendPassword .dnnSendPasswordContent{float:none;width:auto;max-width:100%;margin:0;padding:0}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) :is(a.dnnPrimaryAction,a.dnnSecondaryAction){display:inline-flex;flex:1 1 9rem;align-items:center;justify-content:center;min-width:0;min-height:var(--oh-tap);margin:0;padding:.7em 1.4em;border:2px solid var(--oh-rust);border-radius:var(--oh-radius-sm);background:var(--oh-rust);color:var(--oh-cream);font-family:var(--oh-font-body);font-size:var(--oh-fs-sm);font-weight:700;letter-spacing:.08em;line-height:1.2;text-align:center;text-decoration:none;text-transform:uppercase;box-shadow:none}
.oh-theme .DnnModule-Admin .dnnSendPassword ul.dnnActions :is(a.dnnPrimaryAction,a.dnnSecondaryAction){display:flex;width:100%}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) a.dnnPrimaryAction:is(:link,:visited,:hover,:focus,:active){color:var(--oh-cream);text-decoration:none}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) a.dnnPrimaryAction:hover{background:var(--oh-rust-deep);border-color:var(--oh-rust-deep)}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) a.dnnSecondaryAction,.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) a.dnnSecondaryAction:is(:link,:visited,:hover,:focus,:active){background:transparent;border-color:var(--oh-amber);color:var(--oh-amber);text-decoration:none}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) a.dnnSecondaryAction:hover{background:rgba(224,160,74,.12);color:var(--oh-cream)}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) :is(a.dnnPrimaryAction,a.dnnSecondaryAction):focus-visible{outline:3px solid var(--oh-amber);outline-offset:3px}
.oh-theme .DnnModule-Admin :is(.dnnLogin,.dnnSendPassword) a.dnnDisabledAction:is(:link,:visited,:hover,:focus,:active){opacity:.6;cursor:progress}
/* Reset Password: a plain text link under the buttons (it is a secondary path, not a third button). */
.oh-theme .DnnModule-Admin .dnnLogin .dnnLoginActions{display:block;width:100%}
.oh-theme .DnnModule-Admin .dnnLogin ul.dnnActions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--oh-space-2) var(--oh-space-5);float:none;margin:0;padding:var(--oh-space-2) 0 0;border-top:1px solid var(--oh-line-dark);list-style:none}
.oh-theme .DnnModule-Admin .dnnLogin ul.dnnActions li{float:none;margin:0;list-style:none}
.oh-theme .DnnModule-Admin .dnnLogin ul.dnnActions a.dnnSecondaryAction,.oh-theme .DnnModule-Admin .dnnLogin ul.dnnActions a.dnnSecondaryAction:is(:link,:visited,:hover,:focus,:active){display:inline-flex;flex:none;min-height:var(--oh-tap);padding:0 var(--oh-space-2);border:0;background:none;color:var(--oh-amber);font-size:var(--oh-fs-sm);font-weight:600;letter-spacing:normal;text-transform:none;text-decoration:underline;text-underline-offset:.2em}
.oh-theme .DnnModule-Admin .dnnLogin ul.dnnActions a.dnnSecondaryAction:hover{color:var(--oh-cream)}
/* SendPassword help text, the field's (?) tooltip, and DNN module messages (login failed, reset link sent) inside the card width. */
.oh-theme .DnnModule-Admin .dnnSendPassword>div>.dnnFormMessage.dnnFormInfo{margin:0 0 var(--oh-space-5);padding:0 0 0 var(--oh-space-4);background:none;border:0;border-left:3px solid var(--oh-amber);border-radius:0;color:var(--oh-muted);font-size:var(--oh-fs-sm);line-height:1.6}
.oh-theme .DnnModule-Admin .dnnSendPassword .dnnLabel{display:inline-block;position:relative;padding-right:1.75rem;width:auto;max-width:100%}
.oh-theme .DnnModule-Admin .dnnSendPassword a.dnnFormHelp{top:.15rem;filter:invert(1) brightness(1.6)}
/* DNN's tooltip script sets an inline right:-29% on .dnnTooltip, which pushed the (hidden) bubble past the viewport: anchor it under the label. */
.oh-theme .DnnModule-Admin .dnnSendPassword .dnnTooltip{width:auto;margin:0;left:0;right:auto!important;top:100%}
.oh-theme .DnnModule-Admin .dnnSendPassword .dnnTooltip .dnnFormHelpContent{left:0;width:min(16rem,calc(100vw - 4rem));background:var(--oh-ink);border:1px solid var(--oh-line-dark);color:var(--oh-cream);font-size:var(--oh-fs-xs)}
.oh-theme .DnnModule-Admin:has(.dnnLogin,.dnnSendPassword) .dnnFormMessage:not(.dnnFormInfo){box-sizing:border-box;max-width:28rem;margin:0 auto var(--oh-space-4);padding:var(--oh-space-3) var(--oh-space-4);background:rgba(201,98,28,.16);border:1px solid var(--oh-copper);border-radius:var(--oh-radius-md);color:var(--oh-cream);font-size:var(--oh-fs-sm)}
.oh-theme .DnnModule-Admin:has(.dnnLogin,.dnnSendPassword) .dnnFormMessage.dnnFormSuccess{background:rgba(224,160,74,.12);border-color:var(--oh-amber)}
.oh-theme .DnnModule-Admin:has(.dnnLogin,.dnnSendPassword) .dnnFormMessage :is(a,a:visited){color:var(--oh-amber)}
/* 01.00.06 (Carla QA P7): on small phones (360px and below, e.g. 320) the faint 30% OH mark on the dark video title card reads as a
   square behind the play glyph; hide it there. The play glyph and the card stay; 390px and wider are unchanged. */
@media (max-width:22.5em){.oh-card__type--dark .oh-card__type-mark{display:none}}

/* 01.00.06: Carla Walton blog image override, blog-img/blog-img-fix.css (sha256 898b6b4f...af8a), appended unchanged below. */
/* ==========================================================================
   OHD blog image sizing: drop-in override for skin.01.00.05.css
   2026-10-25 · for Dinesh (dev) · QA: Carla Walton
   HOW: append this block to the END of css/skin.01.00.05.css (or ship it as
   a stylesheet that loads after it). CSS only, no markup or content changes.
   SCOPE: blog posts only (/backwoods-blog/<slug>). Blog index cards and all
   non-blog pages are untouched (.oh-article__hero only exists in posts; the
   .oh-frame rules are scoped to an <article> that has a hero).

   WHY: post heroes were width:100% of the 42rem (672px) column with no
   height cap, so 2:3 posters rendered 672x1008 (112% of a 900px viewport),
   squares 672x672 (75%), Popcorn's jar photo 672x793 (88%). Nearly every
   hero is a text poster (titles at top, brand line at bottom), so we cap
   the HEIGHT and never crop: object-fit:contain scales the whole image down
   inside the box. Nothing is cut off and the aspect ratio is not distorted.

   NO LAYOUT SHIFT: the <img> keeps width:100%, so its box is sized before the
   image arrives (width + the aspect ratio from its width/height attributes,
   clamped by max-height). Do NOT "simplify" to width:auto; an unloaded
   width:auto image is 0x0 in Chrome and the text jumps when it loads
   (measured CLS 0.05-0.25).
   ========================================================================== */

/* 1. Post hero photo/poster: whole image visible, at most 32rem (512px) tall.
      The box spans the column; the picture is centred inside it with
      transparent sides. The shadow moves from box-shadow (which would outline
      the empty sides) to filter:drop-shadow, which follows the visible picture
      and looks like the theme's --oh-shadow. Landscape 3:2 heroes are already
      672x448, so they look the same as before. */
.oh-article__hero img{
  display:block;
  width:100%;
  height:auto;
  max-height:32rem;             /* fallback for browsers without svh */
  max-height:min(32rem,66svh);  /* short/landscape phones: keep under ~2/3 screen */
  object-fit:contain;           /* scale whole image down: no crop, no stretch */
  object-position:50% 50%;
  box-shadow:none;
  border-radius:0;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.45));
}

/* 2. Post hero title card (stands in for real-people photos, e.g. the
      Bondurant Brothers post): 16/10 card capped at 36rem (576x360 on
      desktop), centred. Phones are unchanged (column < 36rem). */
.oh-article__hero>.oh-card__type{
  max-width:36rem;
  margin-inline:auto;
}

/* 3. Framed figures in a post body (.oh-frame), e.g. the Popcorn Sutton dark
      video card (16/10): at most 36rem wide and centred instead of spanning
      the full text column. */
article:has(>.oh-article__hero) .oh-frame{
  max-width:min(100%,36rem);
  margin-inline:auto;
}
/* 3a. Photos inside a post frame (none live today; future-proofing): same
       no-crop 32rem height cap. Any spare width shows as a dark mat inside
       the copper frame, like a matted print, not a stretched photo. */
article:has(>.oh-article__hero) .oh-frame img:not(.oh-card__type-mark){
  display:block;
  width:100%;
  height:auto;
  max-height:32rem;
  max-height:min(32rem,66svh);
  object-fit:contain;
  background:var(--oh-char);
}

/* 01.00.06: the hidden About dropdown (last nav item, .oh-subnav left:0;min-width:15rem, visibility:hidden but still laid out)
   hung ~104px past the right edge at 1024-1100px wide and made every page scroll sideways. Anchor the last item's dropdown to
   its right edge instead. Below 64em (mobile menu) it has no effect: the subnav is position:static there. */
.oh-nav__item:last-child>.oh-subnav{left:auto;right:0}