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

.home-right{padding:clamp(24px,4vw,64px)}
.home-section{margin-bottom:64px}
.eyebrow{font-size:.75rem;letter-spacing:.16em;font-weight:700;color:var(--deep-red);margin-bottom:14px}
.video-role{font-size:.82rem;font-weight:700;letter-spacing:.08em;margin:-12px 0 14px;color:var(--deep-red)}
.video-frame{aspect-ratio:16/9}
.log-list{display:grid;gap:14px}
@media(max-width:900px){
  .home-right{padding:36px 18px}
}
.site-main > .home-right{
  min-height:calc(100vh - 76px);
}
@media(max-width:900px){
  .site-main > .home-right{min-height:0}
}
/* v1.1.52: canonical HOME latest WORKS / NOTES cards.
   The original 16:9 media rules and the later all-viewport paper surface are
   kept together so the card no longer depends on v0.2.1 + v1.1.8 layering. */
.home-latest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.home-latest-card{
  background:#fff;
  border:2px solid rgba(17,11,35,.18);
  box-shadow:0 3px 0 rgba(17,11,35,.06);
  color:var(--ink);
}
.home-latest-media{aspect-ratio:16/9;overflow:hidden;background:#eae8f0}
.home-latest-title{margin-top:10px;padding:10px 4px 4px;font-weight:800;color:var(--ink)}
@media(max-width:560px){
  .home-latest-grid{grid-template-columns:1fr}
}
/* v0.3.6: hide the legacy front-page left panel on mobile.
   The global hamburger in header.php is the only mobile navigation. */
@media(max-width:900px){
  .site-main .home-right{
      width:100%;
      min-width:0;
      padding:28px 18px;
    }
}
@media(max-width:480px){
  .site-main .home-right{
      padding:22px 14px;
    }
}
/* ==========================================================================
   HOME — RECENT TRPG LOG cards
   v1.1.53: current punched-record-card geometry consolidated.

   Shared text styles remain unscoped because the TRPG archive reuses the same
   card template. HOME-only paper geometry is scoped through .home-right.
   ========================================================================== */
.home-right .home-trpg-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(135px,180px) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);
  padding:26px 22px 22px;
  border:2px solid rgba(17,11,35,.24);
  border-radius:28px 0 0 0;
  background:#fff;
}
.home-right .home-trpg-card::before{
  content:"";
  position:absolute;
  top:13px;
  left:13px;
  width:15px;
  height:15px;
  box-sizing:border-box;
  border:2px solid var(--brass);
  border-radius:50%;
  background:var(--desk);
  box-shadow:
    inset 0 2px 3px rgba(17,11,35,.34),
    inset 0 -1px 1px rgba(255,255,255,.28),
    0 0 0 1px rgba(138,106,23,.20),
    0 1px 0 rgba(255,255,255,.45);
  pointer-events:none;
  z-index:2;
}
.home-right .home-trpg-left{
  padding:12px 26px 0 8px;
  border-right:1px solid rgba(17,11,35,.14);
}
.home-right .home-trpg-right{
  min-width:0;
  padding-left:16px;
}
.home-trpg-date{
  margin-bottom:12px;
  font-weight:800;
  color:var(--deep-red);
  letter-spacing:.02em;
}
.home-trpg-side-line{
  margin-top:5px;
  font-size:.9rem;
  line-height:1.45;
  color:var(--wine);
}
.home-trpg-title{
  display:inline-block;
  font-size:1.25rem;
  line-height:1.35;
  font-weight:800;
  color:var(--deep-red);
  text-decoration:none;
}
.home-trpg-session{
  margin-top:5px;
  margin-bottom:12px;
  font-weight:700;
  line-height:1.5;
  color:var(--wine);
}
.home-trpg-detail{
  font-size:.9rem;
  line-height:1.55;
  color:var(--wine);
}
@media(max-width:900px){
  .home-right .home-trpg-card{
      padding-left:16px;
    }
  .home-right .home-trpg-card::before{
      display:none;
    }
}
@media(max-width:560px){
  .home-right .home-trpg-card{
      grid-template-columns:minmax(105px,130px) minmax(0,1fr);
      gap:14px;
      padding:16px;
      border-width:1px;
      border-color:rgba(17,11,35,.16);
      border-radius:24px 0 0 0;
    }
  .home-right .home-trpg-left{
      padding:0 12px 0 0;
    }
  .home-right .home-trpg-right{
      padding-left:0;
    }
  .home-trpg-title{
      font-size:1.05rem;
    }
  .home-trpg-side-line,
    .home-trpg-detail{
      font-size:.82rem;
    }
}
/* v1.1.50: canonical GM / PL rows in TRPG cards.
   v0.4.8-v0.4.13 repeatedly changed grid/flex sizing; the final computed
   layout is a 4.5rem label column plus a flexible value column. */
.home-trpg-person{
  display:grid;
  grid-template-columns:4.5rem minmax(0,1fr);
  column-gap:3px;
  align-items:start;
}
.home-trpg-person-label{
  width:auto;
  min-width:0;
  margin-right:0;
  font-weight:700;
  white-space:nowrap;
}
.home-trpg-played-rest{
  font-size:.9rem;
  color:var(--wine);
}
@media(max-width:560px){
  .home-trpg-played-rest{
      font-size:.82rem;
    }
}
/* v0.4.16: add breathing room before PLAYED day count */
.home-trpg-days-count{
  display:inline-block;
  margin-left:.65em;
}
.home-trpg-title,
.home-trpg-session{overflow-wrap:anywhere;word-break:break-word}
/* v0.5.10: stack PL names on mobile TRPG cards */
.home-trpg-pl-list{
  min-width:0;
}
.home-trpg-pl-name:not(:last-child)::after{
  content:" / ";
}
@media (max-width:900px){
  .home-trpg-pl-name{
      display:block;
    }
  .home-trpg-pl-name:not(:last-child)::after{
      content:"";
    }
}
/* v1.1.52: canonical HOME tape-label foundation.
   Section labels and I EDIT VIDEOS now share one structural definition.
   The later palette/torn-edge rules still own the visible tape surface. */
.home-section-taped > .eyebrow,
.home-right .video-tape-label{
  position:relative;
  display:inline-block;
  isolation:isolate;
  margin-left:4px;
  padding:5px 13px 5px 11px;
  line-height:1.1;
}
.home-section-taped > .eyebrow{font-size:max(16px,1rem)}
.home-right .video-tape-label{
  margin-bottom:20px;
  min-height:0;
  height:auto;
  text-align:left;
}
.home-section-taped > .eyebrow::before,
.home-right .video-tape-label::before{
  content:"";
  position:absolute;
  z-index:-1;
  transform-origin:center;
}
.home-right .video-tape-label > .video-role{
  margin:0;
  width:auto;
  font-size:16px;
  line-height:1.1;
  text-align:left;
}
/* v0.5.37: desk-like right pane and clearer tape-to-content spacing.
   A single flat warm wood/paper tone only: no texture image, gradient or decorative props. */
@media (min-width:901px){
  .home-right{
      background:var(--desk);
    }
}
/* Keep all taped labels on the same left axis. */
@media (min-width:901px){
  .home-right .video-tape-label,
    .home-right .home-section-taped > .eyebrow{
      margin-left:4px;
    }
}
/* More air between each tape label and the content directly below it. */
@media (min-width:901px){
  .home-right .video-tape-label{
      margin-bottom:20px;
    }
  .home-right .home-section-taped > .eyebrow{
      margin-bottom:20px;
    }
}
@media (min-width:901px){
  main.trpg-archive-page .log-list{
      gap:18px;
    }
}
@media (max-width:900px){
  .home-right{
      background:var(--desk);
    }
}
.home-trpg-card{
  line-height:var(--meta-leading);
}
@media (hover:hover) and (pointer:fine){
  .home-latest-card:hover{
      box-shadow:0 4px 10px rgba(17,11,35,.08);
    }
}
@media (hover:hover) and (pointer:fine){
  .home-trpg-card:hover{
      box-shadow:0 4px 0 rgba(17,11,35,.075);
    }
}
@media (min-width:901px){
  .home-trpg-side-line,
    .home-trpg-detail,
    .home-trpg-played-rest{
      font-size:1rem;
    }
}
@media (min-width:901px){
  .home-latest-title{
      font-size:1.05rem;
      line-height:1.55;
    }
}
/* v0.5.39 re-declared the YouTube tape at a higher specificity for the home
   page, so that selector has to be named here too or it keeps the faint fill. */
.home-section-taped > .eyebrow::before,
.video-tape-label::before,

.home-right .video-tape-label::before{
  background:linear-gradient(100deg,
    rgba(178,166,214,.5),
    rgba(109,80,197,.28) 46%,
    rgba(178,166,214,.46));
  border:0;
  box-shadow:
    0 2px 3px rgba(17,11,35,.17),
    inset 0 0 0 1px rgba(74,48,151,.16);
  inset:0 -17px 0 -19px;
  /* Torn short edges; the long edges stay straight, as real tape tears. */
  clip-path:polygon(
    0 6%,5px 0,
    calc(100% - 4px) 3%,100% 9%,
    calc(100% - 2px) 52%,
    100% 94%,calc(100% - 6px) 100%,
    4px 97%,0 90%,
    2px 50%);
}
.home-section-taped.tape-a > .eyebrow::before{ transform:rotate(-2.1deg); }
.home-section-taped.tape-b > .eyebrow::before{ transform:rotate(1.6deg); }
.home-section-taped.tape-c > .eyebrow::before{ transform:rotate(-1.1deg); }
.video-tape-label::before,
.home-right .video-tape-label::before{ transform:rotate(-1.4deg); }
/* ---------- Side notes: the play-day count ---------- */
.home-trpg-days-count{
  color:var(--gold);
  font-weight:700;
}
/* The label div only carried the word, so it no longer needs its own
   line box; the spacing it provided moves onto the dates themselves. */
.home-trpg-played-label{
  margin-top:0;
  line-height:0;
}
.home-trpg-played-rest{
  margin-top:6px;
}
/* v0.9.3: a gold hairline around thumbnails.

   This widens --brass from "hardware" to "the frame around a picture", which
   is still a physical job rather than an emphasis one — a gilt edge on paper,
   not a highlight. It also solves a real legibility problem: a thumbnail with
   a pale background (the 創像ラボ screenshot) previously bled into the white
   card it sits on and had no edge of its own.

   2px (v0.9.4) reads as a mount rather than a hairline, which suits the
   paper system. The colour and weight are both easy to dial from here. */
.home-latest-media,
.video-frame{
  border:2px solid var(--brass);
}
/* It was a translucent violet wash, which worked over a light surface. On
   black it disappeared and took the dark violet label text with it. Real
   tape on a dark desk is the pale thing, so it becomes pale. */
.home-section-taped > .eyebrow::before,
.video-tape-label::before,
.home-right .video-tape-label::before{
  background:linear-gradient(100deg,
    rgba(226,221,242,.93),
    rgba(210,203,234,.90) 46%,
    rgba(226,221,242,.92));
  box-shadow:
    0 2px 4px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(74,48,151,.18);
}
/* v1.0.2: video section repairs.

   #eee was the last colour in the stylesheet belonging to no palette — a pale
   grey box, which on a black desk read as a hole in the page while the player
   loaded. It becomes the weave's dark tone, so an unloaded player looks like
   part of the surface rather than a gap. */
.video-frame{
  background:#251e3f;
}
/* Shown only to users who can act on it (see front-page.php). */
.video-setup-note{
  margin:0;
  padding:16px 18px;
  background:#fffdf8;
  border:1px dashed rgba(74,48,151,.45);
  color:var(--wine);
  font-size:.9rem;
  line-height:1.7;
}
h2.eyebrow,
h3.eyebrow,
h2.video-role,
h3.video-role,
h2.home-latest-title,
h3.home-latest-title{
  margin-top:0;
  margin-bottom:0;
}
h2.eyebrow,
h3.eyebrow{
  margin-bottom:14px;
}
.home-section-taped > h2.eyebrow,
.home-section-taped > h3.eyebrow{
  margin-bottom:20px;
}
h2.home-latest-title,
h3.home-latest-title{
  margin-top:10px;
}
/* The TRPG card keeps the link as the styled element and wraps it, so the
   heading itself carries no appearance of its own. */
.home-trpg-heading{
  margin:0;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}
/* v1.0.7: the 404 page on the black desk.

   Unlike every other route, this page puts its content straight onto the desk
   with no paper sheet under it, so the palette change to a dark surface left
   the heading, the message and the links all drawn in ink on near-black — the
   whole page was effectively invisible. Its text is inverted to sit on the
   desk instead. */
.not-found-page > .eyebrow{
  color:#c3b4f5;
}
/* Home copyright: centered type printed over a masking-tape strip. */
.home-copyright-tape{
  position:relative;
  width:max-content;
  max-width:calc(100% - 40px);
  margin:52px auto 42px;
  padding:7px 28px 6px;
  color:#21163f;
  font-size:.72rem;
  line-height:1.35;
  letter-spacing:.04em;
  text-align:center;
  isolation:isolate;
}
.home-copyright-tape::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 6px,rgba(255,255,255,0) 6px 12px),
    rgba(221,177,67,.58);
  border:1px solid rgba(168,132,44,.18);
  clip-path:polygon(1% 8%,99% 0,100% 88%,97% 100%,2% 94%,0 14%);
  transform:rotate(-.7deg);
  box-shadow:0 1px 2px rgba(17,11,35,.08);
}
@media (max-width:900px){
  .home-copyright-tape{
      margin:38px auto 30px;
    }
}
/* Home copyright tape: use an opaque pale paper tape so the lettering stays
   readable regardless of what sits behind it. */
.home-copyright-tape{
  position:relative;
  z-index:1;
  padding:9px 30px 8px;
  color:#21163f;
  font-size:.76rem;
  font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
}
.home-copyright-tape::before{
  z-index:-1;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.28) 0 6px,
      rgba(255,255,255,0) 6px 12px
    ),
    #eadca8;
  border:1px solid rgba(74,48,151,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 2px 5px rgba(17,11,35,.18);
  opacity:1;
}
/* Top page: each policy link gets its own separate masking-tape strip,
   then the copyright remains centered on the line below. */
.home-policy-footer{
  margin:52px auto 42px;
  text-align:center;
}
.home-policy-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 18px;
}
.home-policy-tape{
  position:relative;
  z-index:1;
  display:inline-block;
  padding:8px 22px 7px;
  color:#21163f;
  font-size:.78rem;
  line-height:1.3;
  font-weight:700;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
  isolation:isolate;
}
.home-policy-tape::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.25) 0 6px,
      rgba(255,255,255,0) 6px 12px
    ),
    #e7d9a4;
  border:1px solid rgba(74,48,151,.18);
  clip-path:polygon(1% 7%,99% 0,100% 88%,97% 100%,2% 94%,0 14%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 2px 4px rgba(17,11,35,.14);
  transform:rotate(-.55deg);
}
.home-policy-tape:nth-child(even)::before{
  transform:rotate(.55deg);
}
.home-policy-tape:hover,
.home-policy-tape:focus-visible{
  color:#4a3097;
}
.home-policy-footer .home-copyright-tape{
  margin:14px auto 0;
}
@media (max-width:900px){
  .home-policy-footer{
      margin:38px auto 30px;
    }
  .home-policy-links{
      gap:10px 12px;
    }
  .home-policy-tape{
      padding:7px 16px 6px;
      font-size:.74rem;
    }
}
.home-policy-tape:nth-child(3n)::before{
  transform:rotate(-.2deg);
}
body.home{
  background:#000;
}
/* ==========================================================================
   TRPG LOG archive cards
   v1.1.50: archive/taxonomy card geometry and participant rows consolidated.

   The homepage keeps the punched-record-card treatment. Archive routes all use
   .trpg-archive-page, so old body.post-type/taxonomy selectors are unnecessary.
   ========================================================================== */
main.trpg-archive-page .log-list{
  display:grid;
  gap:18px;
}
main.trpg-archive-page .home-trpg-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(135px,180px) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);
  padding:22px;
  background:#fffdf8;
  border:2px solid rgba(17,11,35,.18);
  border-radius:0;
  box-shadow:0 3px 0 rgba(17,11,35,.06);
}
main.trpg-archive-page .home-trpg-card::before{
  display:none;
}
main.trpg-archive-page .home-trpg-left{
  padding-top:0;
  padding-right:26px;
  padding-left:0;
  border-right:1px solid rgba(17,11,35,.14);
}
main.trpg-archive-page .home-trpg-right{
  min-width:0;
  padding-left:16px;
}
@media (min-width:901px){
  main.trpg-archive-page .home-trpg-card{
      grid-template-columns:minmax(190px,auto) minmax(0,1fr);
    }
}
@media (max-width:900px){
  main.trpg-archive-page .home-trpg-card{
      padding-left:16px;
    }
}
@media (max-width:560px){
  main.trpg-archive-page .home-trpg-card{
      grid-template-columns:minmax(105px,130px) minmax(0,1fr);
      gap:14px;
      padding:16px;
    }
  main.trpg-archive-page .home-trpg-left{
      padding-right:12px;
    }
  main.trpg-archive-page .home-trpg-right{
      padding-left:0;
    }
}
.home-copyright{
  font-size:.8rem;
}

/* v1.2.4: latest published NOTICE entry above the YouTube block. */
.home-notice{margin-bottom:40px}
.home-notice-label{
  display:inline-block;
  margin:0 0 12px 4px;
  padding:5px 13px 5px 11px;
  background:var(--deep-red);
  transform:rotate(-.7deg);
}
.home-notice-label h2{
  margin:0;
  font-size:16px;
  line-height:1.1;
  letter-spacing:.12em;
  color:#fff;
}
.home-notice-paper{
  max-width:760px;
  padding:18px 20px 19px;
  background:#fff;
  border:1px solid rgba(17,11,35,.16);
  box-shadow:0 3px 0 rgba(17,11,35,.06);
}
.home-notice-date{
  display:block;
  margin-bottom:5px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--wine);
}
.home-notice-title{
  margin:0;
  font-size:1.15rem;
  line-height:1.4;
  font-weight:800;
  color:var(--deep-red);
}
.home-notice-title a{color:inherit;text-decoration:none}
.home-notice-title a:hover,
.home-notice-title a:focus-visible{text-decoration:underline;text-underline-offset:.18em}
.home-notice-body{
  margin:8px 0 0;
  font-size:.95rem;
  line-height:1.75;
  color:var(--ink);
  overflow-wrap:anywhere;
}
@media(max-width:560px){
  .home-notice{margin-bottom:34px}
  .home-notice-paper{padding:15px 16px 16px}
  .home-notice-title{font-size:1.05rem}
  .home-notice-body{font-size:.9rem}
}