/* =========================================================================
   desktop.css — the whole site is one little desktop: cream windows on a
   matcha green desk, with a dock along the bottom.
   To change the colours, change the values at the top of :root below.
   Fonts are hosted here with the site; nothing loads from anywhere else.
   ========================================================================= */

@font-face{
  font-family:"DotGothic16"; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/dotgothic16-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{  /* only downloaded if a page actually contains Japanese */
  font-family:"DotGothic16"; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/dotgothic16-japanese.woff2) format("woff2");
  unicode-range:U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face{
  font-family:"Courier Prime"; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/courier-prime-400.woff2) format("woff2");
}
@font-face{
  font-family:"Courier Prime"; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/courier-prime-700.woff2) format("woff2");
}

:root{
  --desk:#9db088;        /* the desktop: matcha green */
  --desk-dot:#90a37b;
  --ink:#2b211b;         /* outlines and text */
  --cream:#f7eedf;       /* window chrome */
  --paper:#fdf8f0;       /* inside windows */
  --hover:#e6eed9;       /* hover / selected */
  --accent:#4f6b3a;      /* links, the open-window dot */
  --muted:#6e5f51;
  --shadow:rgba(35,48,25,.35);
  --pixel:"DotGothic16", ui-monospace, monospace;
  --type:"Courier Prime", "DotGothic16", ui-monospace, "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  overflow:hidden;
  background:var(--desk);
  background-image:radial-gradient(circle at 1px 1px, var(--desk-dot) 1px, transparent 1.4px);
  background-size:6px 6px;
  color:var(--ink);
  font-family:var(--type);
  -webkit-text-size-adjust:100%;
}
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px dashed var(--ink); outline-offset:2px; }
::selection{ background:var(--hover); }

/* ---------- the two pills in the top corners ---------- */
.pill{
  position:fixed; top:12px; z-index:9000;
  display:flex; align-items:stretch;
  height:36px; padding:0;
  background:var(--cream);
  border:2px solid var(--ink); border-radius:6px;
  box-shadow:3px 3px 0 var(--shadow);
  font-family:var(--type); font-size:14px; letter-spacing:.06em;
  overflow:hidden;
}
.pill .ico{ display:grid; place-items:center; width:34px; background:var(--ink); }
.pill .ico .px{ width:22px; height:22px; }
.pill .txt{ display:flex; align-items:center; padding:0 12px; white-space:nowrap; }
#brand{ left:12px; cursor:pointer; font-family:var(--pixel); font-size:16px; letter-spacing:0; }
#brand:hover .txt{ background:var(--hover); }
#clock{ right:12px; cursor:pointer; }
#clock:hover .txt{ background:var(--hover); }

/* ---------- windows ---------- */
#desk{ position:fixed; inset:0; }

.win{
  position:absolute;
  display:flex; flex-direction:column;
  min-width:0;
  background:var(--cream);
  border:2px solid var(--ink); border-radius:8px;
  box-shadow:6px 6px 0 var(--shadow);
  overflow:hidden;
}
.win[hidden]{ display:none; }

/* title bar: pinstripes, a close box, the title in a gap in the stripes */
.bar{
  position:relative; flex:none;
  height:30px;
  display:flex; align-items:center; justify-content:center;
  border-bottom:2px solid var(--ink);
  background:var(--cream);
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
.bar:active{ cursor:grabbing; }
.bar::before{
  content:""; position:absolute; left:6px; right:6px; top:7px; bottom:8px;
  background:repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 3px);
}
.win:not(.top) .bar::before{ opacity:0; }          /* stripes only on the window in front */
.win:not(.top) .title{ color:var(--muted); }

.x{
  position:absolute; left:10px; top:5px; z-index:1;
  width:18px; height:18px; padding:0;
  display:grid; place-items:center;
  background:var(--cream);
  border:2px solid var(--ink); border-radius:3px;
  box-shadow:0 0 0 3px var(--cream);
  cursor:pointer;
}
.x svg{ width:8px; height:8px; }
.x:hover{ background:var(--hover); }
.x:active{ background:var(--ink); }
.x:active svg path{ fill:var(--cream); }

.title{
  position:relative; z-index:1;
  max-width:calc(100% - 96px);
  margin:0; padding:0 10px;
  background:var(--cream);
  font-family:var(--pixel); font-size:16px; font-weight:400; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* the line under the title, Finder-style: how many things are in here */
.info{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:26px; padding:0 12px;
  border-bottom:3px double var(--ink);
  font-size:13px;
  white-space:nowrap; overflow:hidden;
}
.info .r{ overflow:hidden; text-overflow:ellipsis; }

.body{
  position:relative; flex:1; min-height:0;
  overflow:auto;
  background:var(--paper);
  scrollbar-color:var(--ink) var(--cream);
}
.body::-webkit-scrollbar{ width:14px; }
.body::-webkit-scrollbar-track{ background:var(--cream); border-left:2px solid var(--ink); }
.body::-webkit-scrollbar-thumb{ background:var(--cream); border:2px solid var(--ink); border-radius:3px; }

/* windows appearing */
.win.pop{ animation:pop .16s steps(3, end); }
@keyframes pop{ from{ opacity:0; } }

/* the outlines that fly out from where you clicked, like an old Mac opening a window */
.zr{
  position:fixed; z-index:9500; pointer-events:none;
  border:1px solid var(--cream);
  border-radius:4px;
  opacity:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px 10px;
  background:var(--cream); color:var(--ink);
  border:2px solid var(--ink); border-radius:6px;
  box-shadow:inset -2px -2px 0 rgba(43,33,27,.2), inset 2px 2px 0 #fff, 3px 3px 0 var(--shadow);
  font-family:var(--pixel); font-size:16px; line-height:1;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{ background:var(--hover); }
.btn:active{ transform:translate(2px, 2px); box-shadow:inset 2px 2px 0 rgba(43,33,27,.2), 1px 1px 0 var(--shadow); }

/* ---------- posts ---------- */
.feed{ padding:4px 24px 32px; }
.post{ padding:24px 0 28px; }
.post + .post{ border-top:2px dashed rgba(43,33,27,.35); }
.post h3{
  margin:0;
  font-family:var(--pixel); font-size:32px; font-weight:400; line-height:1.15;
}
.post h3 a{ color:inherit; text-decoration:none; }
.post h3 a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.meta{ margin-top:10px; font-size:13px; letter-spacing:.06em; color:var(--muted); }
.text{ margin-top:18px; font-size:15.5px; line-height:1.75; overflow-wrap:anywhere; }
.text p{ margin:0 0 1.2em; }
.text p:last-child{ margin-bottom:0; }
.text img{ display:block; max-width:100%; height:auto; margin:1.4em 0; border:2px solid var(--ink); }
.text a{ color:var(--accent); }
.text code{ background:var(--cream); padding:1px 5px; border:1px solid rgba(43,33,27,.25); }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.tag{ padding:3px 8px; border:1px solid var(--ink); border-radius:4px; font-size:12px; background:var(--cream); }
.single{ padding:20px 24px 32px; }
.single .text{ margin-top:0; }

/* ---------- archive: a list view ---------- */
.list{ width:100%; border-collapse:collapse; font-size:14px; }
.list th{
  position:sticky; top:0;
  padding:6px 12px; text-align:left;
  background:var(--cream); border-bottom:1px solid var(--ink);
  font-weight:400; color:var(--muted);
}
.list td{ padding:8px 12px; border-bottom:1px solid rgba(43,33,27,.15); }
.list td:last-child, .list th:last-child{ text-align:right; white-space:nowrap; }
.list tr[data-post]{ cursor:pointer; }
.list tr[data-post]:hover td, .list tr[data-post]:focus-visible td{ background:var(--hover); }
.list .doc{ display:inline-flex; align-items:center; gap:8px; }
.list .doc .px{ width:16px; height:16px; flex:none; }

/* ---------- the calendar ---------- */
.cal{ padding:16px 18px 20px; }
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
  font-family:var(--pixel); font-size:16px;
}
.cal-head button{
  display:grid; place-items:center;
  width:30px; height:30px; padding:0;
  background:var(--cream);
  border:2px solid var(--ink); border-radius:4px;
  cursor:pointer;
}
.cal-head button:hover{ background:var(--hover); }
.cal-head button:active{ transform:translate(1px, 1px); }
.cal-head svg{ width:6px; height:8px; }
.cal-grid{ width:100%; border-collapse:collapse; table-layout:fixed; font-family:var(--pixel); font-size:16px; text-align:center; }
.cal-grid th{ padding:0 0 8px; font-weight:400; color:var(--muted); }
.cal-grid td{ height:38px; padding:0; border:1px solid rgba(43,33,27,.14); }
.cal-grid td span{ display:inline-grid; place-items:center; width:28px; height:28px; }
.cal-grid td.today span{ background:var(--ink); color:var(--cream); }

/* ---------- about me: a blank page with the cursor waiting ---------- */
.page{ padding:22px 24px 32px; min-height:100%; }
.caret{ display:inline-block; width:2px; height:20px; background:var(--ink); vertical-align:top; }
@media (prefers-reduced-motion:no-preference){ .caret{ animation:blink 1.06s steps(1) infinite; } }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- guestbook ---------- */
.gb{ padding:18px 22px 28px; }
.gb-form{ padding:16px 16px 12px; background:var(--cream); border:2px solid var(--ink); border-radius:6px; }
.gb-form h3{ margin:0 0 12px; font-family:var(--pixel); font-size:16px; font-weight:400; }
.gb-form label{ display:block; margin-bottom:10px; font-size:13px; color:var(--muted); }
.gb-form label span{ display:block; margin-bottom:4px; }
.gb-form em{ font-style:normal; opacity:.8; }
.gb-form input, .gb-form textarea{
  width:100%; padding:8px 10px;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:4px;
  font-family:var(--type); font-size:15px; line-height:1.5;
}
.gb-form textarea{ resize:vertical; min-height:96px; }
.gb-form input:focus, .gb-form textarea:focus{ outline:2px dashed var(--accent); outline-offset:1px; }
.gb-row{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:4px; }
.gb-err{ flex:1; font-size:13px; color:#9b2c2c; }
.gb-done{ margin:0; padding:14px 16px; background:var(--cream); border:2px dashed var(--ink); border-radius:6px; font-size:14px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }   /* the bot trap */
.gb-notes{ list-style:none; margin:18px 0 0; padding:0; }
.gb-notes li{ padding:14px 0; border-top:2px dashed rgba(43,33,27,.3); }
.gb-notes .who{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.gb-notes b{ font-family:var(--pixel); font-size:16px; font-weight:400; }
.gb-notes .h{ font-size:13px; color:var(--accent); }
.gb-notes time{ margin-left:auto; font-size:12px; color:var(--muted); }
.gb-notes p{ margin:6px 0 0; font-size:15px; line-height:1.6; overflow-wrap:anywhere; }

/* ---------- the dock ---------- */
#dock{
  position:fixed; left:50%; bottom:12px; z-index:9000;
  transform:translateX(-50%);
  display:flex;
  max-width:calc(100vw - 24px);
  padding:6px;
  background:var(--cream);
  border:2px solid var(--ink); border-radius:8px;
  box-shadow:4px 4px 0 var(--shadow);
  overflow-x:auto; scrollbar-width:none;
}
#dock button{
  flex:none;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  width:92px; padding:9px 4px 6px;
  appearance:none; background:none; border:0; border-radius:4px;
  font-family:var(--pixel); font-size:16px; line-height:1;
  cursor:pointer;
}
#dock button + button{ box-shadow:-1px 0 0 rgba(43,33,27,.25); }
#dock button:hover{ background:var(--hover); }
#dock .px{ width:32px; height:32px; }
#dock i{ width:4px; height:4px; background:transparent; }
#dock button.open i{ background:var(--accent); }      /* that window is open */

/* "say hi!" over the guestbook button (placed by desktop.js) */
#sayhi{
  position:fixed; z-index:9100;
  transform:translateX(-50%);
  padding:7px 12px 6px;
  background:var(--cream); color:var(--ink);
  border:2px solid var(--ink); border-radius:6px;
  box-shadow:3px 3px 0 var(--shadow);
  font-family:var(--pixel); font-size:16px; line-height:1;
  white-space:nowrap;
  cursor:pointer;
  opacity:0; transition:opacity .5s ease;
}
#sayhi.show{ opacity:1; }
#sayhi:hover{ background:var(--hover); }
#sayhi::before, #sayhi::after{ content:""; position:absolute; left:50%; border-style:solid; border-color:transparent; }
#sayhi::before{ top:100%; margin-left:-8px; border-width:8px 8px 0; border-top-color:var(--ink); }
#sayhi::after{ top:calc(100% - 2px); margin-left:-5px; border-width:6px 5px 0; border-top-color:var(--cream); }
#sayhi:hover::after{ border-top-color:var(--hover); }
@media (prefers-reduced-motion:no-preference){
  #sayhi.show{ animation:bob 2.6s ease-in-out infinite; }
}
@keyframes bob{ 0%,100%{ transform:translate(-50%, 0); } 50%{ transform:translate(-50%, -3px); } }

/* the cat, sitting on top of the dock (moved around by desktop.js) */
#pet{
  position:fixed; z-index:9050;
  width:72px; height:48px; padding:0;
  background:none; border:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#pet .spr{
  position:absolute; inset:0;
  background:url(img/cat.png) 0 0 / 360px 48px no-repeat;
  image-rendering:pixelated;
}
#pet .spr.left{ transform:scaleX(-1); }
#pet[data-f="walk1"] .spr{ background-position:-72px 0; }
#pet[data-f="walk2"] .spr{ background-position:-144px 0; }
#pet[data-f="sleep"] .spr{ background-position:-216px 0; }
#pet[data-f="happy"] .spr{ background-position:-288px 0; }
#pet:focus-visible{ outline:2px dashed var(--ink); outline-offset:2px; }
#pet.hop .spr{ animation:hop .35s steps(3, end); }
@keyframes hop{ 50%{ translate:0 -8px; } }
/* zzz while napping */
#pet[data-f="sleep"]::after{
  content:"z"; position:absolute; right:6px; top:-6px;
  font-family:var(--pixel); font-size:16px; color:var(--ink);
  animation:snooze 2.4s ease-in-out infinite;
}
@keyframes snooze{ 0%{ opacity:0; transform:translate(0, 6px); } 30%,70%{ opacity:1; } 100%{ opacity:0; transform:translate(8px, -10px); } }
/* hearts when someone pets it */
#pet .heart{
  position:absolute; top:0; width:10px; height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23e07d86' d='M1 0h3v1h2V0h3v1h1v3H9v1H8v1H7v1H6v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  image-rendering:pixelated;
  pointer-events:none;
  animation:float 1.3s ease-out forwards;
}
@keyframes float{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(-34px); } }
@media (prefers-reduced-motion:reduce){
  #pet.hop .spr, #pet[data-f="sleep"]::after{ animation:none; }
  #pet .heart{ animation:fade 1.3s ease-out forwards; }
  @keyframes fade{ to{ opacity:0; } }
}

/* ---------- small screens: one window at a time, filling the screen ---------- */
@media (max-width:760px){
  .win{
    left:8px !important; right:8px !important;
    top:58px !important; bottom:106px !important;
    width:auto !important; height:auto !important;
  }
  .bar{ cursor:default; }
  .pill{ height:34px; font-size:13px; }
  #brand{ font-size:16px; }
  #dock button{ width:80px; }
  #dock .px{ width:28px; height:28px; }
  .feed, .single, .page{ padding-left:18px; padding-right:18px; }
  .post h3{ font-size:28px; }
}
@media (max-width:760px){
  body.saying-hi .win, body.has-pet .win{ bottom:146px !important; }
  #pet{ width:48px; height:32px; }
  #pet .spr{ background-size:240px 32px; }
  #pet[data-f="walk1"] .spr{ background-position:-48px 0; }
  #pet[data-f="walk2"] .spr{ background-position:-96px 0; }
  #pet[data-f="sleep"] .spr{ background-position:-144px 0; }
  #pet[data-f="happy"] .spr{ background-position:-192px 0; }
}
@media (max-width:360px){ #clock{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .win.pop{ animation:none; }
}