/*
 * 02-layout.css  —  サイト全体の骨格
 *
 * このファイル群は読み込み順がそのままカスケードになる。
 * functions.php の ichika_style_parts() が順番を持っている。
 * 並べ替える前に tools/vr の回帰テストを走らせること。
 */

.wrap{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:50px 0 80px}
.site-footer{padding:32px clamp(18px,4vw,60px);border-top:1px solid rgba(17,11,35,.12);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.85rem}
@media(max-width:560px){
  .wrap{width:min(100% - 28px,1180px)}
}
/* v0.1.4: persistent left navigation on all pages */
/* v1.1.92: the white here is what the blanket black existed to cover. The
   ground is painted once, on html and body; everything between is transparent
   and simply lets it through. */
.site-main{
  min-width:0;
}
.site-main > .wrap{
  min-height:calc(100vh - 76px);
}
/* v1.1.92: was #fff, overridden further down by the desk colour. */
@media(max-width:900px){
  .site-shell{display:block}
}
@media(max-width:900px){
  .site-main > .wrap{min-height:0}
}
/* v0.2.9: clean persistent left navigation */
.site-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(330px,1fr) minmax(0,1fr);
  align-items:start;
}
@media(max-width:900px){
  .wrap{padding-left:18px;padding-right:18px}
}
@media(max-width:480px){
  .wrap{padding-left:14px;padding-right:14px}
}
@media(max-width:900px){
  .site-main{
      width:100%;
      min-width:0;
    }
}
/* v0.3.9: floating page-top button pinned to viewport */
.page-top-button{
  position:fixed;
  right:20px;
  bottom:20px;
  left:auto;
  top:auto;
  z-index:9999;
  width:54px;
  height:54px;
  border:0;
  border-radius:8px;
  background:rgba(17,11,35,.82);
  color:#fff;
  font-family:var(--font-body);
  font-size:20px;
  font-weight:700;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(17,11,35,.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease;
}
.page-top-button.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
@media(max-width:900px){
  .page-top-button{
      right:14px;
      bottom:14px;
      width:50px;
      height:50px;
    }
}
@media(prefers-reduced-motion:reduce){
  .page-top-button{transition:none}
}
/* The desk metaphor continues beyond the front page. */
@media (min-width:901px){
  body:not(.home) .site-main,
    body:not(.home) main.wrap{
      background:var(--desk);
    }
}
/* Open article = notebook page resting on the desk. */
@media (min-width:901px){
  body.single-post main.wrap,
    body.single-jetpack-portfolio main.wrap{
      padding-top:48px;
      padding-bottom:64px;
    }
}
/* ---------- Fixed pages = notebook pages ---------- */
@media (min-width:901px){
  body.page:not(.home) main.wrap{
      padding-top:48px;
      padding-bottom:64px;
    }
}
/* ---------- TRPG detail = one large information card ---------- */
@media (min-width:901px){
  body.single-trpg-log main.wrap{
      padding-top:48px;
      padding-bottom:64px;
    }
}
/* v0.5.41: NOTES archive sits on the same desk background as WORKS. */
@media (min-width:901px){
  body.ichika-notes-page .site-main,
    body.ichika-notes-page main.wrap{
      background:var(--desk);
    }
}
@media (max-width:900px){
  .site-main,
  main{
      background:var(--desk);
    }
}
/* Do not paint every main element with the desk color on inner pages. */
@media (max-width:900px){
  body:not(.home) .site-main,
    body:not(.home) main{
      background:transparent;
    }
}
/* Fixed pages + opened NOTES/WORKS + opened TRPG records:
     one continuous notebook sheet rather than a beige full-screen block. */
@media (max-width:900px){
  /* v1.1.92: this block used to draw the mobile sheet on main. A later, more
     specific rule overrode it for fixed pages and the single routes painted
     their sheet on article.entry instead, so main ended up sized like a sheet
     while something else was the sheet. The sheet is article.entry on every
     paper route now (see 06-paper.css), so nothing is left for this to do. */
}
/* v1.1.92: the notebook margin rule moved to 06-paper.css, onto article.entry.
   Drawn here it was positioned against main, which stopped being the sheet --
   on a single post it landed on the bare desk nine pixels outside the paper. A
   ruled line belongs to the sheet it rules. */
/* CONTACT's footer should remain on the desk rather than becoming another paper
   slab -- which is what the rule that used to be here said in its comment while
   painting #fffdf8, the paper colour, doing the exact opposite. It was corrected
   further down by `.site-main .site-footer{background:var(--desk) !important}`,
   so the mistake never showed and never got fixed. With that !important gone,
   the rule is gone too and the desk colour applies on its own. */
/* v0.6.9: canonical mobile shell.
   This must remain after desktop .site-shell declarations so portrait/tablet
   layouts cannot inherit the two-column desktop grid. */
@media (max-width:900px){
  .site-shell{
      display:block;
      grid-template-columns:none;
      min-height:100vh;
    }
  .site-main{
      display:block;
      width:100%;
      max-width:none;
      min-width:0;
    }
}
/* v0.7.2: rebalance the desktop split and improve homepage readability.
   Keep the established left-panel composition while giving activity content
   more room. Mobile/tablet layouts remain controlled by the existing rules. */
@media (min-width:901px){
  .site-shell{
      grid-template-columns:minmax(0,44fr) minmax(0,56fr);
    }
}
/* v0.7.3: quiet desktop footer integrated with the desk surface.
   The persistent left navigation already provides HOME and X, so the duplicate
   footer navigation is hidden on desktop. Mobile keeps the existing footer. */
@media (min-width:901px){
  .site-main .site-footer{
      padding:24px clamp(24px,4vw,64px) 28px;
      background:var(--desk);
      border-top:1px solid rgba(17,11,35,.18);
      color:rgba(17,11,35,.68);
      font-size:.78rem;
      letter-spacing:.04em;
    }
}
/* v0.8.9: rebalance the desktop split and strengthen the navigation hover.
   - The left panel drops from 44% to 36% so the activity column can breathe;
     the TRPG meta column stops wrapping ("ソード・ワールド 2.5" on one line).
   - Navigation hover deepens the paper colour; X, the only tile that leaves
     the site, hovers to the full deep-red fill instead.
   - The 4px inset underline stays exclusive to .is-current, so hover never
     impersonates the current section.
   The asymmetric 45:55 rhythm from v0.5.17 is intentionally untouched. */
@media (min-width:901px){
  .site-shell{
      grid-template-columns:minmax(340px,36fr) minmax(0,64fr);
    }
}
/* v0.9.6: one content width across the whole site.

   The front page lays its cards inside .home-right, whose box is the full
   width of .site-main minus clamp(24px,4vw,64px) of padding. Every other
   page used .wrap instead — capped at 1180px and centred — and then capped
   the paper again at 900px (articles) or 940px (TRPG detail), so a post sat
   noticeably narrower than the TRPG cards on the front page.

   .wrap now uses the same box as .home-right, and the paper fills it. The
   caps are released rather than raised, so there is one number to change
   (the padding above) instead of four. */
@media (min-width:901px){
  .site-main > main.wrap{
      width:100%;
      max-width:none;
      margin-left:0;
      margin-right:0;
      padding-left:clamp(24px,4vw,64px);
      padding-right:clamp(24px,4vw,64px);
    }
}
/* ---------- Footer ---------- */
@media (min-width:901px){
  .site-main .site-footer{
      background:var(--desk);
      border-top:1px solid rgba(168,132,44,.34);
      color:rgba(196,188,218,.56);
    }
}
/* It was a dark chip, which vanishes on a dark desk. */
.page-top-button{
  background:#fffdf8;
  color:#4a3097;
  border:1px solid #a8842c;
  box-shadow:0 6px 18px rgba(0,0,0,.34);
}
.page-top-button:hover,
.page-top-button:focus-visible{
  background:#e3dfef;
  color:#2d1d5d;
  border-color:#a8842c;
}
/* The left panel is sticky at 100vh, so on a page taller than the viewport
   the grid cell below it shows the page background. That used to be cream on
   a light desk and passed unnoticed; against a black desk it read as a stray
   pale column, so the shell carries the desk colour itself. */
.site-shell{
  background:var(--desk);
}
/* v1.1.16: WORKS scrapbook framing refinement.
   - Match the notebook sheet's outer width to individual-post paper.
   - Balance the dark desk gap above and below.
   - Move copyright from the desktop footer onto the bottom of the sheet.
   WORKS only; NOTES remains unchanged for now. */
@media (min-width:901px){
  body.post-type-archive-jetpack-portfolio .site-main .site-footer,
    body.tax-jetpack-portfolio-type .site-main .site-footer,
    body.tax-jetpack-portfolio-tag .site-main .site-footer{
      min-height:34px;
      padding:0;
      border-top:0;
    }
}
@media (min-width:901px){
  body.single-jetpack-portfolio .site-main .site-footer{
      min-height:34px;
      padding:0;
      border-top:0;
    }
}
@media (min-width:901px){
  body.page:not(.home) .site-main .site-footer,
    body.single-post .site-main .site-footer,
    body.single-trpg-log .site-main .site-footer,
    body.post-type-archive-trpg-log .site-main .site-footer,
    body.tax-trpg-system .site-main .site-footer,
    body.tax-trpg-category .site-main .site-footer{
      min-height:34px;
      padding:0;
      border-top:0;
    }
}
/* Specificity matched to the paper-surface rules further down the file
   (.site-main > main.wrap.notebook-sheet). Written as the bare
   main.notebook-sheet it lost to them, and the box metrics below were held in
   place with !important instead -- six of them, in two blocks that then had to
   keep overriding each other. */
.site-main > main.wrap.notebook-sheet{
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  width:calc(100% - (2 * clamp(24px,4vw,64px)));
  max-width:none;
  margin:34px auto;
  padding:52px 54px 58px 64px;
  background:#fffaf2;
  border:1px solid rgba(17,11,35,.16);
  box-shadow:
    0 2px 0 rgba(255,255,255,.5) inset,
    0 4px 0 rgba(17,11,35,.06),
    0 18px 38px rgba(0,0,0,.18);
}
/* Dark footer remains only as the same lower desk gap used by WORKS. */
@media (min-width:901px){
  body.blog .site-main .site-footer,
    body.category .site-main .site-footer{
      min-height:34px;
      padding:0;
      border-top:0;
    }
}
@media (max-width:900px){
  .site-main > main.wrap.notebook-sheet{
      width:calc(100% - 28px);
      margin:24px auto 38px;
      padding:30px 22px 44px 34px;
    }
}
/* Keep only the surrounding desk dark. */
body.blog .site-main,
body.page-template-page-notes .site-main,
body.category .site-main,
body.post-type-archive-jetpack-portfolio .site-main,
body.tax-jetpack-portfolio-type .site-main,
body.tax-jetpack-portfolio-tag .site-main,
body.post-type-archive-trpg-log .site-main,
body.tax-trpg-system .site-main,
body.tax-trpg-category .site-main{
  background:var(--desk);
}
/* Keep the footer itself as a quiet strip of desk at every viewport width. */
.site-main .site-footer{
  min-height:34px;
  padding:0;
  background:var(--desk);
  border-top:0;
}
/* v1.1.92: painting every container black, then restoring the paper surfaces
   with !important, is why six declarations could not be removed and why a
   single post's sheet and a fixed page's sheet drifted apart. Nothing paints
   white any more, so nothing needs covering. */
/* Preserve the intentionally light paper/notebook surfaces. */
/* The archive sheet. No longer fighting a blanket black, so no !important. */
.site-main > main.wrap.notebook-sheet{
  background-color:#fffaf2;
}
/* HOME uses cards directly on the desk: its exposed ground must be pure black. */
body.home .site-shell,
body.home .site-main,
body.home main{
  background:#000;
}

/* Single / fixed paper surfaces */

/* Desktop */
@media (min-width:901px){
  .site-shell{
      grid-template-columns:minmax(210px,22vw) minmax(0,1fr);
    }
}
/* Desktop: expand the left navigation rail to 44% of the viewport. */
@media (min-width:901px){
  .site-shell{
      grid-template-columns:minmax(210px,44vw) minmax(0,1fr);
    }
}