/* PORCH — the mobile walk.
   Every rule in this file lives inside a max-width:820px query, so the
   desktop build is mathematically untouched by loading it. A page opts in
   by carrying a .pwalk element; pages without one are unaffected.

   Grammar: desktop is a place you explore, mobile is a path you walk.
   One DOM, one URL, two grammars. */

@media (max-width: 820px){

  /* The walk replaces the page. Everything else in <body> is suppressed at
     render; anything EXPENSIVE (three.js, desktop plates) is guarded in JS
     so a phone never pays to download what it cannot see. */
  /* These four rules MUST stay ungrouped. A selector list is all-or-nothing:
     on engines without :has() (Safari 15.0-15.3, Firefox < 121, older Android
     WebViews) an invalid selector discards the whole rule — grouping the
     .pwalk-on fallback with the :has() version kills the fallback on exactly
     the browsers it exists for. */
  body:has(.pwalk) > *:not(.pwalk):not(.pwalk-arrival):not(script):not(style):not(link):not(template){
    display: none !important;
  }
  body.pwalk-on > *:not(.pwalk):not(.pwalk-arrival):not(script):not(style):not(link):not(template){
    display: none !important;
  }
  body:has(.pwalk){
    margin: 0;
    background: #0F1A26;
    overflow: hidden;
  }
  body.pwalk-on{
    margin: 0;
    background: #0F1A26;
    overflow: hidden;
  }

  .pwalk{
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #0F1A26;
    background-image: linear-gradient(180deg, #0A1119 0%, #0F1A26 42%, #1B2A3C 100%);
    font-family: 'Karla', system-ui, sans-serif;
    color: #F4EFE3;
    -webkit-text-size-adjust: 100%;
  }

  /* ---- ambient layers ------------------------------------------------ */

  .pwalk-amb{ position: absolute; z-index: 1; pointer-events: none; }

  /* index: a lit window, far and small, that fills the screen as you walk */
  .pwalk-window{
    top: 47%; left: 50%;
    width: 58vw; aspect-ratio: 3 / 4;
    transform: translate(-50%, -50%) scale(.14);
    opacity: 0;
    border: 1.5px solid rgba(244,201,122,0);
    border-radius: 2px;
    background: linear-gradient(165deg, rgba(244,201,122,.3), rgba(232,162,59,.14) 55%, rgba(232,162,59,.06));
    will-change: transform, opacity;
  }
  .pwalk-window i{ position: absolute; background: rgba(15,26,38,.5); }
  .pwalk-window i.v{ top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
  .pwalk-window i.h{ left: 0; right: 0; top: 44%; height: 1.5px; }
  /* The walk should carry the words, not a target-like panel behind them. */
  .pwalk-window{ display: none !important; }

  /* The porch light remains part of the arrival on small screens. */
  .pwalk-lamp{
    position: relative;
    width: 12px;
    height: 19px;
    margin: 0 auto 17px;
    border-radius: 3px 3px 8px 8px;
    background: linear-gradient(180deg, #F4C97A, #C97E1E);
    box-shadow: 0 0 18px 5px rgba(232,162,59,.55), 0 0 52px 24px rgba(232,162,59,.18);
    animation: pwalk-flicker 4s ease-in-out infinite;
  }
  .pwalk-lamp::before{
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 14px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: #6B4A33;
  }
  .pwalk-lamp::after{
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 2px;
    height: 6px;
    transform: translateX(-50%);
    background: #6B4A33;
  }
  @keyframes pwalk-flicker{
    0%, 100%{ opacity: 1; }
    45%{ opacity: .85; }
    50%{ opacity: 1; }
    52%{ opacity: .72; }
    55%{ opacity: 1; }
  }

  /* the-porch: a colonnade that slides past as you walk along it */
  .pwalk-colonnade{
    left: 0; right: 0;
    background-image: url(walk-icons/column-gold.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 bottom;
    will-change: background-position;
  }
  .pwalk-colonnade.far{ top: 15%; height: 34%; opacity: .07; }
  .pwalk-colonnade.near{ top: 6%; height: 62%; opacity: .13; }

  .pwalk-stars{
    inset: 0; opacity: .75;
    background-image:
      radial-gradient(1px 1px at 12% 16%, rgba(244,239,227,.55), transparent),
      radial-gradient(1px 1px at 78% 9%,  rgba(244,239,227,.42), transparent),
      radial-gradient(1px 1px at 58% 27%, rgba(244,239,227,.6),  transparent),
      radial-gradient(1px 1px at 28% 54%, rgba(244,239,227,.3),  transparent),
      radial-gradient(1px 1px at 88% 66%, rgba(244,239,227,.48), transparent),
      radial-gradient(1px 1px at 43% 12%, rgba(244,239,227,.4),  transparent),
      radial-gradient(1px 1px at 68% 42%, rgba(244,239,227,.3),  transparent);
  }

  .pwalk-floor{
    left: 0; right: 0; bottom: 0; height: 34%;
    background: linear-gradient(0deg, rgba(232,162,59,.09), transparent 78%);
  }

  /* ---- the scroller -------------------------------------------------- */

  .pwalk-scroll{
    position: relative;
    z-index: 5;
    /* Sized to the SMALL viewport, not the container. .pwalk stays inset:0 so the
       gradient still covers the full large viewport and no seam appears when
       Safari retracts its toolbars — but the scrollport matches what is
       actually visible. Browsers with a persistent bottom toolbar (DuckDuckGo)
       used to occlude the bottom ~92pt of the scrollport with no scroll range
       left to bring it up, which trapped the end screen's "Why PORCH?" block. */
    height: 100svh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  .pwalk-scroll.free{ scroll-snap-type: none; }

  .pwalk-s{
    min-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 22.5rem;
    margin-inline: auto;
    padding: 76px 24px 34px;
  }
  .pwalk-s.center{ align-items: center; text-align: center; }

  /* ---- station type -------------------------------------------------- */

  .pwalk-s img.mark{
    align-self: flex-start;
    flex: 0 0 auto;
    height: 42px; width: auto; max-width: 100%;
    object-fit: contain; object-position: left center;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 14px rgba(230,187,121,.3));
  }
  .pwalk-s.center img.mark{ align-self: center; object-position: center; }

  .pwalk-kicker{
    margin: 0 0 4px;
    color: #E8A23B;
    font-size: .6rem; font-weight: 700;
    letter-spacing: .24em; text-transform: uppercase;
  }
  .pwalk-s h1,
  .pwalk-s h2{
    margin: 0 0 15px;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 1.09;
    text-wrap: pretty;
  }
  .pwalk-s h1{ font-size: 2.45rem; }
  .pwalk-s p.body{
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.62;
    color: #DFDCD1;
    text-wrap: pretty;
  }
  .pwalk-s p.body:last-of-type{ margin-bottom: 0; }
  .pwalk-lede{
    margin: 16px auto 0;
    max-width: 18rem;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.42;
    color: #DFDCD1;
  }
  .pwalk-say{
    margin: 16px 0 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(244,201,122,.9);
  }
  .pwalk-ref{
    margin: 14px 0 0;
    color: rgba(244,239,227,.68);
    font-size: .72rem;
    letter-spacing: .1em;
  }
  .pwalk-cue{
    margin: 28px 0 0;
    color: rgba(244,239,227,.58);
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
  }
  .pwalk-quote{
    margin: 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.72rem;
    line-height: 1.32;
    color: #F4C97A;
    text-wrap: pretty;
  }
  .pwalk-list{
    display: flex; flex-direction: column; gap: 11px;
    margin: 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.3;
  }

  /* ---- the arrival / invitation card --------------------------------- */

  .pwalk-card{
    position: relative;
    width: 100%; max-width: 340px;
    margin: 22px auto 0;
    padding: 16px 15px 15px;
    text-align: left;
    border: 1px solid rgba(230,187,121,.4);
    border-radius: 3px;
    background: linear-gradient(165deg, rgba(232,162,59,.1), rgba(11,26,34,.86) 60%);
    box-shadow: 0 12px 34px rgba(0,0,0,.3);
    overflow: hidden;
  }
  .pwalk-card > s.edge{
    position: absolute; top: 0; left: 0;
    width: 34%; height: 2px;
    background: #F4C97A;
    box-shadow: 0 0 18px rgba(244,201,122,.55);
  }
  .pwalk-card .lbl{
    margin: 0 0 5px;
    color: #E8A23B;
    font-size: .62rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
  }
  .pwalk-card .date{
    margin: 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.4rem; line-height: 1.1;
  }
  .pwalk-card .time{
    margin: 3px 0 0;
    color: #F4C97A;
    font-size: .95rem; font-weight: 600;
  }
  .pwalk-card .where{
    margin: 7px 0 13px;
    color: #C2D0D4;
    font-size: .84rem;
    text-align: center;
  }
  .pwalk-btns{ display: grid; gap: 8px; }
  .pwalk-btns.two{ grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); }
  .pwalk-btns a{
    display: flex; align-items: center; justify-content: center;
    min-height: 48px;
    padding: 10px 8px;
    border-radius: 2px;
    font-size: .71rem; font-weight: 700;
    letter-spacing: .07em; line-height: 1.25;
    text-align: center; text-transform: uppercase;
    text-decoration: none;
  }
  .pwalk-btns a.solid{ background: #E8A23B; color: #15202C; }
  .pwalk-btns a.ghost{
    border: 1px solid rgba(230,187,121,.5);
    background: rgba(232,162,59,.06);
    color: #F4C97A;
  }

  /* ---- station rail --------------------------------------------------- */

  .pwalk-rail{
    position: absolute;
    top: 50svh; right: 9px;
    z-index: 6;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 6px; align-items: center;
    pointer-events: none;
  }
  .pwalk-rail s{
    display: block;
    width: 2px; height: 8px;
    border-radius: 1px;
    background: rgba(244,239,227,.22);
    transition: height .25s ease, background .25s ease;
  }
  .pwalk-rail s.on{ height: 18px; background: #E8A23B; }

  /* ---- top bar and menu ----------------------------------------------- */

  .pwalk-bar{
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 8;
    display: flex; align-items: center; justify-content: space-between;
    height: 56px;
    padding: 0 14px 0 16px;
    background: rgba(10,17,25,.98);
    box-shadow: 0 1px 0 rgba(244,201,122,.08);
  }
  .pwalk-home{
    display: flex; align-items: center; gap: 8px;
    color: #F4EFE3; text-decoration: none;
  }
  .pwalk-home img{ height: 22px; width: auto; display: block; }
  .pwalk-home span{
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.05rem; letter-spacing: .12em;
  }
  .pwalk-menu-btn{
    min-height: 44px; min-width: 60px;
    padding: 8px 12px;
    border: 1px solid rgba(230,187,121,.4);
    border-radius: 2px;
    background: rgba(232,162,59,.06);
    color: #F4C97A;
    font-family: inherit;
    font-size: .66rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
  }

  .pwalk-menu{
    position: absolute;
    inset: 0;
    z-index: 9;
    display: none;
    flex-direction: column;
    padding: 70px 26px 34px;
    background: rgba(8,15,22,.97);
  }
  .pwalk-menu.open{ display: flex; }
  .pwalk-menu a{
    display: flex; align-items: center;
    min-height: 52px;
    border-bottom: 1px solid rgba(244,239,227,.09);
    color: #F4EFE3;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.32rem;
    text-decoration: none;
  }
  .pwalk-menu a[aria-current="page"]{ color: #F4C97A; }
  .pwalk-menu a.cta{ color: inherit; font-weight: 400; }
  .pwalk-menu .close{
    position: absolute;
    top: 8px; right: 14px;
    min-height: 44px; min-width: 60px;
    padding: 8px 12px;
    border: 1px solid rgba(230,187,121,.4);
    border-radius: 2px;
    background: rgba(232,162,59,.06);
    color: #F4C97A;
    font-family: inherit;
    font-size: .66rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
  }
  .pwalk-menu p.foot{
    margin-top: auto;
    color: rgba(244,239,227,.45);
    font-size: .78rem;
  }

  .pwalk-plan{
    width: 100%; height: auto;
    max-height: 52svh;
    object-fit: contain;
    border-radius: 2px;
  }
  .pwalk-cap{
    margin: 14px 0 0;
    font-size: .86rem; line-height: 1.55;
    color: #C2D0D4;
  }
  .pwalk-cap b{ color: #F4C97A; font-weight: 600; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce){
  .pwalk-scroll{ scroll-snap-type: none; }
  .pwalk-rail s{ transition: none; }
  .pwalk-lamp{ animation: none; }
}

/* Above the walk breakpoint the markup must never render or reserve space. */
@media (min-width: 821px){
  .pwalk{ display: none !important; }
}