/* ==========================================================================
   Inner-page hero with an open-corner frame  (shared by every page except home)
   Usage:
     <section class="page-hero hero-frame">
       <img src="images/....jpg" alt="...">
       <div class="hf">
         <div class="hf-left" aria-hidden="true"></div>
         <div class="hf-bottom">
           <h1 class="hf-title"><span class="hf-l1">Savour</span> <span class="hf-l2">Dining at Clarion</span></h1>
           <div class="hf-line" aria-hidden="true"></div>
         </div>
       </div>
     </section>
   The left and bottom frame lines stop where the title is. This is pure CSS (flex layout),
   so the lines follow the title's real size with no measuring script.
   Tweak the look from the variables below.
   ========================================================================== */
.hero-frame{
  --hf-x:7.5%;          /* frame inset from left/right edge */
  --hf-y:9%;            /* frame inset from top/bottom edge */
  --hf-gx:32px;         /* gap between title and the bottom line */
  --hf-gy:14px;         /* gap between title and the left line */
  --hf-w:3px;           /* line thickness */
  --hf-c:rgba(255,250,242,.94);
  --hf-text:#fffaf2;
}
/* height/display: two classes so they beat a page's own .page-hero rule */
.page-hero.hero-frame{
  display:block;
  height:80vh; height:80svh; min-height:520px;   /* hero height: change here for all pages */
}
.page-hero.hero-frame img{
  transform:scale(1.035);
  animation:hf-drift 18s ease-in-out infinite alternate;
}
@keyframes hf-drift{
  from{ transform:scale(1.035) translate(0,0); }
  to  { transform:scale(1.075) translate(-1.1%,-.5%); }
}
/* soft shade only, so the white title and frame stay readable on any photo (delete this rule for no shade) */
.page-hero.hero-frame::after{
  background:linear-gradient(180deg, rgba(10,14,12,.10) 0%, rgba(10,14,12,.38) 100%);
}

.hero-frame .hf{
  position:absolute; z-index:2;
  left:var(--hf-x); right:var(--hf-x); top:var(--hf-y); bottom:var(--hf-y);
  display:flex; flex-direction:column;
  border-top:var(--hf-w) solid var(--hf-c);
  border-right:var(--hf-w) solid var(--hf-c);
}
.hero-frame .hf-left{
  flex:1 1 auto; min-height:0;
  border-left:var(--hf-w) solid var(--hf-c);
  margin-bottom:var(--hf-gy);
}
.hero-frame .hf-bottom{ display:flex; align-items:flex-end; flex:0 0 auto; }
.hero-frame .hf-line{
  flex:1 1 auto; min-width:0; align-self:flex-end;
  border-bottom:var(--hf-w) solid var(--hf-c);
  margin-left:var(--hf-gx);
}
.hero-frame .hf-title{
  margin:0 0 -8px; min-width:0; max-width:100%;
  font-family:Arial,Helvetica,sans-serif; font-weight:700; text-transform:uppercase;
  color:var(--hf-text); text-shadow:0 2px 18px rgba(0,0,0,.28);
  letter-spacing:-.055em; font-size:clamp(38px,5.2vw,76px); line-height:.88;
}
.hero-frame .hf-l1, .hero-frame .hf-l2{ display:block; }
.hero-frame .hf-l2{ margin-top:7px; }

@media (max-width:700px){
  .hero-frame{ --hf-x:5%; --hf-y:7%; --hf-gx:26px; --hf-gy:10px; }
  .hero-frame .hf-title{ font-size:clamp(29px,9vw,50px); margin-bottom:-6px; }
  .hero-frame .hf-l2{ margin-top:5px; }
  /* Phones crop the sides of a wide hero photo because it must fill a tall,
     narrow box (object-fit:cover). Instead of a static crop, slowly pan the
     visible window left<->right so the full width is seen over time. */
  .page-hero.hero-frame img{
    transform:none;
    animation:hf-pan 12s ease-in-out infinite alternate;
  }
}
@keyframes hf-pan{
  from{ object-position:0% 50%; }
  to  { object-position:100% 50%; }
}
@media (prefers-reduced-motion:reduce){
  .page-hero.hero-frame img{ animation:none; transform:none; }
}

/* Hero kicker + subtitle now live in the intro section under the hero */
p.intro-lead, .d-intro p.intro-lead{ margin-top:14px; font-family:var(--serif); font-size:clamp(1.05rem, 1.7vw, 1.3rem); line-height:1.6; color:var(--ink); }

/* Intro block that receives the old hero label + subtitle on pages that had no intro section */
section.hf-intro{ background:var(--paper); padding:76px var(--edge) 16px; text-align:center; }
section.hf-intro .kicker{ display:block; margin-bottom:14px; }
section.hf-intro h2{ font-size:clamp(1.9rem, 3.4vw, 2.8rem); font-weight:500; }
section.hf-intro p{ max-width:62ch; margin:18px auto 0; font-size:.92rem; line-height:1.95; color:#454b50; }
section.hf-intro p.intro-lead{ font-family:var(--serif); font-size:clamp(1.05rem, 1.7vw, 1.3rem); line-height:1.6; color:var(--ink); }
@media (max-width:820px){ section.hf-intro{ padding:52px var(--edge) 10px; } }