/* Landing hero — editorial warm-paper spread.
   All rules scoped under .hero-landing so dashboard/auth mascot-panel styles
   are untouched. */

.hero-landing{
  background:
    radial-gradient(900px 520px at 88% -10%, color-mix(in srgb, var(--c-secondary) 14%, transparent), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, color-mix(in srgb, var(--c-primary) 12%, transparent), transparent 60%),
    radial-gradient(500px 380px at 50% 130%, color-mix(in srgb, var(--c-lime) 10%, transparent), transparent 60%),
    linear-gradient(172deg,
      color-mix(in srgb, color-mix(in srgb, var(--c-primary) 8%, var(--c-surface)) 60%, white) 0%,
      #ffffff 50%,
      color-mix(in srgb, color-mix(in srgb, var(--c-secondary) 8%, var(--c-surface)) 45%, white) 100%);
  border: 1px solid color-mix(in srgb, var(--c-primary) 14%, transparent);
  box-shadow:
    var(--shadow-2),
    inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
}
.hero-landing::before{
  /* subtle paper grain */
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.44 0 0 0 0 0.26 0 0 0 0 0.16 0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events:none;
  z-index: 0;
}
.hero-landing .hero-inner{
  position: relative;
  z-index: 1;
  padding: 14px;
  gap: 14px;
}

/* Quick filters polish on landing only */
.hero-landing .quick-filters{
  background: color-mix(in srgb, white 72%, transparent);
  border-color: color-mix(in srgb, var(--c-text) 12%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, white 80%, transparent) inset;
}

/* Stage — asymmetric editorial grid */
.landing-stage{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
  padding: 38px 42px 40px;
  border-radius: 22px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, white 78%, transparent) 0%,
      color-mix(in srgb, white 48%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent);
  overflow: hidden;
  isolation: isolate;
}
.landing-stage::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(420px 280px at 78% 18%, color-mix(in srgb, var(--c-primary) 20%, transparent), transparent 70%);
  pointer-events:none;
  z-index: 0;
}
.landing-stage > *{ position: relative; z-index: 1; }

/* Corner ornaments — thin serif brackets */
.stage-corner{
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid color-mix(in srgb, var(--c-text) 55%, transparent);
  z-index: 2;
  pointer-events: none;
}
.stage-corner-tl{ top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.stage-corner-br{ bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* Oversized serif watermark */
.stage-watermark{
  position: absolute;
  right: -22px;
  bottom: -110px;
  font-family: var(--font-display);
  font-size: 440px;
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.06em;
  color: color-mix(in srgb, var(--c-text) 9%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Lede (left column) */
.landing-lede{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.landing-overline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, white 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  color: color-mix(in srgb, var(--c-text) 78%, transparent);
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.landing-overline .overline-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d96f3c;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d96f3c 28%, transparent);
  animation: landingPulse 2.2s ease-in-out infinite;
}
.landing-overline .overline-value{
  color: var(--c-text);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: none;
}
.landing-overline .overline-change{
  margin-left: 4px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
  font-size: 10.5px;
  color: color-mix(in srgb, var(--c-text) 65%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--c-text) 40%, transparent);
  padding-bottom: 1px;
}
.landing-overline .overline-change:hover{
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}
@keyframes landingPulse{
  0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, #d96f3c 40%, transparent); }
  50%    { box-shadow: 0 0 0 6px color-mix(in srgb, #d96f3c 0%, transparent); }
}

.landing-headline{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -.018em;
  color: var(--c-text);
  max-width: 18ch;
  /* break on periods visually via hyphens + wider tracking */
  text-wrap: balance;
}
.landing-headline::first-letter{
  font-style: italic;
  font-weight: 400;
}

.landing-body{
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-text) 72%, transparent);
  max-width: 44ch;
  font-weight: 500;
}

.landing-ctas{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.landing-cta-primary{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-text));
  color: #fff7ef;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .01em;
  border: 1px solid color-mix(in srgb, var(--c-text) 80%, black);
  box-shadow:
    0 1px 0 color-mix(in srgb, white 18%, transparent) inset,
    0 -1px 0 color-mix(in srgb, black 14%, transparent) inset,
    0 10px 28px -10px color-mix(in srgb, var(--c-text) 70%, transparent),
    0 2px 0 color-mix(in srgb, var(--c-text) 22%, transparent);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.landing-cta-primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 color-mix(in srgb, white 24%, transparent) inset,
    0 -1px 0 color-mix(in srgb, black 14%, transparent) inset,
    0 14px 30px -10px color-mix(in srgb, var(--c-text) 80%, transparent),
    0 3px 0 color-mix(in srgb, var(--c-text) 28%, transparent);
}
.landing-cta-primary:active{
  transform: translateY(1px);
}
.landing-cta-primary .cta-arrow{
  transition: transform .2s ease;
}
.landing-cta-primary:hover .cta-arrow{
  transform: translateX(3px);
}

.landing-cta-secondary{
  display: inline-flex;
  align-items: center;
  padding: 10px 2px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--c-text);
  letter-spacing: .005em;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--c-text) 45%, transparent);
  border-radius: 0;
  transition: border-color .2s ease, color .2s ease;
}
.landing-cta-secondary:hover{
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}

.landing-secondary{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--c-text) 60%, transparent);
}
.landing-secondary a{
  color: inherit;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.landing-secondary a:hover{
  color: var(--c-text);
  border-bottom-color: color-mix(in srgb, var(--c-text) 40%, transparent);
}
.landing-secondary .sec-sep{
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text) 35%, transparent);
}

/* Aside (right column) */
.landing-aside{
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.aside-mascot{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: rotate(1.5deg);
}
.aside-mascot-ring{
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid color-mix(in srgb, white 90%, transparent);
  box-shadow:
    0 18px 40px -12px color-mix(in srgb, var(--c-text) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--c-text) 18%, transparent);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c-surface-2) 60%, white), color-mix(in srgb, var(--c-secondary) 30%, white));
}
.aside-mascot-ring::after{
  content:"";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--c-text) 30%, transparent);
  pointer-events: none;
}
.aside-mascot-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.18);
}
.aside-mascot-caption{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: color-mix(in srgb, var(--c-text) 75%, transparent);
  transform: rotate(-1.5deg);
}
.aside-mascot-caption .caption-glyph{
  color: #d96f3c;
  font-size: 11px;
}

/* Editor's note card (tip of the day / location form) */
.aside-note{
  position: relative;
  padding: 18px 20px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, white 88%, transparent),
      color-mix(in srgb, var(--c-surface-2) 35%, white));
  border: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, white 70%, transparent) inset,
    0 10px 24px -14px color-mix(in srgb, var(--c-text) 55%, transparent);
}
.aside-note::before{
  /* left ribbon */
  content:"";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--c-primary), var(--c-text));
}

.aside-note-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.note-rule{
  flex: 0 0 auto;
  width: 22px;
  height: 1.5px;
  background: var(--c-text);
}
.note-label{
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text);
}
.aside-note-text{
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-text) 90%, transparent);
  letter-spacing: .002em;
}

.aside-note-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.note-link{
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-text) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-text) 30%, transparent);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.note-link:hover{
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}
.note-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 16px;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--c-text) 80%, black);
  box-shadow:
    0 1px 0 color-mix(in srgb, white 14%, transparent) inset,
    0 6px 18px -10px color-mix(in srgb, var(--c-text) 65%, transparent);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.note-cta:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--c-text) 88%, black);
  box-shadow:
    0 1px 0 color-mix(in srgb, white 16%, transparent) inset,
    0 10px 22px -10px color-mix(in srgb, var(--c-text) 75%, transparent);
}
.note-cta .note-cta-arrow{
  transition: transform .2s ease;
}
.note-cta:hover .note-cta-arrow{
  transform: translateX(3px);
}

/* Location form variant */
.aside-location{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aside-location-label{
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-text) 70%, transparent);
}
.aside-location-input{
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--c-text) 25%, transparent);
  background: color-mix(in srgb, white 75%, transparent);
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--c-text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.aside-location-input:focus{
  border-color: var(--c-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 35%, transparent);
}
.aside-location-hint{
  margin: 2px 0 10px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-text) 55%, transparent);
}

/* Entrance choreography */
@keyframes landingRiseIn{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: translateY(0); }
}
.hero-landing .landing-overline { animation: landingRiseIn .6s .05s both cubic-bezier(.2,.7,.2,1); }
.hero-landing .landing-headline { animation: landingRiseIn .7s .14s both cubic-bezier(.2,.7,.2,1); }
.hero-landing .landing-body     { animation: landingRiseIn .7s .24s both cubic-bezier(.2,.7,.2,1); }
.hero-landing .landing-ctas     { animation: landingRiseIn .7s .34s both cubic-bezier(.2,.7,.2,1); }
.hero-landing .landing-secondary{ animation: landingRiseIn .7s .44s both cubic-bezier(.2,.7,.2,1); }
.hero-landing .aside-mascot     { animation: landingRiseIn .8s .30s both cubic-bezier(.2,.7,.2,1); }
.hero-landing .aside-note       { animation: landingRiseIn .8s .46s both cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){
  .hero-landing .landing-overline,
  .hero-landing .landing-headline,
  .hero-landing .landing-body,
  .hero-landing .landing-ctas,
  .hero-landing .landing-secondary,
  .hero-landing .aside-mascot,
  .hero-landing .aside-note{
    animation: none;
  }
  .landing-overline .overline-dot{ animation: none; }
}

/* Responsive */
@media (max-width: 980px){
  .landing-stage{
    grid-template-columns: 1fr;
    padding: 30px 26px 32px;
    gap: 28px;
  }
  .landing-aside{
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
  }
  .aside-mascot{ flex: 0 0 auto; transform: rotate(0); }
  .aside-mascot-caption{ transform: rotate(0); }
  .aside-note{ flex: 1; min-width: 0; }
  .stage-watermark{ font-size: 320px; bottom: -90px; }
}
@media (max-width: 680px){
  .hero-landing .hero-inner{ padding: 8px; gap: 10px; }
  .landing-stage{
    padding: 24px 20px 26px;
    border-radius: 18px;
    gap: 22px;
  }
  .landing-aside{ flex-direction: column; align-items: stretch; }
  .aside-mascot{ align-self: flex-start; }
  .aside-mascot-ring{ width: 120px; height: 120px; border-width: 3px; }
  .landing-headline{ font-size: clamp(30px, 7vw, 42px); }
  .landing-body{ font-size: 14.5px; }
  .stage-watermark{ font-size: 240px; bottom: -60px; right: -14px; }
  .stage-corner{ width: 18px; height: 18px; }
  .stage-corner-tl{ top: 10px; left: 10px; }
  .stage-corner-br{ bottom: 10px; right: 10px; }
  .landing-ctas{ gap: 10px; }
  .landing-cta-primary{ padding: 12px 18px 12px 20px; font-size: 14px; }
  .landing-cta-secondary{ font-size: 15.5px; }
}