/* Tidewash pages on aigovmap.com, one page per language: tidewash[-ja|-zh-hans|-zh-hant|-ko].html, tidewash-support[-…].html and
   tidewash-privacy[-…].html. Design C, "one slice of the beach": the real scene (sky, castle, sea) on top, then the view tips down to
   the sand, as the game does when it enters Calm Sea, and headings are written into the wet sand.
   Light = Town Beach in the afternoon; dark = Moonlight Beach at night.
   Same page skeleton and links as clickaroo.css (site header with the panda mark, footer, .doc, .contact-card, FAQ details).

   One pixel grid, like the game: body text snaps to whole font pixels and every border, notch, shadow, icon and gap is a whole
   number of --u (one UI pixel = body / 12). iPhone (@3x) snaps to 4 px, Mac (@2x) to 6 px. html{font:-apple-system-body} lets the
   iOS text size drive it: default 17 → 16 px (k = 4), XXXL 23 → 20 px (k = 5), the same step the app takes.
   Fonts: self-hosted OFL subsets (licence: /assets/tidewash-fonts-OFL.txt), renamed "Tidewash Pixel" as in the app, one heading
   face and one text face per language, chosen by <html lang>; a page downloads only those two and the small shared face
   ('Tidewash Pixel': English headings, the language switcher and the fallback; 'Tidewash Pixel Mark' only where a › appears). Nothing is loaded from other sites; no JavaScript. */
@font-face{font-family:'Tidewash Pixel';src:url('/assets/tidewash-pixel-latin.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel Text';src:url('/assets/tidewash-pixel-text-latin.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel JP';src:url('/assets/tidewash-pixel-jp.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel Text JP';src:url('/assets/tidewash-pixel-text-jp.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel SC';src:url('/assets/tidewash-pixel-sc.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel Text SC';src:url('/assets/tidewash-pixel-text-sc.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel TC';src:url('/assets/tidewash-pixel-tc.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel Text TC';src:url('/assets/tidewash-pixel-text-tc.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel KR';src:url('/assets/tidewash-pixel-kr.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel Text KR';src:url('/assets/tidewash-pixel-text-kr.woff') format('woff');font-display:swap}
@font-face{font-family:'Tidewash Pixel Mark';src:url('/assets/tidewash-pixel-mark.woff') format('woff');font-display:swap}

html{font:-apple-system-body}
:root{
  --snap:4px;--f:.94rem;
  --b:round(nearest,var(--f),var(--snap));
  --u:calc(var(--b) / 12);
  --t-xs:round(nearest,calc(var(--f) * .75),var(--snap));
  --t-l:round(nearest,calc(var(--f) * 1.25),var(--snap));
  --t-h3:round(nearest,calc(var(--f) * 1.25),var(--snap));
  --t-h2:round(nearest,calc(var(--f) * 2),var(--snap));
  --t-hero:round(nearest,calc(var(--f) * 3.5),var(--snap));
  --lh:calc(var(--u) * 18);--lh-cjk:calc(var(--u) * 20);
  --gutter:20px;--wrap:1160px;
  --text-face:'Tidewash Pixel Text';--head-face:'Tidewash Pixel';--lh-body:var(--lh);--title-em:5.2;
  --text:var(--text-face),'Tidewash Pixel','Tidewash Pixel Mark',ui-monospace,monospace;
  --bold:var(--head-face),'Tidewash Pixel','Tidewash Pixel Mark',ui-monospace,monospace;
  /* colours, all taken from the game (sky bands, sand, plum panels, warm button, scene-text outline) */
  --outline:#3A2236;--t1:#FFF6E6;--t2:#ECDCC8;
  --dry:#ECAD73;--wet:#A66D45;--side:#8C6348;
  --ink:#3A2230;--ink-2:#5A3A2E;--muted:#6E4A36;--link:#17475C;
  --groove:#74502F;--groove-lo:#4F331C;--groove-hi:#FFD7A6;
  --panel:#281D2C;--panel-hi:#645066;--panel-lo:#18101C;--edge:#0C0810;--paper:#FFF6E6;--paper-ink:#3A2230;--paper-ink-2:#5A4152;
  --peach-top:#FFDCA8;--peach:#FFBA84;--peach-edge:#7C3E34;--peach-ink:#3A2230;--peach-hi:#FFF0D6;--peach-lo:#EC9E72;
  --veil:transparent;--shade:rgb(58 34 48 / .32);--doc-veil:rgb(255 246 230 / .5);--icon-row:-1;
  color-scheme:light dark;
}
@media (max-resolution:2.5dppx){:root{--snap:6px;--f:1.125rem}}
:root:lang(ja){--text-face:'Tidewash Pixel Text JP';--head-face:'Tidewash Pixel JP';--lh-body:var(--lh-cjk);--title-em:6.4}
:root:lang(zh-Hans){--text-face:'Tidewash Pixel Text SC';--head-face:'Tidewash Pixel SC';--lh-body:var(--lh-cjk);--title-em:3.3}
:root:lang(zh-Hant){--text-face:'Tidewash Pixel Text TC';--head-face:'Tidewash Pixel TC';--lh-body:var(--lh-cjk);--title-em:3.3}
:root:lang(ko){--text-face:'Tidewash Pixel Text KR';--head-face:'Tidewash Pixel KR';--lh-body:var(--lh-cjk)}
@media (min-width:900px){:root{--t-hero:round(nearest,calc(var(--f) * 4),var(--snap));--gutter:60px}}
@media (prefers-color-scheme:dark){:root{
  --outline:#0B1230;--dry:#4D383E;--wet:#2E2330;--side:#3E2C33;
  --ink:#ECDCC8;--ink-2:#D9C8D4;--muted:#C8B6A6;--link:#CCE8FC;
  --groove:#E6D6E6;--groove-lo:#1C1420;--groove-hi:#6E5A70;
  --veil:rgb(20 22 48 / .7);--shade:rgb(20 22 48 / .7);--doc-veil:rgb(20 22 48 / .78);--icon-row:0;
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--u) * 12);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--text);font-size:var(--b);line-height:var(--lh-body);font-weight:400;font-synthesis:none;font-kerning:none;
  -webkit-font-smoothing:none;text-rendering:optimizeSpeed;hyphens:manual;color:var(--ink);
  background:linear-gradient(var(--veil),var(--veil)),url('/assets/tidewash-sand-top.webp') 0 0/480px auto var(--dry)}
:root:lang(ja) body,:root:lang(zh-Hans) body,:root:lang(zh-Hant) body{line-break:strict}
:root:lang(ko) body,[lang="ko"]{word-break:keep-all}
h1,h2,h3,.bold,strong,summary,.button{font-family:var(--bold);font-weight:400;line-height:1.25;letter-spacing:0}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.nb{white-space:nowrap}
main{overflow-x:clip}
.wrap{width:min(var(--wrap),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.col{max-width:36em;margin-inline:auto;text-align:center}
.skip-link{position:absolute;left:12px;top:-80px;z-index:30;padding:10px 16px;background:var(--paper);color:var(--paper-ink)}
.skip-link:focus{top:10px}
a:focus-visible,summary:focus-visible{outline:calc(var(--u) * 2) solid currentColor;outline-offset:calc(var(--u) * 2)}
::selection{background:var(--peach-top);color:var(--peach-ink)}

/* pixel parts */
.scene-text,.sky .names,.sky h1{color:var(--t1);text-shadow:var(--u) 0 0 var(--outline),calc(var(--u) * -1) 0 0 var(--outline),0 var(--u) 0 var(--outline),0 calc(var(--u) * -1) 0 var(--outline),
  var(--u) var(--u) 0 var(--outline),calc(var(--u) * -1) var(--u) 0 var(--outline),var(--u) calc(var(--u) * -1) 0 var(--outline),calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--outline),
  0 calc(var(--u) * 2) 0 var(--outline)}
.engraved{color:var(--groove);text-shadow:calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--groove-lo),var(--u) var(--u) 0 var(--groove-hi)}
h2.engraved{font-size:var(--t-h2)}
.lead{font-size:var(--t-l);line-height:1.4}
.text-link{color:var(--link);padding-bottom:calc(var(--u) * 2);
  background:repeating-linear-gradient(90deg,currentColor 0 var(--u),transparent 0 calc(var(--u) * 2)) 0 100%/100% var(--u) no-repeat}
.button{display:inline-flex;align-items:center;gap:calc(var(--u) * 6);min-height:44px;padding:calc(var(--u) * 4) calc(var(--u) * 12);font-size:var(--b);
  color:var(--peach-ink);background:linear-gradient(var(--peach-top) 50%,var(--peach) 0);text-shadow:none;
  box-shadow:0 calc(var(--u) * -1) 0 0 var(--peach-edge),0 var(--u) 0 0 var(--peach-edge),calc(var(--u) * -1) 0 0 0 var(--peach-edge),var(--u) 0 0 0 var(--peach-edge),
    inset 0 var(--u) 0 0 var(--peach-hi),inset 0 calc(var(--u) * -1) 0 0 var(--peach-lo),0 calc(var(--u) * 3) 0 0 var(--panel-lo)}
.button.soon{cursor:default}
.button .dot{width:calc(var(--u) * 3);height:calc(var(--u) * 3);background:var(--peach-edge)}
a.button:active{transform:translateY(var(--u))}
/* the store state: <html data-store="soon|live"> picks one of the two calls to action */
html[data-store="soon"] .cta-live,html[data-store="live"] .cta-soon{display:none!important}
.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(var(--u) * 9) calc(var(--u) * 15);margin-top:calc(var(--u) * 15)}
/* the game's 12 x 12 icons, 16 x 16 finds and 16 x 16 "Ways of the Sea" frames, always whole multiples of --u */
.i{--isz:calc(var(--u) * 12);display:inline-block;flex:none;width:var(--isz);height:var(--isz);vertical-align:calc(var(--u) * -2);image-rendering:pixelated;
  background:url('/assets/tidewash-icons.png') no-repeat;background-size:calc(var(--isz) * var(--icons)) calc(var(--isz) * 2);
  background-position:calc(var(--isz) * -1 * var(--ix,0)) 0}
.i.ink{background-position-y:calc(var(--isz) * var(--icon-row))}
.find{display:block;width:calc(var(--u) * 48);height:calc(var(--u) * 48);image-rendering:pixelated;
  background:url('/assets/tidewash-finds.png') no-repeat;background-size:calc(var(--u) * 48 * 12) calc(var(--u) * 48);background-position:calc(var(--u) * -48 * var(--fx,0)) 0}
.guide{display:block;flex:none;width:calc(var(--u) * 64);height:calc(var(--u) * 64);image-rendering:pixelated;
  background:url('/assets/tidewash-guides.png') 0 0/calc(var(--u) * 64 * 9) calc(var(--u) * 64 * 3) no-repeat;animation:guide 1.8s steps(9) infinite}
@keyframes guide{from{background-position-x:0}to{background-position-x:calc(var(--u) * -64 * 9)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.guide{animation:none;background-position-x:calc(var(--u) * -192)}}

/* site header (same links as Clickaroo), floating over the sky */
.site-header{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u) * 6) calc(var(--u) * 12);
  padding-block:calc(var(--u) * 9);padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));font-size:var(--t-xs)}
.site-header{color:var(--t1);text-shadow:var(--u) 0 0 var(--outline),calc(var(--u) * -1) 0 0 var(--outline),0 var(--u) 0 var(--outline),0 calc(var(--u) * -1) 0 var(--outline),0 calc(var(--u) * 2) 0 var(--outline)}
.site-brand{display:flex;align-items:center;gap:calc(var(--u) * 6)}
.site-brand .chip{width:calc(var(--u) * 24);height:calc(var(--u) * 24);display:grid;place-items:center;flex:none;background:var(--paper);box-shadow:0 0 0 var(--u) var(--outline)}
.site-brand .chip img{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.page-nav{display:flex;gap:calc(var(--u) * 12);margin-left:auto}
.page-nav a{padding-block:calc(var(--u) * 6)}
.page-nav a:hover{color:#FFE0B0}
.lang-switch{display:flex;gap:calc(var(--u) * 2);font-family:'Tidewash Pixel',ui-monospace,monospace;line-height:1.25}
.lang-switch a{min-width:calc(var(--u) * 24);min-height:44px;display:grid;place-items:center;padding-inline:calc(var(--u) * 4);background:rgb(24 16 28 / .55)}
.lang-switch a[aria-current],.lang-switch a:hover{background:rgb(255 246 230 / .92);color:var(--paper-ink);text-shadow:none}

/* the sky: the real scene, edge to edge */
.sky{position:relative;isolation:isolate;overflow:hidden}
.scene img{width:100%;aspect-ratio:1320/2280;object-fit:cover}
.sky-copy{position:absolute;inset:auto 0 0;top:calc(var(--u) * 120);display:grid;align-content:start;justify-items:center;gap:calc(var(--u) * 4);text-align:center}
.sky .names{font-size:var(--t-xs)}
.sky h1{display:grid;justify-items:center;gap:calc(var(--u) * 6)}
.sky h1 .title{font-size:min(var(--t-hero),round(down,calc((100vw - 2 * var(--gutter)) / var(--title-em)),var(--snap)));line-height:1.05;white-space:nowrap}
.sky h1 .sub{font-family:var(--text);font-size:var(--t-l);line-height:1.3}

/* the shoreline: side-view sand continues under the scene, then a checkerboard seam drops onto the sand seen from above */
.shoreline{position:relative;color:var(--t1);padding-block:calc(var(--u) * 18) calc(var(--u) * 30);
  background:linear-gradient(var(--shade),var(--shade)),url('/assets/tidewash-sand-side.webp') 0 0/400px auto var(--side)}
.shoreline::after{content:'';position:absolute;inset:auto 0 calc(var(--u) * -4);height:calc(var(--u) * 4);
  background:conic-gradient(var(--side) 25%,transparent 0 50%,var(--side) 0 75%,transparent 0) 0 0/calc(var(--u) * 2) calc(var(--u) * 2)}
.shoreline .col>p,.shoreline .lead,.shoreline .availability,.shoreline .promise{color:var(--t1);text-shadow:0 var(--u) 0 var(--outline)}
.shoreline .text-link{color:#FFE0B0}
.availability{font-size:var(--t-xs);margin-top:calc(var(--u) * 12)}
.promise{list-style:none;padding:0;margin-top:calc(var(--u) * 15);display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u) * 4) calc(var(--u) * 12);font-size:var(--t-xs)}
.promise li{display:flex;align-items:center;gap:calc(var(--u) * 3)}

/* sections written in the sand */
.written,.beaches,.calm,.bare,.shore,.langs,.private{margin-top:calc(var(--u) * 54)}
.written{margin-top:calc(var(--u) * 42)}
.col>p,.col-text>p{margin-top:calc(var(--u) * 9);color:var(--ink-2)}
.steps{list-style:none;padding:0;margin-top:calc(var(--u) * 24);display:grid;gap:calc(var(--u) * 21);text-align:left}
.step{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u) * 12);align-items:center;align-content:start}
.step .guide,.postcard img,.topdown>img{box-shadow:0 0 0 var(--u) var(--groove-lo),calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--u) rgb(79 51 28 / .3)}
.step p{margin-top:calc(var(--u) * 3);color:var(--ink-2)}
.g-hold{background-position-y:0}.g-perfect{background-position-y:calc(var(--u) * -64)}.g-upgrades{background-position-y:calc(var(--u) * -128)}

/* five beaches: postcards along the profile */
.postcards{list-style:none;margin:calc(var(--u) * 21) 0 0;padding:0 var(--gutter) calc(var(--u) * 9);display:grid;grid-auto-flow:column;grid-auto-columns:220px;
  gap:calc(var(--u) * 12);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter)}
.postcard{scroll-snap-align:start;display:grid;gap:calc(var(--u) * 3);align-content:start}
.postcard img{width:100%;aspect-ratio:3/4;object-fit:cover}
.postcard .tod{display:flex;align-items:center;gap:calc(var(--u) * 3);font-size:var(--t-xs);color:var(--muted);margin-top:calc(var(--u) * 6)}
.postcard h3{font-size:var(--b)}
.postcard .intro{font-size:var(--t-xs);color:var(--ink-2);margin-top:calc(var(--u) * 2)}
.postcard .note{font-size:var(--t-xs);color:var(--ink);margin-top:calc(var(--u) * 3)}
.far{max-width:36em;margin:calc(var(--u) * 21) auto 0;padding-top:calc(var(--u) * 9);text-align:center;color:var(--ink-2);
  background:repeating-linear-gradient(90deg,var(--groove) 0 var(--u),transparent 0 calc(var(--u) * 3)) 50% 0/60% var(--u) no-repeat}

/* Glowtide: the one far shore shown, always at night (a dark band in light mode too) */
.glow{margin-top:calc(var(--u) * 42);padding-block:calc(var(--u) * 36);color:var(--t1);--outline:#0B1230;
  background:linear-gradient(#0B0D20 0 20%,#0F1327 0 40%,#151A36 0 60%,#1C2A46 0 80%,#233154 0)}
.glow-inner{display:grid;gap:calc(var(--u) * 18);justify-items:center;text-align:center}
.glow-shot{margin:0;width:min(100%,306px)}
.glow-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;box-shadow:0 0 0 var(--u) #0C0810,0 0 0 calc(var(--u) * 3) #2A385B}
.glow .eyebrow{font-size:var(--t-xs);color:#CCE8FC;text-transform:uppercase;letter-spacing:.08em}
.glow h2{font-size:var(--t-h2);margin-top:calc(var(--u) * 4)}
.glow .tod{display:inline-flex;align-items:center;gap:calc(var(--u) * 3);font-size:var(--t-xs);color:var(--t2);margin-top:calc(var(--u) * 9)}
.glow-line{font-size:var(--t-l);line-height:1.4;color:#CCE8FC;margin-top:calc(var(--u) * 4)}
/* calm sea, from above */
.calm{display:grid;gap:calc(var(--u) * 18)}
.topdown{margin:0;justify-self:center;display:grid;gap:calc(var(--u) * 6);justify-items:center;width:100%;max-width:440px}
.topdown>img{width:100%}
.topdown figcaption{display:flex;align-items:center;gap:calc(var(--u) * 3);font-size:var(--t-xs);color:var(--muted)}
.col-text{text-align:left;max-width:30em}
.col-text h3.engraved{font-size:var(--t-h3);margin-top:calc(var(--u) * 24)}

/* bare hands */
.bare .marks{display:flex;justify-content:center;gap:calc(var(--u) * 6);margin-bottom:calc(var(--u) * 9)}
.bare .marks .i{--isz:calc(var(--u) * 24)}

/* bare hands, the bottle card and each language's Calm Sea: real captures, sized so 1 image pixel = 1 iPhone pixel */
.bare-shot,.bottle-shot,.bare-shot img{width:220px;margin-inline:auto}
.bottle-shot img{width:min(100%,320px);margin-inline:auto}
.bottle-shot figcaption{display:flex;justify-content:center;align-items:center;gap:calc(var(--u) * 3);font-size:var(--t-xs);color:var(--muted);margin-top:calc(var(--u) * 6)}
.bare-shot img,.bottle-shot img{box-shadow:0 0 0 var(--u) var(--groove-lo),calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--u) rgb(79 51 28 / .3)}

/* also on the shore: the game's icons and its twelve finds */
.shore-list{list-style:none;padding:0;margin:calc(var(--u) * 18) auto 0;max-width:36em;display:grid;gap:calc(var(--u) * 9);text-align:left}
.shore-list li{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u) * 6);align-items:start;color:var(--ink-2)}
.shore-list li .i{margin-top:calc(var(--u) * 3)}
.sounds{display:inline-flex;gap:calc(var(--u) * 2)}
.scatter{list-style:none;padding:0;margin:calc(var(--u) * 24) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u) * 9) calc(var(--u) * 12);max-width:calc(var(--u) * 260)}
.scatter li:nth-child(3n+1){transform:translate(calc(var(--u) * 3),calc(var(--u) * -4))}
.scatter li:nth-child(3n+2){transform:translate(calc(var(--u) * -2),calc(var(--u) * 5))}
/* privacy note + closing */
.private .big{font-size:var(--t-l);line-height:1.4;color:var(--ink)}
.private .text-link{display:inline-block;margin-top:calc(var(--u) * 12)}
.closing{padding-block:calc(var(--u) * 54) calc(var(--u) * 48)}
.closing-icon{width:calc(var(--u) * 48);height:calc(var(--u) * 48);margin:0 auto calc(var(--u) * 12)}
.closing-footnote,.closing-updated{font-size:var(--t-xs)}
.col>p.closing-footnote{margin-top:calc(var(--u) * 18)}
.col>p.closing-updated{margin-top:calc(var(--u) * 3)}

/* footer on wet sand */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 6) calc(var(--u) * 12);font-size:var(--t-xs);background:var(--wet);color:var(--t1);
  padding-block:calc(var(--u) * 18) calc(var(--u) * 24);padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.site-footer>div{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 6) calc(var(--u) * 12);margin-left:auto}
.site-footer a{min-height:44px;display:inline-flex;align-items:center}
.site-footer a:hover{color:#FFE0B0}
.footer-brand{color:var(--t1)}

/* support and privacy: a strip of the horizon on top, then the documents on lighter sand */
.doc-page{background:linear-gradient(var(--doc-veil),var(--doc-veil)),url('/assets/tidewash-sand-top.webp') 0 0/480px auto var(--dry)}
.horizon{position:relative;height:calc(var(--u) * 150);overflow:hidden}
.horizon img{width:100%;height:100%;object-fit:cover;object-position:50% 78%}
.doc-page main{padding-bottom:calc(var(--u) * 36)}
.doc{max-width:42em;padding-block:calc(var(--u) * 30);scroll-margin-top:calc(var(--u) * 6)}
.doc+.doc{background:conic-gradient(var(--groove-hi) 25%,transparent 0 50%,var(--groove-hi) 0 75%,transparent 0) 0 0/calc(var(--u) * 2) calc(var(--u) * 2) repeat-x}
.doc .product-line{display:flex;align-items:center;gap:calc(var(--u) * 6);font-size:var(--t-xs);color:var(--muted)}
.doc .product-line img{width:calc(var(--u) * 24);height:calc(var(--u) * 24)}
.doc h1,.doc .doc-title{font-size:var(--t-h2);margin-top:calc(var(--u) * 9);color:var(--groove);text-shadow:calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--groove-lo),var(--u) var(--u) 0 var(--groove-hi)}
.doc h2{font-size:var(--t-h3);margin:calc(var(--u) * 21) 0 calc(var(--u) * 6);color:var(--ink)}
.doc .lead{margin-top:calc(var(--u) * 9);color:var(--ink)}
.doc p,.doc li{color:var(--ink-2)}
.doc strong{color:var(--ink)}
.doc ul{padding-left:1.2em;display:flex;flex-direction:column;gap:calc(var(--u) * 4)}
.doc p+p,.doc ul+p,.doc p+ul{margin-top:calc(var(--u) * 9)}
.doc .doc-meta{font-size:var(--t-xs);margin-top:calc(var(--u) * 6);color:var(--muted)}
.contact-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--u) * 6) calc(var(--u) * 9);
  margin-top:calc(var(--u) * 12);padding:calc(var(--u) * 6) calc(var(--u) * 9);background:var(--paper);color:var(--paper-ink);
  box-shadow:0 0 0 calc(var(--u) * 3) var(--panel),0 0 0 calc(var(--u) * 4) var(--edge)}
.contact-card span{color:var(--paper-ink-2);font-size:var(--t-xs)}
.contact-card a{color:#17475C;font-family:var(--bold);overflow-wrap:anywhere}
.doc p.after-card{margin-top:calc(var(--u) * 12)}
.faq-list{margin-top:calc(var(--u) * 6);background:repeating-linear-gradient(90deg,var(--groove) 0 var(--u),transparent 0 calc(var(--u) * 2)) 0 0/100% var(--u) no-repeat}
details{background:repeating-linear-gradient(90deg,var(--groove) 0 var(--u),transparent 0 calc(var(--u) * 2)) 0 100%/100% var(--u) no-repeat}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 9);padding:calc(var(--u) * 9) 0;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary>span{min-width:0}
summary::after{content:'+';font-family:'Tidewash Pixel',ui-monospace,monospace;color:var(--link);font-size:var(--t-h3);line-height:1;flex-shrink:0}
details[open] summary::after{content:'-'}
.doc details p{padding:0 calc(var(--u) * 12) calc(var(--u) * 12) 0}

@media (max-width:719px){
  .button{padding-inline:calc(var(--u) * 6);gap:calc(var(--u) * 4);text-align:center;line-height:1.3}
  .site-brand>span:not(.chip){display:none}
  .page-nav a:not(:first-child){display:none}
  .lang-switch{flex-basis:100%;justify-content:space-between}
  .lang-switch a{flex:1}
  .site-footer>div{margin-left:0;flex-basis:100%}
  /* long unbreakable document titles fit at XXXL */
  .doc h1,.doc .doc-title{font-size:round(nearest,calc(var(--f) * 1.5),var(--snap))}
}
@media (min-width:900px){
  /* the wide hero is shown one CSS pixel per image pixel: exactly 2x on Retina, 1x elsewhere, never smoothed up */
  .sky{background:var(--band) 50% 0/100% var(--band-h) no-repeat var(--side)}
  .scene img{position:relative;left:50%;width:var(--wide-w);max-width:none;height:var(--band-h);aspect-ratio:auto;transform:translateX(-50%);image-rendering:pixelated}
  .sky-copy{top:calc(var(--u) * 96);justify-items:start;text-align:left;width:min(var(--wrap),calc(100% - 2 * var(--gutter)));margin-inline:auto;left:0;right:0}
  .sky h1{justify-items:start}
  .written.col{max-width:var(--wrap)}
  .written .lead{max-width:30em;margin-inline:auto}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step{grid-template-columns:1fr;justify-items:start}
  .postcards{width:min(var(--wrap),calc(100% - 2 * var(--gutter)));margin-inline:auto;padding-inline:0;grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
  .glow-inner{grid-template-columns:306px minmax(0,26em);justify-content:center;align-items:center;text-align:left;justify-items:start;gap:calc(var(--u) * 36)}
  .calm{grid-template-columns:440px minmax(0,30em);align-items:center;gap:calc(var(--u) * 36);justify-content:center}
  .topdown>img{width:440px}
  .scatter{max-width:none}
  .horizon{height:calc(var(--u) * 200)}
  .horizon img{position:relative;left:50%;width:var(--wide-w);max-width:none;height:var(--band-h);transform:translateX(-50%);object-fit:none;object-position:0 0;
    margin-top:calc(var(--u) * 200 - var(--band-h) * .75);image-rendering:pixelated}
  .horizon{background:var(--band) 50% calc(var(--u) * 200 - var(--band-h) * .75)/100% var(--band-h) no-repeat var(--side)}
}

/* TIDEWASH-002 trailer: the existing square pixel frame and sand colours. */
.trailer{margin-top:calc(var(--u) * 42);text-align:center}
.trailer figure{width:100%;margin:calc(var(--u) * 18) auto 0}
.trailer .trailer-frame{padding:calc(var(--u) * 3);border:var(--u) solid var(--edge);background:var(--panel)}
.trailer video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:var(--panel-lo);image-rendering:pixelated}
.trailer figcaption{margin-top:calc(var(--u) * 9);font-size:var(--t-xs);color:var(--ink-2)}
@media (min-width:900px){
  .trailer figure{max-width:calc(80vh * 9 / 16)}
}
/* TIDEWASH-002 trailer end */

/* @generated by _src/build_tidewash.py: icon sprite positions and the hero's edge bands (do not edit by hand) */
:root{--icons:21;--wide-w:1560px;--band-h:1200px;--band:linear-gradient(#BB8484 0px 29px,#C68484 29px 37px,#BB8484 37px 44px,#C68484 44px 88px,#C68F84 88px 176px,#D18F84 176px 198px,#D19A84 198px 308px,#DC9A8F 308px 315px,#DCA58F 315px 323px,#DCA584 323px 330px,#DCA58F 330px 345px,#DCA584 345px 352px,#DCA58F 352px 418px,#E7B08F 418px 425px,#E7A58F 425px 440px,#E7B08F 440px 543px,#E7BB8F 543px 550px,#E7B08F 550px 557px,#F2BB8F 557px 667px,#FDC68F 667px 675px,#F2BB8F 675px 682px,#F2C68F 682px 689px,#FDC68F 689px 711px,#B09A9A 711px 719px,#A58F9A 719px 733px,#9A8F9A 733px 741px,#9A8F8F 741px 748px,#9A848F 748px 770px,#8F848F 770px 807px,#979599 807px 814px,#84848F 814px 858px,#79798F 858px 895px,#6E798F 895px 917px,#74848C 917px 924px,#738F95 924px 931px,#668C94 931px 939px,#5A8A94 939px 946px,#538091 946px 953px,#4F7F8C 953px 961px,#4B7D8B 961px 968px,#487789 968px 975px,#407689 975px 983px,#3C7488 983px 990px,#397186 990px 997px,#386E84 997px 1005px,#366B82 1005px 1012px,#346880 1012px 1019px,#2F677F 1019px 1027px,#2E657D 1027px 1034px,#2E647C 1034px 1041px,#3D697A 1041px 1049px,#4B6F79 1049px 1053px,#4F7079 1053px 1057px,#93806E 1057px 1061px,#AB8361 1061px 1065px,#9D7154 1065px 1069px,#996D50 1069px 1073px,#8E6245 1073px 1077px,#916548 1077px 1081px,#936749 1081px 1085px,#976A4D 1085px 1089px,#8F664C 1089px 1093px,#95684B 1093px 1097px,#936749 1097px 1101px,#8A6147 1101px 1105px,#926649 1105px 1109px,#8F654B 1109px 1113px,#8E644A 1113px 1117px,#8A6147 1117px 1121px,#8C6348 1121px 1125px,#845B40 1125px 1129px,#896046 1129px 1133px,#8A6147 1133px 1137px,#8B6248 1137px 1141px,#8F664C 1141px 1146px,#90674D 1146px 1150px,#92694F 1150px 1154px,#90674D 1154px 1158px,#936A4F 1158px 1162px,#946A50 1162px 1166px,#8D6349 1166px 1170px,#865C42 1170px 1174px,#90674D 1174px 1178px,#936A4F 1178px 1182px,#8E644A 1182px 1186px,#90674D 1186px 1190px,#8F654B 1190px 1194px,#8E644A 1194px 1198px,#90674D 1198px 1200px)}
@media (prefers-color-scheme:dark){:root{--band:linear-gradient(#1C2A4D 0px 7px,#232A4D 7px 14px,#1C2A4D 14px 21px,#232A4D 21px 29px,#1C2A4D 29px 102px,#1C2A46 102px 109px,#1C2A4D 109px 117px,#1C2A46 117px 139px,#1C2A4D 139px 241px,#23314D 241px 329px,#233154 329px 417px,#233854 417px 425px,#233154 425px 439px,#233854 439px 454px,#2A3854 454px 483px,#2A385B 483px 593px,#2A3F5B 593px 601px,#2A385B 601px 608px,#2A3F5B 608px 652px,#313F62 652px 659px,#2A3F5B 659px 667px,#313F62 667px 755px,#314662 755px 762px,#313F62 762px 777px,#314662 777px 828px,#314669 828px 835px,#314662 835px 843px,#384669 843px 850px,#314669 850px 857px,#384669 857px 901px,#384662 901px 909px,#2A3854 909px 997px,#2A384D 997px 1004px,#39475F 1004px 1011px,#23314D 1011px 1077px,#233146 1077px 1092px,#27435F 1092px 1099px,#2F4D6F 1099px 1107px,#25466C 1107px 1114px,#24456C 1114px 1121px,#24446C 1121px 1129px,#214067 1129px 1136px,#213F67 1136px 1143px,#203E66 1143px 1151px,#1E3D66 1151px 1158px,#1D3B65 1158px 1165px,#1B3861 1165px 1173px,#1A375E 1173px 1180px,#19345B 1180px 1187px,#183259 1187px 1195px,#173058 1195px 1200px)}}
.i-tod-afternoon{--ix:0}
.i-tod-evening{--ix:1}
.i-tod-night{--ix:2}
.i-tod-overcast{--ix:3}
.i-tod-sunset{--ix:4}
.i-tod-new-moon{--ix:5}
.i-check{--ix:6}
.i-smooth{--ix:7}
.i-bottle{--ix:8}
.i-camera{--ix:9}
.i-guide{--ix:10}
.i-podium{--ix:11}
.i-bare-hands{--ix:12}
.i-shell{--ix:13}
.i-gull{--ix:14}
.i-scenery{--ix:15}
.i-sea-lap{--ix:16}
.i-sea-surf{--ix:17}
.i-sea-pebble{--ix:18}
.i-sea-distant{--ix:19}
.i-sea-pool{--ix:20}
.f-sakuraShell{--fx:0}
.f-cowrie{--fx:1}
.f-hardClam{--fx:2}
.f-scallop{--fx:3}
.f-tuskShell{--fx:4}
.f-turbanShell{--fx:5}
.f-whelk{--fx:6}
.f-seaGlassBlue{--fx:7}
.f-seaGlassGreen{--fx:8}
.f-urchinTest{--fx:9}
.f-sandDollar{--fx:10}
.f-starSand{--fx:11}
/* @generated end */