/* MONDKIM — shared foundation (tokens · type · header · footer · reveal · viewer).
   Every page links this first. Page styles build on these tokens; they do not redefine them. */
:root{
  --paper:#fff;
  --ink:#141414;
  --ink-2:#666;            /* secondary text, 5.7:1 on white */
  --line:#e6e6e3;
  --mat:#f4f4f2;           /* only where a photo needs a ground */
  --serif:'Cormorant Garamond','Noto Serif KR','AppleMyungjo','Batang',Georgia,serif;
  --sans:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(20px,4.4vw,72px);
  --measure:34em;
  --fs-xs:11px;
  --fs-s:12.5px;
  --fs-m:14px;
  --fs-l:17px;
  --track:.02em;
  --track-caps:.16em;
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.35s;
  --t-slow:1.1s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:var(--fs-m);line-height:1.7;letter-spacing:var(--track);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
::selection{background:#141414;color:#fff}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:8px;z-index:100;padding:8px 12px;background:var(--ink);color:var(--paper);font-size:var(--fs-s);transform:translateY(-200%);transition:transform var(--t-fast) var(--ease)}
.skip-link:focus{transform:none}

/* Type roles */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:0}
.caps{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:400}
.meta{font-size:var(--fs-s);color:var(--ink-2)}

/* Header — same markup on every page */
.site-header{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(24px,3vw,40px) var(--gutter)}
.brand{--bw:clamp(116px,10.5vw,150px);--bp:13px;position:relative;display:block;flex-shrink:0;width:var(--bw);height:calc(var(--bw)*124/776 + 2*var(--bp));margin-block:calc(-1*var(--bp));overflow:hidden}
.brand img{position:absolute;width:calc(var(--bw)*851/776);max-width:none;height:auto;left:calc(var(--bw)*-36/776);top:calc(var(--bp) - var(--bw)*362/776)}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.site-nav a{position:relative;font-size:var(--fs-s);color:var(--ink-2);padding:10px 0;white-space:nowrap;transition:color var(--t-fast) var(--ease)}
.site-nav a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--ink)}
.site-nav a:hover::after,.site-nav a[aria-current=page]::after{transform:scaleX(1)}
.menu-toggle{display:none;font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;padding:14px 0 14px 18px;min-height:44px}

@media(max-width:860px){
  .menu-toggle{display:block;position:relative;z-index:2}
  .site-nav{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:96px var(--gutter) 64px;background:var(--paper);visibility:hidden;opacity:0;transition:opacity .45s var(--ease),visibility 0s .45s}
  .site-nav a{font-family:var(--serif);font-size:clamp(30px,9vw,40px);line-height:1.2;color:var(--ink);letter-spacing:0;padding:6px 0;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease-out)}
  .site-nav a::after{bottom:6px}
  .menu-open .site-nav{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
  .menu-open .site-nav a{opacity:1;transform:none}
  .menu-open .site-nav a:nth-child(2){transition-delay:.04s}
  .menu-open .site-nav a:nth-child(3){transition-delay:.08s}
  .menu-open .site-nav a:nth-child(4){transition-delay:.12s}
  .menu-open .site-nav a:nth-child(5){transition-delay:.16s}
  .menu-open .site-nav a:nth-child(6){transition-delay:.2s}
  .menu-open .site-nav a:nth-child(n+7){transition-delay:.24s}
  .menu-open .brand{position:relative;z-index:2}
  html.menu-open{overflow:hidden}
}

/* Footer — same markup on every page */
.site-footer{margin:clamp(72px,10vw,160px) var(--gutter) 0;padding:28px 0 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;font-size:var(--fs-xs);color:var(--ink-2)}
.site-footer a{transition:color var(--t-fast) var(--ease)}
.site-footer a:hover{color:var(--ink)}
.site-footer .brand{--bw:96px}
.site-footer .push{margin-left:auto}
@media(max-width:600px){.site-footer .push{margin-left:0}}

/* Reveal — opt in with .reveal; base.js adds .is-in once it is on screen */
.js .reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity var(--t-slow) var(--ease),transform 1.3s var(--ease-out);transition-delay:var(--reveal-delay,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal:focus-within{opacity:1;transform:none;transition-duration:.2s;transition-delay:0s}
/* Image fade — opt in with img.fade; base.js adds .is-loaded */
.js img.fade{opacity:0;transition:opacity .9s var(--ease)}
.js img.fade.is-loaded{opacity:1}

/* Viewer — full-screen white room for looking at one image at a time. Built by MK.viewer in base.js */
.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);overflow:hidden}
.viewer::backdrop{background:var(--paper)}
.viewer[open]{display:flex;flex-direction:column;animation:viewer-in .5s var(--ease) both}
.viewer-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(14px,2vw,26px) var(--gutter)}
.viewer-count{margin:0;font-size:var(--fs-xs);letter-spacing:var(--track-caps);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.viewer-close{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;min-height:44px;padding:0 0 0 20px}
.viewer-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--gutter) clamp(16px,2.4vw,32px);touch-action:pan-y}
.viewer-figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
.viewer-img{display:block;max-width:100%;max-height:calc(100dvh - var(--viewer-chrome,190px));width:auto;height:auto;object-fit:contain;opacity:0;transform:scale(.995);transition:opacity .55s var(--ease),transform .9s var(--ease-out);user-select:none;-webkit-user-drag:none}
.viewer-img.is-loaded{opacity:1;transform:none}
.viewer-prev,.viewer-next{position:absolute;z-index:1;top:0;bottom:0;width:30%;display:flex;align-items:center;font-size:var(--fs-m);color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.viewer-prev{left:0;justify-content:flex-start;padding-left:var(--gutter);cursor:w-resize}
.viewer-next{right:0;justify-content:flex-end;padding-right:var(--gutter);cursor:e-resize}
.viewer-prev span,.viewer-next span{display:inline-block;padding:12px 0;opacity:0;transition:opacity var(--t-fast) var(--ease)}
.viewer-prev:hover,.viewer-next:hover{color:var(--ink)}
.viewer-prev:hover span,.viewer-next:hover span,.viewer-prev:focus-visible span,.viewer-next:focus-visible span{opacity:1}
.viewer.single .viewer-prev,.viewer.single .viewer-next{display:none}
.viewer-caption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 16px;padding-top:clamp(14px,1.6vw,22px);text-align:center;min-height:54px}
.viewer-title{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.3;letter-spacing:0}
.viewer-meta{font-size:var(--fs-s);color:var(--ink-2)}
html.viewer-open{overflow:hidden}
@keyframes viewer-in{from{opacity:0}to{opacity:1}}
@media(hover:none){.viewer-prev span,.viewer-next span{opacity:.55}}
.viewer-meta .x{font-family:var(--serif);font-size:1.3em;line-height:0}
@media(max-width:600px){.viewer-prev,.viewer-next{width:22%}}
@media(orientation:landscape) and (max-height:540px){.viewer{--viewer-chrome:84px}.viewer-top{padding-top:4px;padding-bottom:0}.viewer-stage{padding-bottom:8px}.viewer-caption{min-height:0;padding-top:6px}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .js img.fade{opacity:1}
}