/* shiro.gbaonvo.com: SHIRO's public home and privacy page. Static, no script.
   The look is SHIRO's own approved desk (DESIGN-APPROVED.md: linen desk, laid paper, navy cloth spine, blue ribbon,
   Schibsted Grotesk), reused as it is. Tokens copied from web/app/(desk)/desk.css. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/schibsted-grotesk-latin.woff2") format("woff2")}
:root{
  --paper:#f3f0e8; --paper-line:#d6cfbf; --ink:#141a2a; --ink-2:#3b4256; --blue:#1f4fae; --spine:#0c1220; --ink-hover:#232b40;
  --desk:#c4bba6; --desk-rgb:60 46 24; --focus:#1f4fae;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --title:clamp(44px,5vw,112px); --lede:clamp(24px,2vw,44px); --read:clamp(20px,1.3vw,30px); --small:clamp(16px,1vw,22px);
  --gutter:clamp(16px,4vw,80px); --spine-w:clamp(16px,1.6vw,28px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{min-height:100vh;min-height:100dvh;font-family:var(--sans);font-size:var(--read);line-height:1.5;color:var(--ink);
  background:var(--desk) url("assets/linen-desk.jpg");background-size:clamp(420px,28vw,720px);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column}
::selection{background:var(--blue);color:var(--paper)}
a{color:var(--blue);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.14em}
a:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}

.bar{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);padding:clamp(14px,1.6vw,26px) var(--gutter);width:100%;max-width:calc(clamp(1040px,56vw,1500px) + clamp(220px,44vh,500px) * .69 + clamp(12px,2vw,40px) + 2 * var(--gutter));margin:0 auto}
.bar .name{font-weight:700;letter-spacing:.16em;font-size:var(--small);color:var(--ink);text-decoration:none}
.bar nav{margin-left:auto;display:flex;gap:clamp(8px,1.4vw,24px)}
.bar nav a{font-size:var(--small);font-weight:600;color:var(--ink);text-decoration:none;min-height:44px;min-width:44px;padding:0 12px;display:inline-flex;align-items:center;border-radius:4px}
.bar nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--ink)} /* taste-skill-ignore: not a shadow; an inset line under the current page's link, as on SHIRO's own bar */
.bar nav a:hover{background:rgb(var(--desk-rgb) / .12)}

/* the page: a sheet of laid paper with the book's navy spine and blue ribbon, Sayo standing on the linen beside it */
.desk{flex:1;display:grid;grid-template-columns:minmax(0,clamp(1040px,56vw,1500px)) auto;justify-content:center;align-items:start;gap:clamp(12px,2vw,40px);
  padding:0 var(--gutter) clamp(20px,3vw,56px);width:100%;margin:0 auto}
.sheet{position:relative;background:var(--paper) url("assets/laid-paper.jpg");background-size:460px;border-radius:3px 6px 6px 3px;
  box-shadow:0 1px 0 rgb(var(--desk-rgb) / .2),0 14px 34px rgb(var(--desk-rgb) / .34); /* taste-skill-ignore: the paper lying on the linen desk casts a shadow in SHIRO's approved world (DESIGN-APPROVED.md) */
  padding:clamp(24px,2.4vw,52px) clamp(22px,3.6vw,72px) clamp(26px,2.6vw,56px) calc(var(--spine-w) + clamp(30px,3.4vw,64px))}
.sheet::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--spine-w);background:var(--spine);border-radius:3px 0 0 3px}
.sheet::after{content:"";position:absolute;top:0;bottom:-22px;left:calc(var(--spine-w) + 5px);width:12px;background:var(--blue);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 9px),0 100%)}
.sayo{height:clamp(220px,44vh,500px);width:auto;display:block;align-self:end;position:sticky;bottom:clamp(20px,3vw,56px)}

h1{font-size:var(--title);font-weight:700;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h1 .tag{color:var(--blue)}
.lede{font-size:var(--lede);line-height:1.25;color:var(--ink-2);margin-top:clamp(10px,1vw,18px);max-width:52ch;text-wrap:balance}
h2{font-size:var(--lede);font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-top:clamp(28px,3vw,52px)}
p,li{max-width:72ch}
.sheet p{margin-top:clamp(12px,1.1vw,18px)}
.facts{list-style:none;margin-top:clamp(18px,1.6vw,32px);display:grid;gap:clamp(10px,.9vw,16px)}
.facts li{padding-left:1.5em;position:relative}
.facts li::before{content:"";position:absolute;left:.15em;top:.62em;width:.5em;height:.5em;border-radius:50%;background:var(--blue)}
.facts b,.sheet p b{font-weight:700}
.more{margin-top:clamp(22px,2.4vw,44px);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:6px;background:var(--ink);color:var(--paper);
  font-weight:600;text-decoration:none}
.btn:hover{background:var(--ink-hover)}
.btn:active{transform:scale(.98)}
.updated{font-size:var(--small);color:var(--ink-2);margin-top:clamp(24px,2.6vw,44px)}
code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.9em;background:rgb(var(--desk-rgb) / .1);padding:.08em .32em;border-radius:3px}

/* short desktop windows (1366x650): tighter paper so the whole home page sits on one screen */
@media (min-width:821px) and (max-height:760px){
  :root{--title:clamp(40px,4vw,60px);--lede:24px;--read:20px}
  .bar{padding-top:8px;padding-bottom:8px}
  .sheet{padding-top:26px;padding-bottom:28px}
  .facts{margin-top:16px;gap:8px}
  .more{margin-top:18px}
  .btn{min-height:52px}
}
@media (max-width:820px){
  .desk{grid-template-columns:minmax(0,1fr)}
  .sayo{height:160px;justify-self:end;margin-top:-6px;position:static}
  body{font-size:18px}
  .lede{font-size:22px}
}
/* The one moment, once, as the page opens: the paper is set down on the desk and Sayo steps in beside it
   (the same idea as SHIRO's own opening). Transform and opacity only; content is readable from the first frame. */
@keyframes set-down{from{transform:translateY(-14px) rotate(-.6deg);opacity:.6}to{transform:none;opacity:1}}
@keyframes step-in{from{transform:translateX(64px);opacity:0}to{transform:none;opacity:1}}
.sheet{animation:set-down 520ms cubic-bezier(0.23,1,0.32,1) both}
.sayo{animation:step-in 620ms cubic-bezier(0.23,1,0.32,1) 160ms both}
.btn{transition:background-color 150ms cubic-bezier(0.23,1,0.32,1),transform 120ms cubic-bezier(0.23,1,0.32,1)}
@media (prefers-reduced-motion:reduce){ .btn:active{transform:none} .sheet,.sayo{animation:none} .btn{transition:none} }