main { --sy: clamp(64px, 8vw, 120px); }
.sec { padding-block: var(--sy); border-top: 1px solid var(--line); }
.sec h2:not(.eyebrow), .strains h2 { margin: 14px 0 0 -.03em; font-size: clamp(2.5rem, 4.6vw, 4.2rem); line-height: .94; }
.sec .lede { max-width: 30em; margin-top: clamp(20px, 2vw, 28px); font-size: clamp(1.14rem, 1.42vw, 1.4rem); line-height: 1.42; }
.sec-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px var(--cg); align-items: center; }
.sec-t { grid-column: span 2; }
.sec-t > .more { display: inline-block; margin-top: clamp(26px, 2.6vw, 36px); }
.sec-ph { grid-column: span 2; }
.sec-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.c-hero { min-height: clamp(560px, 86svh, 900px); }
.c-hero h1 { font-size: clamp(3rem, 5.3vw, 5.2rem); }

.hero-cut { display: none; }
@media (min-width: 1000px) {
  .c-hero { isolation: isolate; }
  .c-hero::before { content: ''; position: absolute; left: -4%; top: 50%; z-index: 1; width: min(48vw, 720px); aspect-ratio: 1000 / 1009;
    transform: translateY(-50%); background: url(img/logo-owl-1000.webp) center / contain no-repeat; opacity: .16; mix-blend-mode: screen; pointer-events: none; }
  .c-hero::after { z-index: 1; mix-blend-mode: screen;
    background: radial-gradient(42% 46% at 22% 56%, rgba(106, 26, 134, .55), transparent 72%), radial-gradient(30% 34% at 34% 68%, rgba(240, 120, 29, .28), transparent 72%); }
  .hero-cut { display: block; position: absolute; z-index: 2; top: 0; left: 50%; height: 108%; width: auto; max-width: none; transform: translateX(-27%); pointer-events: none; }
  .of-age .hero-cut { animation: settle 1.5s var(--ease) both; }
  .c-hero .hero-in { z-index: 3; }
}

@property --rw { syntax: '<color>'; inherits: true; initial-value: #6a1a86; }
@property --rg { syntax: '<color>'; inherits: true; initial-value: #f08c1d; }
.strains { position: relative; isolation: isolate; overflow: clip; transition: --rw 1.2s ease, --rg 1.2s ease; }
.strains::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 55% at 70% 62%, color-mix(in srgb, var(--rg) 34%, transparent), transparent 75%),
    radial-gradient(50% 60% at 22% 40%, color-mix(in srgb, var(--rw) 55%, transparent), transparent 75%),
    linear-gradient(180deg, #000, color-mix(in oklab, var(--rw) 30%, #000) 45%, #000); }

.proof.lit { position: relative; isolation: isolate; overflow: clip; --deep: color-mix(in oklab, var(--wash) 40%, #000); }
.proof.lit::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 55% at 72% 50%, color-mix(in srgb, var(--glow) 40%, transparent), transparent 72%),
    linear-gradient(180deg, #000 0%, var(--deep) 30%, color-mix(in oklab, var(--wash) 70%, #000) 60%, #000 100%); }
.proof.lit .eyebrow, .proof.lit .proof-s b { color: var(--glow); }
.proof.lit .win { border-top-color: color-mix(in srgb, var(--glow) 40%, transparent); }
@media (min-width: 761px) and (max-width: 999px) { .c-hero h1 { font-size: clamp(3.4rem, 7.4vw, 5.2rem); } }

.fd { border-bottom: 1px solid var(--line); background: #050505; }
.fd-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px clamp(28px, 4vw, 56px); align-items: stretch; padding-block: clamp(26px, 2.8vw, 36px); }
.fd-in > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.fd-live { display: flex; align-items: center; gap: 9px; font: 700 .74rem/1 Archivo, sans-serif; font-stretch: 100%; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.fd-live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.fd-live i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); animation: fd-ping 2s ease-out infinite; }
@keyframes fd-ping { to { transform: scale(3); opacity: 0; } }
.fd h2 { margin: 10px 0 0 -.02em; font-size: clamp(2rem, 2.8vw, 2.6rem); line-height: .9; }
.fd-n { margin-top: 6px; color: var(--dim); font-size: .88rem; }
.fd .more { margin-top: auto; padding-top: 22px; font-size: .9rem; }
.fd .more::after { content: ' \2192'; }
.fd-stores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; border-left: 1px solid var(--line); }
.fd-stores li:nth-child(n+5) { border-top: 1px solid var(--line); }
.fd-stores a { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 14px 20px; text-decoration: none; isolation: isolate; }
.fd-stores a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 82, 4, .12); opacity: 0; transition: opacity .25s; }
.fd-stores b { display: block; font-weight: 800; font-stretch: 68%; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; transition: color .25s; }
.fd-stores span { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: .86rem; line-height: 1.2; color: #a9a39a; }
.fd-stores span::before { content: ''; flex: none; width: 6px; height: 6px; border: 1.5px solid var(--orange); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.fd-stores a:hover::after, .fd-stores a:focus-visible::after { opacity: 1; }
.fd-stores a:hover b, .fd-stores a:focus-visible b { color: var(--orange); }

.mission { border-top: 0; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: clamp(56px, 6.4vw, 96px); border-top: 2px solid var(--text); counter-reset: v; }
.pillars li { counter-increment: v; position: relative; display: grid; align-content: space-between; gap: 40px; min-height: clamp(140px, 13vw, 180px); padding: 18px 18px 22px; border-right: 1px solid var(--line); clip-path: inset(0); isolation: isolate; container-type: inline-size; cursor: default; transition: padding .45s var(--ease), color .25s; }
.pillars li:first-child { padding-left: 0; }
.pillars li:last-child { border-right: 0; }
.pillars li::before { content: counter(v, decimal-leading-zero); font-size: .74rem; font-weight: 600; font-stretch: 100%; letter-spacing: .16em; color: var(--orange); transition: color .25s; }
.pillars li::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--orange); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.pillars li:hover { color: #000; }
.pillars li:hover::before { color: #000; }
.pillars li:hover::after { transform: none; }
.pillars li:first-child:hover { padding-left: 18px; }

.pillars b { display: block; font-stretch: 68%; font-weight: 800; font-size: clamp(1.2rem, 15.5cqi, 3.2rem); line-height: .9; text-transform: uppercase; letter-spacing: .005em; }
.pillars.go b { transform: translateY(110%); transition: transform .9s var(--ease); }
.pillars.go.in b { transform: none; }
.pillars li:nth-child(2) b { transition-delay: .1s; } .pillars li:nth-child(3) b { transition-delay: .2s; } .pillars li:nth-child(4) b { transition-delay: .3s; }

.mission .big { margin-top: clamp(20px, 2vw, 28px); font-size: clamp(1.45rem, 2.1vw, 1.95rem); font-weight: 500; font-stretch: 88%; line-height: 1.22; text-wrap: balance; }
.mission .big + .lede { margin-top: 18px; font-size: 1.05rem; line-height: 1.6; color: #bdb7ad; }

.mission .sec-ph { position: relative; }
.seal { position: absolute; z-index: 1; left: -52px; bottom: -52px; display: grid; place-items: center; width: clamp(124px, 11vw, 156px); aspect-ratio: 1; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px #000; }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #000; font: 800 16.5px Archivo, sans-serif; font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; animation: seal-turn 24s linear infinite; }
.sec-ph .seal img { width: 44%; height: auto; aspect-ratio: auto; object-fit: contain; }
@keyframes seal-turn { to { transform: rotate(1turn); } }
.mission .sec-t { padding-right: clamp(0px, 3vw, 44px); }

.strains { padding-block: var(--sy); border-top: 1px solid var(--line); }
.rail-h { display: flex; align-items: flex-end; gap: 24px; margin-bottom: clamp(32px, 3.6vw, 52px); }
.rail-t { display: grid; gap: 20px; max-width: 34em; }
.rail-t h2 { margin-top: 0; }
.rail-t p { max-width: 30em; padding-left: 18px; border-left: 2px solid var(--orange); color: var(--text); font-size: clamp(1.08rem, 1.4vw, 1.28rem); line-height: 1.45; text-wrap: pretty; }
.rail-t em { white-space: nowrap; font-style: normal; font-weight: 600; color: #ff6a26; }
.strains h2 sup { margin-left: .1em; color: var(--orange); font-size: .44em; line-height: 0; vertical-align: .95em; letter-spacing: 0; }
.rail-h > .more { margin-left: auto; white-space: nowrap; }
.rail-c { display: none; gap: 8px; margin-left: var(--cg); }
@media (hover: hover) and (min-width: 761px) { .rail-c { display: flex; } }
.rail-b { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid rgba(255, 255, 255, .34); border-radius: 0; color: inherit; font: 500 1rem/1 Archivo, sans-serif; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .12s; }
.rail-b:hover:not(:disabled) { background: var(--text); border-color: var(--text); color: var(--black); }
.rail-b:active:not(:disabled) { transform: scale(.94); }
.rail-b:disabled { border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .3); cursor: default; }

.rail {
  --card: 72vw;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card); grid-template-rows: repeat(4, auto); column-gap: var(--cg);
  overflow-x: auto; overscroll-behavior-x: contain; padding: 4px var(--edge) 4px; scroll-padding-inline: var(--edge); scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li, .rail .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.rail > li { scroll-snap-align: start; }

.rail-end { grid-row: span 4; }
.rail-end a { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; padding: clamp(18px, 2vw, 28px); background: var(--orange); color: #000; text-decoration: none; transition: background-color .25s; }
.rail-end a:hover { background: var(--text); }
.rail-end a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.rail-end b { font-stretch: 68%; font-weight: 800; font-size: clamp(4rem, 8vw, 7rem); line-height: .85; }
.rail-end span { font-weight: 600; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; }
.rail-end span::after { content: '\2192'; margin-left: .6em; display: inline-block; transition: transform .25s var(--ease); }
.rail-end a:hover span::after { transform: translateX(4px); }

.rail-p { position: relative; height: 2px; margin-top: clamp(28px, 3.2vw, 44px); background: var(--line); }
.rail-p span { position: absolute; inset-block: 0; left: calc(var(--p, 0) * (100% - var(--w, 25%))); width: var(--w, 25%); background: var(--text); }

@media (min-width: 761px) { .rail { --card: calc((100vw - 2 * var(--pad) - 2 * var(--cg)) / 2.4); } }

@media (min-width: 1000px) {
  .rail { --card: calc((min(100vw, 1360px) - 2 * var(--pad) - 3 * var(--cg)) / 4); width: min(100% - 2 * var(--pad), 1360px - 2 * var(--pad)); margin-inline: auto; padding-inline: 0; scroll-padding-inline: 0; }
}

.family .sec-ph { order: -1; }
.family .sec-t { padding-left: clamp(0px, 3vw, 44px); }

.hist-t { padding-right: clamp(0px, 3vw, 44px); }
.facts { display: grid; padding: 0; list-style: none; grid-template-columns: 1fr 1fr; gap: 0 var(--cg); margin-top: clamp(32px, 3.4vw, 48px); counter-reset: fact; }
.facts li { padding: 14px 0 20px; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.45; color: #cfcac1; text-wrap: pretty; counter-increment: fact; }
.facts li::before { content: counter(fact, decimal-leading-zero); display: block; margin-bottom: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .16em; color: var(--orange); }
.hist-ph img { aspect-ratio: 1; object-position: 50% 22%; }

.proof-s { display: grid; margin-top: clamp(26px, 2.6vw, 36px); }
.proof-s li { display: grid; grid-template-columns: 3.4em 1fr; align-items: baseline; gap: 16px; padding-block: 16px; border-top: 1px solid var(--line); color: #cfcac1; line-height: 1.45; text-wrap: pretty; }
.proof-s li.no-y { grid-template-columns: 1fr; }
.proof-s b { font-stretch: 68%; font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: .01em; color: var(--text); }
.win { display: flex; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line); text-decoration: none; }
.win-ph { flex: none; width: 112px; aspect-ratio: 1; overflow: hidden; background: #111; }
.win-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.win:hover .win-ph img { transform: scale(1.05); }
.win:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.win .card-n { margin-top: 0; }
.win:hover .card-n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

@media (prefers-reduced-motion: reduce) {
  .rail-end a:hover span::after, .win:hover .win-ph img { transform: none; }
  .pillars.go b { transform: none; }
}

@media (max-width: 999px) {
  .sec-g { grid-template-columns: 1fr 1fr; }
  .sec-t, .sec-ph { grid-column: auto; }
  .fd-in { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillars li:nth-child(2) { border-right: 0; }
  .pillars li:nth-child(3) { padding-left: 0; }
  .pillars li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .seal { left: auto; right: 16px; bottom: -40px; }
  .seal svg { animation: none; }
  .hist-g { align-items: start; }
  .facts { grid-template-columns: 1fr; }
  .facts li { display: grid; grid-template-columns: 2.8em 1fr; align-items: baseline; padding-bottom: 16px; }
  .facts li::before { margin-bottom: 0; }
  .hist-ph img { aspect-ratio: 4 / 5; }
}

@media (max-width: 760px) {
  .rail-h { display: grid; gap: 22px; }
  .rail-h > .more { margin-left: 0; justify-self: start; }
  .sec-g { grid-template-columns: 1fr; gap: 36px; }
  .family .sec-t, .mission .sec-t, .hist-t { padding: 0; }
  .hist-ph { order: -1; }
  .sec-ph img { aspect-ratio: 4 / 3; }
  .mission .sec-ph img, .hist-ph img { aspect-ratio: 1; }
  .c-hero { min-height: max(520px, calc(100svh - 204px)); }
  .c-hero h1 { font-size: clamp(1.9rem, 9.9vw, 3.4rem); }

  .fd-in { gap: 18px; }
  .fd-stores { grid-template-columns: 1fr 1fr; border-left: 0; border-top: 1px solid var(--line); }
  .fd-stores li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fd-stores li:nth-child(even) { border-left: 1px solid var(--line); }
  .fd-stores a { padding: 13px 12px 13px 0; }
  .fd-stores li:nth-child(even) a { padding-left: 14px; }
  .pillars li { min-height: 120px; gap: 26px; }
  .rail-t p { padding-left: 14px; }
}