/* Approved L2 mobile composition, 414px reference width.
   Coordinates are from pages/megs-lake.json (1792px vertical basis;
   horizontal frame: 414/29 inset, 27/29 content width). The steam hold
   adds scroll travel between the interior and the water, as in the study. */
@font-face{font-family:'L2 Plex';src:url('assets/fonts/IBMPlexMono-L2-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'L2 Plex';src:url('assets/fonts/IBMPlexMono-L2-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
.mobile-layout,.mobile-skip{display:none}
.mobile-topbar{display:none}
@media(max-width:700px){
  html{scroll-padding-top:20px;-webkit-text-size-adjust:100%}
  body{overflow-x:clip}
  .desktop-layout,.site-header,.desktop-skip{display:none}
  .mobile-skip{display:block}
  .mobile-layout{display:block;container-type:inline-size;background:#f2efe5;color:#292824;font-family:'L2 Plex',monospace;font-synthesis:none}
  .mobile-topbar{--bar-progress:0;position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:calc(50px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;background:rgba(242,239,229,calc(.7*var(--bar-progress)));color:#262b27;-webkit-backdrop-filter:blur(calc(8px*var(--bar-progress)));backdrop-filter:blur(calc(8px*var(--bar-progress)));font-family:'L2 Plex',monospace}
  .mobile-topbar a{color:inherit;text-decoration:none}
  .mobile-topbar-identity{font-size:20px;line-height:1;letter-spacing:-.035em}
  .mobile-topbar-identity small{display:block;margin-top:4px;font-size:7.84px;letter-spacing:0}
  .mobile-topbar .mobile-topbar-book{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:14px;display:flex;justify-content:center;align-items:center;gap:5px;width:112px;height:34px;padding:5px 10px;box-sizing:border-box;background:#b8774e;color:#181b16;border:1px solid #b8774e;border-radius:0;font-size:12px;line-height:1;letter-spacing:.035em;white-space:nowrap;box-shadow:none;transition:background-color .18s ease,color .18s ease;touch-action:manipulation}
  .mobile-topbar .mobile-topbar-book:hover,.mobile-topbar .mobile-topbar-book:focus-visible{background:#292824;color:#f2efe5}
  .mobile-topbar-book .book-stamp-arrow{font-size:16px;line-height:1;letter-spacing:0;margin-left:2px}
  .mobile-layout h1,.mobile-layout h2,.mobile-layout p,.mobile-layout em{font-family:inherit;font-weight:400;letter-spacing:-.035em}
  .l2-arrival,.l2-landscape{position:relative;height:calc(var(--height)*100cqw/414);overflow:hidden}
  .l2-landscape{background:#f2efe5}
  .l2-arrival-scroll{height:200svh;position:relative}
  .l2-arrival-scroll .l2-arrival{position:sticky;top:0;height:100svh}
  .l2-arrival .l2-image{height:100%;aspect-ratio:auto}
  .l2-arrival .l2-image:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.605) 0%,rgba(255,255,255,.33) 25%,rgba(255,255,255,0) 55%)}
  .mobile-layout #mobile-title{top:calc(var(--y)*100cqw/414 - 5svh)}
  .l2-landscape-scroll{position:relative;z-index:2;margin-top:0;padding-top:calc(10*100cqw/414);background:#f2efe5}
  .mobile-layout .ml-study .l2-piece,.mobile-layout .l2-piece{position:absolute;left:calc(var(--x)*100cqw/414);top:calc(var(--y)*100cqw/414);width:calc(var(--w)*100cqw/414);margin:0;padding:0}
  .mobile-layout .ml-study .l2-text,.mobile-layout .l2-text{z-index:3;font-family:'L2 Plex',monospace;font-size:calc(var(--size)*100cqw/414);font-weight:400;letter-spacing:-.035em;line-height:1;white-space:pre-wrap}
  .mobile-layout .l2-image{aspect-ratio:var(--ratio);overflow:hidden}
  .mobile-layout .l2-image img,.mobile-layout .l2-image video{width:100%;height:100%;object-fit:cover}
  .mobile-layout .ml-study{--chalk:#f2efe5;position:relative;z-index:1;margin-top:-100svh;padding-top:calc(45*100cqw/414);background:var(--chalk);color:#292824;font-family:'L2 Plex',monospace;--scene:max(100svh,calc(var(--scene-height)*100cqw/414))}
  .mobile-layout .sequence{max-width:none}
  .mobile-layout .window-chapter{height:calc(var(--scene)*2 + var(--opening-overflow,0px) + var(--reading-hold,0px))}
  .mobile-layout .stage{min-height:var(--scene);background:var(--chalk)}
  .mobile-layout .window{height:var(--scene);left:0;right:0}
  .mobile-layout .window video{object-position:center;opacity:1}
  .mobile-layout .window:after{background:linear-gradient(180deg,rgba(9,24,24,.75) 0%,rgba(9,24,24,.4) 15%,rgba(9,24,24,0) 30%)}
  .mobile-layout .water:after{background:linear-gradient(180deg,rgba(9,24,24,.5) 0%,rgba(9,24,24,.2) 25%,rgba(9,24,24,0) 50%)}
  .mobile-layout .l2-montage{height:calc(var(--pre-window-height)*100cqw/414 + var(--scene));min-height:var(--scene);padding:0;margin:0;background:var(--chalk);color:#292824}
  .mobile-layout .l2-window-view{height:var(--scene);aspect-ratio:auto}
  .mobile-layout .l2-window-view .warm-words,.mobile-layout .l2-window-view .headline-shade{opacity:1}
  .mobile-layout .l2-window-view .warm-words h2,.mobile-layout .l2-window-view .warm-words em{color:#fff;text-shadow:0 1px 8px #14201640}
  .mobile-layout .l2-window-view .headline-shade{height:100%;background:linear-gradient(180deg,transparent 35%,rgba(20,28,22,.28) 58%,rgba(20,28,22,.2) 72%,transparent 90%)}
  .mobile-layout .l2-montage>.l2-piece:not(.l2-interior){opacity:var(--editorial-opacity,1)}
  .mobile-layout #mobile-warmth-entry em{color:#292824}
  .mobile-layout #mobile-warmth-entry .ipad-view-accent{color:#b8774e}
  .mobile-layout .l2-interior{overflow:visible;z-index:2}
  .mobile-layout .sauna-image{width:100%;height:100%;position:relative}
  .mobile-layout .sauna-image #interior{object-fit:cover;object-position:center}
  .mobile-layout .steam{height:var(--scene)}
  .mobile-layout .words{inset:auto 0 0;height:var(--scene);width:100%;pointer-events:none}
  .mobile-layout .stage>.warm-words{bottom:0}
  .mobile-layout .warm-words em{color:inherit}
  .mobile-layout .warm-words .l2-text{top:calc(var(--scene)*.58);bottom:auto}
  .mobile-layout .headline-shade{height:calc(var(--scene)*.48)}
  .mobile-layout .plunge{height:calc(var(--water-height)*100cqw/414);margin-top:calc(-1*var(--scene));background:#8ea6a4}
  .mobile-layout .water-words{inset:0;height:100%}
  .mobile-layout .water video{object-position:center}
  /* Recreate the L2 thermometer as a sharp graphic at the same position. */
  .l2-heat{height:calc(176*100cqw/414);display:flex;align-items:center;justify-content:center;gap:calc(20*100cqw/414);overflow:hidden;transform:scale(1.1);transform-origin:top left}
  .l2-heat>span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:calc(10*100cqw/414);letter-spacing:.2em;line-height:1}
  .l2-thermometer{height:calc(132*100cqw/414);width:calc(37*100cqw/414);position:relative;background:repeating-linear-gradient(to top,transparent 0 20px,#262b2733 20px 21px) right top/14px 100% no-repeat}
  .l2-thermometer:before{content:'';position:absolute;width:2px;height:100%;background:#262b2720;left:3px}
  .l2-thermometer i{position:absolute;left:2px;bottom:-5px;width:4px;height:calc((100% + 5px)*var(--heat,0));background:#b8774e}
  .l2-thermometer b{position:absolute;left:-2px;bottom:-5px;width:12px;height:12px;border-radius:50%;background:#b8774e}
  .l2-map svg{display:block;width:100%;height:100%}
  .l2-landscape-film video{width:100%;height:100%;object-fit:cover}
  .l2-landscape-map-wrap{position:absolute;left:calc(281*100cqw/414);top:calc(592*100cqw/414);width:calc(118*100cqw/414);height:calc(118*100cqw/414)}
  .l2-map.is-drawn .lake-outline{animation:lake-outline-loop 6s ease-in-out infinite}
  .l2-map.is-drawn .lake-island{animation-delay:.65s}
  @keyframes lake-outline-loop{0%{stroke-dashoffset:1}48%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
  .l2-booking{margin:0;padding:calc(5*100cqw/414) calc(25*100cqw/414) calc(60*100cqw/414);background:#f2efe5;text-align:center;color:#262b27}
  .mobile-layout .l2-booking h2{font-size:calc(49*100cqw/414);line-height:1;margin:0;letter-spacing:-.035em;text-align:left}
  .l2-booking h2 em{color:#262b27}
  .l2-booking-details{display:grid;grid-template-columns:1fr 1fr;margin:calc(39*100cqw/414) 0 0;border-block:1px solid #262b2740}
  .l2-booking-details>div{min-height:calc(107*100cqw/414);padding:calc(24*100cqw/414) calc(5*100cqw/414)}
  .l2-booking-details>div:nth-child(odd){border-right:1px solid #262b2740}
  .l2-booking-details>div:nth-child(-n+2){border-bottom:1px solid #262b2740}
  .l2-booking-details dt{font-size:calc(7*100cqw/414);letter-spacing:.04em;margin-bottom:calc(10*100cqw/414)}
  .l2-booking-details dd{font-size:calc(20*100cqw/414);line-height:1.15;letter-spacing:-.035em;margin:0}
  .l2-booking-details small{display:block;font-size:calc(9*100cqw/414);margin-top:calc(10*100cqw/414);line-height:1.3}
  .l2-booking-button{display:flex;align-items:center;justify-content:center;gap:10px;background:none;color:#292824;font-size:calc(14*100cqw/414);font-weight:400;line-height:1.2;letter-spacing:.025em;text-transform:none;min-height:calc(59*100cqw/414);margin:calc(27*100cqw/414) calc(22*100cqw/414) 0;padding:0;cursor:pointer}
  .l2-booking-button>span{font-size:calc(28*100cqw/414)}
  .l2-booking-button:hover{background:none}
  .l2-booking-signoff-group{display:flex;flex-direction:column;align-items:center;gap:calc(18*100cqw/414);margin-top:calc(16*100cqw/414);padding-bottom:calc(30*100cqw/414)}
  .l2-booking-signoff{font-size:calc(18*100cqw/414);line-height:1.3;margin:0}
  .l2-booking-map-wrap{width:calc(118*100cqw/414);height:calc(118*100cqw/414)}
  .l2-booking-map{width:100%;height:100%;margin:0;overflow:hidden}
  .l2-booking-map .lake-outline{stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
  .l2-booking-map.is-drawn .lake-outline{animation-delay:-3s}
  .ml-day{background:#f2efe5;padding-top:calc(6.625*100cqw/414)}
  .ml-day h2{margin:0 calc(30*100cqw/414);font-size:calc(43*100cqw/414);line-height:1;letter-spacing:-.035em}
  .ml-day h2 em{font-style:italic}
  .ml-day p{margin:calc(19*100cqw/414) calc(30*100cqw/414) calc(25*100cqw/414);font-size:calc(18*100cqw/414);line-height:1.25}
  .ml-day img{display:block;width:100%;height:auto}
  .ml-stay{position:relative;height:calc(780*100cqw/414);background:#f2efe5}
  .ml-stay h2{position:absolute;left:calc(29*100cqw/414);top:calc(15.5*100cqw/414);margin:0;font-size:calc(45*100cqw/414);line-height:1;letter-spacing:-.035em}
  .ml-stay-image{position:absolute;margin:0}
  .ml-stay-image img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
  .ml-stay-image figcaption{position:absolute;margin:0;font-size:calc(9.5*100cqw/414);line-height:1.1;white-space:nowrap}
  .ml-stay-treehouse{left:calc(23*100cqw/414);top:calc(196.75*100cqw/414);width:calc(210*100cqw/414)}
  .ml-stay-treehouse figcaption{left:0;top:calc(-2px - 1.1em)}
  .ml-stay-hideaways{left:calc(237*100cqw/414);top:calc(283.75*100cqw/414);width:calc(171*100cqw/414)}
  .ml-stay-hideaways figcaption{left:0;top:calc(-2px - 1.1em)}
  .ml-stay-cottages{left:calc(40*100cqw/414);top:calc(466.75*100cqw/414);width:calc(189*100cqw/414)}
  .ml-stay-cottages figcaption{left:calc(199*100cqw/414);top:calc(126*100cqw/414)}
  .ml-stay-signoff{position:absolute;left:calc(205*100cqw/414);top:calc(108.75*100cqw/414);margin:0;font-size:calc(11.9*100cqw/414);line-height:1.2;white-space:nowrap;text-align:left}
  .ml-stay-signoff em{display:block;font-size:.9em}
  .ml-stay-signoff em{font-style:italic}
  .ml-night-icon{position:absolute;left:0;top:calc(112*100cqw/414);width:100%;height:calc(64*100cqw/414);overflow:visible}
  .ml-night-star{animation:ml-night-wave 6.4s ease-in-out infinite,ml-night-star-show 6.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.32s)}
  @keyframes ml-night-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
  @keyframes ml-night-star-show{0%,28%,72%,100%{opacity:0}44%,56%{opacity:1}}

  .mobile-layout .editorial-footer{padding:calc(42*100cqw/414) calc(29*100cqw/414) calc(34*100cqw/414);min-height:calc(399.4*100cqw/414);display:flex;flex-direction:column}
  .mobile-layout .editorial-footer-wordmark{font-size:clamp(43px,12.6cqw,58px)}
  .mobile-layout .editorial-footer-details{display:block;margin-top:calc(27*100cqw/414)}
  .mobile-layout .editorial-footer-details p{font-size:calc(12*100cqw/414)}
  .mobile-layout .editorial-footer-links{margin-top:calc(48*100cqw/414);gap:calc(17*100cqw/414)}
  .mobile-layout .editorial-footer-links>span{background:none;color:inherit;border:0;padding:0;font-size:inherit;font-weight:400;line-height:inherit;letter-spacing:inherit;text-transform:none;text-decoration:none}
  .mobile-layout .editorial-footer-bottom{margin-top:auto;padding-top:calc(15*100cqw/414);font-size:calc(9.5*100cqw/414)}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .mobile-topbar .mobile-topbar-book{transition:none}
  .ml-night-star{animation:none;opacity:1}
  .mobile-layout .ml-study{--scene:calc(var(--scene-height)*100cqw/414)}
  .mobile-layout .window-chapter{height:auto}
  .mobile-layout .stage{position:relative;top:auto}
  .mobile-layout .window{position:relative;inset:auto;margin:0}
  .mobile-layout .stage{display:flex;flex-direction:column}
  .mobile-layout .l2-montage{order:-1;mask-image:none;-webkit-mask-image:none;opacity:1}
  .mobile-layout .plunge{margin-top:0}
  .mobile-layout .warm-words{opacity:1}
  .l2-thermometer i{height:calc(100% + 5px)}
  .l2-map .lake-outline{stroke-dashoffset:0}
}

/* Phone sauna montage, arranged from the 3 November mobile reference. */
.phone-sauna-intro,.phone-sauna-welcome,.phone-sauna-kicker{display:none}
@media(max-width:700px){
  .mobile-layout .ml-study .l2-montage{height:calc(1376*100cqw/414 + var(--scene))}
  .mobile-layout .l2-montage>.l2-image:first-of-type,
  .mobile-layout .l2-montage>.l2-image:nth-of-type(3){display:none}
  .mobile-layout .ml-study #mobile-warmth-entry{left:calc(18*100cqw/414);top:calc(18*100cqw/414);width:calc(380*100cqw/414);font-size:calc(41*100cqw/414);line-height:1.08!important}
  .mobile-layout .ml-study .phone-sauna-intro,.mobile-layout .ml-study .phone-sauna-welcome{display:block;font-family:'L2 Plex',monospace;position:absolute;z-index:3;margin:0;padding:0;font-size:calc(16*100cqw/414);line-height:1.2;letter-spacing:-.035em}
  .mobile-layout .phone-sauna-intro{left:calc(18*100cqw/414);top:calc(135*100cqw/414);width:calc(380*100cqw/414)}
  .mobile-layout .ml-study .l2-interior{left:calc(18*100cqw/414);top:calc(198*100cqw/414);width:calc(380*100cqw/414);height:calc(475*100cqw/414)}
  .mobile-layout .ml-study #mobile-warmth{left:calc(20*100cqw/414);top:calc(683*100cqw/414);width:calc(380*100cqw/414);font-size:calc(16.2*100cqw/414);line-height:1}
  .mobile-layout .sauna-seat-break{display:none}
  .mobile-layout .ml-study .phone-sauna-entrance{left:calc(182*100cqw/414);top:calc(724*100cqw/414);width:calc(211*100cqw/414)}
  .mobile-layout .phone-sauna-welcome{left:calc(182*100cqw/414);top:calc(997*100cqw/414);width:calc(211*100cqw/414)}
  .mobile-layout .ml-study [data-coals-frame]{left:calc(15*100cqw/414);top:calc(1045*100cqw/414);width:calc(231*100cqw/414)}
  .mobile-layout .ml-study .l2-heat{left:calc(266*100cqw/414);top:calc(1091*100cqw/414);width:calc(125*100cqw/414);transform:none}
  .mobile-layout .ml-study .l2-window-view{top:calc(1376*100cqw/414)}
}

/* Phone chapter labels and the two outer montage rules. */
@media(max-width:700px){
  .mobile-layout .ml-study{padding-top:0}
  .mobile-layout .ml-study .l2-montage{border-top:calc(45*100cqw/414) solid transparent;box-sizing:content-box}
  .mobile-layout .ml-study .ml-eyebrow-sauna{display:block;left:calc(18*100cqw/414);top:calc(-22*100cqw/414)}
  .mobile-layout .ml-study .phone-sauna-kicker{display:block;position:absolute;z-index:4;right:calc(18*100cqw/414);top:calc(-22*100cqw/414);margin:0;color:#292824;font-family:'L2 Plex',monospace;font-size:9px;font-weight:400;line-height:1.4;letter-spacing:.1em;white-space:nowrap}
  .mobile-layout .ml-study .l2-montage:before{left:calc(18*100cqw/414);top:calc(-45*100cqw/414);width:calc(380*100cqw/414);height:calc(1421*100cqw/414);background:none}
  main.mobile-layout .ml-section-eyebrow{font-size:9px;line-height:1.4;letter-spacing:.1em}
}

/* Carry the same headline position through the lake-to-swim transition. */
@media(max-width:700px){
  .mobile-layout .ml-study .l2-window-view .warm-words{inset:0;height:100%}
  .mobile-layout .ml-study .warm-words #mobile-lake{left:calc(28*100cqw/414);top:calc(102.3107*100cqw/414);width:calc(370*100cqw/414);font-size:calc(65*100cqw/414);line-height:1}
  .mobile-layout .ml-study .warm-words .ml-eyebrow-swim{left:calc(28*100cqw/414);top:calc(102.3107*100cqw/414 - 24px)}
}

/* Close the phone page with the accommodation and footer in charcoal. */
@media(max-width:700px){
  main.mobile-layout .ml-stay{height:calc(780*100cqw/414);border-top:10px solid #292824;box-sizing:content-box;background:#292824;color:#f2efe5}
  .mobile-layout .ml-stay-lake{display:none}
  .mobile-layout .ml-stay h2 em{color:#f2efe5}
  main.mobile-layout .editorial-footer{background:#292824;color:#f2efe5}
  .mobile-layout .editorial-footer-details p{color:#f2efe5}
  .mobile-layout .editorial-footer-bottom{border-top-color:#f2efe533}
}

/* Final curtain: the coast holds while the dark ending passes over it. */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  main.mobile-layout .ml-day{position:sticky;top:var(--coast-pin-top,50px);z-index:1;min-height:calc(100svh - 50px);margin-bottom:12svh}
  main.mobile-layout .ml-stay,
  main.mobile-layout .editorial-footer{position:relative;z-index:2}
}

/* Coastal selection for the phone map. */
.phone-coast-stops{display:none}
.coast-heading-phone{display:none}
.phone-footer-lake{display:none}
@media(max-width:700px){
  .mobile-layout .l2-montage:before{display:none}
  .mobile-layout .phone-footer-lake{display:block;width:calc(76*100cqw/414);height:auto;margin:0;stroke:#b8774e;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
  .coast-heading-wide{display:none}
  .coast-heading-phone{display:inline}
  .mobile-layout .ml-day-map #map-location-markers,
  .mobile-layout .ml-day-map #map-geography,
  .mobile-layout .ml-day-map #map-watercolours,
  .mobile-layout .ml-day-map #map-labels{display:none}
  .mobile-layout .ml-day-map .phone-coast-stops{display:block}
  .mobile-layout .ml-day-map #map-lake-lockup{transform:translate(10px,0)}
  .mobile-layout .ml-day-map #map-sauna-smoke{transform:translate(222.542px,322.731px)}
}