/* OBLIQUE — the brand shell (header + footer), shared by the landing and every sub-page so the logo, menu and footer
   never change between pages (user, 2026-10-25). Header is Forma-like and simple: ☰ + Studio / Online / Shop · logo ·
   Book class + Sign in; Journal, About, Cart and the account live in the sheet. Own tokens (--hd-*) so it sits on top of
   landing.css or style.css. One centred 1280px column on desktop, the same one the landing and the sub-pages use. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }

:root { --hd-h: 64px; }
.lx-header, .lx-footer {
  --hd-ink: #25221f; --hd-text: #4c4741; --hd-panel: #f5f2ed; --hd-deep: #e6e0d7; --hd-line: #d5cfc6; --hd-muted: #8b857d; --hd-bg: #efebe5;
  --hd-display: "Cormorant Garamond", "Noto Serif KR", "AppleMyungjo", serif;
  --hd-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --hd-g: 20px;
}
.lx-header { position: relative; z-index: 20; color: var(--hd-ink); }
.lx-header a, .lx-header .link-button { color: inherit; text-decoration: none; }
.lx-header .link-button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.lx-header .nav-account form { display: inline; margin: 0; }
.lx-header-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: var(--hd-h); padding-inline: var(--hd-g); }
.lx-header-left { display: flex; align-items: center; gap: 28px; }
.lx-logo { font: 400 25px/1 var(--hd-display); letter-spacing: 0.1em; text-transform: uppercase; }
.lx-nav { display: none; }
.lx-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 28px; font: 500 11px/1 var(--hd-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.lx-account { display: none; gap: 22px; }
.lx-account form { display: none; }
.lx-book { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.lx-book span { display: none; }
.lx-book:hover { background: var(--hd-ink); border-color: var(--hd-ink); color: var(--hd-bg) !important; }
/* ☰ and the sheet */
.lx-menu > summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; cursor: pointer; }
.lx-menu > summary::-webkit-details-marker { display: none; }
/* ☰ → ×: the outer lines slide into the middle, then the pair turns. app.js opens and closes the menus with motion and
   marks a closing one .is-closing, so the icons already turn back while the panel folds away. */
.lx-menu > summary span { position: relative; display: block; width: 20px; height: 1px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transition: box-shadow 0.2s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s; }
.lx-menu > summary span::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 0.1s 0.06s, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s; }
.lx-menu[open]:not(.is-closing) > summary span { box-shadow: 0 0 0 currentColor, 0 0 0 currentColor; transform: rotate(45deg); }
.lx-menu[open]:not(.is-closing) > summary span::after { opacity: 1; transform: rotate(-90deg); }
.lx-sheet { position: absolute; left: var(--hd-g); right: var(--hd-g); top: calc(100% - 6px); padding: 10px 22px 22px; background: var(--hd-panel); color: var(--hd-ink); box-shadow: 0 24px 60px -30px rgba(37, 34, 31, 0.4); }
.lx-sheet nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hd-line); }
.lx-sheet nav span { font: 300 30px/1 var(--hd-display); }
.lx-sheet nav small { font: 400 12px/1 var(--hd-sans); color: var(--hd-muted); }
.lx-sheet-group { border-bottom: 1px solid var(--hd-line); }
.lx-sheet-group summary { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; list-style: none; cursor: pointer; }
.lx-sheet-group summary::-webkit-details-marker { display: none; }
/* + → −: the upright stroke shrinks away while the mark makes a half turn. */
.lx-sheet-group summary small::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 12px; vertical-align: -1px;
  background: linear-gradient(var(--hd-ink), var(--hd-ink)) center / 100% 1px no-repeat, linear-gradient(var(--hd-ink), var(--hd-ink)) center / 1px 100% no-repeat;
  transition: background-size 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lx-sheet-group[open]:not(.is-closing) summary small::after { background-size: 100% 1px, 1px 0; transform: rotate(180deg); }
.lx-sheet-group > summary:focus-visible { outline: none; }
.lx-sheet-group > summary:focus-visible span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.lx-sheet-sub { display: grid; margin: 0; padding: 0 0 12px; }
.lx-sheet nav .lx-sheet-sub a { justify-content: flex-start; gap: 8px; padding: 9px 0 9px 2px; border: 0; font: 400 15px/1.3 var(--hd-sans); color: var(--hd-ink); }
.lx-sheet nav .lx-sheet-sub a small { font-size: 12px; }
.lx-sheet nav .lx-sheet-sub a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.lx-sheet-account { display: flex; gap: 22px; padding-top: 18px; font: 500 11.5px/1 var(--hd-sans); letter-spacing: 0.16em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .lx-menu > summary span, .lx-menu > summary span::after, .lx-sheet-group summary small::after { transition: none; }
}

/* ---------- Footer ---------- */
.lx-footer { background: var(--hd-deep); color: var(--hd-text); }
.lx-footer-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; padding: 64px var(--hd-g) 44px; }
.lx-footer-brand { grid-column: 1 / -1; }
.lx-footer-logo { font: 300 44px/1 var(--hd-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hd-ink); text-decoration: none; }
.lx-footer-brand p { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--hd-muted); }
.lx-footer .lx-label { margin-bottom: 14px; }
.lx-footer nav a { display: block; padding: 5px 0; font-size: 13.5px; color: var(--hd-text); text-decoration: none; }
.lx-footer nav a:hover { color: var(--hd-ink); text-decoration: underline; text-underline-offset: 0.3em; }
.lx-footer-base { margin: 0 var(--hd-g); padding: 20px 0 28px; border-top: 1px solid var(--hd-line); font-size: 12px; color: var(--hd-muted); }
.lx-footer .lx-label { font: 500 11px/1.5 var(--hd-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--hd-muted); }
.lx-footer nav a { font-family: var(--hd-sans); }

@media (min-width: 768px) {
  :root { --hd-h: 92px; }
  .lx-header, .lx-footer { --hd-g: max(clamp(32px, 4.4vw, 80px), calc((100vw - 1280px) / 2)); }
  .lx-header-left { gap: 32px; }
  .lx-menu > summary { margin-left: -8px; }
  .lx-nav { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--hd-sans); letter-spacing: 0.14em; text-transform: uppercase; }
  .lx-nav span { opacity: 0.6; }
  .lx-nav a:hover, .lx-nav a[aria-current] { text-decoration: underline; text-underline-offset: 0.5em; text-decoration-thickness: 1px; }
  .lx-logo { font-size: 30px; }
  .lx-header-right { gap: clamp(20px, 2vw, 32px); font-size: 12px; }
  .lx-account { display: flex; }
  .lx-account form { display: inline; }
  .lx-book { height: 40px; padding: 0 22px; }
  .lx-book span { display: inline; }
  .lx-sheet { right: auto; width: 380px; }
  .lx-footer-top { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding: 88px var(--hd-g) 64px; }
  .lx-footer-brand { grid-column: auto; }
  .lx-footer-logo { font-size: 54px; }
}