/* SITE — Kiln & Lough sections */

/* Header sits on the dark hero, flips to ink once scrolled */
.site-header{color:var(--steam)}
.btn--primary:hover{background:var(--steam); border-color:var(--steam); color:var(--ink)}
.site-header.is-scrolled .btn--primary:hover,
main .btn--primary:hover{background:var(--ink); border-color:var(--ink); color:var(--steam)}

/* HERO */
.hero{position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden;
  background:var(--spruce); color:var(--steam); padding-block:calc(var(--header-h) + var(--space-l)) var(--space-l)}
.hero__media{position:absolute; inset:-8% 0; z-index:0}
.hero__media .ph{width:100%; height:100%}
.hero::after{content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, var(--spruce) 8%, transparent 60%)}
.hero .container{position:relative; z-index:1}
.hero h1{max-width:11ch; font-variation-settings:"wdth" 82}
.hero__foot{display:flex; flex-wrap:wrap; gap:var(--space-m); align-items:end; justify-content:space-between; margin-top:var(--space-m)}
.hero .lede{color:color-mix(in srgb, var(--steam) 82%, transparent); margin:0}

/* Placeholder "photo": layered gradients standing in for real photography. REPLACE with <picture>. */
.ph{position:relative; background:
  radial-gradient(120% 80% at 70% 20%, #e9a23b55, transparent 55%),
  radial-gradient(90% 70% at 20% 90%, #a9cdd655, transparent 60%),
  linear-gradient(160deg, #3a2b22, #1f3a33 70%)}
.ph::after{content:""; position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph--cold{background:radial-gradient(100% 80% at 30% 30%, #e4e8e3aa, transparent 60%), linear-gradient(200deg, #a9cdd6, #4f7f8a)}
.ph--wood{background:repeating-linear-gradient(90deg, #3a2b22 0 14px, #45342a 14px 15px, #3a2b22 15px 38px, #2f231c 38px 40px)}
.ph figcaption{position:absolute; left:1rem; bottom:1rem; z-index:1; font:500 var(--step--1)/1.3 var(--font-display); color:var(--steam)}

/* TRUST STRIP */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap:var(--space-s) var(--gutter);
  padding-block:var(--space-m); border-bottom:1px solid var(--line); margin:0}
.facts div{display:flex; flex-direction:column-reverse; gap:.25rem}
.facts dt{color:var(--muted); font-size:var(--step--1)}
.facts dd{margin:0; font:600 var(--step-2)/1.1 var(--font-display); letter-spacing:-.01em}

/* INTRO */
.intro{display:grid; gap:var(--space-m); grid-template-columns:repeat(12,1fr)}
.intro h2{grid-column:1 / span 7}
.intro__body{grid-column:8 / -1; align-self:end}
@media (max-width:860px){ .intro h2,.intro__body{grid-column:1 / -1} }

/* SIGNATURE: the contrast round */
.round{--phase-bg:var(--peat)}
.phase{min-height:90svh; display:grid; align-content:center; padding-block:var(--space-l); color:var(--steam)}
.phase--heat{background:var(--peat)}
.phase--cold{background:var(--glacier); color:var(--ink)}
.phase--rest{background:var(--spruce)}
.phase__temp{margin:0; max-width:none; display:flex; align-items:flex-start;
  font:700 clamp(8rem, 2rem + 28vw, 30rem)/.78 var(--font-display); letter-spacing:-.06em;
  font-variation-settings:"wdth" 75; font-variant-numeric:tabular-nums}
.phase__temp sup{font-size:.22em; line-height:1; font-weight:500; font-variation-settings:"wdth" 100;
  letter-spacing:0; margin:.12em 0 0 .08em; top:0}
.phase__row{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); align-items:end}
.phase__row .phase__temp{grid-column:1 / span 8}
.phase__text{grid-column:9 / -1}
.phase__text h3{font-size:var(--step-4); margin-bottom:.4em}
.phase__time{font:500 var(--step--1)/1 var(--font-display); opacity:.8; margin-bottom:1rem}
@media (max-width:860px){ .phase__row .phase__temp,.phase__text{grid-column:1 / -1} }

/* Pinned mode (added by site.js when motion is allowed) */
.round.is-pinned .round__stage{position:relative; height:100svh; overflow:hidden; background:var(--peat)}
.round.is-pinned .phase{position:absolute; inset:0; min-height:0; background:transparent}
.round.is-pinned .phase:not(:first-child){visibility:hidden}
.round__progress{display:none}
.round.is-pinned .round__progress{display:flex; position:absolute; z-index:2; left:var(--gutter); right:var(--gutter);
  bottom:var(--space-m); gap:.5rem}
.round__progress span{flex:1; height:3px; background:color-mix(in srgb, currentColor 22%, transparent)}
.round__progress span i{display:block; height:100%; background:currentColor; transform:scaleX(0); transform-origin:left}

/* STEPS */
.how h2{margin-bottom:var(--space-m)}

/* PRICES — a menu, not cards */
.prices{background:var(--surface)}
.price-list{list-style:none; margin:var(--space-m) 0 0; padding:0}
.price-list li{display:grid; grid-template-columns:1fr auto; gap:.5rem var(--gutter); align-items:baseline;
  padding-block:var(--space-s); border-top:1px solid var(--line)}
.price-list h3{font-size:var(--step-3)}
.price-list p{grid-column:1; margin:0; color:var(--muted)}
.price-list .amount{grid-column:2; grid-row:1 / span 2; font:600 var(--step-4)/1 var(--font-display); letter-spacing:-.02em; text-align:right}
.price-list .amount small{display:block; font:400 var(--step--1)/1.4 var(--font-body); color:var(--muted); letter-spacing:0}
.price-note{margin-top:var(--space-m); font-size:var(--step--1); color:var(--muted)}

/* GALLERY */
.gallery{display:grid; gap:var(--gutter); grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(14rem, 10rem + 14vw, 26rem)}
.gallery figure{margin:0; border-radius:var(--radius-l); overflow:hidden}
.gallery figure:nth-child(1){grid-column:1 / span 7; grid-row:span 2}
.gallery figure:nth-child(2){grid-column:8 / -1}
.gallery figure:nth-child(3){grid-column:8 / -1}
@media (max-width:768px){ .gallery{grid-template-columns:1fr; grid-auto-rows:18rem} .gallery figure{grid-column:1 / -1 !important; grid-row:auto !important} }

/* FAQ + VISIT */
.split{display:grid; gap:var(--space-l) var(--gutter); grid-template-columns:repeat(12,1fr)}
.split > :first-child{grid-column:1 / span 5}
.split > :last-child{grid-column:7 / -1}
@media (max-width:860px){ .split > *{grid-column:1 / -1 !important} }
.hours{display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.5rem; margin:1.5rem 0}
.hours dt{font-family:var(--font-display); font-weight:600}
.hours dd{margin:0}

/* BOOK */
.book{background:var(--ink); color:var(--steam)}
.book h2{max-width:12ch}
.book form{display:grid; gap:var(--space-s); grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); margin-top:var(--space-m); align-items:end}
.field{display:grid; gap:.4rem}
.field label{font:500 var(--step--1)/1.2 var(--font-display)}
.field select,.field input{min-height:52px; padding:0 1rem; border-radius:var(--radius-s); border:1px solid #e4e8e366;
  background:transparent; color:inherit; font:inherit; font-size:var(--step-0)}
.field select option{color:var(--ink)}
.book .btn--primary:hover{background:var(--steam); border-color:var(--steam); color:var(--ink)}
.form-status{grid-column:1 / -1; min-height:1.5em; margin:0; color:var(--glacier)}

.site-footer .container{display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between}
.site-footer a{text-decoration:none}