/* Bojagi catalog. Museum-quiet like the furoshiki catalog, in earth tones:
   hanji white ground, ramie plinths under the art, walnut ink, one accent. */
:root{
  --bg:#fbfaf7; --plinth:#f2ede4; --plinth-2:#ebe4d8; --line:#ddd4c6; --hair:rgba(60,40,20,.09);
  --fg:#221c17; --muted:#766a5e; --accent:#7b4a2b; --accent-hover:#5c3620; --accent-soft:rgba(123,74,43,.09);
  --chrome:rgba(251,250,247,.84);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Pretendard","Helvetica Neue",system-ui,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Apple SD Gothic Neo","Helvetica Neue",system-ui,sans-serif;
  --serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo",serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#16130f; --plinth:#efe8dc; --plinth-2:#e6ddce; --line:#3a332b; --hair:rgba(255,240,220,.1);
  --fg:#f1ebe2; --muted:#a99d90; --accent:#d7a27a; --accent-hover:#e9bf9c; --accent-soft:rgba(215,162,122,.14);
  --chrome:rgba(22,19,15,.82); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#16130f; --plinth:#efe8dc; --plinth-2:#e6ddce; --line:#3a332b; --hair:rgba(255,240,220,.1);
  --fg:#f1ebe2; --muted:#a99d90; --accent:#d7a27a; --accent-hover:#e9bf9c; --accent-soft:rgba(215,162,122,.14);
  --chrome:rgba(22,19,15,.82); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:1.0625rem/1.5 var(--sans);letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.small{font-size:.875rem}
code{font:.8125rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}

/* chrome: a quiet translucent bar, tabs as plain text */
.bar{position:sticky;top:0;z-index:3;background:var(--chrome);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid var(--hair)}
.bar-in{max-width:1080px;margin:0 auto;padding:0 22px;min-height:54px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:9px;color:var(--fg);font:600 1.0625rem/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.brand:hover{color:var(--fg)}
.brand small{font:300 .875rem/1 var(--serif);color:var(--muted);letter-spacing:.08em}
.mark{width:18px;height:18px;border-radius:3px;flex:none}
.tabs{display:flex;gap:24px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{font-size:.8125rem;color:var(--fg);padding:17px 0;white-space:nowrap;border-bottom:1px solid transparent}
.tabs a:hover{color:var(--accent)}
.tabs a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:860px){.bar-in{flex-wrap:wrap;gap:0;padding:8px 16px 0}.tabs{order:3;width:100%;margin:0;gap:20px}.tabs a{padding:10px 0 12px}}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px 120px}
@media (max-width:600px){.wrap{padding:0 16px 88px}}

/* type */
.kicker{margin:0;font:300 1rem/1.4 var(--serif);letter-spacing:.24em;color:var(--muted)}
.kicker.big{font-size:1.25rem;letter-spacing:.34em}
h1{font:600 clamp(2.5rem,6vw,4.5rem)/1.04 var(--display);letter-spacing:-.025em;margin:.25em 0 0;text-wrap:balance}
h2.section{font:600 clamp(1.5rem,3vw,2rem)/1.15 var(--display);letter-spacing:-.02em;margin:72px 0 24px}
.lede{font-size:clamp(1.125rem,2vw,1.3125rem);line-height:1.45;letter-spacing:-.015em;color:var(--muted);max-width:36em;margin:18px 0 0;text-wrap:pretty}
.prose{font-size:1.125rem;line-height:1.65;max-width:38em;margin:0 0 18px;text-wrap:pretty}
.prose.muted{color:var(--muted)}

/* list heroes */
.hero{padding:88px 0 40px}
.intro{font-size:1.0625rem;line-height:1.7;color:var(--fg);max-width:40em;margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line)}

/* filters: quiet text chips */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:8px 0 48px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips a{border-radius:999px;padding:7px 15px;font-size:.875rem;color:var(--fg)}
.chips a small{color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}
.chips a:hover{background:var(--plinth)}
.chips a[aria-current="true"]{background:var(--fg);color:var(--bg)}
.chips a[aria-current="true"] small{color:inherit;opacity:.6}
.search{position:relative;flex:0 1 240px;margin-left:auto}
.search input{width:100%;border:0;border-radius:999px;padding:9px 14px 9px 34px;background:var(--plinth);color:var(--fg);font:inherit;font-size:.875rem;letter-spacing:-.005em;color-scheme:light}
.search svg{position:absolute;left:13px;top:50%;translate:0 -50%;color:var(--muted)}
.search input:focus{outline:2px solid var(--accent-soft)}

/* art always sits on a ramie plinth; the drawings' own cream ground melts into it */
.plinth{background:var(--plinth);border-radius:16px;overflow:hidden;display:grid;place-items:center}
.plinth>svg{display:block;width:100%;height:auto;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.plinth.flush{background:none}
.chip{width:100%;height:100%;min-height:100%}
.glyph{font:300 3.2rem/1 var(--serif);color:#5d4a39}

/* cards: art, name, Korean name, nothing else */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:52px 24px}
.grid.small{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.card{display:flex;flex-direction:column;gap:5px;color:var(--fg)}
.card:hover{color:var(--fg)}
.card .plinth{aspect-ratio:1;margin-bottom:12px}
.card .plinth>svg{width:94%}
.card .plinth.flush .chip{border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair)}
@media (hover:hover){.card:hover .plinth>svg{transform:scale(1.035)}.card:hover .cname{color:var(--accent)}}
.cname{font:600 1.0625rem/1.3 var(--display);letter-spacing:-.012em;text-wrap:balance;transition:color .2s}
.cko{font:300 .9375rem/1.35 var(--serif);color:var(--muted);letter-spacing:.02em}
.cko .hj,.dko .hj{margin-left:.45em}
.cko .rr,.dko .rr{font:italic .8125rem/1 var(--sans);letter-spacing:-.005em;margin-left:.55em}
.empty{color:var(--muted);padding:40px 0}

/* entry */
.dwrap{max-width:1080px}
.crumb{display:inline-block;margin-top:28px;font-size:.875rem}
.crumb::before{content:"‹ "}
.dsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;padding:40px 0 24px}
.dhead h1{font-size:clamp(2.25rem,5vw,3.75rem);margin-top:.3em}
.dko{font:300 1.375rem/1.4 var(--serif);color:var(--muted);letter-spacing:.04em;margin-top:10px}
.dko .rr{font-size:1rem}
.dart{aspect-ratio:4/3;padding:12px}
.dart.flush{padding:0}.dart.flush .chip{border-radius:16px}
@media (max-width:760px){.dsplit{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:24px}.dart{order:-1}}
.label{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px 18px;margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.45;max-width:540px}
.label dt{color:var(--muted)}
.label dd{margin:0}
.dbody{margin-top:40px}

/* steps: thin numerals, picture first */
.steps{list-style:none;padding:0;margin:48px 0 0;border-top:1px solid var(--line)}
.step{padding:44px 0;border-bottom:1px solid var(--hair)}
.step.drawn{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:52px;align-items:center}
.sart{margin:0;background:var(--plinth);border-radius:16px;overflow:hidden;padding:10px}
.sart svg{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.stext{display:flex;flex-direction:column;gap:10px;font:600 1.3125rem/1.32 var(--display);letter-spacing:-.012em}
.num{font:200 2.75rem/1 var(--display);color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sub,.check,.mistake{margin:12px 0 0;font-size:1rem;line-height:1.55;max-width:34em}
.sub{color:var(--muted)}
.check::before{content:"Check  ";font-weight:600;color:#5f6f3a}
.mistake::before{content:"Watch for  ";font-weight:600;color:#a8402f}
@media (max-width:760px){.step.drawn{grid-template-columns:minmax(0,1fr);gap:20px}.step{padding:32px 0}.stext{font-size:1.1875rem}.num{font-size:2.25rem}}

/* history & tradition */
.hist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;background:var(--plinth);color:#2a221b;border-radius:20px;padding:44px 48px;margin-top:72px}
.hist h2{font:600 1.5rem/1.2 var(--display);letter-spacing:-.015em;margin:0}
.origin{font-size:.9375rem;color:#6f6255;margin:10px 0 0}
.hist-body p{font-size:1.0625rem;line-height:1.7;margin:0 0 14px;max-width:40em}
.hist .muted{color:#6f6255}
.hist a{color:#7b4a2b}
@media (max-width:760px){.hist{grid-template-columns:minmax(0,1fr);gap:16px;padding:28px 24px}}
.hsrc{margin-top:8px;font-size:.8125rem;color:var(--muted)}
.hist .hsrc{color:#6f6255}
.hsrc summary{cursor:pointer;font-weight:600}
.hsrc ol{margin:8px 0 0;padding-left:20px;word-break:break-word}

.note{margin-top:40px;padding:22px 26px;border-radius:16px;border:1px solid var(--line)}
.note h3{margin:0 0 8px;font:600 1rem/1.3 var(--display);color:#a8402f}
.note p{margin:0 0 8px}.note ul{margin:0;padding-left:20px}
.srcs{margin-top:44px;font-size:.8125rem;color:var(--muted);word-break:break-word}
.srcs h3{font:600 .8125rem/1.3 var(--sans);color:var(--fg);margin:0 0 6px}
.srcs ol,.srcs ul{margin:0;padding-left:20px}

.next{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-top:88px;padding-top:72px;border-top:1px solid var(--line);color:var(--fg)}
.next:hover{color:var(--fg)}
.nart{width:260px;max-width:100%;aspect-ratio:4/3;padding:8px;margin:6px 0 8px}
.nart .chip{border-radius:16px}
.next b{font:600 1.75rem/1.15 var(--display);letter-spacing:-.02em}
@media (hover:hover){.next:hover b{color:var(--accent)}.next:hover .nart>svg{transform:scale(1.035)}}

.variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.variants figure{margin:0;padding:18px;display:flex;flex-direction:column;gap:10px}
.variants figcaption{font-size:.8125rem;color:#6f6255}

/* buttons */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 26px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:1rem;transition:background .2s,transform .1s}
.cta:hover{background:var(--accent);color:#fff}
.cta:active{transform:scale(.97)}
.more{display:inline-flex;align-items:center;min-height:44px;font-size:1rem}
.more:hover{text-decoration:underline;text-underline-offset:4px}

/* home */
.h-hero{text-align:center;padding:112px 0 0;display:flex;flex-direction:column;align-items:center;gap:18px}
.h-hero h1{font-size:clamp(2.75rem,7vw,5.5rem);margin:0}
.h-lede{font-size:clamp(1.125rem,2vw,1.3125rem);line-height:1.45;color:var(--muted);max-width:33em;margin:0;text-wrap:pretty}
.ctas{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:10px}
.h-art{width:min(760px,100%);margin:48px 0 112px;padding:16px}
.band{background:var(--plinth);color:#2a221b;margin:0 calc(50% - 50vw);padding:112px 22px}
.band .in{max-width:1080px;margin:0 auto}
.band a{color:#7b4a2b}
.band h2,.cols h2,.feature h2,.h-hist h2,.ready h2{font:600 clamp(2rem,4.5vw,3.25rem)/1.08 var(--display);letter-spacing:-.022em;margin:0}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:48px;margin-top:56px}
.three .n{font:200 1rem/1 var(--display);color:#7b4a2b;letter-spacing:.06em}
.three h3{font:600 1.5rem/1.2 var(--display);margin:14px 0 10px}
.three p{margin:0;color:#5e5246;line-height:1.6}
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:72px;align-items:center;padding:128px 0}
.fart{aspect-ratio:4/3;padding:12px}
.ftext{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ftext h2{margin-top:10px}
.ftext .label{width:100%}
.ftext .cta{margin-top:28px}
@media (max-width:760px){.feature{grid-template-columns:minmax(0,1fr);gap:32px;padding:80px 0}}
.cols{padding:0 0 128px}
.colhead{margin-bottom:48px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:44px 24px}
.tile{display:flex;flex-direction:column;gap:4px;color:var(--fg)}
.tile:hover{color:var(--fg)}
.tile .plinth{aspect-ratio:4/3;padding:12px;margin-bottom:12px}
.tile b{font:600 1.25rem/1.2 var(--display);letter-spacing:-.015em}
.tile small{font-size:.9375rem;color:var(--muted)}
@media (hover:hover){.tile:hover .plinth>svg{transform:scale(1.035)}.tile:hover b{color:var(--accent)}}
.h-hist{text-align:center;padding:128px 0;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.h-hist p{font-size:1.1875rem;line-height:1.7;margin:0;text-wrap:pretty}
.ready{text-align:center;border-top:1px solid var(--line);padding:112px 0 24px;display:flex;flex-direction:column;align-items:center;gap:28px}
@media (max-width:680px){.h-hero{padding-top:64px}.h-art{margin-bottom:72px}.band{padding:72px 16px}.cols{padding-bottom:80px}.h-hist{padding:88px 0}.three{margin-top:36px;gap:36px}}

/* history page */
.essay{max-width:44em}
.essay-part{padding:44px 0;border-top:1px solid var(--line)}
.essay-part h2{font:600 1.75rem/1.15 var(--display);letter-spacing:-.02em;margin:0}
.essay-part p{font-size:1.125rem;line-height:1.72;margin:16px 0 0;text-wrap:pretty}
.essay-part p.origin{font-size:.9375rem;margin-top:8px;color:var(--muted)}
.essay-part ul{font-size:1.0625rem;line-height:1.65;padding-left:22px;margin:16px 0 0}
.essay-part li+li{margin-top:8px}

/* sizes */
.measure{margin-top:-8px}
.sizes{border-top:1px solid var(--line)}
.sizerow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--hair)}
.sizerow h3{margin:0;font:600 1.1875rem/1.3 var(--display)}
.sizerow p{margin:4px 0 0;max-width:40em}
.sqbox{width:120px;height:120px;background:var(--plinth);border-radius:14px;display:grid;place-items:center}
.sq{background:#d9c7a6;border:1.5px solid #6b4a2e;border-radius:2px}

.foot{border-top:1px solid var(--line);color:var(--muted);font-size:.8125rem}
.foot-in{max-width:1080px;margin:0 auto;padding:32px 22px 48px;display:flex;gap:20px;align-items:baseline}
.foot-in span{font:300 1rem/1 var(--serif);letter-spacing:.2em;color:var(--fg)}
.foot-in p{margin:0;max-width:52em}

@media (prefers-reduced-motion: reduce){.plinth>svg,.cta{transition:none}.card:hover .plinth>svg,.tile:hover .plinth>svg,.next:hover .nart>svg{transform:none}}
@media (prefers-reduced-transparency: reduce){.bar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast: more){.plinth,.sart,.hist{box-shadow:0 0 0 1px var(--fg)}}
/* drawings carry their own hanji ground for standalone use; on a plinth the plinth is the ground */
.plinth>svg>rect:first-child,.sart svg>rect:first-child{fill:none}