@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=Instrument+Serif:ital@0;1&display=swap');

:root { --ink:#11100e; --paper:#ffb100; --orange:#ff4f1f; --yellow:#ffca16; --cream:#fff4dd; --accent:#ff4f1f; --mono:'DM Mono', monospace; --sans:'DM Sans',sans-serif; --serif:'Instrument Serif', Georgia, serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); overflow-x:hidden; }
img { display:block; width:100%; height:100%; object-fit:cover; }
.hero { min-height:100svh; position:relative; overflow:hidden; color:var(--cream); background:var(--ink); clip-path:inset(0); }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; transform:scale(1.02); animation:reveal 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hero-image { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.13),rgba(0,0,0,.6)); pointer-events:none; }
.grain { pointer-events:none; z-index:4; opacity:.1; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
nav { position:relative; z-index:2; display:flex; justify-content:space-between; padding:27px 32px; font:500 11px var(--mono); letter-spacing:.05em; }.nav-actions { display:flex; align-items:center; gap:20px; }.language-switcher { display:flex; gap:7px; }.language-button { padding:0; border:0; background:transparent; color:inherit; opacity:.46; font:500 10px var(--mono); cursor:pointer; }.language-button:hover,.language-button:focus-visible,.language-button.is-active { opacity:1; color:var(--yellow); outline:none; }
a { color:inherit; text-decoration:none; }.wordmark { font:400 18px/.8 var(--serif); letter-spacing:-.04em; }.wordmark em { font-style:italic; }.menu-link span,.mail span { margin-left:.45em; }
.music-player { position:absolute; z-index:4; top:76px; right:32px; display:flex; align-items:center; gap:8px; color:var(--orange); font:10px var(--mono); }.music-count { display:flex; align-items:center; gap:5px; margin:0; letter-spacing:.08em; white-space:nowrap; }.music-favourites { font-size:8px; font-weight:700; opacity:.95; }.music-meta { display:flex; flex-direction:column; gap:3px; margin:0; line-height:1; transform:translateY(9px); white-space:nowrap; }.music-meta span:first-child { font-size:8px; text-transform:uppercase; letter-spacing:.08em; opacity:.8; }.music-meta span:last-child { font:15px/.9 var(--serif); letter-spacing:-.02em; }.music-actions { display:flex; align-items:center; gap:2px; }.music-button { width:25px; height:25px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; font:22px/.8 var(--serif); }.music-button:hover { color:var(--yellow); }.music-play { border:1px solid currentColor; border-radius:50%; font:10px var(--sans); }.spotify-embed { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.music-note { position:absolute; z-index:3; top:116px; right:clamp(320px,29vw,530px); display:flex; align-items:baseline; gap:8px; color:var(--cream); font:500 8px var(--mono); letter-spacing:.09em; pointer-events:none; opacity:0; animation:music-note-copy 4.6s 1.1s ease both; }.music-note em { font:400 15px/.9 var(--serif); letter-spacing:-.02em; }.music-note i { color:var(--yellow); font:14px/1 var(--serif); transform:rotate(38deg); }.music-note b { position:absolute; left:calc(100% + 7px); color:var(--yellow); font:14px/1 var(--serif); opacity:0; animation:music-note-heart 1.1s 4.6s ease both; }@keyframes music-note-copy { 0%,14% { opacity:0; transform:translateY(6px); } 25%,72% { opacity:.92; transform:none; } 89%,100% { opacity:0; transform:translateY(-3px); } }@keyframes music-note-heart { 0% { opacity:0; transform:scale(.65); } 28%,68% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(.82); } }
.music-note-heart { position:absolute; z-index:3; top:116px; right:clamp(292px,27.5vw,505px); margin:0; color:var(--yellow); font:14px/1 var(--serif); pointer-events:none; opacity:0; animation:music-note-heart 1.1s 4.6s ease both; }@media (max-width:600px) { .music-note-heart { top:145px; right:calc(50% - 113px); font-size:12px; } }
.music-note { display:block; animation:none; }.music-note-copy { display:flex; align-items:baseline; gap:8px; opacity:0; animation:music-note-text 4.8s 1.1s ease both; }.music-note .music-note-heart { position:absolute; z-index:1; top:50%; left:50%; right:auto; margin:0; color:var(--yellow); font:15px/1 var(--serif); pointer-events:none; opacity:0; animation:music-note-heart-final 1.05s 5.85s ease both; }.music-note-copy i { animation:music-note-arrow 3.55s 1.1s ease both; }@keyframes music-note-text { 0%,13% { opacity:0; transform:translateY(6px); } 24%,74% { opacity:.92; transform:none; } 90%,100% { opacity:0; transform:translateY(-3px); } }@keyframes music-note-arrow { 0%,68% { opacity:1; } 86%,100% { opacity:0; } }@keyframes music-note-heart-final { 0% { opacity:0; transform:translate(-50%,-50%) scale(.68); } 28%,67% { opacity:1; transform:translate(-50%,-50%) scale(1.14); } 82% { opacity:1; transform:translate(-50%,-50%) scale(.96); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.8); } }@media (max-width:600px) { .music-note { top:145px; right:20px; left:20px; }.music-note-copy { justify-content:center; gap:5px; font-size:7px; text-align:center; }.music-note-copy em { font-size:13px; }.music-note-copy i { font-size:0; transform:none; }.music-note-copy i::after { content:'↑'; font:12px/1 var(--serif); }.music-note .music-note-heart { top:50%; left:50%; font-size:13px; } }
.music-note { opacity:1; }.music-note-copy,.music-note .music-note-heart,.music-note-copy i { animation:none; }.hero.show-music-note .music-note-copy { animation:music-note-text 4.8s 1.1s ease both; }.hero.show-music-note .music-note-copy i { animation:music-note-arrow 3.55s 1.1s ease both; }.hero.show-music-note .music-note-heart { animation:music-note-heart-final 1.05s 5.85s ease both; }
.music-note-copy { position:relative; padding-bottom:31px; }.music-note .music-note-copy i { position:absolute; bottom:3px; left:50%; color:var(--yellow); font:17px/1 var(--serif); transform:translateX(-50%); }.music-note .music-note-heart { top:auto; bottom:3px; left:50%; }@media (max-width:600px) { .music-note .music-note-copy i { font-size:15px; transform:translateX(-50%); }.music-note-copy i::after { content:none; } }
.music-note-copy { display:flex; flex-direction:column; align-items:center; gap:7px; padding-bottom:0; }.music-note-words { display:flex; align-items:baseline; gap:8px; }.music-note .music-note-copy i { position:static; color:var(--yellow); font:17px/1 var(--serif); transform:none; }.music-note .music-note-heart { top:50%; bottom:auto; left:50%; }@media (max-width:600px) { .music-note-words { gap:5px; }.music-note .music-note-copy i { font-size:15px; transform:none; } }
.music-note-copy { opacity:1; animation:none!important; }.music-note-words,.music-note .music-note-copy i { opacity:0; animation:none; }.hero.show-music-note .music-note-copy i { animation:music-note-arrow-first 10.6s .55s ease both; }.hero.show-music-note .music-note-words { animation:music-note-words-in 9.5s 1.65s ease both; }.hero.show-music-note .music-note-heart { animation:music-note-heart-final 1.05s 11.15s ease both; }@keyframes music-note-arrow-first { 0%,8% { opacity:0; transform:translateY(5px); } 16%,84% { opacity:1; transform:none; } 96%,100% { opacity:0; transform:translateY(-3px); } }@keyframes music-note-words-in { 0%,8% { opacity:0; transform:translateX(-16px); } 18%,88% { opacity:.92; transform:none; } 96%,100% { opacity:0; transform:translateX(5px); } }
.music-note { top:142px; right:10px; left:auto; width:500px; text-align:center; }.music-note-copy { align-items:center; }.music-note-words { justify-content:center; }.music-note .music-note-copy i { display:block; width:30px; height:38px; font-size:0; }.music-note .music-note-copy i svg { display:block; width:100%; height:100%; }.music-note .music-note-copy i path { fill:none; stroke:currentColor; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:64; stroke-dashoffset:64; }.hero.show-music-note .music-note-copy i path { animation:music-note-arrow-draw .76s .82s cubic-bezier(.2,.7,.2,1) forwards; }@keyframes music-note-arrow-draw { to { stroke-dashoffset:0; } }@media (max-width:600px) { .music-note { top:145px; right:20px; left:20px; width:auto; }.music-note .music-note-copy i { width:auto; height:auto; font-size:0; }.music-note .music-note-copy i svg { display:none; }.music-note .music-note-copy i::after { content:'↑'; font:15px/1 var(--serif); } }
@media (max-width:600px) { .music-note .music-note-copy i { width:30px; height:38px; }.music-note .music-note-copy i svg { display:block; }.music-note .music-note-copy i::after { content:none; } }
@media (min-width:601px) { .music-note { font-size:8.8px; }.music-note em { font-size:16.5px; }.music-note .music-note-copy i { font-size:18.7px; } }
.hero-copy { position:absolute; z-index:2; left:clamp(24px,8vw,130px); bottom:clamp(48px,10vh,100px); }.eyebrow { font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.1em; margin:0 0 18px; }.hero-links a { transition:color .2s ease; }.hero-links a:hover,.hero-links a:focus-visible { color:var(--yellow); outline:none; }
h1,h2 { font:400 clamp(58px,9.2vw,142px)/.84 var(--serif); letter-spacing:-.04em; margin:0; } h1 em,h2 em { font-weight:400; } h1 { max-width:7.5ch; font-size:clamp(49px,7.82vw,121px); } .scroll { display:inline-flex; gap:14px; margin-top:42px; padding-bottom:6px; border-bottom:1px solid currentColor; font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.hero-index { position:absolute; z-index:2; right:32px; bottom:27px; margin:0; font:10px var(--mono); }
.section-pad { padding-left:clamp(24px,8vw,130px); padding-right:clamp(24px,8vw,130px); }.intro { padding-top:26vh; padding-bottom:27vh; position:relative; background:var(--orange); }.intro p { max-width:850px; margin:0; font-size:clamp(32px,4.6vw,70px); line-height:.94; letter-spacing:-.055em; }.intro span { color:var(--cream); font-style:italic; font-family:var(--serif); font-size:1.12em; }
.story { padding-bottom:19vw; position:relative; }.lisbon { background:var(--yellow); }.story-head { margin-bottom:clamp(56px,10vw,150px); position:relative; z-index:2; }.story-head h2 { font-size:clamp(58px,8.5vw,132px); }.story-note { max-width:230px; margin:36px 0 0; font-size:13px; line-height:1.35; }.media { margin:0; overflow:hidden; background:#c9c5bc; position:relative; }.media img { transition:transform 1.3s cubic-bezier(.2,.6,.2,1); }.media:hover img { transform:scale(1.055); }.media figcaption { position:absolute; right:12px; bottom:10px; color:white; font:9px var(--mono); text-shadow:0 1px 5px #333; }.chapter-number { position:absolute; margin:0; font:clamp(110px,22vw,330px)/.7 var(--serif); color:rgba(17,16,14,.12); pointer-events:none; letter-spacing:-.08em; z-index:0; }
.thumb { box-shadow:0 18px 38px rgba(22,22,19,.13); }.memory-grid { display:grid; position:relative; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:clamp(170px,20vw,300px) clamp(145px,16vw,240px); gap:clamp(12px,3vw,50px); align-items:end; }.memory-1 { grid-row:span 2; aspect-ratio:.8; z-index:2; }.memory-2 { grid-column:2 / 4; aspect-ratio:1.7; align-self:start; margin-top:-7vw; z-index:1; }.memory-3 { grid-column:2; aspect-ratio:.82; margin-left:14%; z-index:3; }.memory-4 { grid-column:4; aspect-ratio:1; align-self:center; margin-top:25%; z-index:2; }
.video-block { padding:8vw clamp(24px,8vw,130px) 20vw; background:var(--ink); }.video-heading { color:var(--yellow); margin-bottom:clamp(34px,6vw,82px); }.video-placeholder { width:min(63vw,820px); aspect-ratio:1.45; height:auto; position:relative; overflow:hidden; color:#fff; margin-left:auto; box-shadow:16px 16px 0 var(--orange),0 30px 55px rgba(0,0,0,.3); }.inline-film { display:block; width:100%; height:100%; object-fit:cover; background:#000; }.video-label { position:absolute; bottom:12px; left:14px; margin:0; color:#fff; font:9px var(--mono); pointer-events:none; text-shadow:0 1px 6px #000; }
.friends { background:var(--orange); padding-top:8vw; }.align-right { text-align:right; }.align-right .eyebrow { margin-right:4px; }.friends-grid { display:grid; position:relative; grid-template-columns:1.15fr .85fr; gap:clamp(20px,7vw,110px); align-items:center; }.friends-main,.friends-small { display:grid; grid-template-rows:minmax(0,1fr) auto; padding:9px 9px 30px; overflow:hidden; background:#fffaf0; }.friends-main img,.friends-small img { height:100%; }.friends-main figcaption,.friends-small figcaption { position:static; align-self:end; padding:8px 2px 0; color:var(--ink); font:9px var(--mono); text-shadow:none; }.friends-main { width:70%; justify-self:end; aspect-ratio:.88; z-index:2; transform:rotate(-1.5deg); }.friends-small { width:72%; aspect-ratio:1.15; margin-top:-9vw; z-index:3; transform:rotate(2.5deg); }.side-quote { font:clamp(20px,2.2vw,32px)/1 var(--serif); margin:0; max-width:280px; z-index:2; }
.surf { padding-top:21vw; padding-bottom:0; background:var(--cream); }.ocean-grid { display:grid; position:relative; grid-template-columns:1.35fr .65fr; gap:clamp(20px,7vw,110px); align-items:center; }.ocean-main { width:73%; aspect-ratio:1.16; z-index:2; }.ocean-small { width:75%; aspect-ratio:.75; justify-self:end; margin-top:13vw; z-index:3; }.about-section { min-height:100svh; padding-top:8vw; padding-bottom:10vw; position:relative; overflow:hidden; background:#003FB5; color:#fff; }.about-section > .eyebrow { color:#fff; }.about-board { width:min(66vw,880px); margin:clamp(20px,4vw,60px) auto 0; position:relative; }.about-board > img:first-child { display:block; width:100%; height:auto; }.about-record-cover { position:absolute; z-index:2; top:49%; left:4%; width:16%; height:auto; aspect-ratio:1; object-fit:cover; transform:rotate(-7deg); box-shadow:0 6px 10px rgba(0,0,0,.25); }.about-music-caption { position:absolute; z-index:3; top:52%; left:22%; margin:0; color:#fff; font:400 clamp(11px,1.5vw,18px)/.92 'Caveat',cursive; transform:rotate(-4deg); }.about-music-caption b { display:block; margin-bottom:3px; font-weight:500; font-size:1.14em; }.about-music-caption span { display:block; font-size:.8em; line-height:1.04; }.mail { margin-top:20px; font-size:clamp(16px,2vw,26px); border-bottom:1px solid; width:max-content; padding-bottom:4px; }.copyright { position:absolute; bottom:30px; font:9px var(--mono); letter-spacing:.06em; }
.site-farewell { position:absolute; right:70px; bottom:27px; margin:0; color:#fff; font:500 9px var(--mono); letter-spacing:.08em; text-align:right; }.site-farewell em { display:block; margin-top:6px; font:400 16px/.9 var(--serif); letter-spacing:-.02em; }
@media (prefers-reduced-motion:no-preference) { [data-reveal] > :not(.chapter-number), .story-head, .outro > * { opacity:0; transform:translateY(38px); transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1); } [data-reveal].is-visible > :not(.chapter-number), .story-head.is-visible, .outro.is-visible > * { opacity:1; transform:none; } [data-reveal] > :nth-child(3), .outro > :nth-child(3) { transition-delay:.12s; } [data-reveal] > :nth-child(4) { transition-delay:.22s; } [data-reveal] > :nth-child(5) { transition-delay:.32s; } }
@keyframes reveal { from { opacity:0; transform:scale(1.09); } to { opacity:1; transform:scale(1.02); } }
.friends-main figcaption,.friends-small figcaption { padding:7px 3px 0; color:#11100e; font:500 clamp(17px,1.7vw,24px)/.8 'Caveat',cursive; letter-spacing:.01em; text-align:center; }
.friends-mosaic { grid-column:1 / -1; display:grid; grid-template-columns:1.1fr 1.52fr .72fr; gap:clamp(13px,2.5vw,34px); align-items:center; margin:clamp(28px,6vw,76px) auto 0; width:min(94%,1040px); }.friends-mosaic-card { position:relative; margin:0; padding:8px 8px 26px; background:#fffaf0; box-shadow:0 18px 34px rgba(17,16,14,.22); }.friends-mosaic-card::before { content:''; position:absolute; z-index:2; top:-7px; left:50%; width:11px; height:11px; border-radius:50%; background:var(--yellow); box-shadow:0 2px 3px rgba(17,16,14,.3); transform:translateX(-50%); }.friends-mosaic-card img { display:block; width:100%; height:100%; object-fit:cover; }.mosaic-odeceixe-one { aspect-ratio:1.14; transform:rotate(-3.5deg) translateY(13px); }.mosaic-odeceixe-two { aspect-ratio:1.62; transform:rotate(1.8deg) translateY(-9px); }.mosaic-dani { aspect-ratio:.72; transform:rotate(4deg) translateY(5px); }.mosaic-odeceixe-two::before { background:var(--cream); }.mosaic-dani::before { background:var(--ink); }
@media (max-width:600px) { .friends-mosaic { grid-template-columns:1fr 1fr; gap:15px; width:100%; margin-top:45px; }.mosaic-odeceixe-one { aspect-ratio:1.05; transform:rotate(-3deg) translateY(8px); }.mosaic-odeceixe-two { aspect-ratio:1.35; transform:rotate(2deg) translateY(-7px); }.mosaic-dani { grid-column:2; width:78%; justify-self:end; aspect-ratio:.72; transform:rotate(4deg) translateY(-11px); } }
@media (min-width:601px) { .friends-grid { grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:clamp(190px,16vw,290px) clamp(170px,14vw,250px) clamp(145px,12vw,215px); min-height:clamp(590px,43vw,820px); gap:clamp(16px,2.7vw,46px); align-items:stretch; }.friends-main { grid-column:1 / 5; grid-row:1 / 3; width:100%; margin:0; align-self:end; justify-self:stretch; transform:rotate(-2.4deg); }.side-quote { grid-column:5 / 9; grid-row:1; align-self:end; margin:0 0 12px; max-width:260px; }.friends-small { grid-column:9 / 13; grid-row:1 / 3; width:88%; margin:0; align-self:start; justify-self:end; transform:rotate(3deg); }.friends-mosaic { grid-column:4 / 10; grid-row:2 / 4; align-self:center; width:100%; margin:0; grid-template-columns:1.02fr 1.48fr .7fr; gap:clamp(12px,1.8vw,27px); }.mosaic-odeceixe-one { transform:rotate(-5deg) translateY(16px); }.mosaic-odeceixe-two { transform:rotate(2.5deg) translateY(-18px); }.mosaic-dani { transform:rotate(5deg) translateY(11px); }.friends-mosaic-card { padding:8px 8px 27px; } }
@media (min-width:601px) { .friends-mosaic { width:110%; margin-left:-5%; }.mosaic-odeceixe-one { z-index:6; width:135%; margin-left:-30%; transform:rotate(-5deg) translateY(-14px); box-shadow:0 23px 42px rgba(17,16,14,.28); }.mosaic-odeceixe-two,.mosaic-dani { transform:scale(1.07) rotate(2.5deg) translateY(-18px); }.mosaic-dani { transform:scale(1.07) rotate(5deg) translateY(11px); } }
.surf-check { position:relative; overflow:hidden; padding-top:clamp(90px,14vw,180px); padding-bottom:clamp(92px,13vw,170px); background:#003FB5; color:#fff; }.surf-check::after { content:'♥'; position:absolute; right:-.08em; bottom:-.33em; color:rgba(255,255,255,.06); font:clamp(240px,48vw,720px)/1 var(--serif); pointer-events:none; }.surf-check-heading { display:flex; align-items:baseline; justify-content:space-between; gap:40px; position:relative; z-index:1; }.surf-check .eyebrow { margin-bottom:0; color:#fff; }.surf-check-intro { max-width:270px; margin:0; font:clamp(18px,2vw,27px)/.95 var(--serif); text-align:right; }.spot-switcher { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:clamp(55px,9vw,120px); padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.38); }.spot-button { padding:0 0 5px; border:0; border-bottom:1px solid transparent; background:none; color:rgba(255,255,255,.6); cursor:pointer; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.08em; transition:color .2s ease,border-color .2s ease; }.spot-button:hover,.spot-button:focus-visible,.spot-button.is-active { color:#fff; border-bottom-color:#fff; outline:none; }.surf-check-content { position:relative; z-index:1; padding-top:clamp(38px,6vw,80px); }.surf-mood { max-width:10ch; margin:0 0 clamp(46px,7vw,92px); font:400 clamp(50px,7.6vw,116px)/.82 var(--serif); letter-spacing:-.04em; }.surf-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }.surf-stat { min-width:0; padding-top:10px; border-top:1px solid rgba(255,255,255,.45); }.surf-stat span,.surf-updated { font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.08em; }.surf-stat span { display:block; margin-bottom:13px; color:rgba(255,255,255,.62); }.surf-stat strong { display:block; white-space:nowrap; font:400 clamp(21px,2.5vw,38px)/.9 var(--serif); letter-spacing:-.03em; }.surf-updated { margin:clamp(40px,6vw,76px) 0 0; color:rgba(255,255,255,.65); }.surf-updated time { color:#fff; }.surf-check.is-loading .surf-mood { opacity:.65; }
.surf-check::after { content:none; }.surf-check-intro { max-width:210px; font-size:clamp(14px,1.35vw,18px); opacity:.68; }.surf-ghost { position:absolute; z-index:0; top:18%; left:50%; display:flex; align-items:flex-end; transform:translateX(-50%); color:rgba(255,255,255,.06); font:400 clamp(220px,35vw,570px)/.66 var(--serif); letter-spacing:-.09em; pointer-events:none; }.surf-ghost small { margin:0 0 .06em .12em; font:500 clamp(35px,5vw,78px)/1 var(--mono); letter-spacing:-.08em; }.surf-bearing { position:absolute; z-index:0; top:30%; left:50%; margin:0; transform:translateX(-50%); color:rgba(255,255,255,.12); font:500 clamp(14px,2vw,27px)/1 var(--mono); letter-spacing:.08em; white-space:nowrap; }.surf-bearing b { color:rgba(255,255,255,.22); font-weight:400; }.surf-contours { position:absolute; z-index:0; right:-5%; bottom:-24%; width:min(52vw,720px); height:auto; fill:none; stroke:rgba(255,255,255,.14); stroke-width:1.4; pointer-events:none; }.surf-stat strong,.surf-updated time,.surf-ghost span,.surf-bearing { transition:opacity .18s ease,transform .32s cubic-bezier(.2,.7,.2,1); }.surf-stat strong.is-changing,.surf-updated time.is-changing,.surf-ghost span.is-changing,.surf-bearing.is-changing { animation:surf-data-in .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes surf-data-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
.mood-check { --mood-bg:var(--cream); --mood-ink:var(--ink); position:relative; min-height:100svh; padding-top:clamp(90px,14vw,180px); padding-bottom:clamp(90px,12vw,150px); overflow:hidden; background:var(--mood-bg); color:var(--mood-ink); transition:background-color .55s cubic-bezier(.2,.7,.2,1),color .55s ease; }.mood-check.mood-low { --mood-bg:#003FB5; --mood-ink:#fff; }.mood-check.mood-steady { --mood-bg:var(--orange); --mood-ink:var(--cream); }.mood-check.mood-bright { --mood-bg:var(--yellow); --mood-ink:var(--ink); }.mood-check .eyebrow { color:currentColor; }.mood-intro { display:grid; grid-template-columns:1.35fr .65fr; gap:40px; align-items:end; margin-top:clamp(55px,9vw,120px); }.mood-intro h2 { max-width:9ch; font-size:clamp(52px,7.6vw,115px); }.mood-options { display:flex; justify-content:flex-end; align-items:center; gap:clamp(18px,3.5vw,55px); }.mood-button { display:grid; place-items:center; width:clamp(54px,6vw,88px); aspect-ratio:1; padding:0 0 .17em; border:1px solid currentColor; border-radius:50%; background:transparent; color:currentColor; cursor:pointer; font:400 clamp(36px,4vw,60px)/1 var(--serif); transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s ease,color .25s ease; }.mood-button:hover,.mood-button:focus-visible,.mood-button.is-active { transform:translateY(-7px) rotate(-5deg); background:var(--mood-ink); color:var(--mood-bg); outline:none; }.mood-button:nth-child(2):hover,.mood-button:nth-child(2):focus-visible,.mood-button:nth-child(2).is-active { transform:translateY(-5px); }.mood-button:nth-child(3):hover,.mood-button:nth-child(3):focus-visible,.mood-button:nth-child(3).is-active { transform:translateY(-7px) rotate(5deg); }.mood-result { min-height:260px; margin-top:clamp(75px,13vw,180px); padding-top:24px; border-top:1px solid color-mix(in srgb,currentColor 42%,transparent); }.mood-prompt,.mood-kicker { margin:0; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.08em; }.mood-prompt { opacity:.62; }.mood-card { display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:end; }.mood-card h3 { max-width:8ch; margin:20px 0 0; font:400 clamp(50px,7vw,110px)/.82 var(--serif); letter-spacing:-.04em; }.mood-card p { max-width:340px; margin:0 0 4px auto; font:clamp(20px,2.2vw,31px)/.95 var(--serif); }.mood-card a { display:inline-flex; margin-top:28px; padding-bottom:5px; border-bottom:1px solid currentColor; color:inherit; font:500 10px var(--mono); letter-spacing:.08em; }.mood-placeholder { max-width:490px; font:400 clamp(36px,5vw,72px)/.86 var(--serif); letter-spacing:-.04em; }.mood-result > * { animation:mood-result-in .45s cubic-bezier(.2,.7,.2,1) both; }@keyframes mood-result-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (max-width:600px) { nav { padding:22px 20px; }.nav-actions { gap:12px; }.language-switcher { gap:5px; }.music-player { top:56px; left:20px; right:auto; gap:6px; }.music-note { top:145px; right:20px; left:20px; justify-content:center; gap:5px; font-size:7px; text-align:center; }.music-note em { font-size:13px; }.music-note i { font-size:12px; transform:rotate(43deg); }.music-note b { left:calc(50% + 102px); }.music-meta { min-width:108px; }.music-meta span:last-child { font-size:14px; }.music-actions { gap:0; }.music-button { width:22px; }.music-count { display:flex; gap:4px; font-size:8px; }.music-favourites { font-size:7px; }.hero-index { right:20px; bottom:20px; }.hero-copy { left:24px; }.intro { padding-top:18vh; padding-bottom:18vh; }.story-head { margin-bottom:42px; }.story-note { margin-top:26px; }.memory-grid { grid-template-columns:1fr 1fr; grid-template-rows:62vw 36vw 45vw; }.memory-1 { grid-row:span 2; }.memory-2 { grid-column:2; }.memory-3 { grid-column:1 / 3; grid-row:3; }.memory-4 { display:none; }.video-block { padding-left:24px; padding-right:24px; }.video-placeholder { width:100%; height:auto; }.friends-grid { grid-template-columns:1fr 1fr; }.friends-main { width:100%; aspect-ratio:.86; }.friends-small { width:100%; }.side-quote { font-size:19px; }.ocean-grid { grid-template-columns:1.2fr .8fr; gap:14px; }.ocean-main,.ocean-small { width:100%; }.about-section { min-height:88svh; padding-top:12vw; }.about-board { width:100%; margin-top:26px; }.about-caption { font-size:clamp(8px,2.7vw,13px); }.caption-headphones,.caption-wetsuit,.caption-phone { right:0; }.copyright { bottom:18px; }.site-farewell { right:54px; bottom:18px; font-size:8px; }.site-farewell em { font-size:14px; } }
@media (max-width:600px) { .surf-check-heading { display:block; }.surf-check-intro { margin-top:22px; text-align:left; }.spot-switcher { gap:10px 16px; margin-top:52px; }.surf-stats { grid-template-columns:repeat(2,1fr); gap:24px 15px; }.surf-stat:last-child { grid-column:span 2; }.surf-mood { max-width:11ch; font-size:clamp(48px,14vw,72px); }.surf-check::after { right:-.22em; } }
@media (max-width:600px) { .surf-ghost { top:25%; font-size:clamp(170px,53vw,250px); }.surf-bearing { top:37%; font-size:13px; }.surf-contours { right:-35%; bottom:-8%; width:115vw; } }
@media (max-width:600px) { .mood-intro { grid-template-columns:1fr; gap:44px; }.mood-options { justify-content:flex-start; }.mood-result { min-height:300px; margin-top:82px; }.mood-card { grid-template-columns:1fr; gap:34px; }.mood-card p { margin:0; }.mood-card h3 { font-size:clamp(50px,15vw,74px); } }
@media (max-width:600px) { .mood-check.mood-has-recommendation { padding-bottom:35svh; } }
.mood-check,.mood-check.mood-low { --mood-bg:#fff; --mood-ink:var(--ink); }
.mood-card > div:first-child { justify-self:start; align-self:start; }.mood-card .mood-kicker { margin-left:-.08em; }.mood-tag { margin:20px 0 0!important; font:500 10px var(--mono)!important; letter-spacing:.16em; }.mood-links { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:28px; }.mood-card .mood-links a { margin:0; }
.mood-easter-egg { display:block; margin:21px 0 0; padding:0; border:0; background:none; color:inherit; cursor:pointer; font:500 8px var(--mono); letter-spacing:.1em; opacity:.56; transition:opacity .2s ease; }.mood-easter-egg:hover,.mood-easter-egg:focus-visible { opacity:1; outline:none; }
.mood-easter-egg-blue { color:#003FB5; opacity:1; }
.mood-story { max-width:37ch; margin-top:25px; padding-top:13px; border-top:1px solid color-mix(in srgb,#003FB5 35%,transparent); color:#003FB5; animation:mood-story-in .42s cubic-bezier(.2,.7,.2,1) both; }.mood-story b { display:block; margin-bottom:10px; font:500 9px var(--mono); letter-spacing:.14em; }.mood-card .mood-story p { max-width:none; margin:0; font:400 clamp(16px,1.45vw,21px)/1.02 var(--serif); }.mood-story p em + br + em { display:inline-block; margin-top:8px; }@keyframes mood-story-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }.mood-result { transition:opacity .16s ease,transform .16s ease; }.mood-result.is-switching { opacity:0; transform:translateY(-5px); }
.mood-links button,.mood-browse button,.try-another { padding:0 0 5px; border:0; border-bottom:1px solid currentColor; background:none; color:inherit; cursor:pointer; font:500 10px var(--mono); letter-spacing:.08em; }.mood-links button:hover,.mood-links button:focus-visible,.mood-browse button:hover,.mood-browse button:focus-visible,.try-another:hover,.try-another:focus-visible { opacity:.58; outline:none; }.mood-browse { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }.mood-browse .mood-kicker { margin-bottom:14px; }.mood-browse button { font:400 clamp(29px,4vw,56px)/.9 var(--serif); letter-spacing:-.03em; text-align:left; }.try-another { display:block; margin-top:clamp(44px,6vw,76px); opacity:.68; }
@media (max-width:600px) { .music-player { top:88px; } }
.mood-community { max-width:430px; margin:clamp(46px,7vw,88px) 0 0 auto; padding-top:13px; border-top:1px solid currentColor; color:currentColor; }.mood-community p { margin:0; }.mood-community p:first-child { font:500 10px var(--mono); letter-spacing:.08em; }.mood-community p:last-child { margin-top:7px; font:400 clamp(16px,1.7vw,23px)/.95 var(--serif); opacity:.74; }
.kept-film { min-height:72svh; padding-top:clamp(90px,13vw,170px); padding-bottom:clamp(90px,13vw,170px); background:var(--ink); color:var(--cream); }.kept-film .eyebrow { color:var(--yellow); }.kept-film-content { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; margin-top:clamp(65px,11vw,150px); }.kept-film-content p { max-width:9ch; margin:0; font:400 clamp(48px,7.3vw,108px)/.84 var(--serif); letter-spacing:-.045em; }.kept-film-content a { justify-self:end; padding-bottom:6px; border-bottom:1px solid currentColor; color:var(--yellow); font:500 10px var(--mono); letter-spacing:.08em; }.kept-film-content a:hover { color:var(--cream); }
.places-film { position:relative; width:100%; height:100svh; overflow:hidden; background:var(--ink); }.places-film video { display:block; width:100%; height:100%; object-fit:cover; }.places-film-label { position:absolute; left:clamp(24px,8vw,130px); bottom:24px; margin:0; color:#fff; font:10px var(--mono); text-shadow:0 1px 8px #000; pointer-events:none; }
.places-film::before { content:none; }.places-film::after { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 35%,rgba(0,0,0,.3)); pointer-events:none; }.places-film video { position:relative; z-index:0; }.places-film-label { z-index:3; top:24px; bottom:auto; letter-spacing:.08em; }
@media (max-width:600px) { .kept-film { min-height:62svh; }.kept-film-content { grid-template-columns:1fr; gap:50px; }.kept-film-content a { justify-self:start; } }
@media (max-width:600px) { .places-film { height:auto; aspect-ratio:16/9; }.places-film video { object-fit:contain; background:#000; }.places-film-label { top:14px; left:20px; } }
.comfort-food { position:relative; overflow:hidden; padding-top:clamp(92px,13vw,175px); padding-bottom:clamp(92px,13vw,175px); background:var(--yellow); color:var(--ink); }.comfort-food::after { content:'NO VIBES'; position:absolute; right:-.06em; bottom:-.3em; color:transparent; -webkit-text-stroke:1px rgba(17,17,17,.15); font:400 clamp(100px,19vw,310px)/.75 var(--serif); letter-spacing:-.08em; pointer-events:none; }.comfort-food-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(38px,8vw,145px); align-items:center; margin-top:clamp(46px,8vw,110px); }.comfort-food-image { width:min(100%,720px); margin:0; aspect-ratio:1.15; overflow:hidden; background:var(--orange); box-shadow:18px 20px 0 var(--ink); transform:rotate(-2.5deg); }.comfort-food-image img { display:block; width:100%; height:100%; object-fit:cover; }.comfort-food-copy { max-width:550px; }.comfort-food-copy h2 { margin:0; font-size:clamp(55px,7.5vw,118px); line-height:.79; letter-spacing:-.055em; }.comfort-food-copy h2 em { font-weight:400; }.comfort-food-note { max-width:19ch; margin:clamp(34px,5vw,68px) 0 0; font:400 clamp(23px,2.4vw,36px)/.95 var(--serif); }.comfort-food-ingredients { max-width:35ch; margin:28px 0 0; font:500 10px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.09em; }.comfort-food-vibes { display:inline-block; margin:clamp(50px,7vw,94px) 0 0; padding-bottom:5px; border-bottom:1px solid currentColor; font:400 clamp(26px,3.1vw,47px)/.9 var(--serif); transform:rotate(-2deg); }
@media (max-width:600px) { .comfort-food-grid { grid-template-columns:1fr; gap:64px; }.comfort-food-image { width:calc(100% - 18px); box-shadow:12px 14px 0 var(--ink); }.comfort-food-copy h2 { font-size:clamp(55px,16vw,82px); }.comfort-food-note { margin-top:38px; }.comfort-food-vibes { margin-top:58px; }.comfort-food::after { bottom:-.12em; font-size:35vw; } }
.comfort-food-vibes { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:0; border:0; transform:none; }.comfort-food-vibes b { padding-bottom:5px; border-bottom:1px solid currentColor; font:500 10px var(--mono); letter-spacing:.14em; }.comfort-food-vibes span { font:400 clamp(26px,3.1vw,47px)/.9 var(--serif); transform:rotate(-2deg); }
.comfort-link { color:var(--yellow); font:500 9px var(--mono); letter-spacing:.08em; white-space:nowrap; }.comfort-link:hover,.comfort-link:focus-visible { color:var(--cream); outline:none; }.section-comfort-link { position:absolute; z-index:8; top:27px; right:32px; mix-blend-mode:difference; color:#fff; }.hero .section-comfort-link { top:60px; }main > section { position:relative; }@media (max-width:600px) { .comfort-link { font-size:7px; letter-spacing:.04em; }.section-comfort-link { top:21px; right:20px; }.hero .section-comfort-link { top:70px; } }
.surf-cam-link { position:relative; z-index:1; display:inline-block; margin-top:16px; padding-bottom:4px; border-bottom:1px solid currentColor; color:#fff; font:500 9px var(--mono); letter-spacing:.09em; }.surf-cam-link:hover,.surf-cam-link:focus-visible { color:var(--yellow); outline:none; }
.surf-weather { position:absolute; z-index:2; right:clamp(24px,8vw,130px); top:clamp(300px,28vw,430px); display:flex; align-items:center; gap:11px; color:#fff; }.surf-weather-icon { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.65); border-radius:50%; font:21px/1 var(--serif); }.surf-weather p { display:grid; grid-template-columns:auto auto; column-gap:8px; margin:0; }.surf-weather small { grid-column:1 / -1; color:rgba(255,255,255,.62); font:500 8px var(--mono); letter-spacing:.1em; }.surf-weather strong { margin-top:2px; font:400 23px/.9 var(--serif); }.surf-weather p span { align-self:end; padding-bottom:1px; color:rgba(255,255,255,.7); font:500 8px var(--mono); letter-spacing:.08em; }
@media (max-width:600px) { .surf-weather { position:relative; top:auto; right:auto; margin-top:20px; } }
.surf-stats { grid-template-columns:repeat(6,1fr); }.surf-day { margin-top:clamp(66px,9vw,120px); padding-top:15px; border-top:1px solid rgba(255,255,255,.45); }.surf-day-heading { display:flex; justify-content:space-between; gap:25px; color:rgba(255,255,255,.65); font:500 9px var(--mono); letter-spacing:.09em; }.surf-timetable { display:grid; grid-template-columns:repeat(6,1fr); margin-top:22px; }.surf-timetable article { min-width:0; padding:0 12px; border-left:1px solid rgba(255,255,255,.24); }.surf-timetable article:first-child { padding-left:0; border-left:0; }.surf-timetable time,.surf-timetable span,.surf-timetable small { display:block; font:500 9px var(--mono); letter-spacing:.05em; }.surf-timetable time { color:rgba(255,255,255,.62); }.surf-timetable strong { display:block; margin:11px 0 8px; font:400 clamp(24px,2.3vw,37px)/.85 var(--serif); }.surf-timetable span { min-height:2.5em; font-size:8px; line-height:1.35; }.surf-timetable small { margin-top:11px; color:var(--yellow); }.surf-day-note { max-width:47ch; margin:22px 0 0; color:rgba(255,255,255,.54); font:400 9px/1.45 var(--mono); }
.comfort-food::after { content:none; }
.comfort-food-image { box-shadow:18px 20px 0 rgba(17,16,14,.38); }@media (max-width:600px) { .comfort-food-image { box-shadow:12px 14px 0 rgba(17,16,14,.38); } }
.surf-source { margin:14px 0 0; color:rgba(255,255,255,.48); font:500 8px var(--mono); letter-spacing:.09em; }.surf-source a { text-decoration:underline; text-underline-offset:3px; }.surf-source a:hover,.surf-source a:focus-visible { color:#fff; outline:none; }
@media (min-width:601px) { nav { padding-top:13px; padding-bottom:13px; font-size:14.3px; }.wordmark { font-size:23.4px; }.language-button { font-size:13px; }.hero .section-comfort-link { top:122px; } }
.back-top { position:absolute; z-index:9; right:32px; bottom:26px; display:grid; place-items:center; width:24px; height:24px; border:1px solid currentColor; border-radius:50%; color:inherit; font:16px/.8 var(--serif); opacity:.46; transition:opacity .2s ease,transform .2s ease; }.back-top:hover,.back-top:focus-visible { opacity:1; transform:translateY(-3px); outline:none; }@media (max-width:600px) { .back-top { right:20px; bottom:18px; width:22px; height:22px; font-size:14px; } }
.video-block .back-top { color:#fff; }
.video-placeholder video,
.places-film video { pointer-events:auto; touch-action:manipulation; }
.moments-carousel.is-static .moments-viewport { overflow:visible; cursor:default; }
.moments-carousel.is-static .moments-rail { display:block; transform:none !important; will-change:auto; }
.moments-carousel.is-static .moment-slide,
.moments-carousel.is-static .moment-slide.is-active { display:block; width:80%; margin:0 auto; transform:none; }
.mobile-menu-toggle,.mobile-menu { display:none; }
.mobile-language-picker { display:none; }
@media (max-width:600px) { .nav-actions .menu-link { display:none; }.mobile-menu-toggle { position:relative; z-index:31; display:grid; gap:5px; width:25px; padding:5px 0; border:0; background:transparent; color:var(--cream); cursor:pointer; }.mobile-menu-toggle span { display:block; width:25px; height:1px; background:currentColor; transition:transform .25s ease,opacity .2s ease; }.mobile-menu-toggle.is-open span:first-child { transform:translateY(6px) rotate(45deg); }.mobile-menu-toggle.is-open span:nth-child(2) { opacity:0; }.mobile-menu-toggle.is-open span:last-child { transform:translateY(-6px) rotate(-45deg); }.mobile-menu { position:absolute; z-index:30; inset:0; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:92px 24px 50px; background:var(--ink); color:var(--cream); }.mobile-menu[hidden] { display:none; }.mobile-menu a { width:max-content; max-width:100%; font:400 clamp(44px,13vw,72px)/.83 var(--serif); letter-spacing:-.04em; }.mobile-menu a:nth-last-child(1) { margin-top:22px; color:var(--yellow); font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; } }
@media (max-width:600px) { .nav-actions .menu-link { display:inline; }.hero-links { display:none; }.hero-copy .mobile-menu-toggle { margin:0 0 24px; }.mobile-menu-toggle { z-index:31; } }
@media (max-width:600px) { .language-switcher { display:none; }.nav-actions { gap:18px; }.mobile-language-picker { position:relative; display:block; }.mobile-language-toggle { display:grid; place-items:center; width:18px; height:20px; padding:0; border:0; background:transparent; color:var(--cream); cursor:pointer; }.mobile-language-toggle > span { position:relative; display:block; width:16px; height:16px; border:1px solid currentColor; border-radius:50%; }.mobile-language-toggle > span::before { content:''; position:absolute; inset:-1px 4px; border-right:1px solid currentColor; border-left:1px solid currentColor; border-radius:50%; }.mobile-language-toggle > span::after { content:''; position:absolute; top:6px; left:-1px; width:16px; border-top:1px solid currentColor; }.mobile-language-toggle:hover,.mobile-language-toggle:focus-visible { color:var(--yellow); outline:none; }.mobile-language-menu { position:absolute; z-index:40; top:50%; right:calc(100% + 12px); display:flex; flex-direction:row; align-items:center; gap:10px; padding:0; transform:translateY(-50%); background:transparent; color:var(--cream); }.mobile-language-menu[hidden] { display:none; }.mobile-language-button { display:grid; place-items:center; width:30px; min-height:40px; padding:0; border:0; background:none; color:rgba(255,244,221,.58); cursor:pointer; text-align:center; font:500 9px/1 var(--mono); letter-spacing:.09em; }.mobile-language-button.is-active,.mobile-language-button:hover,.mobile-language-button:focus-visible { color:var(--yellow); outline:none; } }
@media (max-width:600px) { .mobile-menu-close { position:absolute; top:20px; right:20px; padding:0; border:0; background:none; color:var(--cream); font:400 38px/.7 var(--serif); cursor:pointer; } }
@media (max-width:600px) { .mobile-menu { position:absolute; z-index:4; inset:auto 24px auto; bottom:calc(clamp(48px,10vh,100px) + clamp(136px,38vw,210px)); display:flex; flex-direction:row; justify-content:flex-start; gap:0; padding:0; overflow-x:auto; background:transparent; color:var(--cream); scrollbar-width:none; }.mobile-menu::-webkit-scrollbar { display:none; }.mobile-menu a { flex:0 0 auto; width:auto; max-width:none; font:500 10px var(--mono); line-height:1; letter-spacing:.08em; white-space:nowrap; }.mobile-menu a:not(:last-child)::after { content:'/'; display:inline-block; margin:0 8px; color:rgba(255,244,221,.55); }.mobile-menu a:last-child { display:none; }.mobile-menu-close { display:none; }.mobile-menu-toggle.is-open { opacity:.58; }.hero-copy { z-index:2; } }
@media (max-width:600px) { .mobile-menu { flex-direction:column; gap:10px; overflow:visible; }.mobile-menu a:not(:last-child)::after { display:none; }.mobile-menu a { font:500 10px var(--mono); } }
@media (max-width:600px) { .mobile-menu-close { display:block; top:0; right:0; color:var(--cream); font-size:28px; }.mobile-menu-toggle.is-open { visibility:hidden; } }
@media (max-width:600px) { .music-player { left:50%; right:auto; width:calc(100% - 40px); justify-content:center; transform:translateX(-50%); text-align:center; } }

/* iOS-safe controls and a self-contained mobile navigation layer. */
.ui-arrow { display:inline-block; width:.9em; height:.9em; margin-left:.18em; vertical-align:-.08em; color:currentColor; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.music-play { position:relative; display:grid; place-items:center; font-size:0; }
.music-play > span { display:block; width:0; height:0; margin-left:2px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:7px solid currentColor; }
.music-play.is-playing > span { width:7px; height:10px; margin-left:0; border:0; border-right:2px solid currentColor; border-left:2px solid currentColor; }
.spotify-embed { width:320px; height:80px; }
.music-player > iframe { position:absolute; width:1px !important; height:1px !important; overflow:hidden; opacity:0; pointer-events:none; }
.music-play:disabled { opacity:.45; cursor:progress; }
@media (max-width:600px) {
  body.mobile-menu-open { overflow:hidden; overscroll-behavior:none; touch-action:none; }
  .mobile-menu { position:fixed; z-index:60; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:15px; padding:calc(env(safe-area-inset-top) + 74px) 28px calc(env(safe-area-inset-bottom) + 42px); overflow:hidden; background:linear-gradient(180deg,rgba(17,17,15,.66),rgba(17,17,15,.83)); color:var(--cream); }
  .mobile-menu[hidden] { display:none; }
  .mobile-menu a { width:auto; max-width:100%; margin:0; font:500 11px/1 var(--mono); letter-spacing:.09em; white-space:nowrap; }
  .mobile-menu a:not(:last-child)::after { display:none; }
  .mobile-menu a:last-child { display:none; }
  .mobile-menu-close { position:absolute; top:calc(env(safe-area-inset-top) + 25px); right:24px; display:block; padding:0; border:0; background:none; color:var(--cream); font:300 32px/.7 var(--serif); cursor:pointer; }
  .mobile-menu-toggle.is-open { visibility:hidden; }
}
.moments-carousel { width:100%; }.moment-slide { display:none; }.moment-slide.is-active { display:block; animation:moment-in .45s ease both; }.moments-carousel .video-placeholder { width:min(63vw,820px); margin:0 auto; }.moments-controls { display:flex; align-items:center; justify-content:center; gap:15px; margin-top:24px; color:var(--yellow); font:500 9px var(--mono); letter-spacing:.09em; }.moments-controls p { margin:0; }.moments-controls button { width:23px; height:23px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; font:18px/.7 var(--serif); }.moments-controls button:disabled { opacity:.28; cursor:default; }.moments-controls button:not(:disabled):hover,.moments-controls button:not(:disabled):focus-visible { color:#fff; outline:none; }@keyframes moment-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }@media (max-width:600px) { .moments-carousel .video-placeholder { width:100%; } }
.video-block { --moment-color:var(--ink); background:var(--moment-color); transition:background-color .75s cubic-bezier(.2,.7,.2,1); }.moments-viewport { overflow:hidden; width:100%; touch-action:pan-y; cursor:grab; }.moments-viewport:active { cursor:grabbing; }.moments-rail { display:flex; gap:clamp(18px,3vw,48px); will-change:transform; }.moments-rail.is-dragging { cursor:grabbing; }.moment-slide,.moment-slide.is-active { display:block; flex:0 0:80%; opacity:.38; transform:scale(.94); transition:opacity .45s ease,transform .55s cubic-bezier(.2,.75,.2,1); animation:none; }.moment-slide.is-active { opacity:1; transform:scale(1); }.moments-carousel .video-placeholder { width:100%; margin:0; box-shadow:none; }.moment-meta { display:flex; align-items:baseline; justify-content:space-between; gap:30px; margin:14px 2px 0; color:var(--cream); }.moment-meta p { margin:0; }.moment-meta p:first-child { font:500 9px var(--mono); letter-spacing:.1em; }.moment-meta p:last-child { max-width:28ch; text-align:right; font:400 clamp(15px,1.45vw,22px)/.94 var(--serif); }.moments-controls { margin-top:34px; }.moments-controls button { width:auto; height:auto; font-size:22px; }.moments-controls button:disabled { opacity:.22; }@media (max-width:600px) { .moment-slide,.moment-slide.is-active { flex-basis:84%; }.moment-meta { display:block; }.moment-meta p:last-child { margin-top:8px; text-align:left; }.moments-controls { margin-top:24px; } }
@media (max-width:600px) { .surf-stats { grid-template-columns:repeat(2,1fr); }.surf-stat:last-child { grid-column:span 2; }.surf-day-heading { display:block; }.surf-day-heading span:last-child { display:block; margin-top:7px; }.surf-timetable { grid-template-columns:repeat(3,1fr); row-gap:22px; }.surf-timetable article:nth-child(4) { padding-left:0; border-left:0; }.surf-timetable article { padding:0 10px; }.surf-timetable article:nth-child(1),.surf-timetable article:nth-child(4) { padding-left:0; }.surf-timetable article:nth-child(3),.surf-timetable article:nth-child(6) { padding-right:0; } }

/* Final mobile polish: the menu sits over the film, never replaces it. */
@media (max-width:600px) {
  body.mobile-menu-open { position:fixed; width:100%; overflow:hidden; overscroll-behavior:none; touch-action:auto; }
  .mobile-menu { position:fixed; z-index:60; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:15px; padding:32svh 28px 0; overflow:hidden; background:transparent; color:var(--cream); }
  .mobile-menu[hidden] { display:none; }
  .mobile-menu a { width:auto; max-width:100%; margin:0; font:500 11px/1 var(--mono); letter-spacing:.09em; white-space:nowrap; }
  .mobile-menu a::after { display:none !important; }
  .mobile-menu a[href="#contact"] { display:none; }
  .mobile-menu-close { position:absolute; top:32svh; right:28px; display:block; margin:0; padding:0; border:0; background:none; color:var(--cream); font:300 30px/.7 var(--serif); cursor:pointer; }
  .mobile-menu-toggle.is-open { visibility:hidden; }

  .mood-browse button,
  .mood-browse button:hover,
  .mood-browse button:focus-visible { opacity:1; color:inherit; }

  .about-section { display:flex; flex-direction:column; min-height:auto; padding-top:72px; padding-bottom:92px; }
  .about-section .about-board { width:100%; margin-top:26px; }
  .about-section .mail { position:static; align-self:flex-start; margin:32px 0 0; font-size:clamp(17px,5vw,24px); line-height:1.15; overflow-wrap:anywhere; }
  .about-section .copyright { position:static; margin:34px 0 0; font-size:8px; }
  .about-section .site-farewell { position:static; align-self:flex-start; margin:20px 0 0; font-size:8px; text-align:left; }
  .about-section .back-top { bottom:20px; }
}

/* A more legible, touch-friendly ON REPEAT control on compact phones. */
@media (max-width:600px) {
  .music-player { top:78px; display:grid; grid-template-columns:1fr; grid-template-areas:'count' 'meta' 'actions'; justify-items:center; gap:6px; }
  .music-count { gap:5px; font-size:9px; }
  .music-favourites { font-size:8px; }
  .music-count { grid-area:count; }
  .music-meta { grid-area:meta; min-width:0; max-width:100%; gap:4px; text-align:center; }
  .music-meta span:first-child { max-width:calc(100vw - 46px); overflow:hidden; text-overflow:ellipsis; font-size:9px; }
  .music-meta span:last-child { font-size:18px; }
  .music-actions { grid-area:actions; gap:8px; }
  .music-button { width:32px; height:32px; font-size:27px; }
  .music-play > span { border-top-width:6px; border-bottom-width:6px; border-left-width:9px; }
  .music-play.is-playing > span { width:8px; height:12px; }

  .music-note { top:151px; }
  .music-note-copy { gap:9px; }
  .music-note-copy { font-size:9px; }
  .music-note-copy em { font-size:17px; }
  .music-note .music-note-copy i { width:36px; height:45px; }
  .music-note .music-note-heart { font-size:17px; }
}

/* The native Spotify control is deliberately left visible: it is the one
   control that browsers reliably treat as a direct audio interaction. */
.music-player { display:grid; grid-template-columns:auto auto; grid-template-areas:'count actions' 'embed embed'; justify-content:end; gap:9px 12px; }
.music-count { grid-area:count; align-self:center; }
.music-meta { display:none; }
.music-actions { grid-area:actions; gap:8px; }
.music-player > iframe.spotify-embed { position:static; grid-area:embed; display:block; width:320px !important; height:80px !important; margin:0; overflow:visible; opacity:1; pointer-events:auto; border:0; }
@media (max-width:600px) {
  .music-player { top:62px; display:grid; grid-template-columns:1fr; grid-template-areas:'count' 'actions' 'embed'; justify-items:center; gap:5px; }
  .music-actions { gap:20px; }
  .music-player > iframe.spotify-embed { width:min(320px,calc(100vw - 40px)) !important; height:80px !important; }
  .music-note { top:190px; }
}

/* Native-player proportions, with the track selectors framing the player. */
.music-player { width:500px; grid-template-columns:1fr; grid-template-areas:'count' 'embed'; justify-items:center; gap:10px; }
.music-count { justify-self:center; font-size:13px; }
.music-favourites { font-size:11px; }
.music-actions { position:absolute; top:54px; left:0; right:0; display:flex; justify-content:space-between; width:100%; pointer-events:none; }
.music-actions .music-button { width:42px; height:48px; pointer-events:auto; font-size:38px; }
.music-player > iframe.spotify-embed { width:420px !important; height:104px !important; }
@media (max-width:600px) {
  .music-player { top:74px; width:calc(100% - 40px); grid-template-areas:'count' 'embed'; gap:6px; }
  .music-count { font-size:10px; }
  .music-favourites { font-size:9px; }
  .music-actions { top:29px; }
  .music-actions .music-button { width:40px; height:50px; font-size:40px; }
  .music-player > iframe.spotify-embed { width:248px !important; height:80px !important; }
  .music-note { top:190px; }
}

/* ON REPEAT returns to the hero; the reliable Spotify control lives as an
   editorial object in the orange opening section. */
.music-player { display:flex; width:auto; grid-template-columns:none; grid-template-areas:none; justify-content:initial; gap:8px; }
.music-count { justify-self:auto; font-size:10px; }
.music-favourites { font-size:8px; }
.music-meta { display:flex; }
.music-actions { position:static; display:flex; width:auto; justify-content:initial; gap:2px; pointer-events:auto; }
.music-actions .music-button { width:25px; height:25px; font-size:22px; }
.music-play { display:grid; }
.intro-spotify { position:relative; width:420px; margin:clamp(72px,7vw,120px) auto 0; }
.intro-spotify .spotify-embed { position:static; display:block; width:420px; height:352px; overflow:visible; opacity:1; pointer-events:auto; border:0; }
@media (max-width:600px) {
  .music-player { top:72px; left:50%; right:auto; display:grid; width:calc(100% - 40px); grid-template-columns:1fr; grid-template-areas:'count' 'meta' 'actions'; justify-items:center; gap:4px; transform:translateX(-50%); text-align:center; }
  .music-count { font-size:9px; }
  .music-favourites { font-size:8px; }
  .music-meta { min-width:0; max-width:100%; align-items:center; gap:3px; transform:none; }
  .music-meta span:first-child { max-width:calc(100vw - 46px); overflow:hidden; text-overflow:ellipsis; font-size:8px; }
  .music-meta span:last-child { font-size:16px; }
  .music-actions { gap:8px; }
  .music-actions .music-button { width:32px; height:32px; font-size:27px; }
  .music-note { top:160px; }
  .intro { padding-bottom:calc(18vh + 128px); }
  .intro-spotify { position:static; width:100%; margin:52px auto 0; }
  .intro-spotify .spotify-embed { width:min(320px,100%); height:352px; margin:0 auto; }
}

/* Final hero teaser: no metadata, no transport controls — only ON AIR. */
.music-player { top:76px; right:32px; left:auto; display:block; width:auto; transform:none; color:var(--orange); }
.music-teaser { display:inline-flex; align-items:center; gap:6px; color:inherit; font:500 10px var(--mono); letter-spacing:.1em; }
.music-teaser svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.music-teaser:hover,.music-teaser:focus-visible { color:var(--yellow); outline:none; }
@media (max-width:600px) {
  .music-player { top:78px; left:50%; right:auto; width:auto; transform:translateX(-50%); }
  .music-teaser { font-size:10px; }
  .music-note { top:130px; }
}

.spotify-track-nav,.spotify-editorial-note { display:none; }
@media (max-width:600px) {
  .spotify-track-nav { display:flex; align-items:center; justify-content:space-between; width:min(320px,100%); margin:16px auto 0; }
  .spotify-track-nav button { padding:5px 0; border:0; background:none; color:var(--ink); cursor:pointer; font:500 9px var(--mono); letter-spacing:.1em; }
  .spotify-track-nav button:hover,.spotify-track-nav button:focus-visible { color:var(--cream); outline:none; }
  .spotify-editorial-note { display:block; margin:58px auto 0; color:var(--cream); text-align:center; }
  .spotify-editorial-note span { display:block; font:500 9px var(--mono); letter-spacing:.1em; }
  .spotify-editorial-note em { display:block; margin-top:5px; font:400 18px/.9 var(--serif); }
}

/* Editorial finishing touches for the native player. */
.music-teaser svg { width:17px; height:17px; fill:currentColor; stroke:none; }
.spotify-track-nav { display:flex; align-items:center; justify-content:space-between; width:100%; margin:16px auto 0; }
.spotify-track-nav button { padding:5px 0; border:0; background:none; color:var(--ink); cursor:pointer; font:500 9px var(--mono); letter-spacing:.1em; }
.spotify-track-nav button:hover,.spotify-track-nav button:focus-visible { color:var(--cream); outline:none; }
.spotify-editorial-note { display:block; width:100%; margin:0 auto; padding-top:120px; color:var(--cream); text-align:center; }
.spotify-editorial-note > span { display:block; font:500 9px var(--mono); letter-spacing:.1em; }
.spotify-editorial-note em { display:block; margin-top:6px; font:400 19px/.95 var(--serif); letter-spacing:0; word-spacing:.12em; }
.spotify-editorial-note em span { white-space:pre; }
.spotify-editorial-note em b { color:#003FB5; font-weight:400; }
.intro .section-comfort-link { top:102px; right:46px; }
.spotify-editorial-note em,
.spotify-editorial-note em span { font-family:var(--serif); font-style:italic; letter-spacing:-.025em; word-spacing:normal; }
@media (max-width:600px) {
  .spotify-editorial-note { margin-top:0; padding-top:58px; }
  .spotify-editorial-note em { margin-top:5px; font-size:18px; }
  .intro .section-comfort-link { top:30px; right:24px; }
  .spotify-editorial-note em,
  .spotify-editorial-note em span { font-family:var(--serif); font-size:18px; letter-spacing:-.025em; word-spacing:normal; }
  .hero .section-comfort-link { top:70px; }
  .moments-carousel.is-static .moment-slide,
  .moments-carousel.is-static .moment-slide.is-active { width:84%; }
}