/* cosmicwhale.cc, drawn in the 1.cosmicwhale.cc house style:
   one monospace face, cool paper, one burnt-orange accent. The whale is drawn in characters.
   Day/night follows the system; [data-theme] on <html> overrides it. */
:root{
  --bg:#EEF1F5; --panel:#FFFFFF; --ink:#18202E; --muted:#5A6577; --line:#C9D1DC;
  --accent:#B4530B; --accent-fg:#FFFFFF; --sea:#7B93B5; --star:#8E99AB;
  --shade:rgb(24 32 46 / .16);
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:8px; --day:1; --night:0; color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10151F; --panel:#18202D; --ink:#E4E8EF; --muted:#8E99AB; --line:#2A3444;
    --accent:#F2A33A; --accent-fg:#1A1206; --sea:#2F3D55; --star:#C9D1DC;
    --shade:rgb(0 0 0 / .45); --day:0; --night:1; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10151F; --panel:#18202D; --ink:#E4E8EF; --muted:#8E99AB; --line:#2A3444;
  --accent:#F2A33A; --accent-fg:#1A1206; --sea:#2F3D55; --star:#C9D1DC;
  --shade:rgb(0 0 0 / .45); --day:0; --night:1; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  font:15px/1.55 var(--mono); -webkit-text-size-adjust:100%; transition:background-color .4s, color .4s}
main{width:100%; max-width:680px; margin:0 auto; padding:56px 16px 32px; flex:1}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* day and night text share one slot and cross-fade, so nothing below them moves */
.swap{display:grid}
button .swap{display:inline-grid}
.swap > .day,.swap > .night{grid-area:1/1; display:block !important; transition:opacity .4s, visibility .4s}
.swap > .night{opacity:0; visibility:hidden}
:root[data-theme="dark"] .swap > .day{opacity:0; visibility:hidden}
:root[data-theme="dark"] .swap > .night{opacity:1; visibility:visible}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .swap > .day{opacity:0; visibility:hidden}
  :root:not([data-theme="light"]) .swap > .night{opacity:1; visibility:visible}
}

/* show a line for one time of day only */
.night{display:none}
:root[data-theme="dark"] .day{display:none}
:root[data-theme="dark"] .night{display:inline}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .day{display:none}
  :root:not([data-theme="light"]) .night{display:inline}
}

header{display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:start; margin-bottom:28px}
h1{font-size:22px; line-height:1.2; margin:0; font-weight:700; letter-spacing:-.01em}
.lede{grid-column:1/-1; margin:0; color:var(--muted); font-size:13px; max-width:60ch}

button{font:inherit; font-size:13px; min-height:36px; padding:6px 14px; border-radius:var(--r); cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid var(--line)}
button:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- the envoy, in characters ---------- */
/* the drawing breaks out of the 680px column so the whale can be big */
.sky{position:relative; margin:8px calc(50% - min(500px, 50vw - 16px)) 28px; overflow:hidden; display:grid; justify-items:center}
.sky pre{margin:0; font:inherit; line-height:1.22; white-space:pre}
.sky .wide{font-size:min(15px, calc((100vw - 32px) / 62)); width:104ch}
.sky .narrow{display:none; font-size:min(13px, calc((100vw - 32px) / 43.5)); width:71ch}
@media (max-width:720px){ .sky .wide{display:none} .sky .narrow{display:block} }
.sky .stars{color:var(--star); opacity:var(--night); transition:opacity .4s; height:3.7em} /* fixed height: the whale never moves */
.whale{color:var(--ink)}
.whale .spout{color:var(--sea)}
.whale .eye{color:var(--accent)}
.whale .heart{color:var(--accent); opacity:var(--night); transition:opacity .4s}
.sky .sea{color:var(--sea); overflow:hidden; width:100%; font-size:clamp(9px,1.6vw,15px); margin-top:4px}
.sea span{display:inline-block; animation:swell 9s linear infinite}
@keyframes swell{from{transform:translateX(0)} to{transform:translateX(-4ch)}}
@media (prefers-reduced-motion: reduce){ .sea span{animation:none} }

/* ---------- the envoy's particulars ---------- */
#envoy{font-size:13px}
#envoy h2,#log h2,#rules h2{font-size:14px; margin:0 0 10px}
#envoy dl{margin:0; display:grid; grid-template-columns:12ch 1fr; gap:0 16px}
#envoy dt,#envoy dd{padding:8px 0; border-bottom:1px solid var(--line)}
#envoy dt{color:var(--muted)}
#envoy dd{margin:0}
@media (max-width:420px){ #envoy dl{grid-template-columns:1fr} #envoy dt{border:0; padding-bottom:0} }

/* ---------- below ---------- */
.how{margin-top:28px; color:var(--muted); font-size:13px}
.how summary{cursor:pointer; width:max-content; border-radius:4px}
.how ol{margin:10px 0 0; padding-left:3ch; max-width:62ch}
.how li + li{margin-top:4px}

#log{margin-top:40px; padding-top:24px; border-top:1px dashed var(--line); font-size:13px}
#log .note{color:var(--muted); margin:0 0 14px}
#log ol{list-style:none; margin:0; padding:0}
#log li{display:grid; grid-template-columns:20ch 1fr; gap:4px 16px; padding:10px 0; border-bottom:1px solid var(--line)}
#log .when{color:var(--accent)}
#log p{margin:0; max-width:56ch}
@media (max-width:560px){ #log li{grid-template-columns:1fr} }

#rules{margin-top:32px; font-size:13px; color:var(--muted)}
#rules ul{margin:6px 0 0; padding-left:0; list-style:none}
#rules li::before{content:"# "; color:var(--accent)}

footer{text-align:center; padding:16px; color:var(--muted); font-size:12px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ---------- 404: the black hole ---------- */
/* the one thing that moves here: the address the visitor asked for, spiralling in */
.lost .hole{position:relative; color:var(--muted)}
.lost .hole.wide{width:81ch}
.lost .hole.narrow{width:57ch; font-size:min(13px, calc((100vw - 32px) / 35))}
.lost .disk{color:var(--accent); opacity:calc(.45 + .55 * var(--night)); transition:opacity .4s}
.lost .infall{position:absolute; left:50%; top:50%; color:var(--accent); white-space:nowrap; pointer-events:none;
  transform:translate(-50%,-50%); animation:infall 9s cubic-bezier(.55,0,1,.45) infinite}
@keyframes infall{
  0%  {transform:translate(-50%,-50%) rotate(0turn)  translateX(30ch) scale(1,1);    opacity:0}
  12% {opacity:1}
  80% {opacity:1}
  100%{transform:translate(-50%,-50%) rotate(-2turn) translateX(0)    scale(1.8,.1); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .lost .infall{animation:none; top:calc(50% - 2.4em); background:var(--bg); padding:0 1ch}
}
.lede code{font:inherit; color:var(--accent); overflow-wrap:anywhere}