/* jpgaday — calendar (Step 2). Tokens & behaviour from reference/jpgaday-prototype-v8.html;
   dummy canvas replaced with real thumbnails. Stream / lightbox / info-overlay land in
   Steps 3–5. */

:root{
  --fs-1:11px;
  --fs-2:14px;
  --edge:28px;
  --gap:6px;
  --stack:20px;
  --t:200ms;
  --cs:64px;               /* SP horizontal cell edge; JS overwrites via measurement */
  --backtotop-size:36px;   /* back-to-top diameter (hidekiowa --backtotop-size) */
  --backtotop-band:calc(var(--edge) + var(--backtotop-size) + var(--edge));  /* fallback before JS; JS overwrites with the live footer height so the ↑'s top/bottom margins are symmetric */
}
[data-theme="dark"]{
  --bg:#111111; --fg:#e8e8e8; --muted:#666666;
  --cell:#1c1c1c; --line:rgba(255,255,255,.06);
  --overlay:rgba(17,17,17,.95);
  /* lightbox control-button colours (PROVISIONAL — adjust after visual review) */
  --lb-btn-fg:#999999; --lb-btn-bg:rgba(0,0,0,.5);
  --lb-btn-fg-hover:#eeeeee; --lb-btn-bg-hover:rgba(0,0,0,.7);
}
[data-theme="light"]{
  --bg:#fafafa; --fg:#1a1a1a; --muted:#9a9a9a;
  --cell:#f0f0f0; --line:rgba(0,0,0,.06);
  --overlay:rgba(250,250,250,.95);
  /* lightbox control-button colours (PROVISIONAL — adjust after visual review) */
  --lb-btn-fg:#777777; --lb-btn-bg:rgba(255,255,255,.7);
  --lb-btn-fg-hover:#222222; --lb-btn-bg-hover:rgba(255,255,255,.9);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg);
  font-family:"SF Mono",Menlo,Consolas,monospace;
  font-size:var(--fs-1);line-height:1.6;
  transition:background var(--t),color var(--t)}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}  /* 100vh fallback; 100dvh tracks Safari's dynamic toolbar (SP footer-gap fix) */

/* iOS WebKit data-detector が生成する tel: リンクの装飾を無効化（format-detection の保険：
   もし自動生成リンクが残っても素のテキストに見せる。明示した mailto 等は tel 以外なので不変） */
a[href^="tel"]{ color:inherit; text-decoration:none; pointer-events:none; }

button{font:inherit;font-size:var(--fs-1);background:none;border:none;
  color:var(--muted);cursor:pointer;padding:0;letter-spacing:.05em;
  transition:color var(--t)}
button:hover{color:var(--fg)}
button[aria-pressed="true"]{color:var(--fg)}
button:focus-visible{outline:1px solid var(--fg);outline-offset:3px}

header{display:flex;align-items:baseline;gap:24px;
  padding:var(--edge) var(--edge) 0;margin-bottom:var(--stack)}
.brand{font-size:var(--fs-2);letter-spacing:.08em;cursor:pointer}   /* logo click -> tombstone -> calendar */
nav{display:flex;gap:16px}
.info-btn{margin-left:auto}   /* push info to the right end of the header / mini-header row */

.authors{display:flex;flex-wrap:wrap;gap:4px 16px;
  padding:0 var(--edge);margin-bottom:var(--stack);color:var(--muted)}
.toolbar{display:flex;gap:24px;
  padding:0 var(--edge);margin-bottom:var(--stack);color:var(--muted)}

main{flex:1 1 auto;min-height:0;padding-bottom:var(--backtotop-band)}  /* reserve the grid<->back-to-top band (footer-lift is independent) */

/* ---------- calendar: PC vertical grid ---------- */
#cal-v{padding:0 var(--edge) var(--edge)}
.colhead,.week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap)}
.colhead{color:var(--muted);padding-bottom:12px}
.week{margin-bottom:var(--gap)}
#cal-v .cell{aspect-ratio:1/1}

/* ---------- calendar: SP horizontal grid ---------- */
#cal-h{display:flex;padding:0}
.hscroll{overflow-x:auto;overflow-y:hidden;flex:1 1 auto;scrollbar-width:thin}
.hwrap{display:flex;gap:10px;width:max-content;
  padding-left:var(--edge)}                 /* weekday labels ride the scroll with the left margin */
.rowlabels{display:grid;grid-template-rows:repeat(7,var(--cs));
  gap:var(--gap);color:var(--muted)}
.rowlabels span{display:flex;align-items:center}
.hgrid{display:grid;grid-template-rows:repeat(7,var(--cs));
  grid-auto-flow:column;grid-auto-columns:var(--cs);gap:var(--gap);width:max-content}

/* ---------- cells ---------- */
.cell{position:relative;background:var(--cell);overflow:hidden;transition:background var(--t)}
.cell.empty{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
/* one or more posts: N equal vertical slices (multi-post days), upload_ts order */
.cell .subs{position:absolute;inset:0;display:grid;
  grid-auto-flow:column;grid-auto-columns:1fr;gap:2px}
.cell .sub{position:relative;overflow:hidden}
.cell.filled .sub{cursor:none}                /* cursor-as-info replaces the pointer (pointer:fine only) */
.cell .sub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- cursor-as-info ---------- */
#cursorinfo{position:fixed;pointer-events:none;z-index:50;
  color:var(--fg);background:var(--bg);padding:2px 6px;white-space:nowrap;display:none}

/* ---------- tombstone interstitial (logo click; existing tokens only, bg follows the
   originating view's theme via var(--bg); JS pins the computed bg during the fade so the
   revealed calendar underneath doesn't flash a colour change) ---------- */
#tombstone{position:fixed;inset:0;z-index:200;display:none;background:var(--bg);
  flex-direction:column;align-items:center;justify-content:center;
  opacity:1;transition:opacity 200ms}
#tombstone.show{display:flex}
#tombstone.fade{opacity:0}
.tomb-inner{display:flex;flex-direction:column;align-items:center;gap:var(--stack);text-align:center}
.tomb-brand{font-size:var(--fs-2);letter-spacing:.08em;color:var(--fg)}
.tomb-epitaph{color:var(--fg);min-height:1.6em}   /* reserve one line while typing */
.tomb-dates{color:var(--muted)}

/* ---------- lightbox (v8 layout; control-button chrome migrated from hidekiowa-site
   .ctrl-btn / .to-top — structure & sizes copied, only colours swapped to --lb-btn-*) ---------- */
#lightbox{position:fixed;inset:0;z-index:100;display:none;background:var(--overlay);
  align-items:center;justify-content:center;flex-direction:column;gap:16px}
#lightbox.open{display:flex}
#lb-stage{max-width:80vw;max-height:74vh;display:flex}
#lb-stage img{max-width:80vw;max-height:74vh;object-fit:contain;display:block}

/* invisible prev/next click zones. 10vw = (100vw - 80vw stage)/2 → zero overlap with the
   image (22vw overlapped the 80vw stage, stealing image-edge clicks and leaving too little
   backdrop to close). Buttons sit above via z-index. */
.lb-zone{position:absolute;top:0;bottom:0;width:10vw;border:none;background:none;cursor:pointer;z-index:2}
#lb-zone-prev{left:0} #lb-zone-next{right:0}

/* circle control buttons — 44px circle from hidekiowa .ctrl-btn; z-index:3 clears the zones */
.ctrl-btn{position:absolute;z-index:3;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:50%;
  background:var(--lb-btn-bg);border:1px solid var(--line);color:var(--lb-btn-fg);
  transition:color var(--t),background-color var(--t),border-color var(--t)}
.ctrl-btn:hover,.ctrl-btn:focus-visible{color:var(--lb-btn-fg-hover);background:var(--lb-btn-bg-hover)}
.ctrl-btn svg{width:22px;height:22px;display:block}
.lb-close{top:var(--edge);right:var(--edge)}
.lb-bar{display:contents}                       /* PC: children positioned individually */
.lb-prev{left:var(--edge);top:50%;transform:translateY(-50%)}
.lb-next{right:var(--edge);top:50%;transform:translateY(-50%)}
#lb-caption{position:absolute;bottom:var(--edge);left:50%;transform:translateX(-50%);
  color:var(--muted);z-index:3}                 /* caption in the counter slot (bottom-centre) */

/* ---------- mini header (PC scroll) + back to top ---------- */
#minihead{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;gap:24px;align-items:baseline;padding:10px var(--edge);background:var(--bg);
  transform:translateY(-100%);transition:transform var(--t),background var(--t)}
#minihead.show{transform:none}
#minihead .brand{font-size:var(--fs-1)}

/* back-to-top — circle button from hidekiowa .to-top (colours: --muted circle / --bg arrow,
   hover --fg; roles mirror hidekiowa --muted/--paper/--ink). Calendar-only (hidden in lightbox). */
#totop{position:fixed;right:var(--edge);bottom:var(--edge);z-index:50;
  width:var(--backtotop-size);height:var(--backtotop-size);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--muted);color:var(--bg);border:none;cursor:pointer;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .3s ease,transform .25s ease,background-color .2s ease,bottom .15s ease-out}
#totop.show{opacity:1;transform:none;pointer-events:auto}
#totop:hover,#totop:focus-visible{background:var(--fg)}
#totop svg{width:16px;height:16px;display:block}

footer{display:flex;gap:24px;align-items:baseline;
  padding:var(--stack) var(--edge) var(--edge);color:var(--muted)}
footer .copy{margin-left:auto}

/* ---------- stream (v8 spec; canvas→<img>, centre=large / sides=thumb) ---------- */
#stream{display:none;position:relative;overflow:hidden}
body.stream main, body.info main{padding-bottom:0}   /* stream/info: no back-to-top band */
.stream-el{position:absolute;top:0;background:var(--cell);overflow:hidden;   /* y is JS-set (cY) from the measured gap */
  transition:transform 400ms cubic-bezier(0.215,0.61,0.355,1),
    width 120ms cubic-bezier(0.215,0.61,0.355,1),
    height 120ms cubic-bezier(0.215,0.61,0.355,1)}
.stream-el img{width:100%;height:100%;display:block;object-fit:cover}
.stream-meta{position:absolute;left:var(--edge);right:var(--edge);bottom:16px;
  display:flex;gap:24px;color:var(--fg);z-index:5}
.tempo{margin-left:auto;display:flex;gap:10px}

/* ---------- info (verbatim re-record of the 2008 about page; existing tokens only) ---------- */
.muted{color:var(--muted)}
/* padding-top = --stack*2: added to the toolbar's --stack margin-bottom above, the welcome's
   top gap becomes 3*--stack (~60px) — roughly triple the prior ~--stack (~20px). Token multiple. */
#info{display:none;padding:calc(var(--stack) * 2) var(--edge) var(--edge)}
#info .info-inner{max-width:920px}
#info .info-welcome{font-size:var(--fs-2);letter-spacing:.08em;margin-bottom:var(--stack)}
/* affirmation + archive span the full 2-column width (= .info-cols row width, bounded by
   .info-inner 920px); the about/designers columns themselves are unchanged. */
#info .info-affirmation{color:var(--muted);max-width:none;margin-bottom:calc(var(--stack) * 1.5)}
#info .info-cols{display:flex;gap:calc(var(--edge) * 2)}
#info .info-col{flex:1;min-width:0}
#info h2{font-size:var(--fs-1);font-weight:normal;color:var(--muted);letter-spacing:.05em;margin-bottom:12px}
#info .info-col p{max-width:52ch;margin-bottom:1em}
#info .info-col p:last-child{margin-bottom:0}
#info a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
#info a:hover,#info a:focus-visible{color:var(--muted)}
#info .info-archive{max-width:none;margin-top:calc(var(--stack) * 1.75)}
@media (max-width:768px){
  #info{padding-top:var(--stack)}                            /* SP: top gap = 2*--stack (3x is excessive stacked) */
  #info .info-cols{flex-direction:column;gap:var(--stack)}   /* SP: about -> designers stacked */
}

/* SP: prev/caption/next drop into a full-width bottom bar (hidekiowa uses 760px; jpgaday's
   own SP breakpoint is 768px — aligned to 768 for site consistency, see report). close stays top-right. */
@media (max-width:768px){
  main{padding-bottom:0}                          /* SP horizontal calendar fills the viewport: no band */
  .stream-meta{bottom:0}                          /* SP: meta bottom == calendar grid bottom (image box grows) */
  .lb-bar{display:flex;align-items:center;gap:var(--edge);
    position:absolute;bottom:var(--edge);left:var(--edge);right:var(--edge);z-index:3}
  .lb-bar .lb-prev,.lb-bar .lb-next,.lb-bar #lb-caption{
    position:static;transform:none;top:auto;right:auto;left:auto;bottom:auto}
  .lb-bar #lb-caption{flex:1;text-align:center}   /* grows -> arrows pin to bar edges */
}
@media (max-width:600px){
  :root{--edge:16px;--gap:4px}
}
@media (prefers-reduced-motion:reduce){
  html,body,.cell,#minihead,#lightbox,#totop,.stream-el,button{transition:none}
}