:root{
  /* off-white base (ลดความเหลือง) */
  --cloud-dancer:#f7f7f3;     /* off white กว่าเดิม */
  --paper: var(--cloud-dancer);
  --paper-warm:#f1efe7;       /* เหลืองไว้แค่นิดเดียว */

  --graphite:#1c1c1c;
  --muted: rgba(28,28,28,.55);

  --scarlet:#c4161c;
  --ticket-yellow:#efe36a;

  /* solid grid lines */
  --grid-r: 196; --grid-g: 22; --grid-b: 28;
  --grid-w: 2px;
  --grid-a: .55;              /* ความเข้มเส้นแดงฐาน */
  --fade-hover: .18;          /* fade ตอน hover การ์ด (ยิ่งน้อยยิ่งจาง) */

  /* corners */
  --r-soft: 12px;             /* thumbnail */
  --r-hard: 0px;              /* brutal corners */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--graphite);

  /* ลดความเหลือง: ให้ส่วนใหญ่เป็น off-white */
  background: linear-gradient(180deg, var(--cloud-dancer), rgba(241,239,231,.55));
  position: relative;
}

/* film grain (เพิ่ม grain ให้ชัดขึ้น) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    /* tighter noise */
    repeating-linear-gradient(0deg, rgba(0,0,0,.020) 0px, rgba(0,0,0,.020) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.016) 0px, rgba(0,0,0,.016) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.014) 0px, rgba(0,0,0,.014) 1px, transparent 1px, transparent 4px),
    /* extra layer for stronger grain */
    repeating-linear-gradient(135deg, rgba(0,0,0,.010) 0px, rgba(0,0,0,.010) 1px, transparent 1px, transparent 5px);
  opacity: .48;               /* เพิ่มจากเดิม (.35) */
  mix-blend-mode: multiply;
  z-index: 0;
}

header, main, footer{ position: relative; z-index: 1; }

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding: 32px 20px 44px;
}
@media (max-width: 640px){
  .wrap{ padding: 22px 14px 40px; }
}

header{
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.hero-name{
  font-size: 34px;
  font-weight: 780;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}

.hero-role{
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(28,28,28,.70);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--r-hard); /* brutal */
  background: linear-gradient(transparent 50%, rgba(239,227,106,.55) 50%); /* ลดเหลืองลง */
}

.hero-tagline{
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: lowercase;
  color: rgba(28,28,28,.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.cats{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  align-items: center;
}

.btn{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  color: var(--graphite);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  user-select: none;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.btn.active{
  background: var(--graphite);
  color:#fff;
  border-color: rgba(0,0,0,.18);
}

main{ padding-top: 22px; }

/* Section */
.section{ margin-top: 26px; }

.section-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.section-title{
  margin:0;
  font-size: 14px;
  letter-spacing: .10em;
  text-transform: uppercase;
  display: inline-block;
  padding: 2px 6px;
  background: linear-gradient(transparent 64%, rgba(239,227,106,.48) 64%); /* ลดเหลือง */
  border-radius: var(--r-hard);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.section-note{
  margin:0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ===== Catalog Grid (Desktop=3, Phone=2) ===== */
.grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  position: relative;
  background: transparent;

  /* control for hover fade system */
  --line-alpha: 1;
}

/* top + left solid lines */
.grid::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;

  background:
    /* top line */
    linear-gradient(
      rgba(var(--grid-r),var(--grid-g),var(--grid-b), calc(var(--grid-a) * var(--line-alpha))),
      rgba(var(--grid-r),var(--grid-g),var(--grid-b), calc(var(--grid-a) * var(--line-alpha)))
    ) 0 0 / 100% var(--grid-w) no-repeat,

    /* left line */
    linear-gradient(
      rgba(var(--grid-r),var(--grid-g),var(--grid-b), calc(var(--grid-a) * var(--line-alpha))),
      rgba(var(--grid-r),var(--grid-g),var(--grid-b), calc(var(--grid-a) * var(--line-alpha)))
    ) 0 0 / var(--grid-w) 100% no-repeat;
}

@media (max-width: 640px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.item{
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 300px;
  padding: 16px 16px 14px;
  text-decoration: none;
  color: inherit;

  background: transparent;
  position: relative;
}

/* right + bottom solid lines per cell */
.item::before,
.item::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index: 1;
  opacity: 1;
  transition: opacity 180ms ease;
}

.item::before{
  top:0; bottom:0;
  right:0;
  width: var(--grid-w);
  background: rgba(var(--grid-r),var(--grid-g),var(--grid-b), var(--grid-a));
}

.item::after{
  left:0; right:0;
  bottom:0;
  height: var(--grid-w);
  background: rgba(var(--grid-r),var(--grid-g),var(--grid-b), var(--grid-a));
}

/* keep this: lines fade on hovered card */
.item:hover::before,
.item:hover::after{
  opacity: var(--fade-hover);
}

/* subtle hover fill */
.item:hover{ background: rgba(255,255,255,.14); }

.item:focus-visible{
  outline: 2px solid rgba(var(--grid-r),var(--grid-g),var(--grid-b), .95);
  outline-offset: 3px;
}

@media (max-width: 640px){
  .item{ min-height: 260px; padding: 12px 12px 10px; }
}

/* เพิ่มขนาดชื่องานขึ้นนิดนึง */
.title{
  margin: 0;
  font-weight: 720;
  font-size: 11.5px;            /* เดิม 11px → เพิ่มขึ้นนิด */
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(28,28,28,.88);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.item:hover .title{ color: var(--scarlet); }

/* Thumbnail */
.thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;

  border-radius: var(--r-soft);
  background: rgba(255,255,255,.58);

  box-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 10px 24px rgba(0,0,0,.10);

  margin: 12px 0 14px;
}

.thumb img, .thumb .player{
  position:absolute; inset:0;
  width:100%; height:100%;
}

.thumb img{
  object-fit: cover;
  padding: 0;
  transition: opacity 160ms ease;
}

.thumb.is-playing img{ opacity:0; }
.thumb .player{ opacity:0; transition:opacity 160ms ease; }
.thumb.is-playing .player{ opacity:1; }

.thumb::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
  border-radius: var(--r-soft);
  pointer-events:none;
}

.meta{
  margin-top: auto;
  padding: 0;
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.sub{
  margin: 0;
  font-size: 11px;
  color: rgba(28,28,28,.45);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.year{
  font-size: 12px;
  background: transparent;
  border: 0;
  color: rgba(28,28,28,.75);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .06em;
}

/* See more cell */
.see-more{
  display:grid;
  place-items:center;
  height: 100%;
  background: transparent;
  min-height: 140px;
}

.see-more strong{
  display:block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.see-more span{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  text-align:center;
}

.empty{
  margin:0;
  color: rgba(28,28,28,.55);
}

/* Mobile hover hint */
@media (hover: none) and (pointer: coarse){
  .yt-hover::before{
    content: "Tap to preview";
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(28,28,28,.55);
    color: #fff;
    z-index: 2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}
@media (max-width: 640px){

  /* grid ยัง 2 คอลัมน์เหมือนเดิม */
  .grid{
    gap: 0;
  }

  /* ลดขนาดการ์ด */
  .item{
    min-height: 210px;        /* เดิม ~260px */
    padding: 10px 10px 8px;  /* เดิม 12/10 */
  }

  /* thumbnail ให้ compact ขึ้น */
  .thumb{
    margin: 8px 0 10px;      /* เดิม 12 / 14 */
    border-radius: 10px;     /* คมขึ้นนิด ดู brutal */
  }

  /* title ชิดขึ้น ไม่กินพื้นที่ */
  .title{
    font-size: 11.5px;         /* คงขนาดที่คุณขอเพิ่มไว้ */
    line-height: 1.3;
    min-height: 30px;
  }

  /* meta ด้านล่างให้แน่น */
  .meta{
    margin-top: 6px;
  }

  .sub{
    font-size: 10px;
  }

  .year{
    font-size: 11px;
  }

  /* hover / tap preview ไม่ล้น */
  .thumb img,
  .thumb .player{
    object-fit: cover;
  }

  .cats{
    gap: 6px;                /* ลดช่องว่างระหว่างปุ่ม */
  }

  .cats .btn{
    font-size: 10.5px;       /* จาก ~12px */
    padding: 6px 10px;       /* กระชับขึ้น */
    letter-spacing: .04em;  /* ลด tracking */
  }
}

/* Footer */
footer{
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 28px;
  padding-top: 16px;
}

.social{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.iconbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  text-decoration:none;
  color: var(--graphite);
  font-size: 12px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.icon{ width:18px; height:18px; display:inline-block; }
.icon svg{ width:100%; height:100%; display:block; }

/* Simple about card */
.about-card{
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.24);
  padding:16px;
  line-height:1.8;
  border-radius: var(--r-hard);
}
.about-kicker{
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.about-text{
  margin:0;
  color:rgba(28,28,28,.78);
  font-size:14px;
  max-width:90ch;
}