/* The homepage sea. Styles only apply on body.sea-home. */

/* One screen: sky above, Boston's sea below; the name sits in the corner like a note on a window. */
body.sea-home{
  --ink:#e9e4d6;        /* starlight paper */
  --ink-dim:#a9a99f;
  --deep:#070b16;       /* Atlantic at night */
  --sun:#f2c46b;        /* the sun nobody has become yet */
  --moon:#b9c6d6;       /* reflected light */
  --glow:#7fe3d0;       /* inner voice, bioluminescent */
  --panel:rgba(7,11,22,.55);
  --line:rgba(233,228,214,.18);
  --f-display:"Playfair Display",Georgia,serif;
  --f-cjk:"Source Serif 4","Songti SC","STSong",Georgia,serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:dark;
}
html:has(body.sea-home){height:100%}
body.sea-home{height:100%;background:var(--deep) !important;color:var(--ink);font-family:var(--f-cjk);overflow:hidden;margin:0}
/* the sea is the whole page here: the usual header and footer step aside, the name becomes the menu */
body.sea-home > .site-header, body.sea-home > .site-footer{display:none}
body.sea-home #sea-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.sea-ui{position:fixed;z-index:2;pointer-events:none}
.sea-ui *{pointer-events:auto}
.sea-head{top:calc(env(safe-area-inset-top,0px) + 20px);left:20px;right:20px;max-width:30rem}
.sea-head h1{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.3rem);margin:0;letter-spacing:.01em;line-height:1}
.sea-head h1 i{color:var(--sun)}
#sea-log{position:fixed;z-index:3;font-family:var(--f-mono);font-size:.72rem;line-height:1.7;color:var(--ink-dim);background:rgba(7,11,22,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-left:1px solid var(--sun);padding:8px 12px;max-width:min(260px,70vw);pointer-events:none;transition:opacity .6s}
#sea-log b{color:var(--ink);font-weight:500}
#sea-tip{position:fixed;z-index:3;max-width:min(280px,76vw);font-size:.95rem;line-height:1.45;pointer-events:none;transform:translate(-50%,calc(-100% - 16px));text-align:center;text-shadow:0 0 12px rgba(7,11,22,.9),0 0 3px rgba(7,11,22,.9)}
#sea-tip small{display:block;font-family:var(--f-mono);font-size:.68rem;color:var(--ink-dim);margin-top:2px}
.sea-cname{position:fixed;z-index:2;transform:translate(-50%,0);font:inherit;font-size:.78rem;letter-spacing:.18em;color:var(--ink);opacity:.62;text-shadow:0 0 10px rgba(7,11,22,.55);background:none;border:0;padding:4px 6px;cursor:pointer;white-space:nowrap;transition:opacity .4s}
.sea-cname:hover,.sea-cname[aria-expanded=true]{opacity:.95}
.sea-cname sup{font-family:var(--f-mono);font-size:.62rem;letter-spacing:0;margin-left:.35em;opacity:.7}
#sea-cat{position:fixed;z-index:4;top:calc(env(safe-area-inset-top,0px) + 84px);right:16px;bottom:84px;width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column;background:rgba(7,11,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:10px;transition:opacity .5s,transform .5s}
#sea-cat[hidden]{display:none}
#sea-cat header{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
#sea-cat h2{margin:0;font-weight:400;font-size:1.05rem;letter-spacing:.12em}
#sea-cat .meta{font-family:var(--f-mono);font-size:.68rem;color:var(--ink-dim);margin-top:4px}
#sea-cat ol{list-style:none;margin:0;padding:6px 0;overflow:auto;flex:1;min-height:0}
#sea-cat li a{display:grid;grid-template-columns:1.1rem 1fr auto;gap:8px;align-items:baseline;padding:7px 16px;color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.4}
#sea-cat li a:hover,#sea-cat li a:focus-visible{background:rgba(233,228,214,.07);outline:none}
#sea-cat li .k{font-size:.7rem}
#sea-cat li .k.n{font-family:var(--f-mono);font-size:.62rem}
#sea-cat li a:has(.n){grid-template-columns:1.9rem 1fr auto}
#sea-cat li .d{font-family:var(--f-mono);font-size:.66rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
@media (max-width:640px){#sea-cat{top:auto;height:58vh}}
#sea-brand{all:unset;cursor:pointer;display:block}
#sea-brand:focus-visible{outline:2px solid var(--sun);outline-offset:4px}
#sea-menu{display:flex;flex-direction:column;gap:2px;margin-top:10px;font-family:var(--f-display);font-size:1.05rem}
#sea-menu[hidden]{display:none}
#sea-menu a{color:var(--ink);text-decoration:none;opacity:.8;padding:2px 0;width:max-content}
#sea-menu a:hover,#sea-menu a:focus-visible{opacity:1;color:var(--sun);outline:none}
/* without scripts there is no sea: the same sky as plain links */
.sea-fallback{position:relative;z-index:1;display:grid;gap:24px;padding:120px 24px 48px;max-width:40rem}
.sea-fallback ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sea-fallback a{color:var(--ink)}
@media (scripting: none){ body.sea-home{overflow:auto} }