/* Latest content updates */ .site-header{height:98px} .brand-logo{display:block;width:auto;height:76px;max-width:180px} footer .brand-logo{height:62px} .menu-photo{position:relative;display:block;min-height:365px;overflow:hidden;background:var(--night)} .menu-photo img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover} .menu-photo:after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,color-mix(in srgb,var(--night) 78.04%,transparent))} .menu-photo span{position:absolute;z-index:1;right:25px;bottom:22px;padding-bottom:5px;border-bottom:1px solid #fff;color:#fff;font-size:12px;font-weight:700} .events-footer{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:25px 0 0;color:var(--on-dark);font-size:14px} .events-footer p{margin:0} .events-footer .underlined{color:var(--yellow)} .event-more{display:inline-block;margin-top:15px;padding-bottom:5px;border-bottom:1px solid var(--yellow);color:var(--yellow);font-size:12px;font-weight:700} .delivery-button.foodora{background:#d70f64;color:#fff;border-radius:12px} .delivery-button.wolt{background:#00c2e8;color:#071f29;border-radius:12px} .delivery-button.foodora strong{font-size:24px;letter-spacing:-.05em} .delivery-button.wolt strong{font-size:22px;letter-spacing:-.06em} @media (max-width:800px){ .site-header{height:76px} .site-header nav{top:76px} .brand-logo{height:58px;max-width:140px} footer .brand-logo{height:54px} .menu-photo{min-height:290px;margin:0 0 45px} .menu-photo span{right:18px;bottom:16px} .events-footer{display:block} .events-footer .underlined{margin-top:18px} } /* ---- Data-driven menu with fish-silhouette dish photos ---- */ /* Everything in the Kínálat band is coloured from the --menu-* set, never from the page-wide --orange / --yellow. Those two are picked to sit on the dark header and hero, and land at 1.75:1 laid onto the band's own background — invisible. Every theme declares --menu-strong as "the emphasis colour that reads on --menu-bg", which is exactly the contract these need, and it holds whether a palette's band is pale or dark. */ .menu .eyebrow,.menu .section-label{color:var(--menu-strong)} .menu-source-toggle{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 2px;padding:4px;border:1px solid color-mix(in srgb,var(--menu-heading) 25.1%,transparent);border-radius:999px} .menu-source-button{min-width:130px;min-height:42px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--menu-heading);font:700 12px "DM Sans";letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s ease,color .15s ease} /* Inverting the band is what makes "selected" legible as a shape: a --yellow fill only separates from a dark band, and on the pale ones it sinks into the background at 1.26:1. */ .menu-source-button.is-active{background:var(--menu-strong);color:var(--menu-bg)} .menu-source-location{flex-basis:100%;margin:0;padding:0 16px;color:var(--menu-strong);font-size:12.5px;font-weight:600} .menu-list{margin-top:64px;display:grid;gap:56px} .menu-category-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;color:var(--menu-heading)} .menu-category-head h3{margin:0;color:var(--menu-heading);font-size:clamp(26px,3vw,38px);line-height:.95} .dish-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 46px} .dish-card{display:grid;grid-template-columns:146px minmax(0,1fr);gap:20px;align-items:center;padding:15px 0;border-top:1px solid color-mix(in srgb,var(--menu-ink) 18.04%,transparent)} /* Rounded, near-circular fish body (curved SVG outline) shows most of the photo. */ .fish-defs{position:absolute;width:0;height:0;overflow:hidden} /* The backing tint has to be mixed from --menu-ink rather than set to --mint: on the default palette --mint *is* the band, so a flat --mint fill left the silhouette invisible whenever an image failed to load. */ .dish-figure{width:146px;height:134px;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--menu-ink) 12%,transparent);filter:drop-shadow(0 3px 6px rgba(1,35,56,.3))} /* Two cut-outs, picked per dish by dishHasFish() in script.js: the fish silhouette belongs to the dishes that contain fish, and everything else takes the plain arch (icon test 5, "Sima forma"). The arch is a border-radius rather than a second clipPath so it needs nothing added to the page markup, and drop-shadow follows a rounded box just as it follows a clip. */ .dish-figure--fish{clip-path:url(#fishClip)} .dish-figure--plain{border-radius:73px 73px 18px 18px} /* The stand-in plate is decoration, not content — it sits back so it never competes with a row whose dish does have a real photo. It is one fixed bitmap across every palette, so on a dark band it would otherwise shout louder than the real photos; --menu-plate-blend lets those palettes push it back into their own background instead. */ .dish-figure--empty{opacity:.62;mix-blend-mode:var(--menu-plate-blend);filter:drop-shadow(0 2px 5px rgba(1,35,56,.18))} .dish-figure .dish-photo{width:100%;height:100%;object-fit:cover} .dish-body{min-width:0} .dish-title{display:flex;justify-content:space-between;align-items:baseline;gap:14px} .dish-title h4{margin:0;color:var(--menu-strong);font:600 19px/1.05 "Playfair Display";letter-spacing:-.03em} .dish-title b{flex:none;white-space:nowrap;color:var(--menu-strong);font:11px "DM Mono"} .dish-body p{margin:6px 0 0;color:var(--menu-muted);font-size:12.5px;line-height:1.45} /* The dusk terrace shot is portrait, so a centred crop cuts the lit sign in half on a wide screen. Biasing it upward keeps the sign whole beside the wordmark. */ .hero-image--upper{object-position:center 30%} /* The hero already drifts every slide from 1.08 down to 1. With five photos in the rotation the even ones run it the other way, so the movement reads as a slow in-and-out rather than the same push repeated. Reduced-motion is handled where the animation is declared. */ .hero-image:nth-child(even).is-active{animation-name:hero-zoom-in} @keyframes hero-zoom-in{from{transform:scale(1)}to{transform:scale(1.08)}} /* ---- The owner's word --------------------------------------------------------------------- */ /* A quiet band between the film and the reviews. The quote carries the section on its own, so the column is narrow enough to read in one go and the rule under the heading is the only ornament. */ .owner-word{padding:104px 0;background:var(--paper)} .owner-word-inner{max-width:760px} .owner-word h2{margin:12px 0 0;font-size:clamp(34px,4.2vw,56px);line-height:.96} .owner-word-lead{margin:30px 0 0;padding:0 0 0 26px;border-left:2px solid var(--yellow);color:var(--muted-strong);font:400 clamp(19px,2.1vw,25px)/1.5 "Playfair Display",serif} @media(max-width:800px){.owner-word{padding:70px 0}.owner-word-lead{padding-left:18px}} /* ---- Fish backdrop ---------------------------------------------------------------------- A shoal of the brand's own fish outline, faint, down the left and right edges of every flat band. It is a mask rather than a background image: the fill comes from the band's own currentColor, so it darkens a pale palette and lightens a dark one without a per-theme colour ever being written down. It rides a ::before at z-index -1, which paints above the band's background and below its content, so no section has to give up its own background shorthand and nothing in the markup moves. The middle of every band stays empty — the shoal is edge trim. */ :root{ --fish-shoal-left:url("assets/fish-shoal-left.svg"); --fish-shoal-right:url("assets/fish-shoal-right.svg"); } /* isolation is what makes the z-index:-1 layer land *inside* the band. Without a stacking context of its own a negative-z child drops behind the nearest one that has any, which is the page, and an opaque band then paints straight over it. The two bands that let a scroll arrow hang past their bottom edge also take an explicit z-index, so the arrow keeps sitting above the band below it now that the band below stacks too. */ .home-links,.menu,.events,.gallery,.contact,.service,.careers-intro,.contact-form-section,.google-reviews,.owner-word{position:relative;isolation:isolate} .contact,.service{z-index:1} /* overflow-x:clip stops the full-bleed layer below from adding a horizontal scrollbar, and overflow-clip-margin is what stops it from also clipping that layer back to this band's own box — without the margin the clip edge is the padding box and the widened backdrop is cut off again. */ .home-links{overflow-x:clip;overflow-clip-margin:50vw} .home-links::before,.menu::before,.events::before,.gallery::before,.contact::before,.service::before,.careers-intro::before,.contact-form-section::before,.google-reviews::before,.owner-word::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:currentColor;opacity:.13; -webkit-mask-image:var(--fish-shoal-left),var(--fish-shoal-right);mask-image:var(--fish-shoal-left),var(--fish-shoal-right); -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:340px auto,360px auto;mask-size:340px auto,360px auto; -webkit-mask-position:left -74px top var(--shoal-y,0px),right -80px top var(--shoal-y,0px);mask-position:left -74px top var(--shoal-y,0px),right -80px top var(--shoal-y,0px) } /* .home-links is its own .wrap, so unlike every other band its box stops at the content column and the backdrop stopped with it. This one's layer is stretched back out to the viewport edges; the overflow-x:clip above is what keeps the extra width from adding a horizontal scrollbar. */ .home-links::before{inset:0 calc(50% - 50vw)} /* The shoal is painted in the band's own currentColor, and a light mark on a dark band needs more of it than a dark mark on a pale one to land at the same faintness. .events is the one band that is dark in the default palette; under the night theme every band is. */ .events::before{opacity:.18} [data-theme="ejszaka"] .home-links::before,[data-theme="ejszaka"] .menu::before,[data-theme="ejszaka"] .events::before,[data-theme="ejszaka"] .gallery::before,[data-theme="ejszaka"] .contact::before,[data-theme="ejszaka"] .service::before,[data-theme="ejszaka"] .careers-intro::before,[data-theme="ejszaka"] .contact-form-section::before,[data-theme="ejszaka"] .google-reviews::before,[data-theme="ejszaka"] .owner-word::before{opacity:.18} /* Narrow screens have no side margin to spare, so the shoal shrinks and pulls halfway off each edge rather than swimming across the text. */ @media(max-width:800px){ .home-links::before,.menu::before,.events::before,.gallery::before,.contact::before,.service::before,.careers-intro::before,.contact-form-section::before,.google-reviews::before,.owner-word::before{ opacity:.1; -webkit-mask-size:190px auto,200px auto;mask-size:190px auto,200px auto; -webkit-mask-position:left -58px top var(--shoal-y,0px),right -64px top var(--shoal-y,0px);mask-position:left -58px top var(--shoal-y,0px),right -64px top var(--shoal-y,0px) } } @media(prefers-reduced-motion:no-preference){} /* On Kínálat the contact band lands directly under the menu band, and on the default palette both resolve to --mint, so the two read as one long section. The adjacent-sibling selector fires only on that pairing, which is why the band keeps its usual colour on every other page. Mixing toward --cream rather than naming a colour keeps it inside whichever palette is active: every theme defines both tokens, and a blend of the two can never land back on the menu band's own value. */ .menu + .contact{background-color:color-mix(in srgb,var(--mint) 42%,var(--cream))} /* The embedded map, sized to fit rather than to a fixed ratio. The address column stretches to the row height the other two columns already set, and the map takes whatever is left under the address — so adding it costs the band almost none of its original height. min-height is the floor that keeps it readable when the neighbouring columns happen to be short. The iframe stays lazy, so a page nobody scrolls to the bottom of never loads it. */ .contact-details{display:flex;flex-direction:column;align-self:stretch} .contact-map{margin-top:20px;flex:1;min-height:170px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)} .contact-map iframe{display:block;width:100%;height:100%;border:0} /* The repeated block at the foot of the other pages. It carries no scroll arrow, so it does not need the relative padding kapcsolat.html leaves for one. */ .contact-footer .contact-footer-cta{margin-top:26px} @media(max-width:800px){.contact-map{margin-top:16px;flex:none;aspect-ratio:4/3;min-height:0}} /* ---- Catering / Careers service sections ---- */ .service{padding:112px 0} .service.catering{background:var(--mint)} .service-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} .service.catering .eyebrow{color:var(--orange)} .service-copy h2{margin:14px 0 0;font-size:clamp(40px,5vw,68px);line-height:.92} .service-copy .copy{max-width:520px;margin:22px 0 0} .service-copy .button{margin-top:28px} .service-features,.positions{list-style:none;margin:6px 0 0;padding:0} .service-features li,.positions li{display:grid;gap:5px;padding:21px 0;border-top:1px solid var(--line)} .service-features li:last-child,.positions li:last-child{border-bottom:1px solid var(--line)} .service-features strong,.positions strong{font:600 22px/1.05 "Playfair Display";letter-spacing:-.03em} .service-features span,.positions span{color:var(--muted);font-size:13px;line-height:1.5} .service-highlights{list-style:none;margin:24px 0 8px;padding:0;display:grid;gap:12px} .service-highlights li{position:relative;padding-left:26px;color:var(--on-dark);font-size:14px;line-height:1.5} .service-highlights li:before{content:"≈";position:absolute;left:0;top:-1px;color:var(--yellow);font-size:17px} .service-photo{margin:0;min-height:370px;overflow:hidden;background:var(--deep)} .service-photo img{display:block;width:100%;height:100%;min-height:370px;object-fit:cover} /* Bigger, clearer navigation labels; collapse to a hamburger sooner so they still fit */ @media(min-width:1081px){#main-nav{gap:16px}#main-nav a{font-size:15px}#main-nav .nav-cta{padding:12px 16px}} @media(max-width:1080px){ .menu-toggle{display:block} #main-nav{display:none;position:absolute;top:98px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:16px 22px 26px;background:var(--deep)} #main-nav.open{display:flex} #main-nav a{padding:13px 2px;font-size:18px;opacity:.95} #main-nav .nav-cta{display:block;text-align:center;margin-top:10px} } @media(max-width:800px){#main-nav{top:76px}} @media (max-width:800px){ .menu-list{margin-top:44px;gap:44px} .dish-grid{grid-template-columns:1fr;gap:2px} .dish-card{grid-template-columns:116px minmax(0,1fr);gap:16px} .dish-figure{width:116px;height:110px} .dish-figure--plain{border-radius:58px 58px 14px 14px} .service{padding:78px 0} .service-grid,.service-grid.reversed{grid-template-columns:1fr;gap:34px} .service-grid.reversed .service-copy{order:0} .service-photo,.service-photo img{min-height:260px} } footer{flex-wrap:wrap} /* ---- Multi-page basics ---- */ [hidden]{display:none !important} body{display:flex;flex-direction:column;min-height:100vh} main{flex:1 0 auto} /* Interior pages have a single section; let it fill so its colour reaches the footer */ .page main{display:flex;flex-direction:column;padding-top:40px} .page main > section{flex:1 0 auto} /* ---- Home page: section teaser links ---- */ .home-links{padding:94px 0 104px} .home-links-head h2{margin:10px 0 0;font-size:clamp(38px,5vw,64px);line-height:.95} /* Five cards as a wrapping grid, so the row never overflows and there is no scrollbar to look at. Only the narrow layout below keeps the swipe strip. */ .home-links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:40px} .home-link{display:flex;flex-direction:column;gap:11px;min-height:220px;padding:26px 24px 22px;color:var(--ink);background:var(--card);border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .home-link h3{margin:0;font-size:27px;letter-spacing:-.03em} .home-link p{flex:1;margin:0;color:var(--muted);font-size:13.5px;line-height:1.5} .home-link b{color:var(--deep);font:11px "DM Mono";letter-spacing:.05em} .home-link:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(1,42,74,.15);border-color:transparent} .home-cta{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:46px;padding-top:34px;border-top:1px solid var(--line)} .home-cta p{margin:0;max-width:640px;font:600 clamp(22px,2.6vw,34px)/1.12 "Playfair Display";letter-spacing:-.03em} /* ---- Events page empty state ---- */ .events-empty{max-width:560px;margin-top:4px;color:var(--on-dark);font-size:15px;line-height:1.65} .events-empty p{margin:0 0 12px} .events-empty .underlined{color:var(--yellow)} @media (max-width:800px){ .page main{padding-top:20px} .home-links{padding:70px 0 78px} /* Swipe strip on phones; the scrollbar itself stays out of the design. */ .home-links-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none} .home-links-grid::-webkit-scrollbar{display:none} .home-link{flex:0 0 220px;min-height:0;scroll-snap-align:start} .home-cta{flex-direction:column;align-items:flex-start;gap:20px} } /* ---- Rólunk: scroll-driven lake film ---- Default (no JS) = a static illustration with the captions stacked underneath. script.js adds .is-live, which turns the stage into a sticky, scroll-scrubbed scene. */ .lake-story{position:relative;background:var(--deep);color:#fff} .lake-stage{position:relative;overflow:hidden} .lake-scene{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--water)} .lake-captions{display:grid;gap:18px;width:min(1220px,84vw);margin:0 auto;padding:44px 0 58px} .lake-caption{max-width:520px} .lake-caption .eyebrow{color:var(--yellow)} .lake-caption h2{margin:12px 0 0;color:#fff;font-size:clamp(30px,4vw,54px);line-height:.96} .lake-caption .copy{max-width:460px;margin:16px 0 0;color:var(--on-dark-2);font-size:15.5px;line-height:1.62} .lake-caption-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px} .lake-caption-actions .underlined{color:var(--yellow)} .lake-cue{display:none} /* The film is the first thing on the page, so it runs flush under the fixed header. */ .page main:has(> .lake-story:first-child), .page main:has(> .photo-story:first-child), .page main:has(> .film-story:first-child){padding-top:0} .lake-story.is-live .lake-track{height:480vh} .lake-story.is-live .lake-stage{position:sticky;top:0;height:100vh;height:100svh} .lake-story.is-live .lake-scene{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto} .lake-story.is-live .lake-captions{display:block;position:absolute;inset:0;width:auto;margin:0;padding:0;pointer-events:none} .lake-story.is-live .lake-caption{position:absolute;max-width:min(440px,76vw);padding:26px 28px 28px;background:color-mix(in srgb,var(--deep) 83.92%,transparent);border:1px solid #ffffff26;border-radius:2px;backdrop-filter:blur(6px);opacity:0;will-change:opacity,transform} .lake-story.is-live .lake-caption a{pointer-events:auto} .lake-story.is-live .lake-caption[data-caption="1"]{left:7vw;bottom:13vh} .lake-story.is-live .lake-caption[data-caption="2"]{right:7vw;bottom:15vh} .lake-story.is-live .lake-caption[data-caption="3"]{left:7vw;bottom:14vh} .lake-story.is-live .lake-cue{display:block;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);margin:0;color:#eaf7ff;font:10px "DM Mono";letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 12px rgba(1,35,56,.6)} .lake-story.is-live .lake-cue span{display:inline-block;margin-left:6px;animation:lake-cue-bob 1.8s ease-in-out infinite} @keyframes lake-cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} @media (max-width:800px){ .lake-story.is-live .lake-track{height:400vh} .lake-story.is-live .lake-caption{max-width:none;left:5vw;right:5vw;padding:20px 20px 22px} .lake-story.is-live .lake-caption[data-caption="1"], .lake-story.is-live .lake-caption[data-caption="2"], .lake-story.is-live .lake-caption[data-caption="3"]{left:5vw;right:5vw;bottom:11vh} .lake-caption .copy{font-size:14.5px} } /* ---- Rólunk (realista): the same film composed from photographic plates. The plates all live inside .photo-world, a box sized to cover the stage at the lake photo's own aspect, so every position below is a fraction of the photograph rather than of the viewport. */ .photo-story{position:relative;background:#0b131c;color:#fff} .photo-stage{position:relative;overflow:hidden;background:#0b131c} .photo-world{position:absolute;left:0;top:0;width:100%;height:100%} .photo-world img{display:block;width:100%;height:100%;object-fit:cover} .photo-layer{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform} /* Full-size layer so it shares the lake's transform box exactly; the strip sits inside it. */ .photo-water{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform} /* Depth of field: a fixed blur, never animated, so it stays off the compositor's critical path. */ .photo-water img{position:absolute;left:0;top:62%;width:100%;height:38%;filter:blur(1.4px)} .photo-fish{position:absolute;left:0;top:0;width:30%;transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 0 26px rgba(255,196,128,.42))} .photo-fish img{height:auto;object-fit:contain} .photo-splash{position:absolute;left:0;top:0;width:34%;aspect-ratio:400/240;transform-origin:50% 50%;will-change:transform,opacity;opacity:0} .photo-shore{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;will-change:transform,opacity} /* The truck was shot at midday; this warms it into the same golden hour as the lake plates. */ .photo-shore img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.34) saturate(1.2) hue-rotate(-12deg) brightness(.95) contrast(1.04)} /* One warm pass over everything so the plates read as a single photograph. */ .photo-grade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(200deg,#ffb96b33,#ff8a3d1f 42%,#08111c66);mix-blend-mode:soft-light} .photo-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(126% 94% at 50% 44%,transparent 52%,#040a1226 78%,#040a1273)} .photo-story .lake-captions{display:grid;gap:18px;width:min(1220px,84vw);margin:0 auto;padding:44px 0 58px} .photo-story .lake-caption{max-width:520px} .photo-story.is-live .lake-track{height:500vh} .photo-story.is-live .lake-stage{position:sticky;top:0;height:100vh;height:100svh} .photo-story.is-live .lake-captions{display:block;position:absolute;inset:0;width:auto;margin:0;padding:0;pointer-events:none} .photo-story.is-live .lake-caption{position:absolute;max-width:min(440px,76vw);padding:26px 28px 28px;background:#06111cd9;border:1px solid #ffffff26;border-radius:2px;backdrop-filter:blur(6px);opacity:0;will-change:opacity,transform} .photo-story.is-live .lake-caption a{pointer-events:auto} .photo-story.is-live .lake-caption[data-caption="1"]{left:7vw;bottom:13vh} .photo-story.is-live .lake-caption[data-caption="2"]{right:7vw;bottom:15vh} .photo-story.is-live .lake-caption[data-caption="3"]{left:7vw;bottom:14vh} .photo-story.is-live .lake-cue{display:block;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);margin:0;color:#f4e6d4;font:10px "DM Mono";letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 12px rgba(4,10,18,.7)} .photo-story.is-live .lake-cue span{display:inline-block;margin-left:6px;animation:lake-cue-bob 1.8s ease-in-out infinite} /* Without JS or with reduced motion the stage is one still frame of the film. */ .photo-story:not(.is-live) .photo-stage{aspect-ratio:16/9} .photo-story:not(.is-live) .photo-fish{left:44%;top:38%;transform:translate(-50%,-50%) rotate(-14deg)} .photo-credit{display:block;width:min(1220px,84vw);margin:0 auto;padding:0 0 34px;color:#9fb6c8;font-size:11.5px;line-height:1.6} .photo-credit a{border-bottom:1px solid #9fb6c855} @media (max-width:800px){ .photo-story.is-live .lake-track{height:420vh} .photo-story.is-live .lake-caption{max-width:none;left:5vw;right:5vw;padding:20px 20px 22px} .photo-story.is-live .lake-caption[data-caption="1"], .photo-story.is-live .lake-caption[data-caption="2"], .photo-story.is-live .lake-caption[data-caption="3"]{left:5vw;right:5vw;bottom:11vh} .photo-fish{width:44%} .photo-splash{width:38%} } /* ---- Rólunk (video): the filmed cut — rolunk-video.html. The shots are stacked in one frame and crossfaded by opacity; the page never reorders or hides them, so the browser keeps all three decoders warm and a hand-over never waits on a first paint. The