/* ============ TOKENS ============ */
:root{
  --bg:#ffffff;
  --fg:#161616;
  --fg-dim:#6b6b6b;
  --fg-faint:#a7a7a3;
  --line:rgba(20,20,20,0.12);
  --line-strong:rgba(20,20,20,0.32);
  --nav-line:rgba(20,20,20,0.62);
  --nav-line-dark:rgba(244,242,236,0.5);

  --dark-bg:#1c1c1c;
  --dark-fg:#f4f2ec;
  --dark-fg-dim:#a8a49c;
  --dark-line:rgba(244,242,236,0.16);
  --dark-line-strong:rgba(244,242,236,0.34);

  --sans:'Poppins', sans-serif;
  --serif:'Fraunces', serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* NOTE (Lamina Wallet integration): this stylesheet was ported from the
   laminacards.com static site and is loaded ONLY on the "/" route's page
   component (never in the shared root layout), so it never reaches
   /signup, /mentions-legales, /restaurant, /admin, etc. As a second,
   belt-and-suspenders safety net, every selector that originally targeted
   bare `body`/`a`/`img`/`h1..p`/`*` (and would otherwise fight the Tailwind
   app's own global resets in globals.css if this file ever loaded
   alongside them) is scoped under the `.lf-page` wrapper that the page
   renders around this whole design. `html`-level rules (scroll-behavior,
   touch-action, overflow-anchor, the `.touch` cursor override) are left
   global on purpose -- they're harmless anywhere in the app. */
.lf-page, .lf-page *{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, .lf-page main, .lf-page section{overflow-anchor:none;}
html{touch-action:manipulation;}

.lf-page{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}

html.touch, html.touch .lf-page *{cursor:auto !important;}
html.touch #cursor-dot{display:none;}

.lf-page a{color:inherit;text-decoration:none;}
.lf-page img{max-width:100%;display:block;}
.lf-page h1,.lf-page h2,.lf-page h3,.lf-page p{margin:0;}

.lf-page::selection, .lf-page *::selection{background:var(--fg);color:var(--bg);}

/* ============ CUSTOM CURSOR ============ */
#cursor-dot{
  position:fixed;
  top:0;left:0;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--fg);
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
  z-index:9999;
  opacity:0;
  transition:width .3s var(--ease), height .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), opacity .4s var(--ease);
}
#cursor-dot.show{opacity:1;}
#cursor-dot.cursor-hover{
  width:38px;height:38px;
  background:transparent;
  border:1px solid var(--fg);
}
#cursor-dot.on-dark{background:var(--dark-fg);}
#cursor-dot.on-dark.cursor-hover{background:transparent;border-color:var(--dark-fg);}

/* ============ INTRO ============ */
#intro{
  position:fixed;inset:0;
  background:var(--bg);
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  clip-path:circle(150% at 50% 50%);
  transition:clip-path 1.05s var(--ease);
}
#intro.fade-out{clip-path:circle(0% at 50% 50%);}
#intro-logo{
  width:clamp(220px,32vw,440px);
  height:auto;
  opacity:0;
  transform:scale(1.1);
  filter:blur(18px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
#intro-logo.in{opacity:1;transform:scale(1);filter:blur(0);}
#intro-logo.intro-exit{opacity:0;transform:scale(.92);filter:blur(6px);transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);}

/* ============ TOP BAR ============ */
#top-bar{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 5vw 22px calc(5vw + 64px);
  z-index:50;
  pointer-events:none;
}
.logo-btn{
  display:block;
  background:none;border:none;padding:0;margin:0;
  pointer-events:auto;
  cursor:none;
}
.top-logo{display:block;height:32px;width:auto;transition:filter .4s var(--ease);}
.top-left{display:flex;align-items:center;gap:20px;}
.top-contacts{display:flex;align-items:center;gap:14px;pointer-events:auto;}
.top-contact-link{
  display:block;
  width:16px;height:16px;
  color:var(--fg-dim);
  cursor:none;
  transition:color .3s var(--ease);
}
.top-contact-link svg{width:100%;height:100%;display:block;}
.top-contact-link:hover{color:var(--fg);}
.top-right{display:flex;align-items:center;gap:22px;pointer-events:none;}
.top-tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);transition:color .4s var(--ease);}
#top-bar.on-dark .top-logo{filter:invert(1) brightness(1.3);}
#top-bar.on-dark .top-tag{color:var(--dark-fg-dim);}
#top-bar.on-dark .top-contact-link{color:var(--dark-fg-dim);}
#top-bar.on-dark .top-contact-link:hover{color:var(--dark-fg);}

@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){
  .top-left{gap:12px;}
  .top-contacts{gap:10px;}
  .top-contact-link{width:14px;height:14px;}
}
@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){ .top-tag{display:none;} }

#lang-toggle{
  pointer-events:auto;
  cursor:none;
  display:flex;align-items:center;gap:6px;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:6px 12px;
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--fg-dim);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lang-opt{transition:color .3s var(--ease), font-weight .3s var(--ease);}
.lang-sep{opacity:.4;}
html[data-lang="fr"] #lang-toggle .lang-opt[data-lang="fr"],
html[data-lang="en"] #lang-toggle .lang-opt[data-lang="en"]{color:var(--fg);font-weight:700;}
#top-bar.on-dark #lang-toggle{border-color:var(--dark-line-strong);color:var(--dark-fg-dim);}
html[data-lang="fr"] #top-bar.on-dark #lang-toggle .lang-opt[data-lang="fr"],
html[data-lang="en"] #top-bar.on-dark #lang-toggle .lang-opt[data-lang="en"]{color:var(--dark-fg);}

/* ============ SIDE NAV ============ */
#side-nav{
  position:fixed;left:0;top:0;
  height:100vh;width:60px;
  z-index:60;
  display:flex;align-items:center;
  transition:width .5s var(--ease);
  overflow:hidden; /* the (opacity:0, but still laid out) title text used to
    spill way past the 60px column and silently steal clicks meant for
    whatever sits underneath it, like the logo in the top bar */
}
/* The real hit-box grows with the panel so moving the mouse onto a revealed
   title never counts as "leaving" the nav (which would schedule a close). */
#side-nav.hovering{width:min(580px, 90vw);}
#side-nav::before{
  content:'';
  position:absolute;inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,0) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:width .5s var(--ease);
  pointer-events:none;
  z-index:-1;
}
#side-nav.hovering::before{width:min(580px, 90vw);}

.side-nav-track{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(13px,2.6vh,25px);
  padding-left:26px;
  height:100%;
}
.nav-item{
  display:flex;align-items:center;
  height:18px;
  padding:8px 40px 8px 0;
  margin:-8px -40px -8px 0;
}
.nav-line{
  width:22px;height:1.5px;
  background:var(--nav-line);
  transition:width .45s var(--ease), background-color .45s var(--ease);
  flex-shrink:0;
}
.nav-text{
  display:flex;align-items:baseline;gap:10px;
  margin-left:14px;
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.nav-num{font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.08em;color:var(--fg-faint);}
.nav-title{font-family:var(--sans);font-weight:600;font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);transition:color .3s var(--ease);}

/* Opening the panel (mouse approach on desktop, edge-swipe on touch) reveals
   every title at once; each one darkens on its own hover, the current
   section's title stays dark to mark your place. */
#side-nav.hovering .nav-text{opacity:1;transform:translateX(0);}
#side-nav.hovering .nav-item:hover .nav-line{width:38px;background:var(--fg);}
#side-nav.hovering .nav-item:hover .nav-title{color:var(--fg);}

.nav-item.active .nav-line{width:38px;background:var(--fg);}
.nav-item.active .nav-title{color:var(--fg);}

#side-nav.on-dark::before{background:linear-gradient(90deg, rgba(28,28,28,.96) 0%, rgba(28,28,28,.82) 55%, rgba(28,28,28,0) 100%);}
#side-nav.on-dark .nav-line{background:var(--nav-line-dark);}
#side-nav.on-dark .nav-item.active .nav-line,
#side-nav.on-dark.hovering .nav-item:hover .nav-line{background:var(--dark-fg);}
#side-nav.on-dark .nav-num{color:var(--dark-fg-dim);}
#side-nav.on-dark .nav-title{color:var(--dark-fg-dim);}
#side-nav.on-dark .nav-item.active .nav-title,
#side-nav.on-dark.hovering .nav-item:hover .nav-title{color:var(--dark-fg);}

/* Any touch device — phone or tablet, whatever the orientation — gets the
   same side nav: condensed resting ticks, opened by a tap (see script.js),
   showing every title just like desktop. Long French titles don't fit on one
   line at any reasonable width, so once open, titles wrap instead of being
   cut off. The resting (closed) ticks stay single-line/fixed-height — the
   wrap only kicks in while open, otherwise the invisible (opacity:0) wrapped
   title text inflates each tick's box and blows the gap between ticks way
   out. touch-action:none hands the whole gesture to script.js, which drags
   the page's scroll position directly off the touch point (see the "touch:
   drag the closed nav to scrub" block there) instead of the browser's own
   panning. */
html.touch #side-nav{width:30px; touch-action:none;}
html.touch #side-nav.hovering{width:min(340px, 92vw);}
html.touch .side-nav-track{padding-left:12px;gap:32px;}
html.touch .nav-line{width:12px;}
html.touch .nav-item{padding:8px 18px 8px 0;margin:-8px -18px -8px 0;}
html.touch .nav-item.active .nav-line{width:24px;}
html.touch .nav-num{font-size:.72rem;}
html.touch .nav-title{font-size:.78rem;}
html.touch .nav-text{align-items:baseline;}
html.touch #side-nav.hovering .nav-item{
  height:auto;
  align-items:flex-start;
  padding:10px 18px 10px 0;margin:-10px -18px -10px 0;
}
html.touch #side-nav.hovering .nav-line{margin-top:7px; align-self:flex-start;}
html.touch #side-nav.hovering .nav-text{white-space:normal;}
html.touch #side-nav.hovering .nav-title{white-space:normal;}
html.touch #side-nav.hovering::before{width:min(340px, 92vw);}
/* Open panel packs the titles closer together than the wide resting-tick
   gap above (that width is there for a comfortable drag range, not for
   reading a list of titles). */
html.touch #side-nav.hovering .side-nav-track{gap:16px;}

/* Tablets (touch, wider than a phone) get extra breathing room between ticks. */
@media (min-width:641px){
  html.touch .side-nav-track{gap:46px;}
  html.touch #side-nav.hovering{width:min(420px, 70vw);}
  html.touch #side-nav.hovering::before{width:min(420px, 70vw);}
  html.touch #side-nav.hovering .side-nav-track{gap:20px;}
}

/* ============ LAYOUT ============ */
main{position:relative;z-index:2;}

section{
  position:relative;
  padding-left:64px;
}

/* ============ HERO ============ */
#hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:120px 6vw 60px calc(6vw + 64px);
  overflow:hidden;
  background:var(--bg);
}
/* Same soft gradient wash on every device — desktop used to get an animated
   cloud-photo backdrop here, but it's gone in favor of the calmer look
   phones and portrait tablets already had (see the old max-width:820px
   override this replaced). */
.hero-mist{
  position:absolute;
  inset:-8% -8%;
  background-image:
    radial-gradient(ellipse 62% 30% at 28% 18%, rgba(90,90,90,.4), transparent 62%),
    radial-gradient(ellipse 55% 32% at 78% 46%, rgba(120,120,120,.32), transparent 64%),
    radial-gradient(ellipse 75% 38% at 45% 92%, rgba(80,80,80,.3), transparent 68%);
  background-size:auto;
  opacity:1;
  animation:mistDrift 16s ease-in-out infinite;
  will-change:transform;
  pointer-events:none;
  z-index:0;
}
@keyframes mistDrift{
  0%{transform:scale(1.1) translate(0%,0%) rotate(0deg);}
  33%{transform:scale(1.22) translate(-3.5%,2.4%) rotate(.6deg);}
  66%{transform:scale(1.16) translate(3%,-2.6%) rotate(-.5deg);}
  100%{transform:scale(1.1) translate(0%,0%) rotate(0deg);}
}
.hero-inner{position:relative;z-index:1;max-width:760px;}
.hero-bottom{z-index:1;}
.hero-logo-img{
  width:clamp(280px,42vw,560px);
  height:auto;
  margin:0 auto;
}
.hero-sub{
  margin:26px auto 0;
  max-width:600px;
  font-weight:400;
  font-size:clamp(1rem,1.6vw,1.2rem);
  line-height:1.55;
  color:var(--fg);
}
.hero-desc{
  margin:22px auto 0;
  max-width:560px;
  font-size:.92rem;
  line-height:1.8;
  color:var(--fg-dim);
}
.hero-desc{
  cursor:none;
  transform:scale(1);
  transition:color .3s var(--ease), -webkit-text-stroke-width .3s var(--ease), transform .35s var(--ease);
  -webkit-text-stroke:0px currentColor;
}
.hero-desc.in-view:hover{
  color:var(--fg);
  -webkit-text-stroke:.4px currentColor;
  transform:scale(1.035);
}

.hero-sub .hover-word{
  cursor:none;
  transition:color .22s var(--ease), -webkit-text-stroke-width .22s var(--ease);
  -webkit-text-stroke:0px currentColor;
}
.hero-sub .hover-word:hover{
  color:var(--fg);
  -webkit-text-stroke:.5px currentColor;
}
.hero-bottom{
  position:relative;
  margin-top:70px;
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.hero-counter{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--fg-faint);
}
.hero-quote{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(.78rem,1.3vw,.92rem);
  letter-spacing:.04em;
  line-height:1.7;
  color:var(--fg);
  max-width:520px;
  text-transform:uppercase;
}
.scroll-cue{
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-faint);
  position:relative;
  padding-top:22px;
}
.scroll-cue::before{
  content:'';
  position:absolute;top:0;left:50%;
  width:1px;height:16px;
  background:var(--line-strong);
  transform:translateX(-50%);
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{transform:translateX(-50%) scaleY(0);transform-origin:top;opacity:0;}
  40%{transform:translateX(-50%) scaleY(1);transform-origin:top;opacity:1;}
  60%{transform:translateX(-50%) scaleY(1);transform-origin:bottom;opacity:1;}
  100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom;opacity:0;}
}

/* ============ PAGE SECTIONS ============ */
.page{
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:140px;padding-bottom:140px;
  border-top:1px solid var(--line);
}
.page-inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 340px;
  gap:20px 70px;
  align-items:center;
}
.page-num{
  grid-column:1;
  font-family:var(--sans);
  font-weight:500;
  font-size:.85rem;
  letter-spacing:.1em;
  color:var(--fg-faint);
  display:block;
  margin-bottom:14px;
}
.page-title{
  grid-column:1;
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  letter-spacing:.01em;
  line-height:1.18;
  margin-bottom:22px;
}
.page-kicker{
  grid-column:1;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-dim);
  max-width:440px;
  margin-bottom:30px;
}
.page-body{
  grid-column:1;
  max-width:480px;
}
.page-body p{
  color:var(--fg-dim);
  line-height:1.8;
  font-size:.96rem;
  margin-bottom:18px;
}
.page-body h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg);
  margin-bottom:10px;
}
.page-body.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  max-width:640px;
}
@media (max-width:900px){
  .page-body.two-col{grid-template-columns:1fr;}
}

.card-shot{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  width:100%;
  max-width:340px;
  filter:drop-shadow(0 20px 40px rgba(20,20,20,.22));
  transition:transform .5s var(--ease);
  will-change:transform;
}
.card-shot img{width:100%;height:auto;display:block;}

/* logo-only visual (VIP section) */
.logo-shot{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  width:100%;
  max-width:180px;
  filter:drop-shadow(0 14px 30px rgba(20,20,20,.14));
}
.logo-shot img{width:100%;height:auto;}

/* photo visual (Seminaire section) */
.photo-shot{
  grid-column:2;grid-row:1 / span 5;
  justify-self:center;
  width:100%;
  max-width:340px;
  border-radius:2px;
  overflow:hidden;
  filter:drop-shadow(0 24px 46px rgba(20,20,20,.22));
}
.photo-shot img{width:100%;height:auto;display:block;}

@media (max-width:820px){
  .page-inner{grid-template-columns:1fr;}
  .page-num,.page-title,.page-kicker,.page-body{grid-column:1;}
  .card-shot,.logo-shot,.photo-shot{grid-column:1;grid-row:auto;margin-top:36px;max-width:300px;}
}

/* ticket special line */
.ticket-line{
  font-family:var(--sans);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.98rem;
  color:var(--fg);
  line-height:1.6;
  margin:26px 0 30px !important;
}

/* ============ FAQ ============ */
.faq-list{grid-column:1;max-width:700px;margin-top:10px;}
.faq-item{
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.faq-item summary{
  cursor:none;
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--sans);
  font-weight:500;
  font-size:1rem;
  color:var(--fg);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';
  font-family:var(--sans);
  font-weight:300;
  font-size:1.4rem;
  color:var(--fg-dim);
  transition:transform .4s var(--ease);
  flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(135deg);}
.faq-item p{
  margin-top:14px;
  color:var(--fg-dim);
  line-height:1.75;
  font-size:.92rem;
  max-width:580px;
}

/* ============ CONTACT (dark section) ============ */
#contact{
  padding-top:140px;padding-bottom:60px;
  background:var(--dark-bg);
  color:var(--dark-fg);
}
.contact-inner{max-width:800px;margin:0 auto;padding-left:6px;}
#contact .page-num{color:var(--dark-fg-dim);}
.contact-title-word{
  font-family:var(--sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  color:var(--dark-fg);
  margin-bottom:10px;
}
.contact-wordmark{
  width:clamp(200px,26vw,320px);
  height:auto;
  margin-bottom:26px;
}
.contact-desc{
  color:var(--dark-fg-dim);
  line-height:1.8;
  font-size:.98rem;
  max-width:520px;
  margin-bottom:50px;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 40px;
  margin-bottom:100px;
}
.contact-link, .contact-plain{
  display:flex;align-items:center;gap:10px;
  font-family:var(--sans);
  font-weight:500;
  font-size:1.15rem;
  color:var(--dark-fg);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), opacity .3s var(--ease);
  width:fit-content;
}
.contact-link:hover{border-color:var(--dark-line-strong);opacity:.8;}
.ig-icon{width:18px;height:18px;flex-shrink:0;}
@media (max-width:560px){ .contact-grid{grid-template-columns:1fr;} }

.site-footer{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--dark-line);
  padding:26px 0;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dark-fg-dim);
}
.site-footer .footer-word{height:16px;width:auto;}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in-view{opacity:1;transform:translateY(0);}

.page-body .reveal:nth-child(2){transition-delay:.08s;}
.page-body .reveal:nth-child(3){transition-delay:.16s;}
.contact-grid.reveal .contact-link:nth-child(2),
.contact-grid.reveal .contact-link:nth-child(3){transition-delay:.05s;}

@media (max-width:820px){
  .page{padding-top:100px;padding-bottom:100px;}
  #contact{padding-top:100px;}
}

@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){
  section{padding-left:32px;padding-right:24px;}
  #hero{padding-left:32px;padding-right:24px;}
  #top-bar{padding-left:32px;}

  .hero-logo-img{width:min(260px, 72vw);}
  #intro-logo{width:min(200px, 64vw);}

  .card-shot{max-width:min(300px, 82vw);}
  .logo-shot{max-width:min(150px, 45vw);}
  .photo-shot{max-width:min(300px, 82vw);}

  .page{padding-top:80px;padding-bottom:80px;}
  #contact{padding-top:80px;}

  .site-footer{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* Tablet held upright specifically: the top gradient wash sat right under
   the header and read as an odd smudge on the taller canvas — drop it and
   pull the sections closer together (they had a lot more empty air than on
   a phone at this width). */
@media (min-width:641px) and (orientation:portrait) and (hover:none){
  .hero-mist{
    background-image:
      radial-gradient(ellipse 55% 32% at 78% 46%, rgba(120,120,120,.32), transparent 64%),
      radial-gradient(ellipse 75% 38% at 45% 92%, rgba(80,80,80,.3), transparent 68%);
  }
  .page{padding-top:56px;padding-bottom:56px;}
  #contact{padding-top:56px;}
}

/* ============ CROSS-OFFER LINK (top bar, Lamina Cards <-> Lamina Fidelity) ============ */
.offer-link{
  pointer-events:auto;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-dim);
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:6px 14px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.offer-link:hover{color:var(--fg);border-color:var(--fg);}
#top-bar.on-dark .offer-link{color:var(--dark-fg-dim);border-color:var(--dark-line-strong);}
#top-bar.on-dark .offer-link:hover{color:var(--dark-fg);border-color:var(--dark-fg);}
@media (max-width:640px), (min-width:641px) and (orientation:portrait) and (hover:none){
  .offer-link{padding:5px 11px;font-size:.6rem;}
}