/* snap.css, queue 465, on top of gro.css. H288 (g): the page moves one section at a
   time with a slow visible transition, reachable by scroll and by button both.

   No javascript. The transition is a scroll driven view() animation where the browser has it,
   and the pages read normally, top to bottom, where it does not. Nothing is hidden without
   javascript, because there is no javascript to fail. */

:root{--nav-h:56px}
@media (max-width:719px){:root{--nav-h:104px}}   /* the nav goes to two rows under 720 */

html{
  scroll-snap-type:y proximity;      /* proximity, not mandatory: a section taller than the
                                        viewport (the rungs at 390 wide) must never trap a
                                        reader mid screen */
  scroll-behavior:smooth;            /* the button and the scroll both glide */
  scroll-padding-top:var(--nav-h);   /* the sticky nav's own height, both layouts */
}

.screen{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;           /* one section at a time, never two in one flick */
  padding-top:calc(var(--nav-h) + var(--band-pad));
  padding-bottom:var(--band-pad);
}
.screen > .wrap{width:100%}

/* The slow visible transition. Driven by the section's own position in the viewport, so it
   reads as the page moving rather than as a page load animation. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes screen-in{
      from{opacity:0; transform:translateY(28px)}
      18%{opacity:1; transform:none}
      82%{opacity:1; transform:none}
      to{opacity:1; transform:none}
    }
    .screen[data-reveal]{
      animation:screen-in linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
  }
}

/* The nav, four links beside the wordmark on a wide screen and on its own row under 720,
   never wrapped into a pile over the wordmark (found at 390 in the first shoot). */
.sitenav .wrap{min-height:var(--nav-h)}
.sitenav .navlinks{margin-left:auto; display:flex; flex-wrap:nowrap; gap:var(--s5);
  overflow-x:auto; scrollbar-width:none}
.sitenav .navlinks::-webkit-scrollbar{display:none}
.sitenav .navlink{font-weight:600; text-decoration:none; white-space:nowrap; min-height:44px;
  display:inline-flex; align-items:center}
.sitenav .navlink:hover{text-decoration:underline}
.sitenav .navlink.is-here{text-decoration:underline; text-underline-offset:4px}
@media (max-width:719px){
  .sitenav .wrap{flex-direction:column; align-items:flex-start; gap:0; justify-content:center}
  .sitenav .navlinks{margin-left:0; width:100%; gap:var(--s3)}
  .sitenav .navlink{font-size:.875rem}   /* all four fit at 390: "Book" was clipped at 15px */
}

/* The move on button at the foot of each section */
.stepon{margin-top:var(--s8)}
.stepon .btn{min-height:44px}

/* The three rungs */
.rungs{display:grid; gap:var(--s5); grid-template-columns:1fr}
@media (min-width:860px){.rungs{grid-template-columns:repeat(3,1fr)}}
.rung{background:var(--paper); border:1px solid rgba(14,42,31,.12); border-radius:var(--r-card);
  padding:var(--s6)}
.band[data-surface="paper"] .rung{background:var(--dew)}
.rung h3{margin:0 0 var(--s2)}
.rung-price{font-weight:700; margin:0 0 var(--s4)}

/* The six parts */
.sixparts{width:100%; border-collapse:collapse; margin-bottom:var(--s6)}
.sixparts th,.sixparts td{text-align:left; vertical-align:top; padding:var(--s3) var(--s4) var(--s3) 0;
  border-top:1px solid rgba(14,42,31,.14)}
.sixparts th{white-space:nowrap; width:1%; padding-right:var(--s6)}

/* The five steps on Home. NOT .steps: gro.css already owns that class as a three column
   grid with the list markers off, which drops the numbers off a numbered list. */
.fivesteps{padding-left:1.2em; max-width:34em}
.fivesteps > li{margin-bottom:var(--s5); padding-left:var(--s2)}

/* The blocks that carry ruled words. Never reflowed, never shortened. */
.guarantee,.disclaimer,.honesty{max-width:34em}
.guarantee{font-size:1.125rem; line-height:1.55}
.disclaimer{font-size:.9375rem; opacity:.92}
.honesty{font-weight:600}
.pull{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:700;
  font-size:clamp(1.25rem,3.2vw,1.75rem); line-height:1.25; max-width:30em}

/* A value, and the one that gets the room */
.value h2{margin-bottom:var(--s4)}
.notice{opacity:.9}
.value--big h2{font-size:clamp(1.75rem,5vw,2.75rem)}

/* Where a photograph of Felipe will go. White space until a real one exists (outline 1.7). */
.portrait{height:clamp(90px,14vw,150px)}

/* The Week Read form, four fields */
.weekread{max-width:34em}
.weekread label{display:block; font-weight:600; margin-bottom:var(--s2)}
.weekread input,.weekread textarea{width:100%; font:inherit; color:var(--fg);
  background:var(--paper); border:1px solid rgba(14,42,31,.32); border-radius:var(--r-control);
  padding:var(--s3) var(--s4); min-height:44px}
.weekread textarea{min-height:120px; resize:vertical}
.weekread input:focus-visible,.weekread textarea:focus-visible{outline:3px solid var(--focus);
  outline-offset:2px}

/* The booking slot, empty until 455 lands */
.embedslot{border:1px dashed rgba(14,42,31,.35); border-radius:var(--r-card);
  padding:var(--s8) var(--s6); background:var(--paper); max-width:34em}

/* .plain is gro.css's own list (markers off, a small dot before each line). Reused, not
   redefined: a second ::before here would fight the one that is already correct. */