/*
 * 01-base.css  —  要素セレクタとWordPress標準クラス
 *
 * このファイル群は読み込み順がそのままカスケードになる。
 * functions.php の ichika_style_parts() が順番を持っている。
 * 並べ替える前に tools/vr の回帰テストを走らせること。
 */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.8}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.square-media img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.square-card:hover img{transform:scale(1.025)}
.entry-content a{text-decoration:underline}
.home-latest-card > a{display:block;padding:10px;color:var(--ink)}
.home-latest-media img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.home-latest-card:hover .home-latest-media img{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
.not-found-page>p{max-width:42rem;line-height:1.9}
.not-found-links a{display:inline-flex;align-items:center;min-height:44px;padding:.65rem .9rem;border:1px solid rgba(226,221,242,.42);color:#e2ddf2;text-decoration:none}
@media(prefers-reduced-motion:reduce){
  .not-found-links a{transition:none}
}
.ichika-contact-confirm h2{margin:0 0 8px;font-size:clamp(1.35rem,3vw,1.8rem)}
/* Use the same desk color as desktop throughout the mobile content area. */
@media (max-width:900px){
  html,
  body{
      background:var(--desk);
    }
}
/* Keep content clear of the notebook rule. */
@media (max-width:900px){
  body.page:not(.home) .site-main > main > *,
    body.single-post .site-main > main > *,
    body.single-jetpack-portfolio .site-main > main > *,
    body.single-trpg-log .site-main > main > *{
      position:relative;
      z-index:1;
    }
}
.entry-content p,
.contact-intro p{
  margin-top:0;
  margin-bottom:1.15em;
}
.entry h2,
.entry-content h2{
  line-height:1.3;
  margin-top:1.9em;
  margin-bottom:.75em;
}
.entry h3,
.entry-content h3{
  line-height:1.4;
  margin-top:1.55em;
  margin-bottom:.65em;
}
.entry h4,
.entry-content h4{
  line-height:1.45;
  margin-top:1.35em;
  margin-bottom:.55em;
}
.entry-content ul,
.entry-content ol{
  line-height:var(--body-leading);
}
.entry-content li + li{
  margin-top:.28em;
}
/* v0.6.6: accessibility pass. */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:99999;
  padding:9px 13px;
  background:#fffdf8;
  border:2px solid #4a3097;
  color:#2d1d5d;
  font-weight:800;
  text-decoration:none;
  transform:translateY(-160%);
}
.skip-link:focus{
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  html{
      scroll-behavior:auto;
    }
  *,
    *::before,
    *::after{
      animation-duration:.01ms;
      animation-iteration-count:1;
      transition-duration:.01ms;
      scroll-behavior:auto;
    }
}
/* v0.6.8: desktop-only interaction polish.
   Touch/coarse-pointer layouts are intentionally untouched so portrait/tablet
   responsive rules keep full control of positioning and transforms. */
@media (hover:hover) and (pointer:fine){
  .square-card > a,
    .home-trpg-card > a,
    .home-latest-card > a,
    .filter-bar a,
    .post-nav a,
    .pagination a{
      transition:
        transform .14s ease,
        box-shadow .14s ease,
        background-color .14s ease,
        border-color .14s ease,
        color .14s ease;
    }
}
/* GM and PL keep their labels because a name needs one. A date does not,
   so the row is left as bare dates and the label is kept for screen
   readers only. This is the intended asymmetry, not an oversight. */
.u-visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.not-found-links a{
  border-radius:6px;
}
.not-found-page > p{
  color:rgba(226,221,242,.84);
}
.portfolio-single-page .post-nav .post-nav-item > a{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-decoration:none;
}
.portfolio-single-page .post-nav-next > a{
  align-items:flex-end;
}
.portfolio-single-page .post-nav-prev > a{
  align-items:flex-start;
}
/* All three individual content types use arrow on the first line, title below. */
.notes-single-page .post-nav .post-nav-item > a,
.trpg-single-page .post-nav .post-nav-item > a{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-decoration:none;
}
.notes-single-page .post-nav-next > a,
.trpg-single-page .post-nav-next > a{
  align-items:flex-end;
}
.notes-single-page .post-nav-prev > a,
.trpg-single-page .post-nav-prev > a{
  align-items:flex-start;
}
/* Shared individual-page navigation:
   large arrow and smaller title side-by-side. */
.portfolio-single-page .post-nav .post-nav-item > a,
.notes-single-page .post-nav .post-nav-item > a,
.trpg-single-page .post-nav .post-nav-item > a{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.portfolio-single-page .post-nav-next > a,
.notes-single-page .post-nav-next > a,
.trpg-single-page .post-nav-next > a{
  justify-content:flex-end;
}
.portfolio-single-page .post-nav-prev > a,
.notes-single-page .post-nav-prev > a,
.trpg-single-page .post-nav-prev > a{
  justify-content:flex-start;
}
main.notebook-sheet > *{
  position:relative;
  z-index:1;
}
.paper-page-footer-links a{
  color:var(--wine);
  font-size:.78rem;
  line-height:1.4;
  font-weight:700;
  text-decoration:none;
}
html,
body{
  background-color:#000;
}
/* v1.1.92: body is already black above, unconditionally. This existed to beat
   the white that .site-main used to paint; that white is gone. */
/* v1.1.42: term names in the entry meta are links to their archive.
   The global a{text-decoration:none} would leave them indistinguishable from
   the surrounding date text, so they carry a visible underline. */
.entry-meta a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(45,29,93,.45);
}
/* ==========================================================================
   アーカイブ一覧の共通骨格（.archive-page）
   v1.1.48: NOTES / WORKS / TRPG LOG の見出し・SHOWフィルターを完全統合。

   v0.5.43-v0.5.44 の body / post-type 別セレクタは、後年の .archive-page
   共通化より詳細度が高く、一部の旧値が残っていた。現在の実表示値をここへ
   吸収し、アーカイブ種別に依存しない1系統へ整理した。
   カード本体と各グリッドは構造が異なるため、この節では扱わない。
   ========================================================================== */
main.archive-page.notebook-sheet > *{
  position:relative;
  z-index:1;
}
/* v1.1.98: this rule used to paint a solid purple chip here -- background,
   border and white text -- which the rule 40 lines below turns straight back
   off. Only the box metrics were ever doing anything, so only they are left.
   A declaration that exists to be cancelled is a square waiting to appear the
   moment anything loads the two halves out of step. */
main.archive-page.notebook-sheet > .filter-bar a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px 7px;
  margin:0;
  font-size:.82rem;
  line-height:1.1;
  text-decoration:none;
  transform:none;
}
@media (max-width:900px){
  main.archive-page.notebook-sheet > .filter-bar a{
      display:inline-block;
      min-height:0;
      padding:6px 9px 5px;
    }
}
main.notes-archive-page .square-card > a,
main.works-archive-page .square-card > a{
  display:block;
  padding:10px;
  color:var(--ink);
  background:transparent;
}
main.notes-archive-page .square-media img,
main.works-archive-page .square-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (max-width:900px){
  main.notes-archive-page .square-card > a,
    main.works-archive-page .square-card > a{
      padding:0;
    }
}
main.archive-page.notebook-sheet > .filter-bar a{
  position:relative;
  z-index:0;
  min-height:38px;
  font-size:.88rem;
  background:transparent;
  background-image:none;
  border:0;
  box-shadow:none;
  color:#2d1d5d;
  outline-offset:3px;
}
/* v1.2.0: the current category used to be marked with a highlighter stroke --
   a rotated blob behind the text. It is a underline now, and every state of
   these links is declared in one place, in 05-archive.css. */
/* ============================================================
   v1.1.86 — WordPress core classes
   None of these existed before, so editor output lost its
   alignment and captions on the front end, and the .screen-reader-text
   class that core emits (search form labels, "read more", gallery
   markup) rendered as visible stray text.
   ============================================================ */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
.screen-reader-text:focus{background:var(--paper);clip-path:none;color:var(--ink);display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;white-space:normal;width:auto;z-index:100000}
.alignleft{float:left;margin:.35em 1.6em 1em 0}
.alignright{float:right;margin:.35em 0 1em 1.6em}
.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}
.entry-content .alignleft,.entry-content .alignright{max-width:50%}
@media (max-width:560px){
  .entry-content .alignleft,.entry-content .alignright{float:none;margin-left:0;margin-right:0;max-width:100%}
}
.wp-caption{margin-bottom:1.6em;max-width:100%}
.wp-caption img{margin:0 auto}
.wp-caption-text,.gallery-caption,figcaption,.wp-element-caption{
  color:var(--wine);
  font-size:.82rem;
  line-height:var(--meta-leading);
  margin-top:.6em;
  text-align:center;
}
/* Required by the theme guidelines even when unused: a sticky post and a
   post by the site author must be addressable from the stylesheet. */
.sticky{display:block}
.bypostauthor{display:block}
.page-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border:1px solid rgba(17,11,35,.18);
  color:var(--wine);
}