/* ---------------------------------------------------------------------------
   pages/index.css: the home page, and nothing else.

   Four sections: the hero with the flavour board beside it, the mint
   statement band, the door cards, and the room photo with its copy.
   Everything here is scoped to a class that only appears on this page.
   --------------------------------------------------------------------------- */

/* ---- Hero ----------------------------------------------------------------
   The headline on the left, today's board on the right. The last line of the
   headline is set in the grotesque at about half the size, and it needs its
   own tracking and a top margin: at the display serif's -.035em it read as
   one word, and without the margin the descenders above landed on it.
   -------------------------------------------------------------------------- */
.hero{background:var(--cream);padding:54px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.hero h1 span{display:block}
.hero h1 .small{font-size:.46em;line-height:1.1;letter-spacing:.03em;font-family:Instrument,Arial,sans-serif;font-weight:700;text-transform:uppercase;margin-top:.3em}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---- The flavour board ---------------------------------------------------
   A chalkboard: cream on ink, with a cream mount and a mint shadow outside
   it. The list is two columns on a desktop and one on a phone, and every
   third name is mint, which is the only thing keeping ten lines of the same
   serif from reading as a block of text.
   -------------------------------------------------------------------------- */
.chalkboard{background:var(--ink);color:var(--cream);border:10px solid var(--cream);box-shadow:0 0 0 3px var(--ink),12px 12px 0 var(--mint);padding:26px 24px 22px}
.chalk-title{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:700;font-size:34px;line-height:1;letter-spacing:-.02em;text-align:center;margin:0}
.chalk-rule{border:0;border-top:2px dashed rgba(251,247,239,.5);margin:16px 0 8px}
.chalk-list{margin:0;padding:0;list-style:none;columns:2;column-gap:28px}
.chalk-list li{font-family:Fraunces,Georgia,serif;font-size:19px;line-height:1.05;letter-spacing:-.015em;padding:9px 0;border-bottom:1px dotted rgba(251,247,239,.35);break-inside:avoid}
.chalk-list li:nth-child(3n){color:var(--mint)}
.chalk-note{margin:16px 0 0;font-size:13px;color:rgba(251,247,239,.72)}
.chalk-foot{margin-top:18px;display:flex;justify-content:center}

/* ---- Statement band ------------------------------------------------------ */
.statement{background:var(--mint);border-block:2px solid var(--ink)}
.statement .wrap{padding:72px 0}
.statement h2{max-width:1000px;margin-bottom:0}

/* ---- The door cards ------------------------------------------------------
   One border around the row and one between each card, rather than a border
   per card, so the seams stay 2px instead of doubling to 4px.

   The second card is the mint one. That is :nth-child(2), so it follows
   position rather than being set on one card: reorder them in the CMS and the
   mint one stays where the design wants it.
   -------------------------------------------------------------------------- */
.doors{background:var(--ink)}
.cta-cards{display:grid;grid-template-columns:repeat(2,1fr);border:2px solid var(--cream)}
.cta-card{min-height:270px;padding:32px;border-right:2px solid var(--cream);text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;background:var(--ink);color:var(--cream)}
.cta-card:last-child{border-right:0}
.cta-card:nth-child(2){background:var(--mint);color:var(--ink)}
.cta-card h3{font-family:Fraunces,Georgia,serif;font-size:46px;line-height:.95;margin:0 0 18px}
.cta-card p{margin:0;font-weight:700;letter-spacing:.09em;font-size:12px;text-transform:uppercase}

/* The arrow grows out of its own shaft rather than sliding along, which is
   why the shaft and the head are two elements. */
.stretch-arrow{display:inline-flex;align-items:center;height:14px}
.stretch-arrow i{display:block;height:3px;width:26px;background:currentColor;transition:width .28s var(--ease-settle)}
.stretch-arrow b{display:block;width:12px;height:12px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg);margin-left:-8px}
.cta-card:hover .stretch-arrow i,.cta-card:focus-visible .stretch-arrow i{width:56px}

/* ---- The room -----------------------------------------------------------
   The photo is scaled to 1.07 inside a frame that clips it. That headroom is
   what the parallax travels through: at 1.00 the pan would show the frame's
   background at one edge. If you change the scale, change the clamp in
   js/index.js with it.
   -------------------------------------------------------------------------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story-photo{border:3px solid var(--ink);padding:9px;background:var(--white);box-shadow:-14px 14px 0 var(--mint)}
.story-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}

@media(max-width:900px){
  .hero{padding:34px 0 60px}
  .hero-grid,.story-grid{grid-template-columns:1fr;gap:34px}
  .chalk-list{columns:1}
  .chalkboard{border-width:8px;box-shadow:0 0 0 3px var(--ink),8px 8px 0 var(--mint);padding:20px 18px 18px}
  .chalk-title{font-size:27px}
  .cta-cards{grid-template-columns:1fr}
  .cta-card{border-right:0;border-bottom:2px solid var(--cream);min-height:200px;padding:26px}
  .cta-card:last-child{border-bottom:0}
  .cta-card h3{font-size:34px}
}

@media(max-width:620px){
  .hero-actions .btn{width:100%}
}

/* ---------------------------------------------------------------------------
   Motion: the home page's two moments.

   Nothing informational moves. The headline, the buttons, the flavour names
   and every word in a card are painted in their final state on the first
   frame. What moves is two cards once as they arrive, and the room photo
   drifting against the scroll.
   --------------------------------------------------------------------------- */
.cta-card{transition:box-shadow .2s var(--ease-settle)}
.cta-card:hover,.cta-card:focus-visible{box-shadow:inset 0 0 0 2px var(--mint)}
.cta-card:nth-child(2):hover,.cta-card:nth-child(2):focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}

.story-photo .frame{display:block;overflow:hidden}
.story-photo .pan{display:block;transform:translateY(var(--py,0px))}
.story-photo .pan img{transform:scale(1.07);transition:transform .35s var(--ease-settle)}
.story-photo:hover .pan img{transform:scale(1.091)}

/* ---- scroll: the cards, once, first time in view -------------------------
   The pre-hidden state only exists under .u-rise-on, and js/index.js is the
   only thing that adds that class. No JavaScript, a failed request, reduced
   motion: the class is never added, nothing is ever hidden, and the cards are
   simply there. It has to be impossible for content to stay invisible.
   -------------------------------------------------------------------------- */
.u-rise-on .u-rise{opacity:0;transform:translateY(12px)}
.u-rise-on .u-rise.is-in{opacity:1;transform:none;transition:opacity .42s var(--ease-settle),transform .42s var(--ease-settle)}

/* ---- scroll: the room photo drifts -------------------------------------- */
@keyframes roomPan{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@supports (animation-timeline:view()){
  .story-photo .pan{animation:roomPan linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}

/* ---------------------------------------------------------------------------
   Reduced motion. base.css has already switched every animation and
   transition off; these are the resting states the moving things need so they
   stop somewhere deliberate rather than wherever the frame fell.
   --------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .u-rise-on .u-rise{opacity:1!important;transform:none!important}
  .story-photo .pan{transform:none!important}
  .story-photo .pan img,.story-photo:hover .pan img{transform:scale(1.07)!important}
}