/* Arirang journal pages.
   Palette and type lifted from public/index.html so the articles read as the
   same publication. Kept standalone on purpose: the homepage's CSS is inline
   and enormous, and linking the two would mean touching the live homepage. */

:root{
  --gold:#D4A853;--paper:#f6f0e8;--paper-2:#ede5d8;--paper-3:#e2d8c8;
  --ink:#1c1610;--ink-2:#2e2418;--ink-3:#48392a;
  --muted:#887660;--faint:#b8a890;--red:#8f1a0e;--red-lt:#b8291a;
  --rule:rgba(28,22,16,.18);--rule-hv:rgba(28,22,16,.38);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Georgia','Times New Roman',Times,serif;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.04'/%3E%3C/svg%3E");
  background-size:200px;
}
img{max-width:100%;height:auto;display:block}

/* NAV */
.a-nav{
  position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 24px;flex-wrap:wrap;
}
.a-home{
  font-family:'Palatino Linotype','Palatino','Book Antiqua',Palatino,serif;
  font-size:19px;letter-spacing:.12em;color:var(--ink);text-decoration:none;
}
.a-nav-right{display:flex;align-items:center;gap:20px}
.a-back{
  font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;
  font-size:12px;font-style:italic;letter-spacing:.12em;
  color:var(--muted);text-decoration:none;transition:color .25s;
}
.a-back:hover{color:var(--red)}
.lang-switch{display:flex;gap:2px}
.lang-btn{
  background:none;border:1px solid transparent;cursor:pointer;
  font-family:'Courier New',Courier,monospace;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  padding:5px 8px;transition:color .25s,border-color .25s;
}
.lang-btn:hover{color:var(--ink)}
.lang-btn.on{color:var(--red);border-color:var(--rule)}

/* SHARED HEADINGS */
.a-tag{
  font-family:'Courier New','Lucida Console',Courier,monospace;
  font-size:9px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px;
}
.a-title{
  font-family:'Palatino Linotype','Palatino','Book Antiqua',Palatino,serif;
  font-size:clamp(28px,5vw,50px);font-weight:400;line-height:1.12;
  letter-spacing:.02em;color:var(--ink);
}
.a-title em{font-style:italic;color:var(--red)}
.a-rule{width:48px;height:1px;background:var(--rule-hv);margin:26px 0 30px}

/* ARTICLE */
.a-wrap{max-width:720px;margin:0 auto;padding:48px 24px 0}
.a-hero{
  width:100%;aspect-ratio:2/1;object-fit:cover;margin-bottom:40px;
  filter:sepia(6%) brightness(.94) saturate(.95);
}
.a-body{font-size:16px;line-height:1.95;color:var(--ink-3)}
.a-body p{margin-bottom:1.4em}
.a-body h3,.a-body h4{
  font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;
  font-weight:400;font-style:italic;color:var(--ink);
  font-size:22px;margin:2em 0 .7em;
}
.a-body ul,.a-body ol{margin:0 0 1.4em 1.3em}
.a-body li{margin-bottom:.5em}
.a-body strong{color:var(--ink-2)}
.a-body em{font-style:italic}
.a-body blockquote{
  font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;
  font-style:italic;font-size:clamp(18px,2.4vw,24px);line-height:1.5;
  color:var(--ink-2);border-left:3px solid var(--red);
  padding-left:22px;margin:1.8em 0;
}
.a-body a{color:var(--red)}

/* PAGER + CTA */
.a-pager{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--rule);margin-top:56px;padding-top:24px;
}
.a-pager a{
  font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;
  font-size:13px;font-style:italic;line-height:1.5;color:var(--muted);
  text-decoration:none;max-width:46%;transition:color .25s;
}
.a-pager a:hover{color:var(--red)}
.a-next{text-align:right}
.a-dir{color:var(--red)}
.a-cta{
  margin:48px 0 64px;padding:32px;background:var(--paper-2);
  text-align:center;font-style:italic;color:var(--ink-3);font-size:15px;line-height:1.8;
}
/* The sentence goes on its own line above the button. setLang() clears
   inline display on the active language, so it falls back to this rule. */
.a-cta > .t-en,.a-cta > .t-cn,.a-cta > .t-ko{display:block}
.a-btn{
  display:inline-block;margin-top:18px;background:var(--red);color:var(--paper);
  font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;
  font-size:14px;font-style:italic;letter-spacing:.06em;
  padding:13px 30px;text-decoration:none;transition:background .3s;
}
.a-btn:hover{background:var(--red-lt)}

/* LISTING */
.l-wrap{max-width:1100px;margin:0 auto;padding:56px 24px 0}
.l-head{max-width:620px;margin-bottom:48px}
.l-intro{font-size:15px;line-height:1.9;color:var(--muted);font-style:italic}
.l-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding-bottom:64px}
.l-card{
  display:flex;flex-direction:column;background:var(--paper-2);
  text-decoration:none;overflow:hidden;transition:background .25s;
}
.l-card:hover{background:var(--paper-3)}
.l-card img{
  width:100%;aspect-ratio:5/3;object-fit:cover;
  filter:sepia(6%) brightness(.9) saturate(.92);transition:transform .6s ease;
}
.l-card:hover img{transform:scale(1.03)}
.l-tag{
  font-family:'Courier New',Courier,monospace;font-size:9px;letter-spacing:.35em;
  text-transform:uppercase;color:var(--red);padding:24px 26px 0;
}
.l-hed{
  font-family:'Palatino Linotype','Palatino','Book Antiqua',Palatino,serif;
  font-size:19px;font-style:italic;line-height:1.42;color:var(--ink);padding:10px 26px 0;
}
.l-ex{font-size:12.5px;line-height:1.8;color:var(--muted);padding:12px 26px 28px}

/* FOOTER */
.a-footer{background:var(--ink-2);margin-top:auto}
.f-inner{max-width:1100px;margin:0 auto;padding:48px 24px;text-align:center}
.f-inner .wordmark{
  font-family:'Palatino Linotype','Palatino','Book Antiqua',Palatino,serif;
  font-size:24px;letter-spacing:.12em;color:var(--paper);display:block;margin-bottom:10px;
}
.f-tag{font-size:12px;font-style:italic;color:rgba(246,240,232,.35);margin-bottom:22px}
.f-links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.f-links a{
  font-size:13px;font-style:italic;color:rgba(246,240,232,.45);
  text-decoration:none;transition:color .25s;
}
.f-links a:hover{color:rgba(246,240,232,.9)}
.f-copy{
  font-family:'Courier New',Courier,monospace;font-size:9px;
  letter-spacing:.12em;color:rgba(246,240,232,.25);
}

@media(max-width:600px){
  .a-wrap{padding-top:32px}
  .a-pager a{max-width:100%}
  .a-next{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}