@font-face {
    font-family: 'Yeongwol';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/YeongwolTTF-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SeoulHangang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulHangangM.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}@font-face {
    font-family: 'SeoulNotice';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/SeoulAlrimTTF-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'SeoulNotice';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/SeoulAlrimTTF-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'SeoulNotice';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/SeoulAlrimTTF-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'SeoulNotice';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/SeoulAlrimTTF-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: 'GyeonggiMillenniumBackground';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Batang_Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'GyeonggiMillenniumBackground';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Batang_Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

:root{
  --paper-1:#f5e7d2;
  --paper-2:#ecd6bb;
  --paper-3:#e2c4a2;

  --ink:#7a4c1f;
  --ink-soft:#9a6a3b;
  --ink-dark:#351f09;

  --border: rgba(122, 76, 31, .18);

  /* default accent (overridden per body class) */
  --accent:#c25b3a;
  --accent-ink:#5f2b1f;
}

/* 14 swatches */
.c-white   { --accent:#ffffff; --accent-ink:#ffffff; }
.c-peach   { --accent:#e7a3a3; --accent-ink:#6a2e2e; }
.c-pink    { --accent:#d75a8b; --accent-ink:#5c2340; }
.c-red     { --accent:#c9413b; --accent-ink:#6d1f1c; }
.c-orange  { --accent:#d27a2c; --accent-ink:#6a3a12; }
.c-yellow  { --accent:#d3aa2c; --accent-ink:#6b5312; }
.c-green   { --accent:#A7BE8A; --accent-ink:#3E4B2A; }
.c-emerald { --accent:#3f8b63; --accent-ink:#1f4b36; }
.c-blue    { --accent:#2f6fa8; --accent-ink:#163655; }
.c-purple  { --accent:#6f63c7; --accent-ink:#2f2a63; }
.c-magenta { --accent:#b24dbb; --accent-ink:#4a1e4e; }
.c-beige   { --accent:#c7b7a1; --accent-ink:#5b4b3a; }
.c-gray    { --accent:#8d8a84; --accent-ink:#3d3b37; }
.c-black   { --accent:#2a2521; --accent-ink:#14110f; }

*{ box-sizing:border-box; }
html,body{ height:100%; }

header {
  text-align: center;
}
body{
  margin:0;
  color:var(--ink-dark);
  font-family: "GyeonggiMillenniumBackground",ui-serif, Georgia, "Times New Roman", Times, serif;

  /* Important: DON'T paint the watercolor gradient directly on body */
  background: transparent;
  position:relative;
  overflow-x:hidden;
  min-height: 100vh;
}
.h1 {
  color:var(--ink) !important;
}
/* Fixed watercolor sheet (prevents “restart” bands while scrolling) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(1200px 520px at 20% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 520px at 82% 30%, rgba(146,205,195,.22), transparent 70%),
    radial-gradient(900px 520px at 30% 75%, rgba(232,167,129,.20), transparent 70%),
    radial-gradient(1000px 520px at 68% 88%, rgba(174,138,200,.16), transparent 70%),
    linear-gradient(180deg, var(--paper-1), var(--paper-2) 48%, var(--paper-3));

  /* these help avoid any tiling artifacts */
  background-repeat: no-repeat;
  background-size: cover;
}

/* paper grain */
body::before{
  
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  
  background:
    radial-gradient(circle at 18% 28%, rgba(122,76,31,.08), transparent 35%),
    radial-gradient(circle at 78% 60%, rgba(122,76,31,.07), transparent 40%),
    radial-gradient(circle at 55% 25%, rgba(122,76,31,.06), transparent 35%),
    radial-gradient(circle at 30% 82%, rgba(122,76,31,.06), transparent 40%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 2px,
      rgba(0,0,0,.02) 3px,
      rgba(255,255,255,.02) 6px);
  mix-blend-mode:multiply;
  opacity:.55;
  filter: blur(.2px);
}

.wrap{
  max-width: 1180px;
  margin:0 auto;
  padding: 34px 18px 70px;
  position:relative;
}

a{ color:inherit; text-decoration:none; }

.kicker{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.76rem;
  color:var(--ink-soft);
}

.h1{
  font-family:"Yeongwol", "Brush Script MT","Segoe Script", ui-serif, Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing:.02em;
  margin:.2rem 0 .15rem;
}

.sub{
  color:var(--ink-soft);
  font-style:italic;
  max-width: 60ch;
}

/* gentle, non-button metadata */
.meta-line{
  margin-top:10px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content: center;
  color:var(--ink-soft);
  font-family: "SeoulHangang",ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:.9rem;
}

.meta-line a {
  text-decoration: underline;
  font-weight: 700;
}
.meta-line a:hover {
  background-color: var(--ink);
  color: #ffffff;
}
/* “taped photo” look without looking like a card */
.figure{
  margin:18px 0 28px;
  max-width: 980px;
  position:relative;
}
.figure img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  opacity:.92;
  mix-blend-mode:multiply;
  filter: saturate(.95) contrast(.98);
}
.figure::before, .figure::after{
  content:"";
  position:absolute;
  width: 160px; height: 44px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 25px rgba(45,30,18,.10);
  transform: rotate(-6deg);
  top: -14px; left: 10px;
  border-radius: 10px;
}
.figure::after{
  transform: rotate(7deg);
  top: -10px; left: auto; right: 10px;
}

/* ==== LINEUP LIST (the main change) ==== */

.lineup{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  align-items:start;
  max-width: 700px;      /* tweak: 900–1050 feels nice */
  margin: 20px auto;        /* centers the lineup block */
}

/* column group title, optional */
.colhead{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.72rem;
  color: rgba(122,76,31,.55);
  margin: 0 0 10px;
}

.entry{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding: 6px 0;
}

/* swatch looks like paint dab, not a neat square */
.swatch{
  width: 26px;
  height: 22px;
  background: var(--accent);
  border-radius: 8px 14px 9px 16px;
  filter: saturate(1.05);
  transform: rotate(-3deg);
  box-shadow:
    0 1px 0 rgba(0,0,0,.10),
    inset 0 0 0 2px rgba(255,255,255,.18);
  position:relative;
  flex: 0 0 auto;
}
.swatch::after{
  content:"";
  position:absolute;
  inset:-3px -6px -5px -4px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.10), transparent 55%);
  opacity:.55;
  border-radius: 18px;
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* Title is the link: “handwritten” + color-matched */
.entry a.title{
  font-family:"Yeongwol","Brush Script MT","Segoe Script", ui-serif, Georgia, serif;
  font-size: 2.05rem;
  line-height: 1;
  color: var(--accent-ink);
  display:inline-block;
  position:relative;
  padding-bottom: 2px;
}

/* ink underline that feels drawn, not UI */
.entry a.title::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-6px;
  bottom: -4px;
  height: 9px;
  background: linear-gradient(90deg,
    rgba(122,76,31,.0),
    rgba(122,76,31,.22),
    rgba(122,76,31,.0));
  opacity:.0;
  transform: rotate(-1.5deg);
  transition: opacity .18s ease;
}
.entry a.title:hover::after{ opacity:.9; }

/* credits like your lineup text */
.credits{
  margin-top: 4px;
  color: rgba(122,76,31,.70);
  font-size:.95rem;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;
}
.credits span{
  opacity:.85;
}
.credits .sep{
  margin: 0 8px;
  opacity:.45;
}

/* Footer */
footer{
  margin-top: 60px;
  color: rgba(122,76,31,.62);
  font-family: 'SeoulHangang',ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:.88rem;
  text-align: center;
}

/* Work page — remove “card” feeling */
.work-head{
  margin-top: 18px;
  padding: 10px 0 14px;

}
.work-title{
  font-family:"Brush Script MT","Segoe Script", ui-serif, Georgia, serif;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  margin: 0;
  color: var(--accent-ink);
}
.byline{
  margin-top: 6px;
  color: rgba(122,76,31,.68);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:.95rem;
}
.work-body{
  padding: 14px 0 0;
  line-height: 2;
  color: rgba(45,30,18,.92);
}
.backlink{
  display:inline-block;
  margin-top: 18px;
  color: rgba(122,76,31,.72);
}
.backlink:hover{ text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px){
  .lineup{ grid-template-columns: 1fr; gap: 14px; }
  .figure{ margin-bottom: 18px; }
}

/* ===== Color groups (non-clickable) ===== */

.group{
  margin: 16px 0 26px;
}

.group-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom: 8px;
}

.group-swatch{
  width: 30px;
  height: 22px;
  background: var(--accent);
  border-radius: 8px 14px 9px 16px;
  filter: saturate(1.05);
  transform: rotate(-3deg);
  box-shadow:
    0 1px 0 rgba(0,0,0,.10),
    inset 0 0 0 2px rgba(255,255,255,.18);
  position:relative;
  flex: 0 0 auto;
}
.group-swatch::after{
  content:"";
  position:absolute;
  inset:-3px -6px -5px -4px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.10), transparent 55%);
  opacity:.55;
  border-radius: 18px;
  pointer-events:none;
  mix-blend-mode:multiply;
}

.group-title{
  font-family:"Yeongwol", "Brush Script MT","Segoe Script", ui-serif, Georgia, serif;
  font-size: 2.2rem;
  line-height: 1;
  margin: 0;
  color: var(--accent-ink);
}

.group-sub{
  color: rgba(122,76,31,.60);
  font-family: "SeoulHangang",ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Creator rows: nickname is the link */
.people{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  padding-left: 44px; /* aligns with swatch + title */
}

.person{

  font-family: 'SeoulNotice',ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.05rem;
  color: rgba(122,76,31,.76);
  position:relative;
  display:inline-block;
  padding-bottom: 1px;
}

.person strong{
  font-weight:800;
  color: rgba(122,76,31,.86);
}

.person a{
  color: inherit;
  text-decoration:none;
}

.person a:hover{
  text-decoration:none;
}

.person a::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-4px;
  bottom:-5px;
  height: 8px;
  background: linear-gradient(90deg,
    rgba(122,76,31,.0),
    rgba(122,76,31,.22),
    rgba(122,76,31,.0));
  opacity:0;
  transform: rotate(-1.2deg);
  transition: opacity .18s ease;
}
.person a:hover::after{ opacity:.9; }

.tag{
  font-family: "SeoulNotice",ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:.82rem;
}

.tag_sm {

}
/* Creator page */
.creator-head{
  margin-top: 18px;
  padding: 10px 0 14px;
    max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}
.creator-name{
  font-family:"Yeongwol","Brush Script MT","Segoe Script", ui-serif, Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4rem);
  margin: 0;
  color: var(--accent);
  margin-block-end: 0;
}
.creator-nickname {
 font-family:"Yeongwol","Brush Script MT","Segoe Script", ui-serif, Georgia, serif;
 font-size: clamp(1.6rem, 3vw, 2.5rem);
 margin-block-start: 0;
 margin-block-end: 0;
}
.creator-meta{
  margin-top: 6px;
  color: rgba(122,76,31,.68);
  font-family: "SeoulNotice",ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:.95rem;
}

.creator-section{
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
}

.creator-section h3{
  margin: 1.2rem 0 .5rem;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(122,76,31,.60);
  font-size:.82rem;
}

.creator-section p{
  line-height: 1.8;
}

.paperbox{
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  line-height: 1.85;
}

.warning {
  margin-bottom: 80px;
}

.ps {
  margin-top: 80px;
  color: var(--ink);
  font-size: 14px;
}

.video-container {
  width: 100%; /* Ensures the container takes the full width of its parent */
  height: 100px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

.artwork {
  max-width: 1000px;
}

.artwork img {
  width: 100%;
}