/* Hubbard Clothing Co. v2 — full-screen "takeover" homepage. Original code.
   Base layout (no JS / reduced motion): a plain stack of full-height sections.
   html.tk-on  (set in <head> when motion is allowed): CSS sticky stacking — each panel pins, the next slides over it.
   html.tk-js  (set by takeover.js): scroll-linked depth (--c covered / --q incoming), staggered reveals, colour backdrop. */
:root{
  --tk-h:100vh;                      /* fallback for old browsers */
  --ease-lux:cubic-bezier(.22,1,.36,1);
  --ease-weight:cubic-bezier(.65,0,.35,1);
  --tk-gut:clamp(6px,.9vw,14px);
  --tk-rad:24px;
  --tk-top:clamp(84px,4.6rem + 2.6vw,116px);   /* header height over the cards */
  --tk-bot:0px;
  --deck-y:16px;                     /* the active card stops this far below the top: earlier cards peek out above it */
  --t-tk:min(clamp(2rem,1rem + 4.3vw,6.1rem),10.5svh);
  /* panel tones (card) and the slightly deeper backdrop behind them */
  --tn-ivory:#F7F4EE; --tn-oat:#EFE9E0; --tn-sand:#E3D7C6; --tn-greige:#D7D1C8; --tn-dove:#E7E4DF; --tn-stone:#C9C1B4; --tn-charcoal:#2C2A27; --tn-coal:#211F1D; --tn-tan:#E6DED2;
}
@supports (height:100svh){:root{--tk-h:100svh}}
@media(min-width:800px){:root{--deck-y:clamp(16px,1.5vw,26px)}}
/* phones: everything at a panel bottom clears the fixed BOOK/ALTERATIONS/VISIT bar (+ iOS safe area, measured into --mcta-h by main.js) */
@media(max-width:799px){:root{--tk-bot:calc(var(--mcta-h,calc(54px + env(safe-area-inset-bottom,0px))) + 8px)}}
.tk-home{background:var(--tn-ivory)}
html:has(.tk-home){scroll-behavior:auto}

/* ---------- header floats over the panels ---------- */
.tk-home .site-header{position:fixed;left:0;right:0;top:0;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin:0!important;transition:color .7s var(--ease-lux)}
.tk-home .site-header.hide{transform:none}
.tk-home .site-header .brand{position:relative}
.tk-home .site-header .brand picture{display:block;transition:opacity .8s var(--ease-lux)}
.tk-home .site-header .lg-ondark{position:absolute;inset:0;opacity:0}
.tk-home .site-header .lg-ondark img{height:100%;width:auto;margin:0 auto}
html[data-ink="dark"] .tk-home .site-header .lg-ondark{opacity:1}
html[data-ink="dark"] .tk-home .site-header .lg-onlight{opacity:0}
html[data-ink="dark"] .tk-home .site-header .menu-btn{color:var(--ivory)}
html[data-ink="dark"] .tk-home .site-header .nav-cta{background:var(--camel);color:var(--charcoal-deep)}
.tk-home .site-header .menu-btn{transition:color .7s var(--ease-lux)}

/* ---------- panels: base (stacked, no motion) ---------- */
.tk{position:relative}
.tk-panel{position:relative;min-height:var(--tk-h);padding:var(--deck-y) var(--tk-gut) 0;display:flex}
.tk-card{position:relative;flex:1;display:flex;border-radius:var(--tk-rad) var(--tk-rad) 0 0;overflow:hidden;isolation:isolate;background:var(--tone,var(--tn-ivory));color:var(--charcoal)}
.tk-inner{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--tk-top) - var(--deck-y) + .5rem) clamp(1.25rem,5vw,6rem) calc(var(--tk-bot) + clamp(1.5rem,4vh,3.5rem))}
.tone-ivory{--tone:var(--tn-ivory)} .tone-oat{--tone:var(--tn-oat)} .tone-sand{--tone:var(--tn-sand)} .tone-greige{--tone:var(--tn-greige)}
.tone-dove{--tone:var(--tn-dove)} .tone-stone{--tone:var(--tn-stone)} .tone-charcoal{--tone:var(--tn-charcoal)} .tone-coal{--tone:var(--tn-coal)} .tone-tan{--tone:var(--tn-tan)}
.ink-dark .tk-card{color:var(--mist)}
.ink-dark .tk-title,.ink-dark h3{color:var(--ivory)}
.ink-dark .tk-eyebrow{color:var(--champagne)}
.tk-dim{position:absolute;inset:0;background:#1a1816;opacity:0;pointer-events:none;z-index:6}
.tk-num{position:absolute;right:clamp(1.25rem,5vw,6rem);bottom:calc(var(--tk-bot) + clamp(1rem,3vh,2rem));font:500 clamp(.72rem,.62rem + .3vw,.9rem)/1 var(--serif);letter-spacing:.2em;opacity:.55}

/* type */
.tk-eyebrow{font:600 .7rem/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--taupe-deep);margin:0 0 clamp(.8rem,2.2vh,1.6rem);display:flex;align-items:center;gap:.9rem}
.tk-eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.tk-title{font:400 var(--t-tk)/1.06 var(--serif);letter-spacing:.03em;text-wrap:balance;margin:0 0 clamp(.8rem,2.6vh,1.8rem);color:var(--charcoal)}
.tk-title .accent{color:var(--accent-ink,var(--bronze))}
.ink-dark .tk-card{--accent-ink:var(--champagne)}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln-i{display:inline-block}
.tk-lede{font:300 clamp(1.08rem,.95rem + .6vw,1.5rem)/1.45 var(--sans);letter-spacing:.01em;color:inherit;max-width:34ch;margin:0 0 1rem}
.tk-more{max-width:52ch;font-size:clamp(.95rem,.9rem + .15vw,1.05rem);line-height:1.6;opacity:.85}
.tk-card .btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(.6rem,2vh,1.4rem)}

/* media layers */
.tk-media{position:absolute;inset:0;z-index:-1;overflow:hidden;display:block;background:var(--charcoal)}
.tk-media picture,.tk-media .slides{position:absolute;inset:-7% 0;display:block}
.tk-media img{width:100%;height:100%;object-fit:cover}
.tk-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--overlay),.34) 0%,rgba(var(--overlay),.12) 42%,rgba(var(--overlay),.7) 100%);pointer-events:none}
.tk-hero-media .slides picture{position:absolute;inset:0;opacity:0;transition:opacity 1.8s var(--ease-lux)}
.tk-hero-media .slides picture.active{opacity:1}
.tk-hero-media .slides picture:first-child{opacity:1}
.tk-hero-media .slides:has(picture.active) picture:first-child:not(.active){opacity:0}
.tk-hero-media::after{background:radial-gradient(ellipse 60% 50% at 50% 48%,rgba(var(--overlay),.46),rgba(var(--overlay),0) 74%),linear-gradient(180deg,rgba(var(--overlay),.36) 0%,rgba(var(--overlay),.16) 40%,rgba(var(--overlay),.76) 100%)}
.tk-body{position:relative;width:100%;max-width:1400px;margin:0 auto}
.tk-center{text-align:center;display:flex;flex-direction:column;align-items:center}
.tk-center .tk-eyebrow{justify-content:center}
.tk-center .tk-eyebrow::after{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.tk-bottom{margin-top:auto}
.tk-hero .tk-inner{justify-content:center;padding-bottom:calc(var(--tk-bot) + clamp(4.5rem,11vh,7rem))}
.tk-hero-logo img{width:clamp(130px,min(7rem + 11vw,30svh),330px);height:auto;filter:drop-shadow(0 2px 20px rgba(var(--overlay),.45));margin:0 auto clamp(.6rem,2vh,1.6rem)}
.tk-hero-title{color:var(--ivory)!important;font-size:min(clamp(2.4rem,1.2rem + 4.6vw,6rem),11svh);text-shadow:0 2px 24px rgba(var(--overlay),.3)}
.tk-tagline{font:400 clamp(1.02rem,.9rem + .55vw,1.5rem)/1.45 var(--sans);letter-spacing:.09em;color:var(--mist);margin:0 0 .5rem}
.tk-hero-foot{position:absolute;left:0;right:0;bottom:calc(var(--tk-bot) + clamp(1rem,3vh,1.8rem));display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 2rem;font:600 .68rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mist);padding:0 1.5rem}
.tk-hero-foot a{color:var(--mist);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease-lux),color .4s}
.tk-hero-foot a:hover{color:var(--champagne);background-size:100% 1px}
.on-dark .btn-ghost{color:var(--ivory)}
.tk-lookbook .tk-title{color:var(--ivory)}
.tk-lookbook .tk-body{text-align:left}
.tk-lookbook .tk-inner{justify-content:flex-end}
.tk-link{cursor:pointer}

/* split panels */
.tk-split{display:grid;grid-template-columns:1fr;gap:clamp(1rem,3vh,2rem);align-items:center;width:100%;max-width:1400px;margin:0 auto;height:100%}
.tk-frame{margin:0;position:relative;border-radius:var(--radius-s,12px);overflow:hidden;height:min(34svh,58vw);background:rgba(0,0,0,.06)}
.tk-frame picture{position:absolute;inset:-6% 0;display:block}
.tk-frame img,.tk-frame.video button img{width:100%;height:100%;object-fit:cover}
.tk-frame.video{aspect-ratio:auto;border:0;background:var(--charcoal-deep)}
.tk-frame.video button picture{inset:-6% 0}
.tk-copy{position:relative}
@media(min-width:900px){
  .tk-split{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,6rem)}
  .tk-rev .tk-frame{order:2}
  .tk-frame{height:min(calc(var(--tk-h) - var(--tk-top) - 7rem),62vw * .5)}
}
.tk-quick{list-style:none;margin:clamp(1rem,3vh,2rem) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;font:600 .68rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.tk-quick a{color:var(--taupe-deep);text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;padding:.35rem 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease-lux),color .4s}
.tk-quick a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--bronze)}
.tk-quick a:hover{color:var(--charcoal);background-size:100% 1px}

/* GO HOGS */
.tk-hogs{width:100%;max-width:1600px;margin:0 auto;text-align:center}
.tk-hogs .tk-eyebrow{justify-content:center}
.tk-hogs-title{font-size:min(clamp(2.4rem,1rem + 6.4vw,7.5rem),13svh);letter-spacing:.06em;color:var(--champagne)!important}
.tk-go-hogs .hg-strip{--h:clamp(150px,min(30vw,32svh),400px)}
.tk-go-hogs .hg-btn{border-color:rgba(236,231,223,.3);color:var(--mist)}
.tk-go-hogs .hg-btn:hover{background:var(--ivory);color:var(--charcoal)}
.tk-go-hogs .hg-count{color:var(--mist-2)}.tk-go-hogs .hg-count b{color:var(--ivory)}
.tk-go-hogs .hg-ctrl{margin-top:clamp(.5rem,2vh,1.25rem)}
.tk-go-hogs .hg{margin-top:clamp(.5rem,2vh,1.5rem)}

/* visit + footer (tall, scrolls normally) */
.tk-visit{flex-direction:column}
.tk-visit .tk-card{flex:none;min-height:calc(var(--tk-h) - var(--deck-y))}
.tk-visit .tk-inner{justify-content:flex-start;padding-bottom:clamp(2rem,6vh,4rem)}
.tk-visit-head{max-width:1300px;width:100%;margin:0 auto clamp(1.5rem,4vh,3rem)}
.tk-visit-grid{display:grid;gap:clamp(2rem,4vw,5rem);max-width:1300px;width:100%;margin:0 auto}
@media(min-width:900px){.tk-visit-grid{grid-template-columns:1fr 1fr}}
.tk-visit h3{font:500 var(--t-h3,2rem)/1.16 var(--serif);letter-spacing:.03em;margin:0 0 1rem}
.tk-sub{max-width:1300px;width:100%;margin:clamp(2.5rem,6vh,4rem) auto 0;padding-top:clamp(1.5rem,4vh,2.5rem);border-top:1px solid rgba(43,41,38,.16);display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.tk-sub p{margin:0}.tk-sub h3{margin:0 0 .3rem}
.tk-brands{max-width:1300px;width:100%;margin:clamp(2rem,5vh,3rem) auto 0}
.tk-brands .marquee{border-radius:var(--radius-s,12px);background:var(--mist);border:0}
.tk-visit .site-footer{margin:var(--tk-gut) 0 0;border-radius:var(--tk-rad)}
@media(max-width:799px){.tk-visit .site-footer{margin-bottom:calc(var(--tk-bot) + 8px)}}

/* ---------- pager: 01 / 08 + vertical dots ---------- */
.tk-pager{display:none}
.tk-js .tk-pager{display:flex;position:fixed;right:clamp(.9rem,1.9vw,2rem);top:50%;transform:translateY(-50%);z-index:45;flex-direction:column;align-items:center;gap:1rem;color:var(--charcoal);transition:color .8s var(--ease-lux),opacity .6s}
html[data-ink="dark"] .tk-pager{color:var(--ivory)}
.tk-count{margin:0;font:500 .7rem/1 var(--serif);letter-spacing:.18em;writing-mode:vertical-rl;transform:rotate(180deg);font-variant-numeric:tabular-nums}
.tk-count span{opacity:.5}
.tk-pager ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.tk-pager a{position:relative;display:grid;place-items:center;width:22px;height:22px;color:inherit;text-decoration:none}
.pg-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;transition:transform .7s var(--ease-lux),opacity .5s}
.tk-pager a[aria-current="true"] .pg-dot{opacity:1;transform:scale(1.7)}
.tk-pager a:hover .pg-dot{opacity:.9}
.pg-lbl{position:absolute;right:30px;white-space:nowrap;font:600 .62rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateX(8px);transition:opacity .45s,transform .6s var(--ease-lux);pointer-events:none}
.tk-pager a:hover .pg-lbl,.tk-pager a:focus-visible .pg-lbl{opacity:1;transform:none}
html.tk-past .tk-pager{opacity:0;pointer-events:none}
@media(max-width:799px){.tk-pager ol{display:none}.tk-js .tk-pager{right:.55rem}}

/* ---------- takeover: sticky stacking ---------- */
@media (prefers-reduced-motion:no-preference){
  html.tk-on{scroll-snap-type:y proximity}
  html.tk-on.tk-anim{scroll-snap-type:none}
  .tk-on .tk-panel:not(.tk-tall){position:sticky;top:0;height:var(--tk-h);min-height:0}
  .tk-on .tk-snaps i{position:absolute;left:0;width:1px;height:var(--tk-h);top:calc(var(--s) * var(--tk-h));scroll-snap-align:start;pointer-events:none}
  .tk-on .tk-visit{scroll-snap-align:start}
  @media (pointer:coarse){
    html.tk-on{scroll-snap-type:y mandatory}
    .tk-on .tk-snaps i{scroll-snap-stop:always}
  }
  /* scroll-linked depth (vars written by takeover.js, smoothed) */
  /* a covered card (--c 0..2 = how many cards now sit on top of it) eases back like a deck: up a notch, a touch smaller, darker */
  .tk-js .tk-panel:not(.tk-tall) .tk-card{transform:translate3d(0,calc(var(--c,0) * var(--deck-y) * -.48),0) scale(calc(1 - var(--c,0) * .045));transform-origin:50% 0}
  .tk-js .tk-dim{opacity:calc(var(--c,0) * .3)}
  .tk-js .tk-media picture,.tk-js .tk-media .slides,.tk-js .tk-frame picture{transform:translate3d(0,calc((var(--q,0) * 9%) - (var(--c,0) * 4%)),0)}
  .tk-js .tk-inner > *:not(.tk-media){transform:translate3d(0,calc(var(--q,0) * 14vh),0)}
  .tk-js .tk-near .tk-card,.tk-js .tk-near .tk-media picture,.tk-js .tk-near .tk-frame picture,.tk-js .tk-near .tk-inner > *{will-change:transform}
  .tk-js .tk-near .tk-dim{will-change:opacity}

  /* staggered reveal per panel */
  .tk-js .tk-panel .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1.1s var(--ease-lux),transform 1.3s var(--ease-lux);transition-delay:calc(var(--k,0) * 95ms + 120ms)}
  .tk-js .tk-panel .ln-i{transform:translate3d(0,108%,0);transition:transform 1.35s var(--ease-lux);transition-delay:220ms}
  .tk-js .tk-panel .ln:nth-child(2) .ln-i{transition-delay:340ms}
  .tk-js .tk-panel.is-in .rv{opacity:1;transform:none}
  .tk-js .tk-panel.is-in .ln-i{transform:none}
  .tk-js .tk-panel :is(.tk-media,.tk-frame) img{transform:scale(1.1);transition:transform 2.2s var(--ease-lux)}
  .tk-js .tk-panel.is-in :is(.tk-media,.tk-frame) img{transform:none}
  .tk-js .tk-panel .tk-frame{clip-path:inset(12% 0 0 0 round var(--radius-s,12px));transition:clip-path 1.5s var(--ease-lux) .1s}
  .tk-js .tk-panel.is-in .tk-frame{clip-path:inset(0 0 0 0 round var(--radius-s,12px))}
  /* the curtain plays over the hero: hold the hero's own reveal until the page is ready */
  .tk-js:not(.is-ready) .tk-hero .rv{opacity:0}
}

/* hover refinements */
.tk-frame.video button .play{transition:transform .8s var(--ease-lux),background .4s}
.tk-frame.video button:hover .play{transform:translate(-50%,-50%) scale(1.12)}
.tk-link img{transition:transform 2.2s var(--ease-lux)!important}
.tk-panel.is-in .tk-link:hover img{transform:scale(1.035)}

/* ---------- short / small viewports ---------- */
@media(max-width:899px){
  .tk-inner{padding-left:1.25rem;padding-right:1.25rem}
  .tk-split{align-content:center}
  .tk-copy .tk-more{display:none}
  .tk-num{display:none}
}
@media(max-width:899px) and (max-height:720px){ .tk-panel .tk-quick{display:none} }
@media(max-height:560px){
  :root{--tk-top:64px}
  .tk-home .site-header{--nh:60px;--lh:42px;--nh-s:56px;--lh-s:38px}
  .tk-panel :is(.tk-more,.tk-quick,.tk-num),.tk-hero-foot span{display:none}
  .tk-lede{font-size:1.02rem;margin-bottom:.4rem}
  .tk-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.25rem}
  .tk-rev .tk-frame{order:2}
  .tk-frame{height:calc(var(--tk-h) - var(--tk-top) - 2.5rem)}
  .tk-hero-logo{display:none}
  .tk-eyebrow{margin-bottom:.5rem}
  .tk-card .btn-row{margin-top:.4rem}
  .tk-card .btn{min-height:40px;padding:.7rem 1.2rem}
  .tk-inner{padding-top:calc(var(--tk-top) - var(--deck-y) + .25rem);padding-bottom:calc(var(--tk-bot) + .9rem)}
  .tk-hero .tk-inner{padding-bottom:3rem}
  .tk-hero-foot{bottom:.8rem}
  .tk-go-hogs .hg-strip{--h:clamp(90px,34svh,200px)}
  .tk-go-hogs .hg-btn{width:38px;height:38px}
  .tk-go-hogs .hg-ctrl{margin-top:.4rem}
  .tk-hogs .tk-title{margin-bottom:.2rem}
  .tk-pager .tk-count{display:none}
}
@media(max-height:560px) and (max-width:899px){ :root{--tk-bot:env(safe-area-inset-bottom,0px)} .mobile-cta{display:none} .tk-visit .site-footer{margin-bottom:0} }

/* colour backdrop behind the cards: two composited layers, cross-faded by scroll (lerped) */
.tk-backdrop{position:fixed;inset:0;z-index:-1;background:var(--bd-a,#E9E3D9);pointer-events:none}
.tk-backdrop::after{content:"";position:absolute;inset:0;background:var(--bd-b,#E9E3D9);opacity:var(--bd-t,0);will-change:opacity}
@media (prefers-reduced-motion:reduce){.tk-backdrop{display:none}}
.tk-card,.tk-inner,.tk-body,.tk-hogs,.tk-split>*{min-width:0}
.tk-hogs .hg{max-width:100%}
@media(min-width:900px) and (max-height:820px){.tk-more{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}}
.tk-center .btn-row{justify-content:center}
@media(max-width:799px){.tk-count{font-size:.58rem;opacity:.8}}
.tk-js .tk-panel.tk-gone{visibility:hidden}
/* perf: round the cards with clip-path instead of overflow+radius — a rounded overflow clip around moving
   composited layers forces an expensive mask surface every frame; clip-path keeps it on the fast path */
.tk-js .tk-panel:not(.tk-tall) .tk-card{overflow:visible;clip-path:inset(0 round var(--tk-rad) var(--tk-rad) 0 0)}
@media(max-width:799px){:root{--tk-rad:16px}}
/* full-bleed link panels: the copy layer sits above the image link, let clicks fall through to it */
.tk-lookbook .tk-inner{pointer-events:none}
.tk-lookbook .tk-inner a,.tk-lookbook .tk-inner button{pointer-events:auto}
html:not(.tk-js) .tk-home .site-header{position:sticky;background:color-mix(in srgb,var(--ivory) 92%,transparent)}
html:not(.tk-js) .tk-home .tk-panel:first-of-type{margin-top:0}
.tk-go-hogs .hg-strip.is-dragging{scroll-snap-type:none;scroll-behavior:auto;user-select:none;-webkit-user-select:none}
.tk-go-hogs .hg-strip.is-dragging a{pointer-events:none}
.tk-go-hogs .hg-strip img{-webkit-user-drag:none;user-select:none}
.tk-lookbook .tk-media img{object-position:34% 8%}
@media (max-width:640px){.tk-lookbook .tk-media img{object-position:25% 12%}}
@media (max-width:640px) and (min-height:561px){.tk-go-hogs .hg-strip{--h:clamp(200px,34svh,340px)}}

/* ---- phones: bottom padding = bar + safe area + margin (>=96px); media shrinks so copy + buttons fit above the bar ---- */
@media(max-width:799px) and (min-height:561px){
  .tk-inner{padding-bottom:max(96px,calc(var(--tk-bot) + clamp(1.25rem,3.5vh,2.5rem)))}
  .tk-hero .tk-inner{padding-bottom:calc(var(--tk-bot) + clamp(4.5rem,11vh,7rem))}
  .tk-visit .tk-inner{padding-bottom:clamp(2rem,6vh,4rem)}
  .tk-inner>.tk-split{display:flex;flex-direction:column;justify-content:center;align-items:stretch;flex:1 1 auto;min-height:0;height:auto}
  .tk-split .tk-frame{flex:0 1 min(34svh,58vw);height:auto;min-height:clamp(84px,13svh,150px)}
  .tk-split .tk-copy{flex:none}
}
@media(max-width:799px) and (min-height:561px) and (max-height:760px){
  :root{--t-tk:min(clamp(1.8rem,1rem + 4.3vw,6.1rem),8svh)}
  .tk-lede{font-size:1rem;line-height:1.4}
  .tk-split{gap:.9rem}
}

/* ---------- v6: header right link, light free-scrolling visit page, reveal-on-view ---------- */
.nav-end{justify-self:end;display:flex;align-items:center;gap:1rem}
.nav-visit{display:none}
.tk-home .nav-visit{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;font:600 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--charcoal);text-decoration:none;transition:color .7s var(--ease-lux)}
html[data-ink="dark"] .tk-home .nav-visit{color:var(--ivory)}
@media(min-width:560px){.tk-home .nav-visit{display:none}}
.tk-visit .tk-card{color:var(--charcoal)}
.tk-visit .tk-title{color:var(--charcoal)}
.tk-visit .tk-eyebrow{color:var(--taupe-deep)}
@media (prefers-reduced-motion:no-preference){
  .tk-js .tk-panel.tk-visit.is-in .rv:not(.in){opacity:0;transform:translate3d(0,34px,0)}
  .tk-js .tk-visit .rv{transition-delay:60ms}
  .tk-js .tk-panel .tk-xbtn{opacity:0;transition:opacity .8s var(--ease-lux) .45s}
  .tk-js .tk-panel.is-in .tk-xbtn{opacity:1}
}
.tk-visit .info-list .k{color:var(--taupe-deep)}
.tk-visit .info-list li{border-bottom-color:rgba(43,41,38,.14)}
.tk-visit .hours tr.today td{color:var(--charcoal);font-weight:700}

/* ---------- v8: phone deck = small photo cards with the heading only (Cieffe-style) ----------
   The collapsed card face carries just its photo, the small uppercase label and the Cinzel heading;
   everything else (description, buttons, links, album) lives in the expanded view (expand.js).
   Nothing on the face is gated by scroll position (.is-in / --q), so nothing can appear or vanish on release. */
.tk-ph-media{display:none}
@media(max-width:799px) and (min-height:561px){
  :root{--ph-top:calc(var(--hdr-h,62px) + 26px);--ph-peek:11px;--ph-gut:12px}
  /* geometry: the card stops below the header with the two earlier cards' rounded tops showing above it,
     and ends above the bottom bar, so no part of the face is ever under the bar */
  .tk-panel:not(.tk-tall){padding:var(--ph-top) var(--ph-gut) var(--tk-bot)}
  .tk-js .tk-panel:not(.tk-tall) .tk-card{clip-path:inset(0 round 16px);border-radius:16px;
    transform:translate3d(0,calc(var(--c,0) * var(--ph-peek) * -1),0) scale(calc(1 - var(--c,0) * .05));transform-origin:50% 0}
  .tk-panel:not(.tk-tall) .tk-card{border-radius:16px;overflow:hidden}
  .tk-js .tk-panel:not(.tk-tall) .tk-dim{border-radius:16px}

  /* face layout: heading block pinned to the bottom of the photo */
  .tk-panel:not(.tk-tall):not(.tk-hero) .tk-inner{padding:1.25rem 1.3rem 1.45rem;justify-content:flex-end}
  .tk-panel:not(.tk-tall):not(.tk-hero) .tk-inner>*{transform:none!important;will-change:auto!important}
  .tk-inner>.tk-split{position:static;display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto;min-height:0;height:auto;gap:0}
  .tk-split .tk-frame{position:absolute;inset:0;z-index:-1;height:auto;min-height:0;flex:none;border-radius:0;background:var(--charcoal)}
  .tk-js .tk-panel .tk-split .tk-frame{clip-path:none;transition:none}
  .tk-split .tk-frame::after,.tk-ph-media::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(22,21,19,.18) 0%,rgba(22,21,19,0) 30%,rgba(22,21,19,.12) 55%,rgba(22,21,19,.74) 100%)}
  .tk-split .tk-copy{position:relative;flex:none;max-width:none}
  .tk-ph-media{display:block}
  .tk-ph-media img{object-position:50% 30%}
  .tk-hogs{position:static;text-align:left;margin:0}
  .tk-hogs .tk-eyebrow{justify-content:flex-start}

  /* heading only */
  .tk-panel:not(.tk-tall):not(.tk-hero) :is(.tk-lede,.tk-more,.btn-row,.tk-quick,.tk-num),
  .tk-hogs>div.rv,.tk-hero .tk-num,.tk-hero-foot{display:none!important}
  .tk-panel:not(.tk-tall):not(.tk-hero) .tk-card{color:var(--ivory)}
  .tk-panel:not(.tk-tall):not(.tk-hero) .tk-eyebrow{color:var(--champagne);margin-bottom:.55rem}
  .tk-panel:not(.tk-tall):not(.tk-hero) .tk-title{color:var(--ivory);font-size:clamp(1.7rem,1.05rem + 3.4vw,2.35rem);line-height:1.08;margin:0}
  .tk-panel:not(.tk-tall):not(.tk-hero) .tk-title .accent{color:var(--champagne)}
  .tk-hogs-title{color:var(--champagne)!important;letter-spacing:.06em}

  /* always visible: no scroll-position reveals on the face */
  .tk-js .tk-panel:not(.tk-tall):not(.tk-hero) .rv{opacity:1;transform:none;transition:none}
  .tk-js .tk-panel:not(.tk-tall):not(.tk-hero) .ln-i{transform:none;transition:none}

  /* the whole card is the button: the View / Learn more control becomes an invisible full-card tap target */
  .xp-ok .tk-panel .tk-xbtn,.xp-ok .ink-dark .tk-xbtn,.xp-ok .tk-lookbook .tk-xbtn{display:block;position:absolute;inset:0;z-index:6;width:auto;height:auto;min-height:0;margin:0;padding:0;
    border:0!important;border-radius:16px;background:transparent!important;color:transparent!important;font-size:0;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1!important;transform:none;transition:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .xp-ok .tk-panel .tk-xbtn .tk-xbtn-i{display:none}
  .xp-ok .tk-panel .tk-xbtn:focus-visible{outline:2px solid var(--champagne);outline-offset:-6px}

  /* hero: same card size, centred brand block; its contact strip lives in the bottom bar and the Visit page */
  .tk-hero .tk-inner{padding:1.25rem 1.3rem 1.5rem;justify-content:center}
}
@media(max-width:799px) and (min-height:561px) and (max-height:760px){
  .tk-hero-logo img{width:auto;max-height:15svh}
}