/* =============================================================================
   Liora — pages/home.css

   Ported from 02_design-update_2026-08-27/home.html's <style> block. Loads after
   shell.css, which was itself lifted from this file's shared half when the
   chrome was ported. Split mechanically: rules already in shell.css dropped,
   rules whose selector names a class no page's markup uses dropped, the rest
   verbatim.

   THE TWO HALVES shell.css DELIBERATELY LEFT FOR THIS FILE, both flagged in
   comments at the point they were split, are here:

     · the prefers-reduced-motion block's `.hero img` and `.story-mark` lines;
     · the Astra image-sizing block. Its selector list named six containers and
       two of them — `.feature-image img` and `.culinary-item-image img` — are
       dead in all five pages, so the rule is here trimmed to the four that can
       match, with a note at the rule.

   The Visit rows are here too, and are NOT the same as The Space's and
   Contact's. shell.css holds the parts all three agree on; the homepage lays the
   rows out as two columns with the value right-aligned while the inner pages
   stack label over value, so each carries its own verbatim.

   Two blocks are re-declared later in the file, after their first definitions,
   exactly as the design has it — `.hero-sub`'s measure (round 2) and
   `.flavor-split`/`.flavor-image` (round 3, which took the team photograph out
   of flow so the copy sets the row height). Same-specificity later-wins, so the
   order matters. Do not merge them.
   ============================================================================= */

/* ---------- Hero ---------- */
.hero{ position:relative; height:100vh; min-height:640px; width:100%; overflow:hidden; }
.hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(0.78) saturate(1.05);
  animation:heroKenBurns 24s cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes heroKenBurns{ 0%{ transform:scale(1); } 100%{ transform:scale(1.09); } }
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,13,10,0.35) 0%, rgba(15,13,10,0.05) 30%, rgba(15,13,10,0.55) 100%);
}
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 48px 72px; color:#F5F1E9;
}

.hero-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(52px, 9vw, 132px); line-height:0.94; letter-spacing:0.005em;
  max-width:12ch; margin-bottom:28px;
}
.hero-sub{ font-size:15px; max-width:42ch; color:rgba(245,241,233,0.9); font-weight:300; margin-bottom:32px; }
.hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

@media (prefers-reduced-motion: reduce){
  .hero img{ animation:none; }

  .story-mark{ animation:none; }
}

/* ---------- Our Story ---------- */
.story{ position:relative; background:var(--bone); padding:200px 48px 140px; overflow:hidden; }
.story-mark{
  position:absolute;
  height:85vh; width:auto; max-width:none;
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(0deg);
  transform-origin:center center;
  opacity:0.09;
  pointer-events:none; z-index:0; user-select:none;
  animation:storyMarkSpin 140s linear infinite;
}
@keyframes storyMarkSpin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}
.story-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:5fr 7fr;
  gap:56px; max-width:1440px; margin:0 auto; align-items:center;
}
.story-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(40px, 5.6vw, 80px); line-height:1.05; max-width:14ch; margin:22px 0 36px;
}
.story-body{ font-size:16px; color:var(--ink-soft); max-width:46ch; font-weight:300; line-height:1.75; margin-bottom:28px; }
.story-btn-row{ display:flex; flex-wrap:wrap; gap:20px; margin-top:8px; }
.story-image{ position:relative; width:100%; aspect-ratio:4/5; background:var(--bone-deep); }
.story-image-duo{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.story-image-duo .story-image:first-child{ aspect-ratio:3/4.2; }
.story-image-duo .story-image:last-child{ aspect-ratio:3/4.2; margin-top:100px; }

@media (max-width:900px){
  .story-image-duo{ grid-template-columns:1fr; gap:20px; }
  .story-image-duo .story-image:last-child{ margin-top:0; }
  .story-btn-row{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Flavor split (full-height image + text panel) ---------- */
.flavor-split{ display:grid; grid-template-columns:1fr 1fr; min-height:744px; }
.flavor-text{
  background:var(--terracotta); color:var(--bone);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:left; gap:40px;
  padding:64px 72px;
}
.flavor-text > div{ width:100%; max-width:420px; }
.flavor-text .eyebrow{ color:#DB9C6E; }
.flavor-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(34px,4.6vw,60px); line-height:1.05; margin-top:20px;
}
.flavor-body p{ font-size:14.5px; color:rgba(245,241,233,0.88); font-weight:300; line-height:1.7; margin:0 0 16px; }
.flavor-body p:last-child{ margin-bottom:0; }
.flavor-image{ position:relative; height:100%; }

/* ---------- Culinary point of view — 12-column grid, HBA-style negative space ---------- */
.culinary{ background:var(--bone); padding:120px 48px 140px; }
.culinary-grid-12{ display:grid; grid-template-columns:repeat(12, 1fr); column-gap:32px; max-width:1440px; margin:0 auto; }

.culinary-head-12{ grid-column:1 / 6; }
.culinary-eyebrow-title{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(36px,5.2vw,72px); line-height:1; margin-top:18px; }

.culinary-intro-12{ grid-column:8 / 13; align-self:end; }
.culinary-intro-12 p{ font-size:15px; color:var(--ink-soft); font-weight:300; line-height:1.7; margin-bottom:28px; }
.culinary-intro-12 b{ color:var(--ink); font-weight:600; }
.culinary-btn-row{ display:flex; flex-wrap:wrap; gap:16px; }

/* ---------- The Space - split images with centred overlay (v2) ---------- */
.space-duo{ position:relative; width:100%; background:var(--ink); overflow:hidden; }
.space-duo-images{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.space-duo-shot{ position:relative; height:clamp(560px, 80vh, 880px); overflow:hidden; }
.space-duo-shot img{ width:100%; height:100%; object-fit:cover; }
.space-duo::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 52% at 50% 50%, rgba(20,15,10,0.42) 0%, rgba(20,15,10,0) 100%),
    linear-gradient(180deg, rgba(20,15,10,0.34) 0%, rgba(20,15,10,0.58) 42%, rgba(20,15,10,0.72) 100%);
}
.space-duo-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 48px; color:#F5F1E9;
}
.space-duo-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(38px,5.4vw,76px); line-height:1.04; max-width:20ch; margin:22px 0 26px;
}
.space-duo-body{
  font-size:16px; font-weight:300; line-height:1.8; max-width:54ch;
  color:rgba(245,241,233,0.86); margin-bottom:40px;
}

@media (max-width:900px){
  .space-duo-images{ grid-template-columns:1fr; }
  .space-duo-shot{ height:clamp(300px, 44vh, 420px); }
  .space-duo-overlay{ padding:64px 26px; }
  .space-duo-body{ font-size:15px; margin-bottom:32px; }
}

/* Hero sub-line - keep new copy on one line (v2) */
.hero-sub{ max-width:68ch; }

@media (max-width:760px){ .hero-sub{ max-width:34ch; }
}

/* Team - Learn More button (v2) */
.flavor-btn-row{ margin-top:34px; }

/* ---------- Team row — tightened (round 3) ----------
   Was 938px tall: the portrait photo's own 3:4 ratio drove the row, while the text
   column only needs ~600px, leaving ~340px of dead space above and below the copy.
   Taking the image out of flow lets the TEXT set the row height, and the image
   crops to fill — biased so the empty counter at the bottom is what gets cut. */
/* overflow-x:clip stops the reveal animation widening the document.
   .flavor-image carries .will-reveal-img, whose resting state is
   `translateY(24px) scale(1.04)` — and at mobile it is the full column width, so
   390 x 1.04 = 405.6px sitting at left:-7.8. Measured: the homepage document was
   398px against a 390px viewport and rocked sideways under a thumb; it was the
   only page of nine that overflowed.

   Clipping the grid rather than capping the image, because the width is not the
   bug — the transform is doing what the design asks. `clip` rather than `hidden`
   so this never becomes a scroll container of its own. The inner img-zoom hover
   is already contained by .flavor-image's own overflow:hidden. */
.flavor-split{ min-height:0; overflow-x:clip; }
.flavor-image{ height:auto; align-self:stretch; overflow:hidden; }
.flavor-image img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 32%;
}

@media (max-width:900px){
  .flavor-image{ height:360px; align-self:auto; }
}

/* ---------- Visit / contact — white background, shaped image, black type ---------- */
.visit{ background:var(--bone); padding:170px 48px; }
.visit-grid{
  max-width:1360px; margin:0 auto; display:grid; grid-template-columns:5fr 7fr;
  gap:80px; align-items:center;
}
.visit-image-wrap{ display:flex; justify-content:center; }
.visit-image{
  width:100%; max-width:420px; aspect-ratio:3/4;
  border-radius:220px 220px 0 0;
  overflow:hidden; background:var(--bone-deep);
}
.visit-info{ color:var(--ink); }
.visit-info .eyebrow{ color:#DB9C6E; margin-bottom:24px; }
.visit-title{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(40px,5.6vw,72px); margin-bottom:20px; line-height:1.02; color:var(--ink); }
.visit-sub{ font-size:15px; color:var(--ink-soft); font-weight:300; line-height:1.7; max-width:42ch; margin-bottom:44px; }
.visit-row{ display:flex; justify-content:space-between; gap:24px; padding:20px 0; border-top:1px solid var(--line); }

.visit-label{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); flex-shrink:0; }
.visit-value{ font-size:14px; font-weight:300; color:var(--ink); text-align:right; }
.visit-socials{ display:flex; align-items:center; gap:18px; }
.visit-socials a{ color:var(--ink); display:inline-flex; transition:color .3s ease, transform .3s ease; }
.visit-socials a:hover{ color:#DB9C6E; transform:translateY(-2px); }

.visit-social-brand img{ width:22px; height:22px; display:block; border-radius:6px; }
.visit-social-static{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:14px; font-weight:300; }
.visit-cta{ margin-top:40px; }

@media (max-width: 900px){
  .hero-content{ padding:0 24px 56px; }
  .story{ padding:130px 24px 100px; }

/* Dead selectors dropped from this list — .team-grid, .culinary-head, .menu-head, .private-head: no page's markup uses them. */
.story-grid{ grid-template-columns:1fr; gap:36px; }

  .flavor-split{ grid-template-columns:1fr; }
  .flavor-image{ height:360px; }
  .flavor-text{ padding:56px 24px; gap:32px; }
  .culinary{ padding:60px 24px 40px; }
  .culinary-grid-12{ grid-template-columns:1fr; column-gap:0; row-gap:32px; }
  .culinary-head-12, .culinary-intro-12{ grid-column:1 / -1; align-self:auto; }

  .visit{ padding:110px 24px; }
  .visit-grid{ grid-template-columns:1fr; gap:40px; }
  .visit-image{ max-width:280px; margin:0 auto; }
  .visit-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .visit-value{ text-align:left; }
  .visit-socials{ justify-content:flex-start; }

  /* Headlines: the desktop ch-based measures were tuned for wide columns —
     on mobile they force too many line breaks, so loosen the measure and
     trim the size slightly to land at 2-3 lines instead of 3-4. */
  .hero-title{ max-width:100%; font-size:clamp(40px, 11vw, 60px); }
  .story-title{ max-width:100%; font-size:clamp(34px, 9vw, 48px); }
  .culinary-eyebrow-title{ max-width:100%; font-size:clamp(32px, 9vw, 44px); }

  .visit-title{ font-size:clamp(32px, 9vw, 44px); }
  .flavor-title{ font-size:clamp(28px, 8vw, 40px); }

  .story{ padding:110px 24px 80px; }
}

/* Astra theme sets a global "img{height:auto}" rule that fights our
   full-bleed photo containers on the live site — force these back to
   filling their box. */

/* Dead selectors dropped from this list — .feature-image img, .culinary-item-image img: no page's markup uses them. */
.hero img,
.story-image img,
.flavor-image img,
.visit-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}