/* ROKLAB (by Rudi Rok): the hub. Black and white; each product card carries its own accent (--card-accent).
   Fonts, tokens, the type and spacing scales, the ad line, the header and the bands come from shared/base.css. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header links on the hub are short words: keep them at least 44 px wide. */
.header nav a{min-width:44px;text-align:center}

/* Hero: the store name set large, one honest line beside it. "ROKLAB" is about 2.85em wide, so on phones it fills the
   width at 31vw (no horizontal scroll down to 320 px). */
/* On wide screens the intro line starts on the same vertical line as the text of a single featured guide card. */
/* The intro's last line sits on the title's baseline (Anybody's baseline is .123em above the bottom of its line box). */
.hub-hero{--title:clamp(120px,16.5vw,232px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;padding-top:24px;padding-bottom:var(--s5)}
.hub-hero .hub-intro{padding-left:45px;padding-bottom:calc(var(--title) * .123 - 8px);max-width:none}
.hub-title{font-family:var(--display);font-weight:800;font-stretch:condensed;font-size:var(--title);line-height:.8;letter-spacing:-.03em;text-transform:uppercase;margin-left:-.02em}
/* At this tracking the tips of the K touch the L, and at 1x the L touches the A, so KL read as one shape. Only these
   two letters get a span (screen readers get "ROKLAB by Rudi Rok", as written, from the sr-only text). Measured on
   renders at 320 to 1920 px, 1x to 3x: K-L now keeps the same clear gap as R-O and O-K, and no pair touches at 2x or 3x. */
.hub-title .kern-k{margin-right:.01em}
.hub-title .kern-l{margin-right:.003em}
.hub-title .sr-only{text-transform:none}
.hub-intro{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:31ch;text-wrap:balance}

/* Product cards. Several guides share the row evenly (two side by side, three on wide screens); a single guide gets the full width with its loop beside the text. */
.guides{padding-bottom:var(--s6)}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--col-gap)}
.guide-card{--card-accent:var(--ink);position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--ink);background:var(--paper)}
.guide-media{position:relative;margin:0;background:#EEECE7}
.guide-frame{position:relative;display:block;aspect-ratio:2/1;overflow:hidden}
.guide-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.guide-frame::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 3px);width:6px;background:var(--paper);pointer-events:none}
.guide-labels{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}
.guide-labels>span{justify-self:start;background:#FFFFFFF2;color:var(--ink);font-size:var(--fs-small);font-weight:700;line-height:var(--lh-ui);padding:6px 8px}
.guide-labels>span+span{margin-left:3px}
.loop-toggle{position:absolute;right:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:#FFFFFFF2;color:var(--ink);font-size:16px;font-weight:700;line-height:1}
.loop-toggle:hover{background:var(--paper)}
.guide-body{display:flex;flex-direction:column;flex:1;padding:28px 28px 22px}
.guide-title{font-family:var(--display);font-weight:800;font-stretch:condensed;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-.02em;text-transform:uppercase}
.guide-title a{text-decoration:none}
.guide-title a:hover{color:var(--card-accent)}
.guide-tagline{font-size:var(--fs-lead);line-height:var(--lh-lead);margin-top:14px;max-width:46ch}
.guide-format{font-size:var(--fs-small);font-weight:700;line-height:1.45;color:var(--muted);margin-top:12px;text-wrap:balance}
.guide-buy{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:auto;padding-top:26px}
.guide-price{display:flex;align-items:baseline;gap:12px;margin:0}
.guide-price>span:first-child{font-family:var(--display);font-weight:800;font-stretch:condensed;font-size:var(--fs-display);line-height:1;letter-spacing:-.04em;color:var(--card-accent)}
.guide-price>span:last-child{font-size:var(--fs-small);color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:15px 22px;text-decoration:none;font-weight:700;font-size:var(--fs-body);line-height:var(--lh-ui);white-space:nowrap;border:0;border-radius:0}
.primary{background:var(--ink);color:var(--paper)}.primary:hover{background:#343441}
/* In a grid the button takes its own full-width line under the price; a single wide card keeps them side by side. */
.guide-cta{flex:1 1 100%}
.guide-card:only-child .guide-cta{flex:1 1 auto;max-width:320px}
.guide-free{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;min-height:44px;margin-top:8px;font-size:var(--fs-body);line-height:var(--lh-ui);font-weight:700}
.guide-free-none{visibility:hidden}

.guide-card:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
/* The loop fills the left column; the 2:1 pair is centred, so the split between the halves stays in the middle. */
.guide-card:only-child .guide-media{min-height:380px}
.guide-card:only-child .guide-frame{position:absolute;inset:0;aspect-ratio:auto}
.guide-card:only-child .guide-body{padding:40px 44px 32px}

/* Who made these: white, so it stays apart from the tint footer band. */
.maker{display:grid;grid-template-columns:110px minmax(0,1fr);gap:28px;align-items:center;padding-block:0 var(--section)}
.maker>img{width:110px;height:140px;object-fit:cover;object-position:50% 44%}
.maker h2{font-size:var(--fs-title);line-height:1.2;letter-spacing:-.025em}
.maker p{font-size:var(--fs-body);line-height:var(--lh-text);color:var(--muted);margin-top:8px;max-width:70ch}

/* Footer: a tint band that bookends the ad line. */
.footer{display:flex;justify-content:space-between;align-items:start;gap:32px;padding-block:var(--s5) calc(var(--s5) + env(safe-area-inset-bottom))}
.footer>p{font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
/* One disclosure per line; a line that wraps does not leave a single word behind. */
.footer>p>span{display:block;text-wrap:pretty}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;column-gap:24px;font-size:var(--fs-small);font-weight:700}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-item{display:inline-flex;align-items:center;min-height:32px;font-weight:400;color:var(--muted);gap:.35em}
.footer-item a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700}

/* 800–1099: a single card keeps its loop beside the text, so the title and the button stay in the first view.
   The loop keeps its whole 2:1 frame at the top of its column, never cropped. Up to 799 the card stacks. */
@media(max-width:1099px){
  .hub-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .hub-hero .hub-intro{padding-left:29px}
  .guide-card:only-child{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .guide-card:only-child .guide-media{align-self:start;min-height:0}
  .guide-card:only-child .guide-frame{position:relative;inset:auto;aspect-ratio:2/1}
  .guide-card:only-child .guide-body{padding:28px 28px 22px}
}
@media(max-width:799px){
  .hub-hero{display:block;padding-top:20px}
  .guide-card:only-child{display:flex}
  .guide-card:only-child .guide-media{align-self:stretch}
  .hub-hero{--title:clamp(120px,31vw,232px)}
  .hub-intro,.hub-hero .hub-intro{margin-top:18px;max-width:36ch;padding:0}
  .footer{display:block}
  .footer-links{justify-content:flex-start;margin-top:14px}
  .guide-free-none{display:none}
}
@media(max-width:499px){
  .hub-hero{padding-top:14px;padding-bottom:var(--s4)}
  .hub-hero{--title:31vw}
  .hub-intro{margin-top:16px}
  .guide-body,.guide-card:only-child .guide-body{padding:22px 20px 16px}
  .guide-tagline{margin-top:12px}
  .guide-buy{gap:14px 18px;padding-top:22px}
  .guide-cta,.guide-card:only-child .guide-cta{flex:1 1 100%;max-width:none}
  .maker{grid-template-columns:80px minmax(0,1fr);gap:20px;align-items:start}
  .maker>img{width:80px;height:110px}
  .footer-links{column-gap:20px;margin-top:10px}
}