@font-face{font-family:Nunito;src:url('/welcome-assets/Nunito.woff2') format('woff2'),url('/welcome-assets/Nunito.ttf') format('truetype');font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Lilita One';src:url('/welcome-assets/LilitaOne.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;
--deep:#0b4a7c;--ocean:#1583bf;--ocean-2:#1a93c9;--foam:#c9ecf7;
--sand:#f2dfb2;--sand-2:#e7cf99;--paper:#fcf6ea;--paper-2:#f6ecd6;
--ink:#3a2724;--ink-2:#6b534b;--wood:#7b4a21;--wood-2:#a3672e;--wood-3:#5a3416;
--gold:#ffcb3c;--gold-2:#ffdc74;--sign:#1e63c9;--leaf:#4a9d3c;--flag:#d8352b;
--display:'Lilita One',Nunito,ui-rounded,system-ui,sans-serif;--body:Nunito,ui-rounded,system-ui,sans-serif;
font-family:var(--body);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.55;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}
a{color:inherit}img{max-width:100%;height:auto;display:block}h1,h2,h3,p,figure,ul,ol{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:.01em;text-wrap:balance}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px;flex-shrink:0}
a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.wrap{width:min(1240px,calc(100% - 64px));margin-inline:auto}
.wrap.narrow{width:min(820px,calc(100% - 40px))}
.skip-link{position:absolute;top:8px;left:12px;padding:14px;background:#fff;color:var(--ink);transform:translateY(-200%);z-index:20;border-radius:10px}.skip-link:focus{transform:none}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.eyebrow:before{content:'';width:26px;height:3px;border-radius:2px;background:currentColor;opacity:.7}

/* ---------- the sea (header + hero) ---------- */
.sea{position:relative;color:#fff;background:var(--ocean);overflow:hidden;isolation:isolate}
.sea-bg{position:absolute;inset:0;z-index:-2;background:#137faa url('/welcome-assets/hero-water.svg') center/cover no-repeat}
.sea-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#0b4a7ce6 0%,#0b4a7ca6 30%,#0b4a7c00 58%),linear-gradient(180deg,#0b4a7c66,transparent 30%)}
.site-header{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-size:24px;line-height:1;white-space:nowrap;text-shadow:0 2px 0 #0b4a7c}
.brand>.brand-icon{width:46px;height:46px;border-radius:12px;object-fit:contain;filter:drop-shadow(0 3px 0 #0b4a7c)}
/* Supplied wordmark: the CSS window removes transparent vertical padding only. */
.wordmark{position:relative;display:block;aspect-ratio:4.5;overflow:hidden}
.wordmark>img{position:absolute;left:0;top:50%;width:100%;max-width:none;height:auto;transform:translateY(-50%);object-fit:contain}
.brand{min-height:48px;min-width:0}.brand-copy{min-width:0;flex-shrink:0}
.nav-wordmark{width:clamp(230px,22vw,290px)}
.footer-wordmark{width:min(290px,100%)}
/* WebKit/Safari root-cause fix: .wordmark is a block box using aspect-ratio plus
   overflow:hidden, sized only through its plain-text .brand-copy ancestor (a flex
   item blockified by .brand{display:flex}). Because that ancestor has no declared
   width, WebKit computes its flex-basis:auto content size from the wordmark's
   automatic minimum size rather than its specified width - and a box with
   overflow:hidden has an automatic minimum size of 0 per the CSS Sizing spec - so
   the whole chain collapses toward the image's decorative minimum (~60px) instead
   of the intended clamp(230px,22vw,290px). Chromium instead reads the wordmark's
   own CSS width for that same calculation, so only Safari shows the tiny logo.
   Making the wordmark span an atomic inline-block (its own sizing context) and
   pinning .brand-copy so it never shrinks makes both engines honor the same width. */
.wordmark.nav-wordmark{display:inline-block;flex-shrink:0}
.brand small{display:block;font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.2em;margin-top:6px;color:var(--gold-2)}
nav{display:flex;align-items:center;gap:22px}
.text-link{font-weight:900;text-decoration:none;min-height:48px;display:flex;align-items:center;border-bottom:2px solid transparent}
.text-link:hover{border-bottom-color:var(--gold)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:14px 28px;border:2px solid var(--wood-3);border-radius:18px;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--wood-3);font-family:var(--display);font-size:22px;letter-spacing:.02em;text-decoration:none;box-shadow:0 5px 0 var(--wood-3),0 12px 24px #0b4a7c33;transition:transform .15s,box-shadow .15s;text-shadow:0 1px 0 #fff6}
.button:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--wood-3),0 16px 28px #0b4a7c3d}
.button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--wood-3)}
.button svg{width:22px;height:22px;stroke-width:2.2}
.button.small{min-height:50px;font-size:17px;padding:10px 18px;border-radius:14px;background:#0b4a7ca6;color:#fff;border-color:#ffffff66;box-shadow:none;text-shadow:none}
.button.small:hover{background:#0b4a7ce6;transform:none;box-shadow:none}
.hero{display:grid;grid-template-columns:minmax(300px,.85fr) 1.3fr;gap:36px;align-items:center;padding-block:34px 92px}
.hero-copy{position:relative;z-index:1}
.hero .eyebrow{color:var(--gold-2)}
.hero h1{font-size:clamp(46px,5.6vw,84px);line-height:.98;margin:18px 0 20px;text-shadow:0 4px 0 #0b4a7c,0 12px 30px #06345a80}
.hero h1 em{font-style:normal;color:var(--gold)}
.intro{font-size:19px;line-height:1.6;max-width:30rem;color:#eaf6fb}
.play-button{margin-top:28px;font-size:24px;padding-inline:30px;min-height:66px}
.play-button svg{fill:var(--wood-3);stroke:none}
.play-note{margin-top:16px;font-size:14px;line-height:1.6;color:#d7ecf5;max-width:30rem}
.build-note{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--wood-3);background:var(--foam);border-radius:999px;padding:7px 14px 7px 10px}
.build-note:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--flag);box-shadow:0 0 0 3px #d8352b33}
.island-art{position:relative;margin:0}
.art-frame{position:relative;border-radius:0;background:none;box-shadow:none;border:0;padding:0;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 88%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 88%,transparent);
 -webkit-mask-composite:source-in;mask-composite:intersect;mask-repeat:no-repeat}
.art-frame img{width:100%;height:auto;animation:bob 7s ease-in-out infinite}
/* The supplied island cutout keeps every islet and its own natural alpha. */
.island-cutout .art-frame{-webkit-mask:none;mask:none}
.island-cutout .art-frame img{object-fit:contain}
.island-art figcaption{position:absolute;width:max-content;max-width:calc(100% - 12px);left:50%;bottom:-8px;transform:translateX(-50%) rotate(-1.5deg);white-space:nowrap;font-family:var(--display);font-size:15px;letter-spacing:.03em;color:var(--wood-3);background:var(--sand);border:2px solid var(--wood-3);border-radius:10px;padding:8px 14px;box-shadow:0 3px 0 var(--wood-3);display:flex;align-items:center;gap:8px}
.island-art figcaption img{width:18px;height:18px;animation:none}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(.4deg)}}
/* The supplied photograph keeps its natural transparent, wavy foam edge.
   Its transparent beach reveals sand; the upper water softly joins the hero. */
.sea:not(.sea-full)::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:clamp(220px,23vw,330px);pointer-events:none;z-index:0;
 background:var(--sand) url('/welcome-assets/shoreline-wave.webp') center bottom/100% auto no-repeat;
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%);mask-image:linear-gradient(180deg,transparent,#000 28%)}
.sea:not(.sea-full) .hero{padding-bottom:220px}
.island-art{z-index:1}

/* ---------- the beach: places ---------- */
.land{background:linear-gradient(180deg,var(--sand) 0,var(--paper) 420px)}
.places{padding-block:48px 20px}
.island-note{position:relative;width:100%;min-height:180px;margin:52px auto 18px;padding:38px 44px;display:flex;align-items:center;justify-content:center;gap:30px;font-family:var(--display);font-size:clamp(32px,3.5vw,48px);line-height:1.12;text-wrap:balance;text-align:center;color:#fff3d6;text-shadow:0 3px 0 #3e2410;background:linear-gradient(180deg,#8a5427,#6e4019 55%,#5a3416);border:3px solid #3e2410;border-radius:26px;box-shadow:inset 0 2px 0 #c58a4d,0 8px 0 #3e2410,0 20px 40px #3e241033}
.island-note-symbol{display:grid;place-items:center;flex:none;width:78px;height:78px;border-radius:22px;background:#ffffff14;color:var(--gold-2)}
.island-note-symbol svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.section-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:28px}
.section-head .eyebrow{color:var(--wood-2)}
.section-head h2{font-size:clamp(34px,4vw,52px);margin-top:10px;color:var(--wood-3)}
.section-head p{max-width:34rem;color:var(--ink-2);font-size:17px}
.postcards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px 22px;align-items:start}
.postcard{min-width:0;transform:rotate(var(--tilt,0deg));transition:transform .2s}
.postcard:hover{transform:rotate(0) translateY(-4px)}
.postcard:nth-child(odd){--tilt:-1.4deg}.postcard:nth-child(even){--tilt:1.2deg}.postcard:nth-child(3n){--tilt:.6deg}
.polaroid-print{position:relative;aspect-ratio:2000/2330;overflow:hidden;filter:drop-shadow(0 5px 6px #5a34162b)}
.polaroid-print .snapshot-image{position:absolute;left:12.25%;top:10.1%;width:75.1%;height:65.1%;max-width:none;object-fit:cover;background:var(--ocean)}
.polaroid-print .snapshot-frame{position:absolute;left:-10%;top:-3.0043%;width:120%;height:103.0043%;max-width:none;pointer-events:none;
 -webkit-mask:url('/welcome-assets/polaroid-frame-mask.svg') center/100% 100% no-repeat;mask:url('/welcome-assets/polaroid-frame-mask.svg') center/100% 100% no-repeat}
.polaroid-print h3{position:absolute;left:12.75%;top:77.2%;width:73.9%;margin:0;text-align:center;font-size:clamp(17px,1.55vw,22px);line-height:1.15;color:var(--wood-3);z-index:1}
.postcard>p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0 12px;text-align:center}

/* ---------- promises ---------- */
.possibilities{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-block:44px 20px}
.possibility{position:relative;display:flex;gap:16px;align-items:flex-start;border-radius:22px;padding:26px 24px 24px;background:var(--paper-2);border:2px solid #e5d3ad}
.possibility.leaf{background:#e9f0d4;border-color:#c9d9a2}.possibility.peach{background:#fbe3cc;border-color:#ecc7a3}.possibility.lavender{background:#e9e0f2;border-color:#cfbfe0}
.feature-icon{display:flex;flex-shrink:0;padding:11px;border-radius:14px;background:#fff;color:var(--wood-3);box-shadow:0 3px 0 #d9c69a}
.feature-icon img,.feature-icon svg{width:26px;height:26px;opacity:.85}
.possibility h2{font-size:24px;margin:2px 0 8px;color:var(--wood-3)}
.possibility p{font-size:15px;line-height:1.6;color:var(--ink-2)}

/* ---------- how to play: a trail ---------- */
.getting-started{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;padding-block:64px 70px}
.section-intro .eyebrow{color:var(--wood-2)}
.section-intro h2{font-size:clamp(36px,4vw,54px);margin:12px 0 16px;color:var(--wood-3)}
.section-intro>p:last-child{font-size:17px;color:var(--ink-2);max-width:24rem}
.steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:0;position:relative;counter-reset:step}
.steps li{display:flex;gap:22px;position:relative;padding-bottom:30px}
.steps li:not(:last-child):before{content:'';position:absolute;left:25px;top:54px;bottom:2px;border-left:4px dotted var(--wood-2);opacity:.7}
.step-number{display:grid;place-items:center;flex-shrink:0;width:54px;height:54px;border-radius:50%;background:var(--gold);border:3px solid var(--wood-3);box-shadow:0 4px 0 var(--wood-3);font-family:var(--display);font-size:24px;color:var(--wood-3)}
.steps h3{font-size:24px;margin:8px 0 8px;color:var(--wood-3)}
.steps p{font-size:16px;color:var(--ink-2);max-width:32rem;line-height:1.6}

/* ---------- account panel: a wooden sign ---------- */
.family-panel{display:flex;align-items:center;gap:30px;padding:40px 44px;border-radius:26px;position:relative;color:#fff3d6;
 background:linear-gradient(180deg,#8a5427,#6e4019 55%,#5a3416);border:3px solid #3e2410;box-shadow:inset 0 2px 0 #c58a4d,0 8px 0 #3e2410,0 20px 40px #3e241033}
.family-panel:before,.family-panel:after,.island-note:before,.island-note:after{content:'';position:absolute;top:-14px;width:18px;height:28px;border-radius:9px;background:linear-gradient(180deg,#d9b07a,#a3672e);border:2px solid #3e2410}
.family-panel:before,.island-note:before{left:38px}.family-panel:after,.island-note:after{right:38px}
.family-symbol{display:grid;place-items:center;width:78px;height:78px;flex-shrink:0;border-radius:22px;background:#ffffff14;color:var(--gold-2)}
.family-symbol svg{width:42px;height:42px;stroke-width:1.6}
.family-copy{flex:1}
.family-copy .eyebrow{color:var(--gold-2)}
.family-copy h2{font-size:clamp(30px,3.4vw,42px);margin:10px 0 12px;text-shadow:0 3px 0 #3e2410}
.family-copy p:last-child{color:#f3dfc0;font-size:16px;max-width:36rem;line-height:1.65}
.family-cta{white-space:nowrap;font-size:20px;padding-inline:24px}

/* ---------- questions ---------- */
.questions{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.5fr);grid-template-areas:"art heading" "art list";gap:0 24px;align-items:center;padding-block:72px 80px}
.questions-heading{grid-area:heading;min-width:0}
.questions-list{grid-area:list;min-width:0}
.questions-illustration{grid-area:art;width:100%;max-width:460px;justify-self:center}
.questions-illustration img{width:100%;height:auto;object-fit:contain}
.questions-heading>.eyebrow{color:var(--wood-2)}
.questions-heading>h2{font-size:clamp(32px,3.6vw,46px);margin:10px 0 22px;color:var(--wood-3)}
.questions details{border-bottom:2px solid #e3d2ab}
.questions summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;cursor:pointer;font-size:18px;font-weight:900;list-style:none;padding:14px 0}
.questions summary::-webkit-details-marker{display:none}
.questions summary>span{display:grid;place-items:center;background:var(--gold);border:2px solid var(--wood-3);color:var(--wood-3);width:30px;height:30px;border-radius:50%;font-size:22px;font-family:var(--display);flex-shrink:0;transition:transform .15s;line-height:1}
.questions details[open] summary>span{transform:rotate(45deg)}
.questions details p{padding:0 40px 22px 0;font-size:16px;line-height:1.75;color:var(--ink-2);max-width:40rem}

/* ---------- footer: deep water ---------- */
.site-footer{background:var(--deep);color:#dcefF8;padding-block:44px 48px}
.site-footer .footer-main{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;flex-wrap:wrap}
.site-footer p{font-size:14px;color:#bcd9ea;margin-top:6px}
.site-footer a{text-underline-offset:3px;text-decoration-color:#ffffff66}
.footer-links{display:flex;gap:20px;row-gap:10px;align-items:center;font-size:14px;font-weight:900;flex-wrap:wrap}
.footer-links a{display:flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:2px solid transparent}.footer-links a:hover{border-bottom-color:var(--gold)}
.footer-legal{margin-top:26px;padding-top:22px;border-top:1px solid #ffffff26;display:flex;flex-direction:column;gap:8px}
.footer-legal p{margin:0;font-size:12px;line-height:1.6;color:#9fc3d8;max-width:64rem}

@media(max-width:1100px){.wrap{width:calc(100% - 48px)}.section-head{grid-template-columns:1fr}.hero{grid-template-columns:1fr 1.1fr;gap:20px}.postcards{grid-template-columns:repeat(2,1fr);gap:26px}.polaroid-print h3{font-size:clamp(20px,2.3vw,25px)}.getting-started{gap:40px}.family-symbol{display:none}}
@media(max-width:820px){.site-header{min-height:84px}.brand{font-size:21px}.brand>.brand-icon{width:40px;height:40px}nav{gap:12px}.how-link{display:none}
.hero{grid-template-columns:1fr;padding-block:10px 70px;gap:8px}.hero-copy{text-align:center;order:2;background:#0b4a7ce6;border-radius:22px;padding:20px 22px;box-shadow:0 10px 26px #06345a40}.hero .eyebrow{justify-content:center}.hero .eyebrow:before{display:none}.hero h1{font-size:clamp(44px,11vw,64px)}.intro,.play-note{margin-inline:auto}
.island-art{order:1;max-width:640px;width:100%;margin:0 auto 12px}.island-art figcaption{bottom:2px}
.postcards{grid-template-columns:repeat(2,1fr);gap:26px}.polaroid-print h3{font-size:clamp(20px,3.2vw,27px)}.sea:not(.sea-full)::after{background-size:1000px auto}.section-head{grid-template-columns:1fr}
.possibilities{grid-template-columns:1fr;gap:12px}
.getting-started{grid-template-columns:1fr;gap:28px;padding-block:52px}
.family-panel{flex-wrap:wrap;gap:22px;padding:32px 26px}.family-copy{flex-basis:100%}.family-cta{width:100%}
.questions{grid-template-columns:minmax(140px,.75fr) minmax(0,1fr);grid-template-areas:"art heading" "list list";gap:12px 0;padding-block:56px 64px}.questions-illustration{max-width:280px}.questions-heading>h2{margin-bottom:0}.site-footer .footer-main{flex-direction:column;gap:14px}}
@media(max-width:520px){.wrap{width:calc(100% - 32px)}.island-note{flex-direction:column;gap:18px;padding:34px 22px;font-size:32px}.island-note-symbol{width:64px;height:64px;border-radius:18px}.site-header{gap:16px}.brand{gap:8px}.brand>.brand-icon{width:34px;height:34px}.nav-wordmark{width:clamp(184px,55vw,240px)}.brand small{display:none}.button.small{padding:10px 12px;font-size:15px}.button.small svg{display:none}
.hero h1{font-size:clamp(40px,12vw,52px)}.intro{font-size:17px}.play-button{width:100%;font-size:22px}
.postcards{grid-template-columns:1fr;gap:26px;max-width:360px;margin-inline:auto}.polaroid-print h3{font-size:26px}.postcard>p{font-size:16px;margin-inline:26px}
.steps li{gap:16px}.step-number{width:46px;height:46px;font-size:20px}.steps li:not(:last-child):before{left:21px}
.questions summary{font-size:16px}.questions details p{padding-right:8px}
.site-footer{padding-bottom:max(40px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* ---------- secondary-page shoreline (accounts.php, developer.php, legal pages) ---------- */
.shore{display:block;width:100%;height:auto;margin-top:-1px;background:#0f78b3}

/* ---------- launcher (play.php preparation page) ---------- */
.launcher .sea-full{min-height:calc(100vh - 140px);display:flex;flex-direction:column}
/* play.php wraps its hero in <main id="main"> to match the homepage's header/hero
   structure. display:contents removes that wrapper from layout so .hero still
   participates directly as the flex child of .sea-full below. */
.launcher #main{display:contents}
.launcher .hero{flex:1;padding-block:20px 80px}
.launcher .hero h1{font-size:clamp(44px,5vw,72px)}

/* ---------- legal pages (terms, privacy, trademarks) ---------- */
.legal-content{padding-block:44px 70px;max-width:52rem}
.legal-content h1{color:var(--wood-3);font-size:clamp(34px,5vw,50px);margin-bottom:6px}
.legal-content .legal-updated{color:var(--ink-2);font-size:14px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin-bottom:30px}
.legal-content h2{color:var(--wood-3);font-size:26px;margin:38px 0 12px}
.legal-content h2:first-of-type{margin-top:0}
.legal-content p{margin:14px 0;color:var(--ink-2);line-height:1.7}
.legal-content ul{margin:14px 0;padding-left:26px;color:var(--ink-2);line-height:1.7}
.legal-content li{margin:6px 0}
.legal-content a{color:var(--wood-3);font-weight:800}
.legal-owner-note{background:var(--paper-2);border:2px dashed var(--wood-2);border-radius:14px;padding:16px 20px;margin-bottom:30px;color:var(--ink-2);font-size:14px;line-height:1.6}
@media(max-width:560px){.legal-content{padding-block:30px 50px}}
/* Blunk.Works credit: lowercase wordmark, "blunk" white and ".works" green, per the supplied logo */
.blunk-works{font-family:var(--body,Nunito,system-ui,sans-serif);font-weight:900;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.blunk-works .bw-a{color:#ffffff}
.blunk-works .bw-b{color:#9dcb3c}
.blunk-works:hover .bw-b{color:#b5e04f}

/* Landscape prints (2026-10-12): real 16:9 game screenshots shown whole, no crop.
   polaroid-frame-wide.webp (1200x873) is polaroid-frame.webp with 327 px taken out of the middle
   rows (window now 740x417, 16:9) and the old outline mask baked into its alpha. */
.postcards{grid-template-columns:repeat(3,1fr);gap:40px 30px}
.polaroid-print{aspect-ratio:1000/838}
.polaroid-print .snapshot-image{left:12.25%;top:14.36%;width:75.1%;height:50.41%;object-fit:cover}
.polaroid-print .snapshot-frame{top:-4.1766%;height:104.1766%;-webkit-mask:none;mask:none}
.polaroid-print h3{top:64.6%;height:23.4%;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,1.7vw,24px)}
.postcard>p{margin-inline:18px}
.places-more{margin:34px 0 0;text-align:center;font-weight:800}
.places-more a{color:var(--wood-3);text-underline-offset:4px}
@media(max-width:1100px){.postcards{grid-template-columns:repeat(2,1fr)}.polaroid-print h3{font-size:clamp(20px,2.6vw,26px)}}
@media(max-width:520px){.postcards{grid-template-columns:1fr;max-width:440px}.polaroid-print h3{font-size:24px}}

/* Pictures page, /pictures.html (2026-10-12): every website picture from the game, as a tour. */
.gallery{padding-block:44px 40px}
.gallery-wide{margin:0}
.gallery-wide img{display:block;width:100%;height:auto;border-radius:22px;border:3px solid var(--wood-3);box-shadow:0 8px 0 var(--wood-3),0 20px 40px #3e241033;background:var(--ocean)}
.gallery-wide figcaption{text-align:center;font-family:var(--display);font-size:clamp(24px,2.6vw,32px);color:var(--wood-3);margin-top:18px}
.gallery-group h2{font-size:clamp(30px,3.4vw,44px);color:var(--wood-3);text-align:center;margin:64px 0 30px}
.gallery-play{text-align:center;margin:64px 0 0}
.hero-copy .play-button{margin-top:22px}