@import url('./tokens.css');
@import url('./base.css');
:root { --color-paper: #101010; --color-paper-2: #191919; --color-paper-3: #252525; --color-ink: #f3efe7; --color-ink-2: #ccc8c1; --color-muted: #aaa69f; --color-rule: #343332; --color-accent: #8e373a; --color-accent-hover: #a44649; --color-accent-ink: #fff8ed; --color-focus: #e5ae9a; --font-display: 'Manrope', Arial, sans-serif; --container: 1380px; --gutter: 48px; --color-overlay: #000c; --color-clear: transparent; --color-light: #e8e1d4; --color-dark-ink: #191919; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { font-synthesis: none; }
a, button { touch-action: manipulation; }
button { cursor: pointer; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0; }
h1,h2,h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.035em; line-height:1.15; }
h1 { font-size:clamp(40px,4.5vw,64px); }
h2 { font-size:clamp(30px,3vw,42px); }
h3 { font-size:22px; }
p { color:var(--color-ink-2); }
.skip { position:absolute; top:-100px; left:24px; z-index:500; padding:16px; background:var(--color-ink); color:var(--color-paper); }
.skip:focus-visible { top:16px; }
.topline { font-size:11px; border-top:3px solid var(--color-accent); border-bottom:1px solid var(--color-rule); color:var(--color-muted); }
.topline .container { display:flex; justify-content:space-between; gap:24px; min-height:34px; align-items:center; }
.topline a { text-decoration:none; }
.header { background:var(--color-paper); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:112px; }
.brand { display:flex; align-items:center; gap:16px; text-decoration:none; flex-shrink:0; }
.brand img { width:76px; height:76px; border-radius:50%; }
.brand > span { font-family:var(--font-body); font-size:19px; font-weight:700; letter-spacing:-.04em; line-height:1.2; }
.brand small { display:block; font-size:10px; font-weight:400; letter-spacing:0; color:var(--color-muted); margin-top:8px; }
nav { display:flex; align-items:center; gap:32px; }
nav a { text-decoration:none; font-size:13px; font-weight:700; white-space:nowrap; padding-block:16px; }
nav a:hover { color:var(--color-focus); }
.header-social { width:40px; height:40px; display:grid; place-content:center; border:1px solid var(--color-rule); border-radius:50%; text-decoration:none; font-size:13px; font-weight:700; }
.header-social:hover { background:var(--color-paper-3); }
.menu-toggle { border:1px solid var(--color-rule); padding:10px 16px; background:var(--color-clear); color:var(--color-ink); min-height:46px; gap:12px; align-items:center; }
.hero { position:relative; min-height:590px; isolation:isolate; background:var(--color-paper); overflow:clip; }
.hero-media { position:absolute; inset:0 0 0 35%; z-index:-2; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--color-paper) 10%, color-mix(in srgb,var(--color-paper) 96%,transparent) 32%,color-mix(in srgb,var(--color-paper) 8%,transparent) 77%); }
.hero-inner { display:flex; align-items:center; min-height:590px; padding-block:64px; }
.hero-copy { max-width:660px; padding-bottom:28px; }
.hero-copy p { max-width:45ch; font-size:16px; line-height:1.8; margin-top:28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 24px; border:1px solid var(--color-accent); background:var(--color-accent); color:var(--color-accent-ink); text-decoration:none; font-size:13px; font-weight:700; line-height:20px; white-space:nowrap; }
.button:hover { background:var(--color-accent-hover); border-color:var(--color-accent-hover); }
.button:active { transform:translateY(1px); }
.button-outline { border-color:var(--color-muted); background:var(--color-clear); color:var(--color-ink); }
.button-outline:hover { background:var(--color-paper-3); border-color:var(--color-muted); }
.hero-caption { position:absolute; bottom:24px; right:max(48px,calc((100% - 1284px)/2)); font-size:12px; color:var(--color-ink); }
.section { padding-block:80px; }
.catalog { background:var(--color-paper-2); color:var(--color-ink); }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:32px; margin-bottom:40px; }
.section-heading p { font-size:14px; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.product-card { min-width:0; }
.product-photo,.product-gallery { display:block; position:relative; width:100%; height:410px; border:0; padding:0; background:var(--color-photo); color:var(--color-photo-ink); }
.product-photo { cursor:zoom-in; }
.product-photo img { width:100%; height:100%; object-fit:contain; }
.product-gallery img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.photo-action { position:absolute; bottom:12px; right:12px; display:flex; gap:12px; align-items:center; background:var(--color-photo); color:var(--color-photo-ink); padding:8px 12px; font-size:11px; }
.product-gallery > span { position:absolute; bottom:16px; left:16px; background:var(--color-paper); color:var(--color-ink); padding:8px 12px; font-size:11px; }
.product-info { padding-top:24px; }
.product-title { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.product-title > span { font-size:14px; color:var(--color-muted); white-space:nowrap; }
.product-info p { font-size:14px; margin-top:12px; min-height:48px; max-width:54ch; }
.product-info .button { margin-top:20px; }
.about-grid,.production-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; align-items:center; }
.about-photo { height:470px; }
.about-photo img { height:100%; width:100%; object-fit:cover; object-position:center 35%; }
.about-copy h2 { margin-bottom:28px; }
.about-copy p { font-size:15px; max-width:48ch; margin-top:16px; }
.about-copy .lead { font-size:18px; color:var(--color-ink); }
.about-copy .button { margin-top:28px; }
.production { background:var(--color-paper-2); color:var(--color-ink); }
.production-copy p { max-width:49ch; margin-top:24px; font-size:15px; }
.production-copy .button { margin-top:28px; }
.production-photo { width:100%; height:400px; object-fit:cover; object-position:center 48%; }
.buy-band { padding-block:48px; background:var(--color-accent); color:var(--color-accent-ink); }
.buy-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.buy-band h2 { font-size:30px; }
.buy-band p { color:var(--color-accent-ink); margin-top:12px; font-size:14px; }
.button-light { background:var(--color-light); border-color:var(--color-light); color:var(--color-dark-ink); }
.button-light:hover { background:var(--color-ink); border-color:var(--color-ink); }
.contact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.contact-grid a { text-decoration:none; border-top:1px solid var(--color-rule); display:grid; gap:16px; padding-block:24px; }
.contact-grid a > span { font-size:12px; color:var(--color-muted); }
.contact-grid strong { font-size:22px; font-weight:700; }
.contact-grid a:hover strong { color:var(--color-focus); }
.footer { border-top:1px solid var(--color-rule); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; padding-block:28px; }
.footer .brand img { width:56px; height:56px; }
.footer .brand > span { font-size:16px; }
.footer-inner > span { font-size:12px; color:var(--color-muted); }
button:disabled { opacity:.55; cursor:not-allowed; }
dialog { max-width:calc(100% - 32px); width:620px; max-height:calc(100svh - 32px); padding:0; border:0; background:var(--color-paper); color:var(--color-ink); }
dialog::backdrop { background:var(--color-overlay); }
dialog img { width:100%; max-height:calc(100svh - 100px); object-fit:contain; }
.dialog-close { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:52px; border:0; background:var(--color-paper); color:var(--color-ink); padding:12px 24px; }
.dialog-close:hover { background:var(--color-paper-3); }
.dialog-close span { font-size:28px; }
@media(min-width:1600px) { .hero-media { right:calc((100% - 1380px)/2); } }
@media(max-width:1100px) { :root { --gutter:32px; } .brand > span { display:none; } .hero-copy { max-width:560px; } .hero-media { left:30%; } .about-grid,.production-grid { gap:32px; } nav { gap:24px; } }
@media(max-width:760px) {
 :root { --gutter:20px; }
 .topline { font-size:10px; } .topline .container { min-height:32px; gap:12px; } .topline a { white-space:nowrap; }
 .header-inner { min-height:90px; flex-wrap:wrap; gap:12px; padding-block:12px; } .brand img { width:60px; height:60px; } .brand { gap:12px; } .brand > span { display:block; font-size:14px; } .brand small { font-size:9px; margin-top:4px; }
 .header-social { display:none; } .menu-toggle:not([hidden]) { display:inline-flex; } nav { flex-basis:100%; justify-content:space-between; gap:12px; flex-wrap:wrap; } nav a { font-size:12px; }
 .hero { min-height:630px; } .hero-media { inset:0; } .hero-media img { object-position:center 60%; }
 .hero::before { background:linear-gradient(180deg,color-mix(in srgb,var(--color-paper) 90%,transparent) 0%,color-mix(in srgb,var(--color-paper) 64%,transparent) 43%,color-mix(in srgb,var(--color-paper) 12%,transparent) 100%); }
 .hero-inner { min-height:630px; align-items:flex-start; padding-block:48px; } .hero-copy { padding:0; } h1 { font-size:40px; } .hero-copy p { font-size:14px; margin-top:20px; } .hero-copy p br { display:none; }
 .hero-actions { gap:12px; margin-top:24px; } .hero-actions .button { padding-inline:16px; font-size:11px; } .hero-caption { right:20px; bottom:20px; }
 .section { padding-block:56px; } .section-heading { display:grid; gap:12px; margin-bottom:28px; }
 .product-grid,.about-grid,.production-grid { grid-template-columns:minmax(0,1fr); gap:40px; } .product-photo,.product-gallery { height:360px; } .product-title h3 { font-size:19px; } .product-info p { min-height:0; }
 .about-photo { height:390px; } .about-copy h2 { margin-bottom:20px; } .production-photo { height:360px; }
 .buy-inner { display:grid; gap:24px; justify-items:start; } .buy-band { padding-block:36px; } .buy-band h2 { font-size:28px; }
 .contact-grid { grid-template-columns:minmax(0,1fr); gap:0; } .contact-grid a { gap:12px; padding-block:24px; } .contact-grid strong { font-size:24px; }
 .footer-inner { flex-wrap:wrap; gap:24px; } .footer-inner > span:last-child { flex-basis:100%; }
}
@media(max-width:360px) { .brand > span { font-size:12px; } .brand small { display:none; } .brand img { width:48px; height:48px; } .menu-toggle { padding-inline:10px; } .hero-actions { flex-direction:column; align-items:flex-start; } h1 { font-size:36px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }

/* V3: quieter chrome, editorial scale, rounded product surfaces. */
:root { --color-paper:#121313; --color-paper-2:#1b1d1d; --color-paper-3:#262929; --color-ink:#f6f2e9; --color-ink-2:#cacbc6; --color-muted:#a4a9a4; --color-rule:#343838; --color-accent:#a74743; --color-accent-hover:#b75550; --color-focus:#f1b5a4; --color-light:#eae5da; --color-dark-ink:#202321; --gutter:48px; }
.topline { display:none; }
.header { position:relative; z-index:10; border-bottom:1px solid var(--color-rule); }
.header-inner { min-height:94px; }
.brand img { width:60px; height:60px; }
.brand > span { font-size:16px; letter-spacing:-.045em; }
.brand small { font-size:10px; margin-top:5px; }
nav { gap:8px; }
nav a { padding:12px 16px; font-size:12px; font-weight:400; border-radius:24px; }
nav a:hover { background:var(--color-paper-3); color:var(--color-ink); }
.header-social { width:auto; height:40px; border-radius:24px; padding-inline:20px; font-size:12px; }
.hero { max-width:1440px; margin:16px auto 0; min-height:620px; border-radius:20px; }
.hero-media { inset:0 0 0 24%; }
.hero-media img { object-position:center 52%; }
.hero::before { background:linear-gradient(90deg,var(--color-paper) 3%,color-mix(in srgb,var(--color-paper) 92%,transparent) 26%,color-mix(in srgb,var(--color-paper) 4%,transparent) 86%); }
.hero-inner { min-height:620px; padding-block:64px; }
.hero-copy { max-width:690px; padding-bottom:0; }
h1 { font-size:clamp(44px,5.6vw,78px); font-weight:400; letter-spacing:-.065em; line-height:1.06; }
.hero-copy p { margin-top:28px; font-size:15px; max-width:43ch; line-height:1.75; }
.hero-actions { margin-top:32px; gap:12px; }
.button { min-height:48px; border-radius:28px; padding-inline:24px; font-size:12px; font-weight:700; }
.hero .button-outline { background:color-mix(in srgb,var(--color-paper) 35%,transparent); border-color:color-mix(in srgb,var(--color-ink) 45%,transparent); }
.hero .button-outline:hover { background:var(--color-paper-3); }
.hero-caption { right:32px; bottom:28px; background:color-mix(in srgb,var(--color-paper) 75%,transparent); border:1px solid color-mix(in srgb,var(--color-ink) 18%,transparent); border-radius:24px; padding:9px 16px; font-size:10px; }
.section { padding-block:88px; }
h2 { font-size:clamp(32px,3.3vw,48px); font-weight:400; letter-spacing:-.055em; line-height:1.12; }
.catalog { background:var(--color-paper); }
.section-heading { align-items:end; margin-bottom:36px; }
.section-heading p { max-width:30ch; font-size:13px; }
.product-grid { gap:24px; }
.product-card { background:var(--color-paper-2); border-radius:18px; overflow:clip; }
.product-photo,.product-gallery { height:410px; }
.product-gallery img { object-position:center 44%; }
.photo-action { border-radius:20px; bottom:16px; right:16px; font-size:10px; }
.photo-action svg { width:18px; height:18px; }
.product-gallery > span { left:20px; bottom:20px; border-radius:20px; font-size:10px; }
.product-info { padding:28px; }
.product-title h3 { font-size:20px; font-weight:400; letter-spacing:-.045em; }
.product-title > span { font-size:12px; }
.product-info p { font-size:13px; line-height:1.7; max-width:48ch; }
.product-info .button { margin-top:24px; }
.about { border-top:1px solid var(--color-rule); }
.about-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:80px; }
.about-photo { height:500px; border-radius:18px; overflow:clip; }
.about-copy h2 { margin-bottom:32px; }
.about-copy .lead { font-size:17px; line-height:1.6; }
.about-copy p { font-size:14px; }
.about-copy .button-outline { border-color:var(--color-rule); }
.production { background:var(--color-light); color:var(--color-dark-ink); }
.production h2 { max-width:18ch; }
.production p { color:var(--color-dark-ink); font-size:14px; }
.production-photo { height:440px; border-radius:18px; }
.production a:focus-visible { outline-color:var(--color-accent); }
.buy-band { background:var(--color-paper-2); color:var(--color-ink); padding-block:48px; }
.buy-band h2 { font-size:34px; font-weight:400; }
.buy-band p { color:var(--color-muted); font-size:13px; }
.buy-band .button { background:var(--color-accent); color:var(--color-accent-ink); border-color:var(--color-accent); }
.buy-band .button:hover { background:var(--color-accent-hover); }
.contact-grid { gap:24px; }
.contact-grid a { padding:24px 0; border-top:1px solid var(--color-rule); gap:20px; }
.contact-grid strong { font-size:25px; font-weight:400; letter-spacing:-.05em; }
.contact-grid a > span { font-size:11px; }
.footer .brand img { width:44px; height:44px; }
.footer .brand > span { font-size:13px; }
.footer-inner > span { font-size:11px; }
@media(min-width:1500px) { .hero { margin-inline:auto; } }
@media(min-width:761px) and (max-width:1499px) { .hero { margin-inline:16px; } }
@media(max-width:1100px) { .brand > span { display:block; font-size:13px; } .brand small { font-size:9px; } .header-inner { gap:12px; } nav a { padding-inline:12px; } .about-grid { gap:40px; } }
@media(min-width:761px) and (max-width:900px) { .header .brand > span { display:none; } nav a { padding-inline:10px; } }
@media(max-width:760px) {
 :root { --gutter:20px; }
 .header-inner { min-height:84px; padding-block:12px; }
 .brand img { width:52px; height:52px; } .brand > span { font-size:14px; } .brand small { font-size:9px; }
 .menu-toggle { border-radius:24px; min-height:42px; padding:8px 14px; font-size:12px; gap:8px; } .menu-toggle svg { width:20px; height:20px; }
 nav { gap:0; } nav a { padding:12px 8px; font-size:11px; }
 .hero { margin:8px 8px 0; border-radius:16px; min-height:640px; }
 .hero-media { inset:0; } .hero-media img { object-position:center 60%; }
 .hero::before { background:linear-gradient(180deg,color-mix(in srgb,var(--color-paper) 92%,transparent) 0%,color-mix(in srgb,var(--color-paper) 65%,transparent) 42%,color-mix(in srgb,var(--color-paper) 6%,transparent) 100%); }
 .hero-inner { min-height:640px; padding-top:44px; padding-bottom:32px; padding-inline:20px; }
 h1 { font-size:clamp(39px,10.5vw,58px); line-height:1.08; letter-spacing:-.06em; }
 .hero-copy p { font-size:13px; margin-top:20px; max-width:33ch; }
 .hero-actions { margin-top:24px; gap:8px; } .hero-actions .button { padding-inline:16px; min-height:44px; font-size:10px; }
 .hero-caption { right:16px; bottom:16px; font-size:9px; padding:7px 12px; }
 .section { padding-block:56px; } h2 { font-size:34px; }
 .section-heading { gap:12px; margin-bottom:28px; } .section-heading p { font-size:12px; max-width:none; }
 .product-grid { gap:24px; } .product-photo,.product-gallery { height:340px; }
 .product-info { padding:22px; } .product-title h3 { font-size:18px; } .product-title > span { font-size:11px; }
 .product-info p { font-size:12px; } .product-info .button { min-height:44px; margin-top:20px; }
 .about-grid { grid-template-columns:minmax(0,1fr); gap:32px; } .about-photo { height:400px; }
 .about-copy h2 { margin-bottom:24px; } .about-copy .lead { font-size:17px; }
 .production-photo { height:340px; } .production-grid { gap:32px; }
 .buy-band { padding-block:36px; } .buy-band h2 { font-size:30px; }
 .contact-grid { gap:0; } .contact-grid a { padding-block:24px; gap:14px; }
 .footer-inner { gap:20px; }
}
@media(max-width:360px) { .brand > span { font-size:12px; } .brand img { width:46px; height:46px; } .hero-actions { flex-direction:row; } .hero-actions .button { padding-inline:12px; font-size:9px; } h1 { font-size:36px; } }