/* ==================================================================
   I am the Seouler — one stylesheet for the whole site.
   Previously this lived inline in three separate HTML files.
   ================================================================== */

:root{
  --paper:#F4F1E9;
  --paper-2:#FBFAF6;
  --celadon:#7C9A94;
  --celadon-mid:#6E8B87;
  --celadon-deep:#4E6B67;
  --celadon-pale:#A9C0BA;
  --ink:#2B2E2C;
  --ink-soft:#585E59;
  --ink-faint:#8C918B;
  --line:rgba(43,46,44,0.13);
  --line-soft:rgba(43,46,44,0.07);
  --on-celadon:#FBFAF6;
  --display:'Fraunces',serif;
  --body:'Newsreader',serif;
  --kr:'Noto Serif KR',serif;
  --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1080px;margin:0 auto;padding:0 44px;}
.kr{font-family:var(--kr);font-weight:300;}

/* ============ NAV ============ */
nav{display:flex;align-items:center;justify-content:space-between;padding:24px 0;}
nav .mark{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:0.04em;}
nav .mark b{font-weight:500;font-style:italic;color:var(--celadon-deep);}
nav .links{display:flex;gap:28px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);}
nav .links a:hover{color:var(--ink);}
.home nav{position:relative;z-index:5;}
/* On the celadon field the nav has to read light. */
nav.on-celadon .mark{color:var(--on-celadon);}
nav.on-celadon .mark b{color:#fff;}
nav.on-celadon .links{color:rgba(251,250,246,0.75);}
nav.on-celadon .links a:hover{color:#fff;}
/* The hamburger, its drawer chrome and the dimmed backdrop only exist on
   phones — see the responsive block. */
.nav-toggle,.nav-scrim,.links-head{display:none;}
.nav-toggle,.nav-close{background:none;border:0;padding:0;}

/* ============ POSTER HERO (home) ============ */
/* 청자 면(위) → 백자 면(아래), 경계에 타이틀 */
.poster{position:relative;}
.poster .celadon-field{background:var(--celadon);padding:70px 0 110px;position:relative;}
.poster .celadon-field .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(251,250,246,0.75);text-align:center;margin-bottom:40px;}
.poster .relic-top{width:230px;height:230px;margin:0 auto;background:var(--paper);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 12px 40px rgba(43,46,44,0.16);}
.poster .relic-top .script{font-family:'Nothing You Could Do',cursive;font-size:33px;line-height:1.15;color:var(--celadon-deep);text-align:center;transform:rotate(-4deg);}

.title-band{position:relative;z-index:3;text-align:center;padding:0 20px;margin-top:-60px;}
.title-band h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,8vw,90px);line-height:0.98;letter-spacing:-0.02em;margin:0;color:var(--ink);}
.title-band h1 em{font-style:italic;color:var(--celadon-deep);}
.title-band .kr-hook{font-family:var(--kr);font-weight:300;font-size:19px;color:var(--ink-soft);margin-top:16px;letter-spacing:0.01em;}
.title-band .subtitle{font-family:var(--display);font-style:italic;font-size:19px;color:var(--ink-soft);margin-top:8px;}

.paper-field{background:var(--paper);padding:40px 0 90px;text-align:center;}
.relic-bottom{width:230px;height:230px;margin:20px auto 0;border-radius:50%;overflow:hidden;box-shadow:0 12px 40px rgba(43,46,44,0.18);}
.relic-bottom img{width:102%;height:102%;object-fit:cover;display:block;margin:-1%;}

/* ============ DICTIONARY ============ */
.dict{padding:20px 0 90px;background:var(--paper);}
.dict-inner{max-width:760px;margin:0 auto;background:var(--celadon);color:var(--on-celadon);padding:50px 54px;border-radius:3px;}
.dict-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.dict-word{font-family:var(--display);font-weight:500;font-style:italic;font-size:38px;color:#fff;}
.dict-phon{font-family:var(--mono);font-size:14px;color:rgba(251,250,246,0.7);}
.dict-pos{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(251,250,246,0.7);}
.dict-def{font-size:20px;line-height:1.6;margin:0 0 16px;max-width:52ch;color:var(--on-celadon);}
.dict-kr{font-family:var(--kr);font-weight:300;font-size:16px;line-height:1.85;color:rgba(251,250,246,0.85);margin:0 0 22px;max-width:44ch;}
.dict-tag{font-family:var(--display);font-style:italic;font-size:20px;color:#fff;margin:0;}

/* ============ ABOUT ============ */
.about{padding:86px 0;background:var(--paper);}
.about-inner{max-width:660px;margin:0 auto;}
.label{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--celadon-deep);margin-bottom:24px;text-align:center;}
.about h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.25;text-align:center;margin:0 0 12px;}
.about .h2-kr{font-family:var(--kr);font-weight:300;font-size:16px;color:var(--ink-faint);text-align:center;margin:0 0 34px;}
.about p{font-size:18px;margin:0 0 20px;color:var(--ink);}
.about p .lead-first{font-family:var(--display);font-style:italic;}
.about p em{font-style:italic;color:var(--celadon-deep);}
.about .close{font-family:var(--display);font-style:italic;font-size:21px;text-align:center;color:var(--celadon-deep);margin-top:36px;}
.about .close-kr{font-family:var(--kr);font-weight:300;font-size:15px;color:var(--ink-faint);text-align:center;margin-top:10px;}
.about .readmore{display:block;text-align:center;margin-top:30px;font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}
.about .readmore span{border-bottom:1px solid var(--line);padding-bottom:3px;}
.about .readmore:hover{color:var(--celadon-deep);}

/* ============ JOURNAL GRID ============ */
.gallery{padding:20px 0 100px;background:var(--paper);}
.gallery-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:36px;}
.gallery-head h3{font-family:var(--display);font-weight:500;font-size:20px;margin:0;}
.gallery-head .meta{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.tile{cursor:pointer;}
.tile .thumb{aspect-ratio:1/1;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:2px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.tile .thumb .ph{color:rgba(251,250,246,0.85);font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;position:relative;z-index:1;}
.tile .thumb .tone{position:absolute;inset:0;}
.tile .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tile.t1 .tone{background:var(--celadon-deep);}
.tile.t2 .tone{background:var(--celadon-mid);}
.tile.t3 .tone{background:var(--celadon);}
.tile.t4 .tone{background:var(--celadon-mid);}
.tile.t5 .tone{background:var(--celadon-pale);}
.tile.t6 .tone{background:var(--celadon-deep);}
.tile .cap{margin-top:14px;}
.tile .cap .date{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-faint);text-transform:uppercase;}
.tile .cap h4{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.3;margin:5px 0 0;}
.tile:hover .thumb{border-color:var(--celadon);}
.tile:hover h4{color:var(--celadon-deep);}
.tile.feature{grid-column:span 3;display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center;}
.tile.feature .thumb{aspect-ratio:16/10;}
.tile.feature .cap{margin-top:0;}
.tile.feature .cap h4{font-size:30px;font-weight:400;line-height:1.2;margin-top:8px;}
.tile.feature .cap .excerpt{font-size:17px;color:var(--ink-soft);margin-top:14px;}
.tile.feature .cap .tagline{font-family:var(--display);font-style:italic;color:var(--celadon-deep);font-size:14px;margin-top:12px;}

/* ============ SUBSCRIBE (청자 면) ============ */
.subscribe{background:var(--celadon-deep);color:var(--on-celadon);padding:92px 0;}
.subscribe .inner{max-width:560px;margin:0 auto;text-align:center;}
.subscribe .label{color:var(--celadon-pale);}
.subscribe h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 12px;color:#fff;}
.subscribe .h2-kr{font-family:var(--kr);font-weight:300;font-size:15px;color:rgba(251,250,246,0.6);margin:0 0 24px;}
.subscribe p{color:rgba(251,250,246,0.8);font-size:17px;margin:0 auto 34px;max-width:38ch;}
.form{display:flex;max-width:420px;margin:0 auto;border:1px solid rgba(251,250,246,0.35);border-radius:2px;overflow:hidden;}
.form input{flex:1;background:transparent;border:none;padding:15px 18px;color:var(--on-celadon);font-family:var(--body);font-size:16px;outline:none;}
.form input::placeholder{color:rgba(251,250,246,0.5);}
.form button{background:var(--paper);color:var(--celadon-deep);border:none;padding:0 26px;font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;}
.form button:hover{background:#fff;}
.subscribe .fine{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(251,250,246,0.5);margin-top:24px;transition:color .2s;}
/* The same line answers the form: brighter when it worked, amber when it didn't.
   No new element appears, so nothing on the page moves. */
.subscribe .fine.done{color:#fff;}
.subscribe .fine.warn{color:#F2C879;}
.form button[disabled]{opacity:0.6;cursor:default;}

/* ============ POST PAGES ============ */
/* Each language now has its own page, so this is a link to the other one and
   a label for the one you are reading — not two buttons switching a panel.
   Both are styled the same so the change is invisible. */
.lang-toggle{display:flex;justify-content:center;gap:8px;padding:6px 0 0;}
.lang-toggle a,.lang-toggle span{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);background:none;border:1px solid var(--line);border-radius:20px;padding:6px 16px;cursor:pointer;display:inline-block;line-height:1.2;}
.lang-toggle .active{color:var(--on-celadon);background:var(--celadon-deep);border-color:var(--celadon-deep);cursor:default;}
.lang-toggle a:hover{color:var(--ink);border-color:var(--celadon-mid);}

.story-head{padding:50px 0 60px;text-align:center;border-bottom:1px solid var(--line);}
.story-meta{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--celadon-deep);margin-bottom:22px;}
.story-head h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,5vw,50px);line-height:1.15;letter-spacing:-0.01em;margin:0 auto 18px;max-width:760px;}
.story-head h1.kr{font-family:var(--kr);font-weight:500;font-size:clamp(28px,4.6vw,44px);}
.story-sub{font-family:var(--display);font-style:italic;font-size:20px;color:var(--celadon-deep);margin:0 0 14px;}
.story-sub-kr{font-family:var(--kr);font-weight:300;font-size:15px;color:var(--ink-faint);}

.story-body{padding:70px 0 40px;}
.story-inner{max-width:660px;margin:0 auto;}
.lede{font-family:var(--display);font-style:italic;font-size:22px;line-height:1.55;color:var(--ink-soft);margin:0 0 60px;text-align:center;}
.lede.kr{font-family:var(--kr);font-weight:300;font-style:normal;}

.story-inner h3{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.3;color:var(--celadon-deep);margin:64px 0 22px;padding-top:36px;border-top:1px solid var(--line-soft);}
.story-inner h3:first-of-type{margin-top:0;padding-top:0;border-top:none;}
.story-inner h3 .num{font-style:italic;font-weight:400;color:var(--ink-faint);margin-right:10px;}
.story-inner p{font-size:18px;line-height:1.85;margin:0 0 22px;color:var(--ink);}
.story-inner.kr h3{font-family:var(--kr);font-weight:500;}
.story-inner.kr p{font-family:var(--kr);font-weight:300;letter-spacing:0.002em;}

.shot{margin:38px 0 40px;cursor:zoom-in;outline:none;}
.shot img{width:100%;height:auto;border-radius:2px;transition:opacity .25s;}
.shot:hover img,.shot:focus-visible img{opacity:0.92;}
.shot:focus-visible{outline:2px solid var(--celadon-deep);outline-offset:4px;}

.story-close{padding:20px 0 100px;text-align:center;}
.story-close .line1{font-family:var(--display);font-style:italic;font-size:26px;color:var(--celadon-deep);margin:0 0 12px;}
.story-close .line2{font-family:var(--kr);font-weight:300;font-size:16px;color:var(--ink-faint);margin:0 0 44px;}
.story-close a.back{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:3px;}
.story-close a.back:hover{color:var(--celadon-deep);border-color:var(--celadon-deep);}

/* ============ EXTRA PHOTOS UNDER A POST ============ */
.strip-wrap{padding:10px 0 70px;}
.strip-label{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--celadon-deep);border-top:1px solid var(--line-soft);padding-top:34px;margin-bottom:22px;}
/* Scrolls inside the text column rather than off the edge of the window —
   the first photo then lines up with the essay, and there is no scroll-snap
   quietly parking it somewhere else. */
.strip{display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;-webkit-overflow-scrolling:touch;}
.strip-item{margin:0;flex:0 0 auto;max-width:78vw;cursor:zoom-in;outline:none;}
.strip-item img{height:320px;width:auto;border-radius:2px;display:block;transition:opacity .25s;}
.strip-item:hover img,.strip-item:focus-visible img{opacity:0.86;}
.strip-item:focus-visible{outline:2px solid var(--celadon-deep);outline-offset:4px;}
.strip-item figcaption{margin-top:10px;font-family:var(--display);font-style:italic;font-size:14px;color:var(--ink-soft);max-width:44ch;}
.strip-wrap.kr .strip-label,.strip-wrap.kr .strip-item figcaption{font-family:var(--kr);font-weight:300;font-style:normal;}
.strip-wrap.kr .strip-label{letter-spacing:0.08em;text-transform:none;font-size:13px;}
.strip::-webkit-scrollbar{height:8px;}
.strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}

/* ============ GALLERY ============ */
.gallery-page{padding:52px 0 30px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:40px;}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);background:none;border:1px solid var(--line);border-radius:20px;padding:7px 17px;cursor:pointer;}
.chip:hover{color:var(--ink);border-color:var(--celadon-mid);}
.chip.is-on{color:var(--on-celadon);background:var(--celadon-deep);border-color:var(--celadon-deep);}
.photo-wall{columns:3;column-gap:22px;}
.plate{break-inside:avoid;margin:0 0 22px;cursor:zoom-in;outline:none;}
.plate[hidden]{display:none;}
.plate img{width:100%;height:auto;border-radius:2px;display:block;transition:opacity .25s;}
.plate:hover img,.plate:focus-visible img{opacity:0.86;}
.plate:focus-visible{outline:2px solid var(--celadon-deep);outline-offset:4px;}
.wall-empty,.gallery-empty{text-align:center;color:var(--ink-faint);font-family:var(--kr);font-weight:300;padding:60px 0;}

/* photo opened large */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(43,46,44,0.95);display:flex;align-items:center;justify-content:center;padding:64px 72px;}
.lightbox[hidden]{display:none;}
.lb-frame{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-height:100%;}
.lb-frame img{max-width:min(1080px,86vw);max-height:76vh;object-fit:contain;border-radius:2px;}
.lb-frame figcaption{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;max-width:62ch;}
.lb-cap-en{font-family:var(--display);font-style:italic;font-size:19px;color:var(--on-celadon);line-height:1.5;}
.lb-cap-kr{font-family:var(--kr);font-weight:300;font-size:15px;color:rgba(251,250,246,0.7);line-height:1.7;}
.lb-link{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:var(--celadon-pale);border-bottom:1px solid rgba(169,192,186,0.4);padding-bottom:3px;}
.lb-link:hover{color:#fff;border-color:#fff;}
.lightbox button{position:absolute;background:none;border:none;color:rgba(251,250,246,0.6);cursor:pointer;font-family:var(--body);line-height:1;padding:12px;}
.lightbox button:hover{color:#fff;}
.lb-close{top:20px;right:24px;font-size:22px;}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:48px;}
.lb-prev{left:14px;}
.lb-next{right:14px;}

/* ============ FOOTER ============ */
footer{padding:34px 0;border-top:1px solid var(--line);background:var(--paper);}
footer .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
footer .mark{font-family:var(--display);font-weight:500;font-size:15px;}
footer .info{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-faint);}
.home footer{border-top:none;}
.home footer .mark{font-size:16px;}
.home footer .info{font-size:12px;letter-spacing:0.04em;}

/* ============ RESPONSIVE ============ */
@media (max-width:780px){
  .wrap{padding:0 22px;}
  /* The links used to be hidden here, which left a phone with no way to
     reach the gallery or the subscribe form. Stacking them under the mark
     fixed that but read as another line of prose, so they live behind a
     hamburger now and open as a drawer. */
  nav{padding:18px 0;}
  .nav-toggle{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
    gap:5px;width:44px;height:44px;margin-right:-10px;cursor:pointer;}
  .nav-toggle span{display:block;width:24px;height:1.5px;background:var(--ink);
    transition:transform .25s ease,opacity .15s ease;}
  nav.on-celadon .nav-toggle span{background:#fff;}
  /* Covering the whole screen felt like being thrown onto a new page. The
     menu is a drawer over the right edge instead, with the page still
     visible and dimmed behind it. */
  .nav-scrim{display:block;position:fixed;inset:0;z-index:55;
    background:rgba(43,46,44,0.38);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;}
  nav.open .nav-scrim{opacity:1;visibility:visible;transition:opacity .25s ease;}

  /* .on-celadon also sets a colour, and the drawer sits on paper, so name
     it here or the home page's menu comes out light on light. */
  nav .links,nav.on-celadon .links{color:var(--ink);}
  nav .links{position:fixed;top:0;right:0;height:100%;width:min(76vw,300px);z-index:60;
    background:var(--paper-2);box-shadow:-16px 0 44px rgba(43,46,44,0.16);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:20px 26px;font-size:13px;letter-spacing:0.1em;
    transform:translateX(100%);visibility:hidden;
    transition:transform .28s ease,visibility 0s linear .28s;}
  nav.open .links{transform:none;visibility:visible;transition:transform .28s ease;}

  .links-head{display:flex;align-items:center;justify-content:space-between;
    padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line);}
  .links-title{font-family:var(--display);font-weight:500;font-size:16px;
    letter-spacing:0.04em;text-transform:none;color:var(--ink);}
  .links-title b{font-weight:500;font-style:italic;color:var(--celadon-deep);}
  .nav-close{font-size:26px;line-height:1;color:var(--ink-faint);cursor:pointer;
    padding:2px 0 2px 14px;}

  nav .links a{padding:16px 0;border-bottom:1px solid var(--line-soft);}
  nav .links a:last-child{border-bottom:none;}
  nav .links a:hover{color:var(--celadon-deep);}
  .dict-inner{padding:32px 26px;}
  .grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .tile.feature{grid-column:span 2;grid-template-columns:1fr;gap:18px;}
  .tile.feature .cap h4{font-size:24px;}
  .poster .relic-top{width:170px;height:170px;}
  .relic-bottom{width:170px;height:170px;}
}
@media (max-width:780px){
  .photo-wall{columns:2;column-gap:16px;}
  .strip-item img{height:230px;}
  .lightbox{padding:56px 20px;}
  .lb-prev,.lb-next{font-size:34px;}
  .lb-prev{left:0;}
  .lb-next{right:0;}
}
@media (max-width:640px){
  .wrap{padding:0 24px;}
  .story-inner p{font-size:17px;}
  .lede{font-size:19px;}
  .photo-wall{columns:1;}
}