/* ============================================================
   FIVE SEASONS — editorial layer (2026 refresh)
   Loaded ONLY by the four refreshed pages (Home, The Requiem,
   Helsinki, Helsinki Before You Book), after style.css, which still
   supplies the shared header, navigation and footer. Everything here
   is scoped to body.ed so no other page can be affected.
   Direction: the /design-study prototype — Cormorant Garamond for
   headings, Source Sans 3 for reading and interface text.
   ============================================================ */

body.ed{
  --ink:#0b0a09;
  --ink-soft:#161412;
  --ink-panel:#12100e;
  --bone:#efe9df;
  --ash:#9d958a;
  --ash-bright:#b7b0a5;
  --gold:#a8905f;
  --gold-bright:#c9b183;
  --gold-dim:#6f5f3f;
  --line:rgba(168,144,95,.24);
  --ivory:#efe9df;
  --ivory-ink:#1b1916;
  --ivory-muted:#5f584e;

  --body:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
  --gx:clamp(1.25rem,6vw,6.5rem);
  --header-h:96px;

  font-size:1.0625rem;
  line-height:1.65;
  background:var(--ink);
  color:var(--bone);
}
@media (max-width:920px){body.ed{--header-h:64px}}

.ed h1,.ed h2,.ed h3{font-weight:300;letter-spacing:0}
.ed p{max-width:62ch}
.ed strong{font-weight:600}
.ed .eyebrow{
  font-family:var(--body);font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);
}
.ed :focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}
/* --anchor-h is the measured header height (js/main.js); --header-h is the fallback */
.ed [id]{scroll-margin-top:calc(var(--anchor-h,var(--header-h)) + 16px)}

/* The shared header already exists in style.css; on these pages it simply
   picks up the palette. The brand mark is the repository logo, unchanged. */
.ed .site-header.scrolled{background:rgba(11,10,9,.9)}
.ed .nav a{font-size:.8rem}
.ed .lang a{
  font-family:var(--display);font-size:.8rem;letter-spacing:.12em;
  color:var(--ash);text-transform:uppercase;padding:.35rem .2rem;transition:color .3s;
}
.ed .lang a.active{color:var(--gold-bright)}
.ed .lang a:hover{color:var(--bone)}
@media (max-width:920px){.ed .lang a{font-size:1rem;padding:.6rem .5rem}}

/* ---------- language visibility (Finnish added alongside EN / IT) ---------- */
[data-lang-fi]{display:none}
body[data-active-lang="fi"] [data-lang-fi]{display:revert}
span[data-lang-fi]{display:none}
body[data-active-lang="fi"] span[data-lang-fi]{display:inline}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:1rem;top:-5rem;z-index:300;
  background:var(--bone);color:var(--ink);padding:.7rem 1.1rem;font-weight:600;font-size:.9rem;
}
.skip:focus{top:1rem}

/* ---------- actions ---------- */
.ed-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:1rem;
  min-height:48px;max-width:100%;text-align:center;padding:.95rem 1.7rem;
  font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--bone);color:var(--ink);border:1px solid var(--bone);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.ed-btn::after{content:"";width:20px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.ed-btn:hover{background:#fff8ee}
.ed-btn:hover::after{width:30px}
.ed-btn--line{background:transparent;color:var(--bone);border-color:rgba(239,233,223,.45)}
.ed-btn--line:hover{background:rgba(239,233,223,.08);border-color:var(--bone)}
.ed-btn--ink{background:var(--ivory-ink);color:var(--ivory);border-color:var(--ivory-ink)}
.ed-btn--ink:hover{background:#000}

.ed-link{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  font-weight:600;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-bright);border-bottom:1px solid transparent;
}
.ed-link span{border-bottom:1px solid var(--gold-dim);padding-bottom:.15rem;transition:border-color .3s}
.ed-link:hover span{border-color:var(--gold-bright)}
.ed-inline{color:var(--gold-bright);border-bottom:1px solid var(--gold-dim);transition:border-color .3s;overflow-wrap:anywhere}
.ed-inline:hover{border-color:var(--gold-bright)}

/* ---------- text reveal: short, and only once main.js is running ---------- */
.ed .reveal{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
html.fs-js .ed .reveal:not(.in){opacity:0;transform:translateY(12px)}
@media (prefers-reduced-motion:reduce){
  html.fs-js .ed .reveal:not(.in){opacity:1;transform:none}
  .ed .reveal{transition:none}
}

/* ---------- shared chapter scaffolding ---------- */
.ed-wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gx)}
.ed-chapter{padding-block:clamp(4.5rem,10vw,8.5rem);position:relative}
.ed-chapter--soft{background:var(--ink-soft)}
.ed-num{
  display:block;font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--gold);
  margin-bottom:1.1rem;
}
.ed-title{font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.04;margin-bottom:1.4rem}
.ed-title em{font-style:italic}
.ed-lead{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.6;color:var(--bone)}
.ed-body p+p{margin-top:1rem}
.ed-body p{color:var(--ash-bright)}
.ed-body .ed-lead{color:var(--bone)}
.ed-pillars{
  font-family:var(--display);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.35;
  color:var(--bone);max-width:34ch;
}
.ed-quote{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.12;color:var(--bone);max-width:22ch;
}
.ed-rule{display:block;width:56px;height:1px;background:var(--gold);margin:1.8rem 0}

/* photographs keep their own proportions; they are never stretched */
.ed-photo{position:relative;overflow:hidden;background:var(--ink)}
.ed-photo img{width:100%;height:auto}
.ed-photo--fill img{width:100%;height:100%;object-fit:cover}
.ed-cap{font-size:.8rem;color:var(--ash);margin-top:.7rem;letter-spacing:.02em}

/* split: portrait image beside text, deliberately uneven */
.ed-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.ed-split--rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.ed-split--rev .ed-split__media{order:2}
@media (max-width:860px){
  .ed-split,.ed-split--rev{grid-template-columns:1fr}
  .ed-split--rev .ed-split__media{order:0}
}

/* details / accordions */
.ed-details{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ed-details+.ed-details{border-top:0}
.ed-details summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  min-height:56px;padding:.9rem 0;font-family:var(--display);font-size:1.35rem;color:var(--bone);
}
.ed-details summary::-webkit-details-marker{display:none}
.ed-details summary::after{content:"+";font-family:var(--body);font-size:1.3rem;color:var(--gold-bright);transition:transform .3s var(--ease)}
.ed-details[open] summary::after{transform:rotate(45deg)}
.ed-details__body{padding:0 0 1.6rem}
.ed-details__body p+p{margin-top:.9rem}

/* definition list of facts */
.ed-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.4rem 2rem;margin-top:2rem}
.ed-facts div{border-top:1px solid var(--line);padding-top:.8rem}
.ed-facts dt{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.ed-facts dd{font-family:var(--display);font-size:1.45rem;line-height:1.2;margin-top:.3rem;color:var(--bone)}

/* ============================================================
   HOME
   ============================================================ */
/* entrance: identity and destinations first, one branch crossing below them.
   Two grid rows, so the branch can never sit over the logo or the links. */
.home-entrance{
  position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#000;
  display:grid;grid-template-rows:1fr auto;
}
/* the header wordmark would repeat the logo directly below it: it returns
   as soon as the header takes its scrolled state */
html.fs-js .ed.has-entrance .site-header:not(.scrolled) .brand{opacity:0;visibility:hidden}
.ed .site-header .brand{transition:opacity .4s var(--ease),visibility .4s}
.home-entrance__copy{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--header-h) + 1.5rem) var(--gx) 1rem;
}
.home-entrance__logo{display:block;width:clamp(150px,15vw,210px);overflow:hidden}
/* the official logo is white on #000, the same black as this section: trim its padding */
.home-entrance__logo img{display:block;width:100%;height:auto;margin:-17.6% 0 -24.8%}
.home-entrance__sicily{
  display:inline-block;margin-top:clamp(1.6rem,4vh,2.6rem);padding:.1em .3em;
  font-family:var(--display);font-weight:300;font-size:clamp(3rem,6.2vw,5.4rem);line-height:1;
  color:var(--bone);transition:color .3s;
}
.home-entrance__sicily:hover{color:var(--gold-bright)}
.ed .home-entrance__or{
  max-width:none;margin-top:clamp(1rem,2.6vh,1.6rem);
  font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--ash-bright);
}
.home-entrance__cities{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:.4rem 0 0;padding:0}
.home-entrance__cities li{display:flex;align-items:center}
.home-entrance__cities li+li::before{content:"\00B7";color:var(--gold);padding:0 .35em}
.home-entrance__cities a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .35em;
  font-family:var(--body);font-size:.95rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);transition:color .3s;
}
.home-entrance__cities a:hover{color:var(--gold-bright)}
/* London is announced, not linked: same letterforms, quieter, no hover */
.home-entrance__soon{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .35em;
  font-family:var(--body);font-size:.95rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);
}
.home-entrance__branch{position:relative;overflow:hidden;height:clamp(170px,42vh,480px);pointer-events:none}
.home-entrance__branch picture{position:absolute;inset:0}
.home-entrance__branch img{
  width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%);
}
/* the gesture: one soft-edged sweep from left to right, then still. A black
   gradient (the section is #000) slides off the branch; transform only, so
   it stays on the compositor and never delays a tap on the links above. */
@media (prefers-reduced-motion:no-preference){
  .home-entrance__branch::after{
    content:"";position:absolute;top:0;bottom:0;left:0;width:250%;
    background:linear-gradient(90deg,transparent 40%,#000 60%);
    animation:entrance-cross 1.4s cubic-bezier(.45,.05,.25,1) .15s both;will-change:transform;
  }
  .home-entrance__branch picture{animation:entrance-drift 1.4s cubic-bezier(.45,.05,.25,1) .15s both}
}
@keyframes entrance-cross{from{transform:translateX(-60%)}to{transform:translateX(0)}}
@keyframes entrance-drift{from{transform:translateX(-2%)}to{transform:none}}
@media (min-width:701px) and (max-height:760px){
  .home-entrance__logo{width:140px}
  .home-entrance__sicily{font-size:clamp(2.8rem,5vw,4.2rem)}
  .home-entrance__copy{padding-top:calc(var(--header-h) + .5rem)}
}
@media (max-width:700px){
  .home-entrance__copy{padding-top:calc(var(--header-h) + 1rem)}
  .home-entrance__logo{width:136px}
  .home-entrance__sicily{font-size:clamp(2.8rem,14vw,3.6rem)}
  /* two rows of cities; a dot only between the two names of a row */
  .home-entrance__cities{display:grid;grid-template-columns:repeat(2,auto);justify-content:center}
  .home-entrance__cities li{justify-content:center}
  .home-entrance__cities li+li::before{content:none}
  .home-entrance__cities li:nth-child(even)::before{content:"\00B7"}
  .home-entrance__cities li:last-child:nth-child(odd){grid-column:1/-1}
  .home-entrance__branch{height:clamp(190px,36svh,380px)}
}

.home-hero{position:relative;height:clamp(600px,92vh,900px);overflow:hidden;background:var(--ink)}
.home-hero__img{position:absolute;inset:0}
.home-hero__img img{width:100%;height:100%;object-fit:cover;object-position:18% 50%}
.home-hero__copy{
  position:absolute;left:var(--gx);bottom:clamp(3rem,9vh,6rem);z-index:2;max-width:31rem;
}
.home-hero h1{
  font-family:var(--display);font-weight:300;font-size:clamp(3rem,6vw,5.6rem);line-height:.98;
  text-shadow:0 0 36px rgba(11,10,9,.6);
}
.home-hero h1 em{font-style:italic;display:block;padding-left:1.2em}
.home-hero__def{margin-top:1.6rem;font-size:1.02rem;line-height:1.6;color:var(--ash-bright);max-width:27rem;text-shadow:0 0 18px rgba(11,10,9,.8)}
.home-hero__doors{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;margin-top:2rem}
.home-door{display:grid;gap:.1rem;padding-left:1rem;border-left:1px solid var(--gold);min-height:48px;align-content:center}
.home-door b{font-family:var(--display);font-weight:400;font-style:italic;font-size:1.45rem;line-height:1.1;color:var(--bone);transition:color .3s}
.home-door small{font-size:.8rem;letter-spacing:.06em;color:var(--ash-bright)}
.home-door:hover b{color:var(--gold-bright)}

@media (max-width:700px){
  .home-hero{height:auto;min-height:0;display:flex;flex-direction:column}
  .home-hero__img{position:relative;inset:auto;aspect-ratio:1080/1350;overflow:hidden}
  .home-hero__img img{object-position:50% 70%}
  /* the copy overlaps the lower edge of the stacked photo: fade it to ink */
  .home-hero__img::after,.hk-hero__img::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(11,10,9,0) 38%,rgba(11,10,9,.72) 72%,var(--ink) 100%)}
  .home-hero__copy{position:relative;left:auto;bottom:auto;padding:0 var(--gx) 3rem;margin-top:-7.5rem}
  .home-hero h1{font-size:clamp(2.7rem,12vw,3.4rem)}
  .home-hero__doors{flex-direction:column;gap:1rem}
}

/* one bougainvillea reveal — decorative, after content, never a gate */
.bloom{position:relative;background:#000;overflow:hidden}
.bloom__stage{position:relative;aspect-ratio:1920/1080;max-height:78vh;margin-inline:auto}
.bloom__still,.bloom__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bloom__video{opacity:0;transition:opacity .25s linear}
.bloom.is-playing .bloom__video{opacity:1}
html.fs-js .bloom.is-armed .bloom__still{opacity:0}
.bloom__still{transition:opacity .6s var(--ease)}
.bloom__line{
  position:absolute;left:var(--gx);bottom:clamp(2rem,6vw,4.5rem);z-index:2;
  font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.1;
  color:var(--bone);max-width:14ch;
}
@media (max-width:700px){
  .bloom__stage{aspect-ratio:1080/1920;max-height:none;width:100%}
  .bloom__line{bottom:auto;top:2.2rem}
}

/* destinations: two doors, deliberately unlike each other */
.dest{padding-block:clamp(4.5rem,9vw,8rem)}
.dest__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 3rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.dest__head h2{font-family:var(--display);font-size:clamp(2rem,4vw,3.2rem);line-height:1.05}
.dest__head p{color:var(--ash-bright);max-width:40ch}
.dest__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.dest-card{display:block}
.dest-card .ed-photo{margin-bottom:1.4rem}
.dest-card--tall{margin-top:clamp(0rem,9vw,8rem)}
.dest-card__meta{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-bright)}
.dest-card__name{display:block;font-family:var(--display);font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.05;margin:.5rem 0 .8rem}
.dest-card__desc{color:var(--ash-bright);max-width:44ch}
.dest-card__actions{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1rem}
.dest-card img{transition:transform 1.2s var(--ease)}
.dest-card a.dest-card__hit:hover img{transform:scale(1.02)}
.dest-note{margin-top:clamp(2.5rem,5vw,4rem);color:var(--ash);font-size:.95rem;max-width:70ch}
@media (max-width:860px){
  .dest__grid{grid-template-columns:1fr}
  .dest-card--tall{margin-top:0}
  .dest-card--tall .ed-photo{max-width:420px}
}

/* the work, briefly */
.home-work{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:end}
@media (max-width:860px){.home-work{grid-template-columns:1fr}}

/* onward links: Stay, Experiences, About, Contact */
.onward{border-top:1px solid var(--line)}
.onward__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.onward__list a{
  display:grid;gap:.35rem;padding:2rem clamp(1rem,2vw,2rem) 2.2rem;border-right:1px solid var(--line);min-height:44px;
  transition:background-color .4s var(--ease);
}
.onward__list a:first-child{padding-left:0}
.onward__list a:last-child{border-right:0}
.onward__list a:hover{background:rgba(239,233,223,.03)}
.onward__list b{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--bone)}
.onward__list small{font-size:.9rem;color:var(--ash)}
@media (max-width:860px){
  .onward__list{grid-template-columns:1fr 1fr}
  .onward__list a{padding-left:0;border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:480px){.onward__list{grid-template-columns:1fr}}

/* ============================================================
   THE REQUIEM
   ============================================================ */
.rq-hero{padding-top:calc(var(--header-h) + clamp(1.5rem,4vw,3rem));padding-bottom:clamp(3rem,7vw,6rem)}
.rq-hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.rq-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(3.2rem,7vw,6.4rem);line-height:.95;margin:.8rem 0 1.6rem;word-spacing:.12em;overflow-wrap:break-word}
.rq-hero .ed-photo{max-height:calc(100vh - var(--header-h) - 3rem);aspect-ratio:1600/2400}
.rq-hero .ed-photo img{height:100%;object-fit:cover}
@media (max-width:860px){
  .rq-hero__grid{grid-template-columns:minmax(0,1fr)}
  .rq-hero .ed-photo{order:-1;max-height:none;aspect-ratio:1080/1350}
  .rq-hero .ed-photo img{object-position:50% 30%}
}
.rq-silence{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem)}
@media (max-width:860px){.rq-silence{grid-template-columns:1fr}}
.rq-where{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);margin-top:2.5rem}
.rq-where__item{border-top:1px solid var(--gold);padding-top:1.4rem}
.rq-where__item h3{font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.2rem);margin-bottom:.6rem}
.rq-where__item p{color:var(--ash-bright)}
.rq-where__item p+p{margin-top:.7rem}
.rq-where__price{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--gold-bright)}
.rq-where__actions{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center}
@media (max-width:760px){.rq-where{grid-template-columns:1fr}}
.rq-notes{margin-top:3rem;max-width:760px}
.rq-notes h4{font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);margin:1.3rem 0 .4rem}
.rq-notes p{color:var(--ash-bright)}
.rq-tour{margin-top:2.5rem;color:var(--ash);font-size:.95rem}
.rq-where__item--soon{border-top-color:var(--line)}
.rq-where__item--soon .rq-where__price{color:var(--ash-bright)}

/* ============================================================
   HELSINKI
   ============================================================ */
.hk-hero{position:relative;min-height:clamp(640px,100vh,980px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hk-hero__img{position:absolute;inset:0}
.hk-hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hk-hero__copy{position:relative;z-index:2;padding:calc(var(--header-h) + 2rem) var(--gx) clamp(2.5rem,7vh,4.5rem);max-width:44rem}
.hk-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(2.9rem,6vw,5.4rem);line-height:.98;text-shadow:0 0 40px rgba(11,10,9,.7)}
.hk-hero__prop{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,2.4vw,2rem);margin-top:.6rem;color:var(--bone);text-shadow:0 0 24px rgba(11,10,9,.8)}
.hk-hero__meta{margin-top:1.4rem;display:grid;gap:.3rem;font-size:1rem;color:var(--bone);text-shadow:0 0 16px rgba(11,10,9,.9)}
.hk-hero__meta .hk-price{color:var(--gold-bright);font-weight:600}
.hk-hero__actions{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;margin-top:1.8rem}
/* the photograph is lit from its centre; only the copy corner is darkened,
   so the table itself stays untouched */
.hk-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(11,10,9,.82),rgba(11,10,9,0));
}
@media (max-width:700px){
  .hk-hero{min-height:0;display:block}
  /* <picture> is inline by default: without display:block the aspect-ratio
     was ignored and the full 9:16 image pushed the booking action below the fold */
  /* 4:3 rather than square: with the 390x844 viewport the "Book tickets"
     button ends well above the fold, even with the browser toolbars shown */
  .hk-hero__img{position:relative;display:block;overflow:hidden;aspect-ratio:4/3}
  .hk-hero__img img{position:absolute;inset:0;object-position:50% 60%}
  .hk-hero::after{display:none}
  .hk-hero__copy{margin-top:-5rem;padding-top:0;padding-bottom:2.5rem}
  .hk-hero__meta{margin-top:.8rem;gap:.15rem}
  .hk-hero__actions{margin-top:1.1rem}
  .hk-hero__actions .ed-btn{width:100%}
}

.hk-intro{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem)}
@media (max-width:860px){.hk-intro{grid-template-columns:1fr}}

.hk-menu{margin-top:2.2rem;max-width:640px}
.hk-menu ol{list-style:none;counter-reset:mv;columns:2;column-gap:2.5rem}
.hk-menu li{counter-increment:mv;break-inside:avoid;padding:.45rem 0;border-bottom:1px solid rgba(168,144,95,.14);font-family:var(--display);font-size:1.2rem;color:var(--bone)}
.hk-menu li::before{content:counter(mv,upper-roman);display:inline-block;min-width:2.6rem;font-style:italic;color:var(--gold);font-size:1rem}
@media (max-width:560px){.hk-menu ol{columns:1}}

/* the single commercial block */
.hk-book{background:var(--ink-soft)}
.hk-book__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 3rem;margin-bottom:clamp(2rem,5vw,3rem)}
.hk-book__head h2{font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.04}
.hk-routes{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:900px){.hk-routes{grid-template-columns:minmax(0,1fr)}}
/* long Finnish compounds must wrap rather than overflow when text is enlarged */
body.ed main{overflow-wrap:break-word}
.hk-route{background:var(--ink);border:1px solid var(--line);padding:clamp(1.5rem,3.5vw,2.6rem)}
.hk-route--primary{border-color:rgba(201,177,131,.5)}
.hk-route__tag{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-bright)}
.hk-route h3{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.08;margin:.5rem 0 .9rem}
.hk-route p{color:var(--ash-bright)}
.hk-route p+p{margin-top:.7rem}
.hk-prices{display:grid;gap:.1rem;margin:1.4rem 0 1.6rem}
.hk-prices div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line)}
.hk-prices dt{color:var(--bone);min-width:0;overflow-wrap:anywhere}
.hk-prices dt small{display:block;color:var(--ash);font-size:.86rem}
.hk-prices dd{font-family:var(--display);font-size:1.6rem;color:var(--gold-bright);white-space:nowrap}
.hk-route .ed-btn{margin-top:.6rem}
.hk-configs{display:grid;gap:1rem;margin:1.2rem 0 1.4rem}
.hk-config{border-top:1px solid var(--line);padding-top:1rem}
.hk-config h4{font-family:var(--display);font-weight:400;font-size:1.4rem;color:var(--bone)}
.hk-config p{font-size:.98rem}
.hk-config .ed-link{margin-top:.3rem}
.hk-contact{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-top:1rem}
.hk-contact a{min-height:44px;display:inline-flex;align-items:center}
.hk-book__notes{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 3rem}
.hk-book__notes p{color:var(--ash-bright);font-size:.98rem}
@media (max-width:760px){.hk-book__notes{grid-template-columns:1fr}}

.hk-drinks{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line);padding-top:clamp(1.8rem,4vw,2.6rem);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:1.5rem clamp(2rem,5vw,5rem)}
.hk-drinks h3{font-family:var(--display);font-size:1.9rem}
.hk-drinks ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.hk-drinks li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(168,144,95,.14)}
.hk-drinks li span{color:var(--gold-bright);font-family:var(--display);font-size:1.2rem}
.hk-drinks p{color:var(--ash-bright);font-size:.98rem;margin-top:.8rem}
@media (max-width:860px){.hk-drinks{grid-template-columns:1fr}}
@media (max-width:520px){.hk-drinks ul{grid-template-columns:1fr}}
.hk-drinks--summary p{margin-top:0;margin-bottom:.9rem}
/* tour city hero price line, same weight as the Helsinki .hk-price */
.city-price{color:var(--gold-bright);font-weight:600;margin-top:1.6rem}
.city-price+.hk-hero__actions,.rq-hero .hk-hero__actions{margin-top:1.4rem}
.byb-note{font-size:.9rem;margin-top:.6rem}

/* Private Commission — the one ivory chapter */
.hk-commission{background:var(--ivory);color:var(--ivory-ink);padding-block:clamp(4.5rem,10vw,8.5rem);position:relative;overflow:hidden}
.hk-commission .eyebrow{color:#6f5a32}
.hk-commission__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.hk-commission__media{position:relative}
.hk-commission__media .ed-photo{display:block;background:#0b0a09}
/* the cutout is square: width and height are set together so no browser can
   stretch it into a strip */
.hk-commission__flower{
  --fw:clamp(120px,15vw,210px);
  position:absolute;width:var(--fw);height:var(--fw);max-width:none;aspect-ratio:1/1;object-fit:contain;
  right:clamp(-3rem,-4vw,-1rem);bottom:clamp(-3rem,-4vw,-1.5rem);
  pointer-events:none;z-index:2;
}
.hk-commission h2{font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.02;margin:.8rem 0 1.4rem;color:var(--ivory-ink)}
.hk-commission h2 em{font-style:italic}
.hk-commission p{color:#3d3831}
.hk-commission p+p{margin-top:.9rem}
.hk-commission .ed-facts div{border-top-color:rgba(27,25,22,.2)}
.hk-commission .ed-facts dt{color:var(--ivory-muted)}
.hk-commission .ed-facts dd{color:var(--ivory-ink)}
.hk-commission__line{font-family:var(--display);font-style:italic;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.3;color:var(--ivory-ink);margin-top:2rem}
.hk-commission__incl{font-size:.98rem}
.hk-commission__actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center}
.hk-commission .ed-inline{color:var(--ivory-ink);border-color:rgba(27,25,22,.35)}
.hk-commission :focus-visible{outline-color:var(--ivory-ink)}
@media (max-width:860px){
  .hk-commission__grid{grid-template-columns:1fr}
  .hk-commission__media{max-width:460px}
  .hk-commission__flower{right:-1rem;bottom:-2rem}
}
@media (max-width:700px){
  /* a short 5:4 crop of the envelope and candle, so the heading follows
     within the first screen of the chapter */
  .hk-commission{padding-block:3.5rem 4.5rem}
  .hk-commission__grid{gap:2.2rem}
  .hk-commission__media .ed-photo{aspect-ratio:5/4;--flame-y:32%;--seal-y:45%}
  .hk-commission__media .ed-photo img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:50% 62%}
  .hk-commission__flower{--fw:96px;right:-.4rem;bottom:-1.4rem}
  /* shorter crop of the same headphones photograph keeps the Helsinki page length down on phones */
  .hk-listen-photo{aspect-ratio:1/1}
  .hk-listen-photo img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:50% 55%}
}

/* ---------- quiet motion (Helsinki Private Commission) ----------
   Final states are the defaults, so nothing depends on JavaScript. Only
   js/editorial.js adds .motion-armed (the start state) to [data-motion] and
   then .motion-in once, when the element enters the viewport. Transform,
   opacity and clip-path only: no layout change, nothing loops. */

/* candlelight: a warm radial glow on the flame region only, screen-blended.
   It rises once (~3 s) and settles to an almost imperceptible steady level. */
.hk-candle{--flame-x:83.5%;--flame-y:43%;--seal-x:49%;--seal-y:51%}
.hk-candle::before,.hk-candle::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.hk-candle::before{
  background:radial-gradient(circle at var(--flame-x) var(--flame-y),rgba(255,186,110,.30) 0,rgba(255,156,72,.12) 7%,rgba(255,140,60,0) 19%);
  mix-blend-mode:screen;opacity:.35;
}
/* warm light over the paper and seal */
.hk-candle::after{
  background:radial-gradient(ellipse 42% 30% at var(--seal-x) var(--seal-y),rgba(255,205,150,.30),rgba(255,205,150,0) 70%);
  mix-blend-mode:soft-light;opacity:1;
}
.hk-candle img{transform:none}
.motion-armed .hk-candle::before{opacity:0}
.motion-armed .hk-candle::after{opacity:0;transition:opacity 3.2s cubic-bezier(.25,.1,.25,1) .3s}
.motion-armed .hk-candle img{transform:scale(1.012);transition:transform 3s cubic-bezier(.22,.61,.36,1)}
.motion-armed.motion-in .hk-candle::before{animation:fs-candle 3.2s cubic-bezier(.25,.1,.25,1) .2s both}
.motion-armed.motion-in .hk-candle::after{opacity:1}
.motion-armed.motion-in .hk-candle img{transform:none}
@keyframes fs-candle{0%{opacity:0}55%{opacity:1}100%{opacity:.35}}

/* the bougainvillea: grows up from its stem once, with a slight settle */
.motion-armed .hk-commission__flower{
  clip-path:inset(100% 0 0 0);transform:translateY(8px) rotate(-3deg);transform-origin:50% 85%;
  transition:clip-path 3.2s cubic-bezier(.22,.61,.36,1) .6s,transform 3.4s cubic-bezier(.22,.61,.36,1) .6s;
}
.motion-armed.motion-in .hk-commission__flower{clip-path:inset(0 0 0 0);transform:none}

@media (prefers-reduced-motion:reduce){
  .motion-armed .hk-candle::before,.motion-armed .hk-candle::after,
  .motion-armed .hk-candle img,.motion-armed .hk-commission__flower{animation:none;transition:none}
  .motion-armed .hk-candle::before{opacity:.35}
  .motion-armed .hk-candle::after{opacity:1}
  .motion-armed .hk-candle img{transform:none}
  .motion-armed .hk-commission__flower{clip-path:none;transform:none}
}

/* practical */
.hk-practical{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,4vw,3.5rem);margin-top:2.4rem}
.hk-practical h3{font-family:var(--body);font-weight:600;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:.6rem}
.hk-practical p{color:var(--ash-bright);font-size:.98rem}
.hk-practical p+p{margin-top:.6rem}
@media (max-width:960px){.hk-practical{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.hk-practical{grid-template-columns:1fr}}
.hk-prebook{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;border-top:1px solid var(--line);padding-top:2rem}
.hk-prebook p{color:var(--ash-bright)}

/* ============================================================
   BEFORE YOU BOOK — functional, no hero, no motion
   ============================================================ */
.byb-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1rem var(--gx);border-bottom:1px solid var(--line);
}
.byb-bar__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:1.05rem;letter-spacing:.3em;text-transform:uppercase}
.byb-bar__brand img{width:24px;height:24px;object-fit:contain}
.byb-bar__right{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.4rem}
.byb-bar__back{font-size:.92rem;color:var(--ash-bright);min-height:44px;display:inline-flex;align-items:center}
.byb-bar__back:hover{color:var(--bone)}
.byb-bar .lang{margin:0}
.byb{max-width:780px;margin-inline:auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gx) clamp(3rem,7vw,5rem)}
.byb h1{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,6vw,4rem);line-height:1;margin:.7rem 0 1rem}
.byb__lead{color:var(--ash-bright);font-size:1.1rem}
.byb-sec{border-top:1px solid var(--line);padding-top:1.8rem;margin-top:2.4rem}
.byb-sec h2{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.2rem);line-height:1.1;margin-bottom:.9rem;display:flex;gap:.9rem;align-items:baseline}
.byb-sec h2 i{font-family:var(--body);font-style:normal;font-size:.8rem;font-weight:600;color:var(--gold-bright);letter-spacing:.1em}
.byb-sec h3{font-family:var(--body);font-weight:600;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright);margin:1.4rem 0 .4rem}
.byb-sec p{color:var(--ash-bright)}
.byb-sec p+p{margin-top:.75rem}
.byb-sec p strong{color:var(--bone)}
.byb-pairings{list-style:none;margin-top:1.2rem;max-width:460px}
.byb-pairings li{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid rgba(168,144,95,.14)}
.byb-pairings span{color:var(--gold-bright)}
.byb-policy{margin-top:1.4rem}
.byb-policy .ed-details__body p{color:var(--ash-bright);font-size:.98rem}
.byb-close{margin-top:3rem;border-top:1px solid var(--line);padding-top:2rem;display:grid;gap:1rem;justify-items:start}
.byb-close p{color:var(--ash);font-size:.92rem}
.byb-foot{border-top:1px solid var(--line);padding:1.6rem var(--gx);display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.85rem;color:var(--ash-bright)}
.byb-foot a{min-height:44px;display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere}
.byb-foot button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;min-height:44px;text-decoration:underline;text-underline-offset:3px}

/* footer additions */
.ed .footer-grid a,.ed .footer-grid p{font-family:var(--body)}
/* consent panel and .fs-consent-open: css/consent.css */