/* =========================================================
   PULP / Cargo — CLEAN CSS (Keep Current Look)
   - Fixed root font-size (no viewport-height scaling)
   - Header: scoped fixes for pinned header only
   - Mobile: overall 80% scale + header no-break
========================================================= */

/* ------------------------------
   0) Tokens (edit here)
------------------------------ */
:root{
  /* typography base */
  --root-font: 16px;
  --sp-root-font: 12.8px; /* 16px * 0.8 */

  /* bodycopy */
  --bodycopy-size: 1.3rem;
  --bodycopy-lh: 2.2; /* 1.3rem : 0.6 */

  /* thumbnail title/tags */
  --thumb-title-size: 1.6rem;
  --thumb-title-lh: 1.6; 
  --thumb-tags-size: 0.80rem;

  /* small (footer etc.) */
  --small-size: 0.80rem;

  /* layout */
  --container-width: 60%;
  --content-pad: 2.4rem;

  /* thumbnails layout */
  --thumbs-width: 88%;
  --thumbs-pad: 2rem;
  --thumbs-gutter: -4rem;

  /* header (pinned header page only) */
  --header-pc-size: 3.2rem; /* ← PC ロゴ/ナビの基準 */
  --header-sp-size: 1.8rem; /* ← SP ロゴ/ナビの基準 */
  --menu-gap: 0rem; /* ← WORK/INFO/PLAYの間 */
  --menu-link-pad-x: 0em; /* SPで詰まり防止 */
  --menu-gap: .6em; /* ← ここで間隔を作る */
}

/* ------------------------------
   1) Wobble stopper (root fixed)
------------------------------ */
html,
html[data-typography-preset],
html[data-css-preset]{
  font-size: var(--root-font) !important;
}
body{ -webkit-text-size-adjust: 100%; }

/* ------------------------------
   2) Base / reset-ish
------------------------------ */
#toolset{ display:none; }

body{
  background:#fff;
  color:#000;
}

a:active{ text-decoration:none; }
.page a.active{ color:rgba(0,0,0,.4); }

i, em{ font-style:italic; }
b, strong{ font-weight:bolder; }

sub, sup{ position:relative; vertical-align:baseline; }
sub{ top:.3em; }
sup{ top:-.4em; }

s{ text-decoration:line-through; }

img{ border:0; padding:0; }

ul, ol{
  margin:0;
  padding:0 0 0 4.5rem;
  list-style-type: decimal-leading-zero;
}
ol > li{ padding-left:.75rem; }

blockquote{
  margin:0;
  padding:0 0 0 2em;
}

hr{
  background: rgba(0,0,0,.4);
  border:0;
  height:1px;
  display:block;
}

.content img{
  float:none;
  margin-bottom:0;
  vertical-align:bottom;
}

.gallery_image_caption{
  margin-top:.8em;
  margin-bottom:3rem;
  font-size:1.2rem;
  line-height:1.3;
  font-family:"Monument Grotesk Mono", Icons;
  font-style:normal;
  font-weight:400;
  color:rgba(0,0,0,.6);
  letter-spacing:.03em;
  text-align:left;
}

/* loading */
.loading[data-loading]{
  position:fixed;
  bottom:8px;
  left:8px;
}

/* ------------------------------
   3) Editor styles (Cargo predefined)
------------------------------ */
[data-predefined-style="true"] bodycopy{
  font-size: var(--bodycopy-size);
  font-weight:400;
  color:#000;
  font-family:"Brandon Grotesque","dnp-shuei-mgothic-std", Icons;
  font-style: normal; /* keep valid (was b) */
  letter-spacing:.4px;
  line-height: var(--bodycopy-lh);
  font-feature-settings:"palt" 1;
}

/* body links */
[data-predefined-style="true"] bodycopy a{
  border-bottom:1px solid rgba(204, 204, 204, 1);
  color:#000;
  text-decoration:none;
}
[data-predefined-style="true"] bodycopy a:hover{
  border-bottom:1px solid rgba(0,0,0,1);
  color:#000;
  text-decoration:none;
}

/* IMPORTANT:
   Header nav is also rendered with h1/h2 links → disable underline border there */
[data-predefined-style="true"] h1 a,
[data-predefined-style="true"] h2 a{
  border-bottom:0 !important;
}

[data-predefined-style="true"] h1,
[data-predefined-style="true"] h2{
  font-family:"Coronette", Icons;
  font-style:normal;
  font-weight:400;
  padding:0;
  margin:0;
  font-size:2rem;
  line-height:1.5;
  letter-spacing:3px;
}
[data-predefined-style="true"] h1{ color:rgba(0, 0, 0, 1); }
[data-predefined-style="true"] h1 a{ color:rgba(0, 0, 0, 1); }
[data-predefined-style="true"] h2{ color:rgba(204, 204, 204, 1); }

[data-predefined-style="true"] h1 a:hover,
[data-predefined-style="true"] h2 a:hover{
  text-decoration:underline;
  text-underline-offset:.2em;
  text-decoration-thickness:2px;
}

[data-predefined-style="true"] small{
  margin-top:0;
  margin-bottom:1.5rem;
  font-size: var(--small-size);
  letter-spacing:.2px;
  font-weight:400;
  color:#ccc;
  font-family:"Coronette", Icons;
  font-style:normal;
  line-height:1.5;
  text-align:center;
  padding:0 1rem;
}
[data-predefined-style="true"] small a{
  color:rgba(204,204,204,1);
  border-bottom:none;
}
[data-predefined-style="true"] small a:hover{
  color:#000;
}

/* ------------------------------
   4) Cargo preset (layout)
------------------------------ */
[data-css-preset] .page{ background-color:initial; }

.mobile .page,
[data-css-preset].mobile .page{
  position:relative;
  min-height:10px;
  max-width:100%;
  width:100%;
  background-color:transparent;
}

[data-css-preset] .container{
  margin-left:auto /*!content_center*/;
  margin-right:auto /*!content_center*/;
  text-align:center /*!text_center*/;
}
[data-css-preset] body{ background-color:transparent /*!body_bgcolor*/; }

[data-css-preset] .container_width{ width: 64%/*!content_center*/; }

[data-css-preset] .content_padding{
  padding-top: 2.4rem /*!main_margin*/;
  padding-bottom: 2.4rem /*!main_margin*/;
  padding-left: 2.4rem /*!main_margin*/;
  padding-right: 2.4rem /*!main_margin*/;
}

[data-css-preset] .backdrop{ width:100%; }

/* ------------------------------
   5) Thumbnails
------------------------------ */
div[thumbnails]{ justify-content:flex-start; }
[data-css-preset] .thumbnails{ background-color:transparent; }
[data-css-preset] .thumbnails_width{ width: var(--thumbs-width); }

[data-css-preset] [thumbnails-pad]{ padding: var(--thumbs-pad); }
[data-css-preset] [thumbnails-gutter]{ margin: var(--thumbs-gutter); }

[data-css-preset] [responsive-layout] [thumbnails-pad]{ padding: var(--thumbs-pad); }
[data-css-preset] [responsive-layout] [thumbnails-gutter]{ margin: var(--thumbs-gutter); }

.thumbnails .thumb_image{
  outline:0 solid rgba(0,0,0,.12);
  outline-offset:-1px;
}

.thumbnails .title{
  margin-top:2rem;
  margin-bottom:1rem;
  font-size: var(--thumb-title-size);
  font-weight:400;
  color:#000;
  font-family:"Brandon Grotesque","dnp-shuei-mgothic-std", Icons;
  font-style:normal;
  line-height: var(--thumb-title-lh);
  text-align:center;
  letter-spacing:.2px;
  text-rendering:optimizeLegibility;
}

.thumbnails .image-link:hover{
  text-decoration:underline;
  color:#000;
  text-underline-offset:.3em;
  text-decoration-thickness:1px;
}

.thumbnails .tags{
  margin-top:0;
  margin-bottom:1rem;
  font-size: var(--thumb-tags-size);
  letter-spacing:.2px;
  font-weight:00;
  color:rgba(204,204,204,1);
  font-family:"Coronette", Icons;
  font-style:normal;
  line-height:1.5;
  text-align:center;
  padding:0 1rem;
}
.thumbnails .tags a{
  color:rgba(204,204,204,1);
  text-decoration:none;
}
.thumbnails .tags a:hover{
  color:rgba(204,204,204,1);
  text-decoration:underline;
  text-underline-offset:.3em;
  text-decoration-thickness:1px;
}
.thumbnails .has_title .tags{ margin-top:0; }

/* ------------------------------
   6) Header (Pinned header page only)
   - keep logo/menu sizing consistent
------------------------------ */
.pinned_top [local-style="25716261"] h1,
.pinned_top [local-style="25716261"] h2{
  font-size: var(--header-pc-size) !important;
  line-height: 1.05 !important;
}

/* menu spacing: make WORK/INFO/PLAY feel tighter + stable */
.pinned_top [local-style="25716261"] h2{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-end !important;
  align-items:baseline !important;
  gap: var(--menu-gap) !important;
  white-space:nowrap !important;
}

/* neutralize any legacy margins that widen gaps */
.pinned_top [local-style="25716261"] h2 a{
  margin-left:0 !important;
  margin-right:0 !important;
  padding:0 var(--menu-link-pad-x);
}

/* ------------------------------
   7) Mobile (SP)
   - overall 80% scale
   - prevent logo/menu breaking
   - optional: smaller bodycopy on SP
------------------------------ */
@media (max-width: 480px){

  html,
  html[data-typography-preset],
  html[data-css-preset]{
    font-size: var(--sp-root-font) !important;
  }

  body{ font-size: var(--sp-root-font) !important; }

  [data-css-preset] .content_padding{
    padding-top:1.1rem;
    padding-bottom:1.1rem;
    padding-left:1.1rem;
    padding-right:1.1rem;
  }

  .pinned_top [local-style="25716261"] h1{
    font-size: var(--header-sp-size) !important; /* SP logo */
    line-height:1 !important;
    letter-spacing:.08em !important;
    white-space:nowrap !important;
  }

  .pinned_top [local-style="25716261"] h2{
    font-size: var(--header-sp-size) !important; /* SP nav */
    line-height:1 !important;
    letter-spacing:.06em !important;
    white-space:nowrap !important;
  }

  /* SP thumbnail title (current look) */
  .thumbnails .title{
    margin-top:1.2rem;
    margin-bottom:0.6rem;
    font-size: 1.2rem;
    line-height: 1.5; /* 1.2rem : 0.8 */
  }

  /* SP bodycopy slightly smaller */
  [data-predefined-style="true"] bodycopy{
    font-size: 1.2rem;
    line-height: 2.0; /* 1.2rem : 0.6 */
  }
}

/* ------------------------------
   8) WORK Detail
   - style first bold line as "title" (continuity: list → detail)
------------------------------ */
[data-predefined-style="true"] bodycopy strong:first-of-type,
[data-predefined-style="true"] bodycopy b:first-of-type{
  display:block;
  margin-bottom:.8rem;

  font-family:"Brandon Grotesque","dnp-shuei-mgothic-std", Icons;
  font-size:2.2rem;
  font-weight:400;
  font-style:normal;
  line-height:2.2;
  letter-spacing:.2px;

  color:#000;
  text-rendering:optimizeLegibility;
}

@media (max-width: 480px){
  [data-predefined-style="true"] bodycopy strong:first-of-type,
  [data-predefined-style="true"] bodycopy b:first-of-type{
    font-size:1.8rem;
    line-height:1.8;
  }
}

/* =========================================
   PATCH: Header Navigation Color (WORK / INFO / PLAY)
========================================= */

/* 通常時 */
.pinned_top [local-style="25716261"] h2 a{
  color: rgba(204, 204, 204, 1) !important;
}

/* hover / active時 */
.pinned_top [local-style="25716261"] h2 a:hover,
.pinned_top [local-style="25716261"] h2 a:active,
.pinned_top [local-style="25716261"] h2 a.active{
  color: rgba(0, 0, 0, 1) !important;
}