/* REECU — contact-sheet layout: photo first, quiet type, EXIF strips as the one brand detail */
:root{
  --bg:#F3F3F0;          /* cool paper, slight green-grey bias */
  --bg-2:#E9EAE6;
  --ink:#17191B;
  --ink-2:#4B5157;
  --mute:#8A9097;
  --line:#D7D9D4;
  --dusk:#2F4C6F;        /* blue-hour accent */
  --dusk-ink:#F3F3F0;
  --gold:#B88A3C;        /* tiny warm marks only */
  --card:#FFFFFF;
  --shadow:0 18px 50px -24px rgba(23,25,27,.35);

  --font-display:"Instrument Serif","Noto Serif KR",Georgia,serif;
  --font-head:"Noto Serif KR","Instrument Serif",Georgia,serif;
  --font-body:"IBM Plex Sans KR","Noto Sans KR",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --max:1280px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121416;--bg-2:#1A1D20;--ink:#ECEDEA;--ink-2:#B5BAC0;--mute:#767C83;--line:#2A2E32;
    --dusk:#8FB0D8;--dusk-ink:#121416;--gold:#D4A75A;--card:#1A1D20;--shadow:0 18px 50px -24px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121416;--bg-2:#1A1D20;--ink:#ECEDEA;--ink-2:#B5BAC0;--mute:#767C83;--line:#2A2E32;
  --dusk:#8FB0D8;--dusk-ink:#121416;--gold:#D4A75A;--card:#1A1D20;--shadow:0 18px 50px -24px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15.5px;line-height:1.7;-webkit-font-smoothing:antialiased;word-break:keep-all}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--dusk);outline-offset:3px;border-radius:2px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--font-head);font-weight:500;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.serif-i{font-family:var(--font-display);font-style:italic;font-weight:400}
.mono{font-family:var(--font-mono);font-size:12.5px;color:var(--mute);letter-spacing:.02em}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding-block:8px}
.wordmark{font-family:var(--font-display);font-size:26px;letter-spacing:.06em;line-height:1}
.wordmark small{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--mute);margin-top:3px;text-transform:uppercase}
.nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.nav a{padding:7px 11px;font-size:13.5px;color:var(--ink-2);border-radius:999px}
.nav a[aria-current="page"]{color:var(--ink);background:var(--bg-2)}
.nav a:hover{color:var(--ink)}
@media (max-width:640px){.nav a{padding:6px 8px;font-size:12.5px}.wordmark{font-size:22px}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg-2)}
.hero img{width:100%;height:min(78vh,760px);min-height:380px;object-fit:cover}
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:28px var(--gutter-r) 26px var(--gutter);background:linear-gradient(to top,rgba(10,12,14,.72),rgba(10,12,14,0));color:#F3F3F0}
.hero .cap .inner{max-width:var(--max);margin:0 auto;display:grid;gap:10px}
.hero h1{font-size:clamp(28px,4.6vw,54px);line-height:1.15;color:#F3F3F0;font-weight:400}
.hero h1 em{font-family:var(--font-display);font-style:italic;font-weight:400}
.hero .lede{max-width:34em;color:rgba(243,243,240,.85);font-size:15px}
.hero .exif{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:rgba(243,243,240,.65)}

/* ---------- sections ---------- */
.section{padding-block:clamp(44px,7vw,88px)}
.section + .section{border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head h2{font-size:clamp(24px,3vw,36px);line-height:1.2}
.sec-head .more{font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:2px}
.sec-head .more:hover{color:var(--ink);border-color:var(--ink)}
.statement{font-family:var(--font-head);font-size:clamp(20px,2.4vw,28px);line-height:1.55;max-width:30em;font-weight:400;color:var(--ink)}
.statement em{font-family:var(--font-display);font-style:italic;color:var(--dusk)}

/* ---------- photo grid (contact sheet, natural aspect — photos are never cropped) ---------- */
.sheet{columns:3 300px;column-gap:14px}
.sheet .ph{break-inside:avoid;margin:0 0 14px;position:relative;overflow:hidden;background:var(--bg-2)}
.sheet .ph img{width:100%;height:auto;transition:transform .6s ease}
.sheet .ph:hover img{transform:scale(1.015)}
.sheet .ph .strip{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:8px;padding:10px 12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:#F3F3F0;background:linear-gradient(to top,rgba(10,12,14,.7),transparent);opacity:0;transition:opacity .25s}
.sheet .ph .strip b{font-family:var(--font-body);font-weight:500;font-size:12.5px;letter-spacing:0}
.sheet .ph:hover .strip,.sheet .ph:focus-within .strip{opacity:1}
@media (max-width:560px){.sheet{columns:2;column-gap:8px}.sheet .ph{margin-bottom:8px}.sheet .ph .strip{opacity:1;padding:14px 8px 6px}.sheet .ph .strip b{font-size:11px;font-weight:400}.sheet .ph .strip span{display:none}}
.ph button{display:block;width:100%;padding:0;text-align:left}

/* collection rail */
.collections{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.coll{display:grid;gap:10px}
.coll img{aspect-ratio:4/5;object-fit:cover;width:100%;background:var(--bg-2)}
.coll .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.coll h3{font-size:18px;font-weight:500}
.coll .t .mono{white-space:nowrap}
.coll p{color:var(--ink-2);font-size:13.5px}

/* filter chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chips button{padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink-2);background:var(--card)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,12,14,.94);display:grid;grid-template-rows:1fr auto;color:#F3F3F0;padding:calc(env(safe-area-inset-top,0px) + 12px) var(--gutter-r) calc(env(safe-area-inset-bottom,0px) + 14px) var(--gutter)}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;object-fit:contain;justify-self:center;align-self:center;min-height:0}
.lb figure{margin:0;display:grid;min-height:0;height:100%}
.lb figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;font-size:13.5px}
.lb figcaption .mono{color:rgba(243,243,240,.6)}
.lb .x,.lb .prev,.lb .next{position:absolute;color:#F3F3F0;font-size:28px;line-height:1;padding:12px;opacity:.8}
.lb .x{top:calc(env(safe-area-inset-top,0px) + 6px);right:calc(env(safe-area-inset-right,0px) + 6px)}
.lb .prev{left:env(safe-area-inset-left,0px);top:50%;transform:translateY(-50%)}
.lb .next{right:env(safe-area-inset-right,0px);top:50%;transform:translateY(-50%)}

/* ---------- journal ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px 22px}
.post{display:grid;gap:10px}
.post img{aspect-ratio:3/2;object-fit:cover;width:100%;background:var(--bg-2)}
.post h3{font-size:19px;line-height:1.35}
.post .meta{display:flex;gap:10px;align-items:baseline}
.post p{color:var(--ink-2);font-size:14px}
.post .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dusk)}

.article{max-width:720px;margin:0 auto;padding-block:40px 70px}
.article header{display:grid;gap:14px;margin-bottom:34px}
.article h1{font-size:clamp(28px,4vw,42px);line-height:1.25}
.article .lede{font-size:17px;color:var(--ink-2);line-height:1.7}
.article .body{font-size:16.5px;line-height:1.9}
.article .body p{margin:0 0 1.2em}
.article .body h2{font-size:23px;margin:2em 0 .7em}
.article .body h3{font-size:18px;margin:1.6em 0 .5em}
.article .body img{margin:1.6em 0 .4em;background:var(--bg-2)}
.article .body em.exif,.article .body .exif{display:block;font-family:var(--font-mono);font-style:normal;font-size:12px;color:var(--mute);letter-spacing:.04em;margin-bottom:1.6em}
.article .body blockquote{margin:1.6em 0;padding-left:18px;border-left:2px solid var(--dusk);color:var(--ink-2);font-family:var(--font-head);font-size:18px}
.article .body ul,.article .body ol{padding-left:1.3em;margin:0 0 1.2em}
.article .body li{margin-bottom:.35em}
.article .body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.article .body code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-2);padding:1px 5px;border-radius:3px}
.article .foot{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:12px}

/* ---------- about / split ---------- */
.split{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:start}
.split img{aspect-ratio:4/5;object-fit:cover;width:100%;background:var(--bg-2)}
.split .txt{display:grid;gap:18px;font-size:16px;line-height:1.85}
.split .txt p{max-width:38em}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:26px}.split img{aspect-ratio:3/2}}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;border-top:1px solid var(--line);padding-top:18px}
.facts div{display:grid;gap:4px}
.facts b{font-family:var(--font-head);font-weight:500;font-size:17px}
.facts span{font-size:13px;color:var(--ink-2)}

/* ---------- shop ---------- */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px 22px}
.prod{display:grid;gap:12px;background:var(--card);border:1px solid var(--line);padding:16px}
.prod img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--bg-2)}
.prod .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.prod h3{font-size:18px}
.prod .price{font-family:var(--font-mono);font-size:13px;white-space:nowrap}
.prod p{color:var(--ink-2);font-size:14px}
.prod ul{margin:0;padding-left:1.1em;color:var(--ink-2);font-size:13.5px}
.prod .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.badge{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
.badge.soon{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.badge.live{color:var(--dusk);border-color:color-mix(in srgb,var(--dusk) 50%,transparent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:500;border:1px solid var(--ink);color:var(--ink);transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--dusk);border-color:var(--dusk);color:var(--dusk-ink)}
.btn.ghost{border-color:var(--line);color:var(--ink-2)}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- snap ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;counter-reset:step}
.step{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:12px;color:var(--dusk);letter-spacing:.1em}
.step h3{font-size:17px}
.step p{font-size:14px;color:var(--ink-2)}
.notice{background:var(--card);border:1px solid var(--line);padding:18px 20px;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.notice b{color:var(--ink)}
.dates{display:grid;gap:0;border-top:1px solid var(--line)}
.dates .d{display:grid;grid-template-columns:120px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.dates .d .mono{color:var(--dusk)}
.dates .d p{font-size:14px;color:var(--ink-2)}
@media (max-width:560px){.dates .d{grid-template-columns:1fr;gap:6px}}

/* ---------- link band ---------- */
.band{background:var(--dusk);color:var(--dusk-ink)}
.band .wrap{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;padding-block:40px}
.band h2{font-size:clamp(22px,3vw,32px);line-height:1.3;color:inherit}
.band p{opacity:.85;max-width:36em;margin-top:8px;font-size:15px}
.band .btn{border-color:var(--dusk-ink);color:var(--dusk-ink)}
.band .btn:hover{background:var(--dusk-ink);color:var(--dusk)}
@media (max-width:720px){.band .wrap{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:34px 44px;font-size:13.5px;color:var(--ink-2)}
.site-foot .wrap{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start}
.site-foot .links{display:flex;gap:14px;flex-wrap:wrap}
.site-foot .links a{border-bottom:1px solid transparent}
.site-foot .links a:hover{border-color:var(--ink-2)}
.site-foot .copy{font-family:var(--font-mono);font-size:11.5px;color:var(--mute);margin-top:12px}
@media (max-width:720px){.site-foot .wrap{grid-template-columns:1fr}}

.empty{padding:40px 0;color:var(--mute);font-size:14px;text-align:center;border:1px dashed var(--line)}