/* Noto Sans: 1rem is 16px at the browser's standard text setting. */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('assets/fonts/noto-sans-kr-site.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-sans: 'Noto Sans KR', 'Noto Sans', sans-serif;
  --sans: var(--font-sans);
  --serif: var(--font-sans);
  --type-caption: .75rem;
  --type-small: .875rem;
  --type-body: 1rem;
  --type-subtitle: 1.125rem;
  --type-heading: 2.75rem;
  --type-hero: 8rem;
}
html { font-size:100%; }
body { font-family:var(--font-sans); font-size:var(--type-body); line-height:1.75; }
button, input, select, textarea { font-family:inherit; }
h2, .menu-copy h2, .oil-story h2, .story-copy h2, .order-heading h2 { font-size:var(--type-heading); font-weight:900; line-height:1.35; letter-spacing:-.055em; word-break:keep-all; }
h2 em, .menu-copy h2 em { font-weight:900; box-shadow:inset 0 -.3rem 0 #d6b46580; }
.brand, .hero-brand-name { font-weight:900; letter-spacing:-.065em; }
.hero-brand-name { font-size:var(--type-hero); letter-spacing:-.075em; text-shadow:0 .125rem 0 #193a2b45; }
.brand small, .hero-brand-english { font-size:var(--type-caption); font-weight:500; }
.hero-brand-english { letter-spacing:.2em; }
.hero-image-caption { display:none; }
.desktop-nav, .header-order { font-size:var(--type-small); }
.hero-copy .hero-eyebrow { font-size:var(--type-body); }
.hero-oil>strong { font-size:6rem; font-weight:900; color:#f6d385; letter-spacing:-.07em; }
.hero-oil>strong>span { font-size:2.5rem; }
.hero-oil-name { font-size:2rem; font-weight:900; color:#fff2cc; }
.oil-lockup-caption { font-size:var(--type-small); }
.hero-copy .hero-description { font-size:var(--type-body); line-height:1.75; }
.hero-copy .pill-link, .pill-link { font-size:var(--type-body); min-height:3rem; }
.oil-seal strong { font-weight:800; }
.oil-seal small { font-size:1.25rem; }
.ingredient-tile strong { font-size:var(--type-subtitle); font-weight:700; }
.ingredient-tile div>span, .bottom-note>span { font-size:.625rem; }
.bottom-note p { font-size:var(--type-small); line-height:1.75; }
.eyebrow, .menu-copy .eyebrow, .story-copy .eyebrow, .oil-story>.eyebrow,
.section-caption, .section-caption>span:last-child, .order-section .section-caption { font-size:var(--type-caption); }
.oil-story .oil-body, .oil-detail p, .menu-subtitle, .story-copy>p:not(.eyebrow),
.order-heading>div p, .order-process p, .order-details details p,
.dialog-copy>p:not(.eyebrow):not(.dialog-price), .dialog-notice p { font-size:var(--type-body); line-height:1.8; word-break:keep-all; }
.oil-detail h3, .order-process h3 { font-size:var(--type-subtitle); font-weight:700; }
.oil-number>strong { font-size:5rem; font-weight:800; }
.oil-number>strong span { font-size:2rem; }
.oil-number>p, .oil-number>p>span, .oil-footnote { font-size:var(--type-small); }
.oil-number { flex-wrap:wrap; }
.oil-visual>figcaption>span, .oil-photo-label { font-size:var(--type-caption); }
.oil-visual>figcaption>strong { font-size:1.5rem; font-weight:700; }
.menu-name>span, .photo-note, .story-image-note, .story-visual-label>span,
.menu-bottom-line>span { font-size:var(--type-caption); }
.menu-name h3 { font-size:1.75rem; font-weight:800; }
.menu-price { font-size:2.75rem; font-weight:900; }
.menu-price>span { font-size:var(--type-body); }
.menu-price small { font-size:var(--type-small); }
.text-link, .menu-copy .text-link, .story-copy .text-link, .menu-bottom-line a { font-size:var(--type-body); min-height:2.75rem; }
.menu-floating-note { font-size:var(--type-subtitle); }
.menu-background-word { font-size:18rem; }
.story-visual-label strong { font-size:1.875rem; font-weight:700; }
.story-signature { font-size:1.5rem; font-weight:600; }
.status-label { font-size:var(--type-small); }
.order-process>div>span { font-size:var(--type-subtitle); font-weight:600; }
.order-details summary { font-size:var(--type-body); gap:1rem; min-height:3.5rem; line-height:1.65; }
.order-details summary span { flex-shrink:0; font-size:1.5rem; }
.order-details details p { padding:0 0 1.25rem; }
.order-link { font-size:var(--type-body); min-height:3.5rem; padding:1.25rem 1.5rem; gap:1rem; font-weight:600; }
.order-link span { flex-shrink:0; }
.footer-top>p { font-size:var(--type-body); line-height:1.75; }
.footer-top>a:not(.brand):not(.back-top) { font-size:var(--type-body); min-height:2.75rem; display:inline-flex; align-items:center; gap:.5rem; }
.footer-bottom, .footer-bottom p, .footer-bottom a { font-size:.8125rem; line-height:1.75; color:#d5ddce; }
.footer-bottom a { min-height:2.75rem; display:inline-flex; align-items:center; font-size:var(--type-small); }
.footer-top>.back-top { width:3rem; height:3rem; }
.dialog-copy h2 { font-size:1.75rem; }
.dialog-notice { font-size:var(--type-body); }
.dialog-copy>.dialog-image-note { font-size:var(--type-caption)!important; }
.dialog-confirm { font-size:var(--type-body); min-height:3rem; }

@media (max-width:75rem) {
  :root { --type-hero:6rem; --type-heading:2.375rem; }
  .hero-oil>strong { font-size:5rem; }
  .hero-oil>strong>span { font-size:2rem; }
}
@media (max-width:56.1875rem) {
  :root { --type-hero:5.5rem; --type-heading:2.25rem; }
  .hero-oil-name { font-size:1.625rem; }
  .hero-copy { top:8rem; }
  .hero-light { left:60%; }
  .hero-copy .pill-link { gap:1rem; }
  .oil-layout { grid-template-columns:1fr; gap:2rem; }
  .oil-visual { min-height:0; height:25rem; max-width:30rem; width:100%; margin:0 auto; }
  .oil-story { display:block; }
  .oil-number { flex-direction:row; align-items:center; gap:1.25rem; }
  .menu-section { display:flex; flex-direction:column; min-height:0; padding-bottom:0; }
  .menu-copy { width:100%; order:0; }
  .menu-floating-note { position:relative; inset:auto; order:1; align-self:flex-end; display:flex; gap:.375rem; margin:1rem 0 .375rem; transform:none; }
  .menu-floating-note svg { display:none; }
  .menu-photo { position:relative; inset:auto; order:2; width:110vw; margin:0 0 1.5rem -6vw; }
  .menu-orbit { top:auto; bottom:5rem; height:70vw; }
  .photo-note { position:relative; inset:auto; order:3; margin:.625rem 0 .75rem; max-width:100%; }
  .menu-bottom-line { position:relative; inset:auto; order:4; min-height:4rem; height:auto; padding-block:.75rem; gap:1rem; }
  .story-section { display:flex; flex-direction:column; }
  .story-visual { min-height:0; height:23rem; }
  .story-visual img { object-position:92% center; }
  .story-copy { padding:2.25rem 7%; }
  .order-heading { grid-template-columns:1fr; gap:1.25rem; margin-top:2rem; }
  .order-heading>div { padding-top:0; }
  .order-process { grid-template-columns:1fr; margin-top:2rem; }
  .order-process>div { display:grid; grid-template-columns:1.75rem minmax(0,1fr); gap:.375rem .875rem; padding:1.25rem 0; }
  .order-process>div+div { border-left:0; border-top:.0625rem solid var(--line); padding-left:0; }
  .order-process>div>span { grid-column:1; grid-row:1 / 3; padding:0; }
  .order-process h3 { grid-column:2; margin:0; line-height:1.6; }
  .order-process p { grid-column:2; margin:0; line-height:1.7; }
  .footer-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.25rem; align-items:start; padding-bottom:1.5rem; }
  .footer-top>.brand { grid-column:1; grid-row:1; width:auto; }
  .footer-top>.back-top { grid-column:2; grid-row:1; margin:0!important; }
  .footer-top>p { grid-column:1 / -1; grid-row:2; margin:0; }
  .footer-top>a:not(.brand):not(.back-top) { grid-column:1 / -1; grid-row:3; margin:0; justify-self:start; }
  .footer-bottom { display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; padding-top:1.25rem; }
  .footer-bottom p { order:0; width:auto; word-break:keep-all; }
}
@media (max-width:37.5rem) {
  :root { --type-hero:4.25rem; --type-heading:2rem; }
  .site-header .brand { font-size:1.5rem; gap:.375rem; }
  .brand small { font-size:.625rem; letter-spacing:.12em; margin-top:.5rem; }
  .header-order { font-size:.8125rem; padding-inline:.625rem; gap:.5rem; }
  .hero-copy { top:auto; }
  .hero-light { left:72%; }
  .hero-copy .hero-eyebrow { font-size:var(--type-small); }
  .hero-brand-name { font-size:var(--type-hero); line-height:1.2; }
  .brand-flower { display:none; }
  .hero-brand-english { font-size:.6875rem; }
  .hero-oil>strong { font-size:4.75rem; }
  .hero-oil>strong>span { font-size:1.875rem; }
  .hero-oil-name { font-size:1.75rem; }
  .hero-oil-lockup { max-width:70vw; }
  .oil-lockup-caption { font-size:var(--type-caption); }
  .hero-copy .hero-description { font-size:var(--type-body); line-height:1.7; }
  .hero-copy .pill-link { font-size:.9375rem; }
  .oil-seal { width:4.75rem; }
  .oil-seal strong { font-size:1.625rem; }
  .oil-seal small { font-size:.8125rem; }
  .ingredient-tile strong { font-size:.875rem; }
  .ingredient-tile div>span { display:none; }
  .bottom-note>span { font-size:.625rem; }
  .bottom-note p { font-size:.8125rem; }
  .hero-bottom { grid-template-columns:1.1fr 1fr; }
  .oil-visual { height:25rem; width:90%; }
  .oil-visual>figcaption>strong { font-size:1.25rem; }
  .oil-number>strong { font-size:4rem; }
  .oil-number>p, .oil-number>p>span { font-size:var(--type-caption); }
  .oil-detail { gap:1rem; }
  .menu-section { padding-top:2.25rem; }
  .menu-name h3 { font-size:1.625rem; }
  .menu-name>span { font-size:.6875rem; }
  .menu-photo { width:118vw; margin-left:-7vw; margin-bottom:1.25rem; }
  .menu-orbit { height:calc(78.67vw + 4.375rem); }
  .menu-floating-note { font-size:1rem; }
  .menu-bottom-line { flex-wrap:wrap; gap:.5rem 1rem; }
  .menu-bottom-line>span { max-width:10rem; font-size:.6875rem; }
  .menu-bottom-line a { font-size:var(--type-small); margin-left:auto; }
  .story-visual { height:clamp(17.5rem,82vw,22.5rem); }
  .story-visual-label strong { font-size:1.625rem; }
  .story-copy { padding:2rem 7%; }
  .story-copy>p:not(.eyebrow) { margin-top:1.125rem; }
  .story-signature { font-size:1.25rem; }
  .order-section { padding-top:2.5rem; padding-bottom:2.5rem; }
  .order-heading { margin-top:1.5rem; }
  .order-heading>div p { margin-top:1rem; }
  .order-process { margin-top:1.5rem; }
  .order-details { margin-top:1.25rem; }
  .order-details summary { padding-block:1rem; }
  .order-link { margin-top:1.5rem; padding:1rem 1.125rem; }
  .site-footer { padding:2rem 7% 1.5rem; }
  .footer-top>.brand { font-size:1.75rem; }
  .footer-top>.brand small { font-size:.75rem; }
}
@media (max-width:21.875rem) {
  :root { --type-hero:3.5rem; --type-heading:1.75rem; }
  .site-header .brand { font-size:1.375rem; }
  .header-order { font-size:.75rem; }
  .hero-oil-name { font-size:1.5rem; }
  .brand-flower { display:none; }
  .hero-copy .pill-link { font-size:var(--type-small); gap:.875rem; }
  .oil-seal { width:4.25rem; right:2%; }
  .menu-bottom-line { display:block; }
  .menu-bottom-line>span { display:block; max-width:none; }
  .menu-bottom-line a { margin-top:.375rem; justify-content:space-between; }
}