/* ============================================================ tokens */
:root{
  /* sampled: brand/PALETTE.md */
  --villa:#f6efe3;        /* undyed wool, the page ground */
  --villa-2:#ede3d2;      /* the second light band */
  --villa-3:#e3d7c2;      /* the hairline */
  --yo:#1d1a38;           /* the indigo border of the 1782 ryijy, the dark panel */
  --yo-2:#131320;         /* the night wool of the 1731 ryijy */
  --muste:#241f2e;        /* body ink, 14.02:1 on wool */
  --muste-2:#4a4356;      /* secondary ink, computed 7.4:1 on wool */
  --krapp:#b52328;        /* the accent. ONE. rationed */
  --krapp-kentta:#d75753;
  --krapp-syva:#8f2226;   /* madder text on wool, 7.58:1 */
  --okra:#8b6b47;
  --okra-vaalea:#c3af75;  /* the glint, 7.72:1 on the dark panel */
  --sammal:#4d511f;
  --liekki:#59739e;

  --disp:"Vollkorn",Georgia,serif;
  --body:"Faustina",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1180px;
  --gut:clamp(18px,4vw,40px);
  --sec:clamp(56px,8vw,116px);
  --r:2px;                /* the weave has no round corners */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The header is sticky, so an anchor jump parks the target underneath it. Measured with
   _hdr_probe.py: the header is 79px tall at 360px wide where it wraps to two rows, and 67px at
   every other width from 390 to 1920. 92px clears the tallest case with air to spare. Without
   this the contents list on the country pillar dropped every heading 122px out of sight. */
:where(section[id],h2[id],h3[id],span.alias){scroll-margin-top:92px}
span.alias{display:block;height:0}
body{
  margin:0;background:var(--villa);color:var(--muste);
  font:400 clamp(16.5px,1.02vw,18px)/1.68 var(--body);
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
  /* the faintest wool grain. two stepped washes, never a gradient sheen */
  background-image:
    repeating-linear-gradient(0deg,rgba(36,31,46,.016) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(36,31,46,.012) 0 1px,transparent 1px 4px);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--krapp-syva);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--krapp)}
:focus-visible{outline:2.5px solid var(--krapp);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--yo);color:var(--villa);padding:10px 16px}

h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.08;margin:0;
  letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.35rem,5.4vw,4.15rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.85rem)}
h3{font-size:clamp(1.14rem,1.7vw,1.4rem);line-height:1.22}
h1 em,h2 em{font-style:normal;color:var(--krapp-syva)}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.06rem,1.35vw,1.22rem);color:var(--muste-2);max-width:62ch}

/* ============================================================ the weave */
.pile{display:block;width:100%;height:15px}
.pilerow{width:100%;overflow:hidden;line-height:0}
.glyph{display:inline-block;vertical-align:-.12em;shape-rendering:crispEdges}
.clasp,.couple,.kentta,.kulma{shape-rendering:crispEdges}

/* the breath: the pile knots itself in, once, then is still */
@media (prefers-reduced-motion:no-preference){
  .pile path{animation:knot .5s cubic-bezier(.2,.7,.3,1) backwards}
  .pile path:nth-child(4n){animation-delay:.06s}
  .pile path:nth-child(4n+1){animation-delay:.13s}
  .pile path:nth-child(4n+2){animation-delay:.2s}
  .pile path:nth-child(4n+3){animation-delay:.27s}
  @keyframes knot{from{opacity:0;transform:translateY(5px) scaleY(.2)}}
  .clasp rect{animation:tie .45s ease backwards;animation-delay:.18s}
  @keyframes tie{from{opacity:0}}
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
}
.shot .pile path,.shot .clasp rect{animation:none!important}
.shot .reveal{opacity:1!important;transform:none!important}
/* the capture stitches viewport tiles, and a sticky header would repeat in every one of them */
.shot header.site{position:static}

/* ============================================================ header */
header.site{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--villa) 88%,transparent);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--villa-3)}
header.site.onphoto{background:transparent;border-bottom-color:transparent}
header.site.stuck{background:color-mix(in srgb,var(--villa) 94%,transparent)}
.hrow{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;
  font-size:1.14rem;color:var(--muste);text-decoration:none;letter-spacing:-.015em;white-space:nowrap}
.brand b{color:var(--krapp-syva)}
.mainnav{display:flex;gap:clamp(7px,.86vw,14px);margin-left:auto;flex-wrap:nowrap}
.mainnav a{font-size:.815rem;color:var(--muste);text-decoration:none;white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent}
.mainnav a:hover,.mainnav a[aria-current]{border-bottom-color:var(--krapp);color:var(--krapp-syva)}
.hact{display:flex;align-items:center;gap:10px;margin-left:8px}
.wapill{display:inline-flex;align-items:center;gap:6px;font:500 .8rem/1 var(--mono);
  color:var(--muste);text-decoration:none;border:1px solid var(--villa-3);padding:8px 11px;
  border-radius:var(--r)}
.wapill:hover{border-color:var(--krapp);color:var(--krapp-syva)}
.burger{display:none;background:none;border:1px solid var(--villa-3);padding:8px 11px;
  cursor:pointer;font:500 .8rem/1 var(--mono);color:var(--muste);align-items:center;gap:7px}
.burger .bl{width:16px;height:9px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.burger.close .bl{border-bottom:0;height:2px;background:currentColor;transform:rotate(45deg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;
  background:var(--krapp);color:var(--villa);text-decoration:none;font-family:var(--mono);
  font-weight:500;font-size:.86rem;letter-spacing:.02em;padding:13px 22px;border:1px solid var(--krapp);
  border-radius:var(--r);cursor:pointer;transition:background .18s ease}
.btn:hover{background:var(--krapp-syva);border-color:var(--krapp-syva);color:var(--villa)}
.btn--sm{padding:9px 15px;font-size:.8rem}
.btn--ghost{background:transparent;color:var(--muste);border-color:var(--muste)}
.btn--ghost:hover{background:var(--muste);color:var(--villa)}
.hero.photo .btn--ghost,.dark .btn--ghost{color:var(--villa);border-color:var(--villa)}
.hero.photo .btn--ghost:hover,.dark .btn--ghost:hover{background:var(--villa);color:var(--yo)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================ mobile menu */
.mmenu{position:fixed;inset:0;z-index:80;background:var(--yo);color:var(--villa);
  padding:20px var(--gut) 40px;overflow-y:auto}
.mmenu[hidden]{display:none}
.mtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mmenu .brand{color:var(--villa)}
.mmenu .brand b{color:var(--okra-vaalea)}
.mmenu .burger{border-color:rgba(246,239,227,.4);color:var(--villa)}
.mmenu ol{list-style:none;margin:0;padding:0}
.mmenu li{border-bottom:1px solid rgba(246,239,227,.14)}
.mmenu li a{display:block;padding:14px 0;font-family:var(--disp);font-size:1.4rem;
  color:var(--villa);text-decoration:none}
.mmenu .n{font:500 .72rem/1 var(--mono);color:var(--okra-vaalea);margin-right:12px}
.mmenu li{display:flex;align-items:baseline;gap:4px}
.mrow{display:flex;flex-wrap:wrap;gap:8px 18px;margin:24px 0 28px}
.mrow a{font:400 .88rem/1 var(--mono);color:var(--okra-vaalea);text-decoration:none}
.mcta{display:flex;flex-direction:column;gap:10px}

/* ============================================================ heroes */
.hero{position:relative;isolation:isolate}
.hero.photo{min-height:min(88vh,760px);display:flex;align-items:flex-end;
  padding:120px 0 74px;background:var(--yo)}
.hero.photo .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Two scrims, and both are needed. The first is the picture's own veil, which keeps the
   photograph readable as a photograph. The second is a wedge under the text block only: the
   airport-transfer hero is a bright, busy frame and the headline landed on a white shirt, where
   the madder accent measured under 3:1. A veil strong enough to fix that on the bright half
   would flatten the dark heroes, so the wedge sits behind the words and nowhere else. */
.hero.photo .shade{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg,rgba(13,12,22,.66) 0%,rgba(13,12,22,.5) 42%,rgba(13,12,22,0) 78%),
    linear-gradient(180deg,rgba(19,19,32,.6) 0%,rgba(19,19,32,.3) 34%,rgba(19,19,32,.9) 100%)}
/* Some photographs are bright right where the headline sits: a pale granite aerial, a
   sand-and-sky frame with no dark quarter in it. `dim` deepens the wedge on those and only
   those, because deepening every hero to suit the brightest one would make the rest muddy.
   Which heroes get it is not a taste call: contrast_hero.py measures at the glyphs and the
   ones that fail are the ones that carry the class. */
.hero.photo.dim .shade{background:
    linear-gradient(95deg,rgba(13,12,22,.9) 0%,rgba(13,12,22,.8) 42%,rgba(13,12,22,0) 84%),
    linear-gradient(180deg,rgba(19,19,32,.68) 0%,rgba(19,19,32,.42) 34%,rgba(19,19,32,.92) 100%)}
.hero.photo .hbody{position:relative;z-index:2}
.hero.photo{color:var(--villa)}
/* On a photograph the accent is NOT madder. Measured at the glyphs (`contrast_hero.py`), the
   light madder came in at 1.55:1 on the airport frame and never cleared 3:1 on any of the six
   photo heroes, and the sampled ochre eyebrow sat at 4.14 to 4.26 against a 4.5 requirement.
   So the emphasis here is the wool itself: the headline is held slightly back and the emphasis
   is full-strength wool white, which is the brightest thing in the frame. Madder stays the
   accent everywhere it was measured safe, which is the wool ground and the dark panel. */
.hero.photo h1{color:color-mix(in srgb,var(--villa) 84%,transparent)}
.hero.photo h1 em{color:var(--villa);font-style:normal}
.hero.photo .hey{color:var(--villa)}
.hero.photo .hlede{color:color-mix(in srgb,var(--villa) 92%,transparent)}
.hero.wool{padding:clamp(56px,8vw,104px) 0 0;position:relative;overflow:hidden}
.hero.wool .hbody{max-width:820px;position:relative;z-index:2}
/* The clasp is decoration behind the hero's words, and the hero's words are the page. Wave 6
   logged it as landing behind the lede on a 390px phone. _clasp_probe.py measured it on three
   wool heroes at eleven widths from 360 to 1920 and it is worse than that: it overlaps the h1,
   the eyebrow, the lede or the buttons at EVERY width below 1200, and is clear only at 1200 and
   above, where the 820px text column finally leaves a gutter wide enough for it.

   So it is shown only where it was measured to be clear. Nothing is lost below that: the pilerow
   fringe still carries the ryijy across the foot of every wool hero, which is the piece a reader
   actually reads as wool. Decoration on top of type is not restraint, it is noise. */
.hclasp{display:none}
@media (min-width:1200px){
  .hclasp{display:block;position:absolute;right:2%;top:8%;opacity:.5;z-index:1}
}
.hbody{max-width:900px}
/* Finnish builds long words. `Kaksikymmentäyksi` at hero size is 385px, which is wider than the
   text column on a 390px phone, and a word wider than its column pushes the whole page sideways.
   Measured, not guessed: overflow_check.py caught the guide hub scrolling to 421px.

   It has to be `anywhere` and not `break-word`. The two behave identically for wrapping, but only
   `anywhere` is allowed to shrink the element's min-content width, and min-content is exactly
   what was making the wrapper 421px wide. `break-word` was tried first and moved the number by
   nothing. Breaking still happens only when a word cannot fit at all, so nothing that already
   fits moves. The same applies to a long hotel name inside a button. */
.hbody h1,.hbody .hlede,.shead h2,.btn{overflow-wrap:anywhere}
.btn{max-width:100%}
.hmeta{display:flex;align-items:center;gap:9px;font:500 .74rem/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:20px;opacity:.9}
/* The base was `--okra-vaalea`, the glint, which is a DARK-PANEL colour: 7.72:1 on the night
   wool and 1.89:1 on undyed wool. Two hero variants overrode it and a third, `.carhero`, did not,
   so the eyebrow on every car page was painted at 1.89:1. The safe direction is the default: a
   light-ground colour here, and light-on-dark stated where the ground is actually dark. */
.hey{font:500 .8rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--krapp-syva);margin:0 0 14px}
section.dark .hey{color:var(--okra-vaalea)}
.hlede{font-size:clamp(1.06rem,1.4vw,1.26rem);max-width:60ch;margin:20px 0 28px}
.hrail{position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font:400 .7rem/1 var(--mono);letter-spacing:.2em;
  color:color-mix(in srgb,var(--villa) 70%,transparent)}
.hpile{position:absolute;left:0;right:0;bottom:0}
.crumbs{font:400 .78rem/1.6 var(--mono);margin-bottom:22px;color:var(--muste-2)}
.crumbs a{color:var(--muste-2)}
.crumbs a::after{content:" / ";color:var(--villa-3)}
.crumbs span{color:var(--muste)}

/* ============================================================ sections */
section{padding:var(--sec) 0}
section.tight{padding:calc(var(--sec)*.6) 0}
section.dark{background:var(--yo);color:var(--villa)}
section.dark h1,section.dark h2,section.dark h3{color:var(--villa)}
section.dark .lede,section.dark p{color:color-mix(in srgb,var(--villa) 86%,transparent)}
section.dark a{color:var(--okra-vaalea)}
/* `.ey` and `h2 em` are madder, which reads on wool at 7.58:1 and on the night panel at 1.93:1.
   On a dark section they take the glint instead. */
section.dark .ey,section.dark .ey .t{color:var(--okra-vaalea)}
section.dark h1 em,section.dark h2 em,section.dark h3 em{color:var(--okra-vaalea)}
section.wool2{background:var(--villa-2)}
.shead{max-width:74ch;margin-bottom:clamp(30px,4vw,52px)}
.shead.ctr{margin-left:auto;margin-right:auto;text-align:center}
.ey{display:flex;align-items:center;gap:9px;font:500 .74rem/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--krapp-syva);margin-bottom:15px}
.shead.ctr .ey{justify-content:center}
.ey .num{opacity:.55}
.shead .lede{margin-top:16px}

/* ============================================================ bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcell{position:relative;overflow:hidden;min-height:290px;display:flex;align-items:flex-end;
  text-decoration:none;color:var(--villa);background:var(--yo);border-radius:var(--r)}
.pcell.tall{grid-row:span 2;min-height:596px}
.pcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.pcell:hover img{transform:scale(1.035)}
.pcell .shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,19,32,.06) 30%,rgba(19,19,32,.82) 100%)}
.pcell .txt{position:relative;padding:24px;z-index:2}
.pcell h3{color:var(--villa);margin:6px 0 7px}
.pcell p{color:color-mix(in srgb,var(--villa) 88%,transparent);margin:0;font-size:.94rem}
.pcell .ey2{font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--okra-vaalea)}
.pcell.flat{background:var(--villa-2);color:var(--muste);min-height:0;
  border:1px solid var(--villa-3);display:block;padding:24px}
.pcell.flat h3{color:var(--muste)}
.pcell.flat p{color:var(--muste-2)}
.pcell.wide{grid-column:span 2}

/* ============================================================ the Valokirja device */
.device{position:relative;overflow:hidden}
.device .kentta{position:absolute;left:0;right:0;top:0;height:26px;opacity:.5}
.vk{display:grid;grid-template-columns:290px 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.vk .picks{display:flex;flex-direction:column;gap:8px}
.vk .lbl{font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--okra-vaalea);margin:4px 0 8px}
.vk select{width:100%;background:var(--yo-2);color:var(--villa);border:1px solid rgba(246,239,227,.28);
  padding:12px 13px;font:400 .95rem var(--body);border-radius:var(--r)}
.vk .wins{display:flex;flex-wrap:wrap;gap:7px}
.vk .wins button{background:transparent;border:1px solid rgba(246,239,227,.3);color:var(--villa);
  font:500 .78rem/1 var(--mono);padding:9px 12px;cursor:pointer;border-radius:var(--r)}
.vk .wins button[aria-pressed=true]{background:var(--villa);color:var(--yo);border-color:var(--villa)}
.vk .seat{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,34px);align-items:start}
.vk .ans{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.vk .f .k{font:500 .7rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--okra-vaalea);margin-bottom:7px}
.vk .f .v{font-size:1.02rem;color:var(--villa)}
.vk .big{grid-column:1 / -1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid rgba(246,239,227,.16)}
.vk .big .n{font-family:var(--disp);font-size:clamp(2.1rem,4vw,3.1rem);line-height:1;
  color:var(--okra-vaalea)}
.vk .big .n.warm{color:var(--villa)}
.vk .big .sep{font:400 .8rem var(--mono);opacity:.6}
.vk .note{grid-column:1 / -1;font-size:.95rem;
  color:color-mix(in srgb,var(--villa) 80%,transparent);margin:2px 0 0}

/* ============================================================ islands, cards, grids */
.isles{display:grid;grid-template-columns:1.42fr 1fr;gap:14px}
.isles .side{display:grid;gap:14px}
.isle{position:relative;overflow:hidden;min-height:250px;display:flex;align-items:flex-end;
  text-decoration:none;background:var(--yo);border-radius:var(--r)}
.isle.big{min-height:514px}
.isle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.isle:hover img{transform:scale(1.035)}
.isle .shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,19,32,.04) 34%,rgba(19,19,32,.8) 100%)}
.isle .txt{position:relative;z-index:2;padding:22px;color:var(--villa)}
.isle h3{color:var(--villa);margin:5px 0 6px}
.isle p{margin:0;font-size:.93rem;color:color-mix(in srgb,var(--villa) 88%,transparent)}
.isle .co{font:500 .71rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--okra-vaalea)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--villa-2);border:1px solid var(--villa-3);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--muste)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card .cb{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0}
.card p{margin:0;font-size:.93rem;color:var(--muste-2)}
.card .meta{margin-top:auto;font:500 .74rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--krapp-syva)}
a.card:hover{border-color:var(--krapp)}
.pin{display:inline-flex;align-items:center;gap:6px;font:500 .7rem/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--krapp-syva)}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,38px)}
.cols .t-ey{display:flex;align-items:center;gap:8px;font:500 .74rem/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--krapp-syva);margin-bottom:11px}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery figure{margin:0}
.gallery img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:var(--r)}

/* ============================================================ truths, notes, facts */
.truths{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,34px)}
.truth .n{font-family:var(--disp);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;
  color:var(--krapp-syva);margin-bottom:9px}
section.dark .truth .n{color:var(--okra-vaalea)}
.truth p{font-size:.95rem;margin:0}
.mnote{max-width:66ch;margin:clamp(30px,4vw,54px) auto 0;text-align:center;position:relative}
.mnote p{font-family:var(--disp);font-size:clamp(1.2rem,2vw,1.62rem);line-height:1.34;
  color:var(--muste)}
section.dark .mnote p{color:var(--villa)}
.mnote .clasp{margin:0 auto 16px;display:block;opacity:.85}
.sig{font-family:var(--disp);font-style:italic;font-size:1.1rem;color:var(--krapp-syva)}
section.dark .sig{color:var(--okra-vaalea)}

/* ============================================================ related, faq, cta */
.related{margin-top:clamp(30px,4vw,52px)}
.related h3{font:500 .76rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--krapp-syva);margin-bottom:16px}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.rel{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--villa-2);
  text-decoration:none;color:var(--muste);font-size:.95rem;border-radius:var(--r)}
.rel:hover{background:var(--yo);color:var(--villa)}
.rel:hover .glyph rect{fill:var(--okra-vaalea)}

.faq details{border-top:1px solid var(--villa-3);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--villa-3)}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-family:var(--disp);font-weight:600;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--krapp);border-bottom:2px solid var(--krapp);
  transform:translateY(-70%) rotate(45deg)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 34px 18px 0;color:var(--muste-2);max-width:78ch}

section.cta{background:var(--villa-2)}
.ctab{text-align:center;max-width:70ch;margin:0 auto}
.ctab .clasp{margin:0 auto 18px;display:block}
.ctab p{color:var(--muste-2);margin:12px auto 24px;max-width:56ch}
.ctab .btns{justify-content:center}

/* ============================================================ forms */
form{background:var(--villa-2);border:1px solid var(--villa-3);padding:clamp(20px,3vw,34px);
  position:relative;border-radius:var(--r)}
section.dark form{background:var(--yo-2);border-color:rgba(246,239,227,.2)}
.kulma{position:absolute;opacity:.7}
.kulma.tl{left:9px;top:9px}
.kulma.tr{right:9px;top:9px;transform:scaleX(-1)}
.f{margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font:500 .74rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muste-2);margin-bottom:7px}
section.dark label{color:var(--okra-vaalea)}
input,select,textarea{width:100%;background:var(--villa);border:1px solid var(--villa-3);
  padding:12px 13px;font:400 1rem var(--body);color:var(--muste);border-radius:var(--r)}
section.dark input,section.dark select,section.dark textarea{
  background:var(--yo);border-color:rgba(246,239,227,.24);color:var(--villa)}
textarea{min-height:118px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--krapp);outline:none;
  box-shadow:0 0 0 3px rgba(181,35,40,.14)}
.help{display:block;font-size:.83rem;color:var(--muste-2);margin-top:6px}
.hp{position:absolute;left:-9999px}
.sent{display:none;margin-top:14px;color:var(--sammal);font-weight:600}
form.ok .sent{display:block}
form.ok .fields{display:none}
.err{border-color:var(--krapp)!important}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-top:2px solid var(--muste);padding-top:14px;margin:20px 0 18px}
.total .n{font-family:var(--disp);font-size:clamp(1.7rem,3vw,2.3rem);line-height:1}
.chan{display:flex;flex-wrap:wrap;gap:10px}

/* ============================================================ footer */
footer{background:var(--yo);color:var(--villa);padding:clamp(46px,6vw,76px) 0 34px}
footer a{color:color-mix(in srgb,var(--villa) 84%,transparent);text-decoration:none}
footer a:hover{color:var(--okra-vaalea)}
.fcols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
footer .brand{color:var(--villa)}
footer .brand b{color:var(--okra-vaalea)}
.fline{font-family:var(--disp);font-size:1.05rem;margin:14px 0 12px;max-width:26ch;
  color:var(--villa)}
.coord{font:400 .71rem/1.6 var(--mono);letter-spacing:.12em;
  color:color-mix(in srgb,var(--villa) 62%,transparent)}
.fcontact{display:flex;flex-direction:column;gap:4px;margin-top:14px;font:400 .86rem var(--mono)}
footer h3{font:500 .73rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--okra-vaalea);margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer li a{font-size:.92rem}
.netstrip{margin:clamp(34px,4vw,54px) 0 0;padding-top:26px;
  border-top:1px solid rgba(246,239,227,.14);font-size:.85rem;line-height:2}
.netstrip .lbl{display:block;font:500 .68rem/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--okra-vaalea);margin:0 0 8px}
.netstrip .lbl+a{margin-left:0}
.netstrip a{white-space:nowrap}
.netstrip>span:nth-of-type(2){margin-top:18px}
.legalrow{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
  align-items:center;margin-top:30px;padding-top:22px;border-top:1px solid rgba(246,239,227,.14);
  font:400 .82rem var(--mono)}
.lset{display:flex;flex-wrap:wrap;gap:8px 20px}
.disclaim{margin:18px 0 0;font-size:.8rem;line-height:1.65;max-width:92ch;
  color:color-mix(in srgb,var(--villa) 60%,transparent)}

/* ============================================================ prose */
.prose{max-width:74ch}
.prose h2{margin:clamp(38px,4vw,58px) 0 16px}
.prose h3{margin:30px 0 12px}
.prose ul,.prose ol{padding-left:1.1em;margin:0 0 1.05em}
.prose li{margin-bottom:.45em}
.prose blockquote{margin:26px 0;padding:2px 0 2px 20px;border-left:3px solid var(--krapp);
  font-family:var(--disp);font-size:1.16rem;color:var(--muste)}
.byline{display:flex;align-items:center;gap:10px;font:400 .8rem/1.5 var(--mono);
  color:var(--muste-2);margin:0 0 26px}
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:.95rem}
.tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--villa-3)}
.tbl th{font:500 .73rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muste-2)}
.tbl tr:first-child th{border-bottom-width:2px;border-bottom-color:var(--muste)}
.src{font-size:.82rem;color:var(--muste-2);margin-top:8px}

/* ============================================================ responsive */
@media (max-width:1320px){.wapill span{display:none}.wapill{padding:8px 9px}}
@media (max-width:1180px){
  .mainnav,.wapill{display:none}
  .burger{display:inline-flex}
  .fcols{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:940px){
  .mainnav,.wapill{display:none}
  .burger{display:inline-flex}
  .bento{grid-template-columns:1fr 1fr}
  .pcell.tall{grid-row:span 1;min-height:330px}
  .pcell.wide{grid-column:span 2}
  .vk{grid-template-columns:1fr}
  .vk .seat{grid-template-columns:1fr}
  .vk .seat .clasp{display:none}
  .isles{grid-template-columns:1fr}
  .isle.big{min-height:320px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .truths{grid-template-columns:repeat(2,1fr)}
  .relgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .g3,.cols,.gallery{grid-template-columns:1fr 1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .hero.photo{min-height:min(86vh,640px);padding:96px 0 62px}
}
@media (max-width:430px){.hact .btn{padding:8px 11px;font-size:.74rem}}
@media (max-width:560px){
  .bento,.g2,.g3,.g4,.cols,.relgrid,.grid2{grid-template-columns:1fr}
  .pcell.wide{grid-column:span 1}
  .gallery{grid-template-columns:1fr 1fr}
  .vk .ans{grid-template-columns:1fr}
  .truths{grid-template-columns:1fr 1fr}
  .fcols{grid-template-columns:1fr}
  .legalrow{flex-direction:column;align-items:flex-start}
  .hrail{display:none}
  /* `white-space:nowrap` keeps a button on one line, which is right on a desktop and wrong on a
     390px phone when the label carries a hotel's full name. Twelve hotel pages scrolled sideways
     because of it, the widest reaching 488px. Below this breakpoint the label is allowed to wrap
     onto a second line instead of pushing the page. */
  .btn{width:100%;white-space:normal;text-align:center}
  .btns{flex-direction:column}
  .hact .btn{width:auto}
  .btns .btn{width:100%}
}
@media print{header.site,.mmenu,footer .netstrip{display:none}}