/* Milaron 3D, the public site (16 Nov 2026). Palette and type from map\brand.md: dark #0B0B0B, light #F4F4F4,
   stone #6B6F76, brass #C8A35A (one per screen, as a fill with dark text); Playfair Display headlines, Inter body. */
:root {
  --ink: #0B0B0B; --paper: #F4F4F4; --stone: #6B6F76; --brass: #C8A35A; --white: #fff;
  --line: rgba(11, 11, 11, .12);
  --m-1: 4px; --m-2: 8px; --m-3: 16px; --m-4: 24px; --m-5: 40px; --m-6: 64px; --m-7: 104px;
  --m-section: clamp(72px, 14vw, 168px); --m-section-tight: clamp(48px, 9vw, 104px);
  --m-display: clamp(40px, 8vw, 88px); --m-headline: clamp(30px, 5.4vw, 54px); --m-title: clamp(21px, 2.4vw, 26px);
  --m-body: 17px; --m-eyebrow: 12px; --m-measure: 34ch; --m-measure-wide: 58ch;
  --m-ease: cubic-bezier(.16, 1, .3, 1); --m-dur: 800ms;
  --font-heading-family: 'Playfair Display', Georgia, serif; --font-body-family: 'Inter', system-ui, sans-serif;
  --bar: 60px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 var(--m-body)/1.65 var(--font-body-family); }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the shared primitives the store's sections expect (snippets/milaron-rhythm.liquid) */
.m-eyebrow { font: 700 var(--m-eyebrow)/1.3 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin: 0; }
.m-headline { font-family: var(--font-heading-family); font-weight: 700; font-size: var(--m-headline); line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.m-body { font-family: var(--font-body-family); font-weight: 300; font-size: var(--m-body); line-height: 1.75; margin: 0; }
.m-rise { opacity: 0; transform: translateY(20px); transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); }
.m-rise.m-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .m-rise { opacity: 1; transform: none; transition: none; } }

/* ---- the bar across the top of every page ---- */
.top { position: sticky; top: 0; z-index: 50; height: var(--bar); display: flex; align-items: center; gap: var(--m-3); padding: 0 clamp(16px, 4vw, 40px); background: rgba(244, 244, 244, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand b { font: 700 22px/1 var(--font-heading-family); letter-spacing: .01em; }
.brand span { font: 600 11px/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.top nav { margin-left: auto; display: flex; gap: clamp(10px, 2.4vw, 28px); align-items: center; }
.top nav a { font: 500 14px/1 'Inter', sans-serif; text-decoration: none; color: var(--stone); white-space: nowrap; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
.top nav a.shop { color: var(--ink); border: 1px solid var(--ink); padding: 9px 14px; border-radius: 999px; }
.top nav a.shop:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) { .top nav a.hide-s { display: none; } .brand span { display: none; } }

/* ---- landing ---- */
.hero { padding: clamp(56px, 10vw, 128px) clamp(16px, 5vw, 64px) var(--m-6); max-width: 1240px; margin: 0 auto; }
.hero h1 { font: 700 var(--m-display)/1.02 var(--font-heading-family); letter-spacing: -.025em; margin: var(--m-3) 0 var(--m-4); max-width: 15ch; text-wrap: balance; }
.hero p.lede { max-width: var(--m-measure-wide); color: #2a2b2d; font-size: clamp(17px, 1.6vw, 20px); margin: 0; }
.hero .how { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: var(--m-5) 0 0; padding: 0; list-style: none; font: 400 14px/1.4 'Inter', sans-serif; color: var(--stone); }
.hero .how li { display: flex; align-items: center; gap: 8px; }
.hero .how li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--stone); }

.ctas { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px) var(--m-section-tight); display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 700px) and (max-width: 1039px) { .ctas { grid-template-columns: 1fr 1fr; } .ctas .cta:first-child { grid-column: span 2; } .ctas .cta:first-child .pic { aspect-ratio: 21 / 9; } }
@media (min-width: 1040px) { .ctas { grid-template-columns: repeat(3, 1fr); } }
.cta { position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--white); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); transition: transform 500ms var(--m-ease), box-shadow 500ms var(--m-ease); }
.cta:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -28px rgba(11, 11, 11, .35); }
.cta .pic { position: relative; aspect-ratio: 16 / 10; background: #e9e8e5; overflow: hidden; }
.cta .pic img.photo { object-position: 50% 58%; background: #fff; }
.cta .txt { flex: 1 1 auto; }
.cta .go { margin-top: auto !important; }
.cta .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--m-ease); }
.cta:hover .pic img { transform: scale(1.03); }
.cta .pic .tag { position: absolute; left: 16px; top: 16px; font: 700 11px/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; background: rgba(255, 255, 255, .92); padding: 8px 11px; border-radius: 999px; }
.cta .txt { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.cta h2 { font: 700 clamp(26px, 3vw, 38px)/1.08 var(--font-heading-family); letter-spacing: -.015em; margin: 0; }
.cta p { margin: 0; color: #3a3b3e; max-width: 46ch; }
.cta .go { margin-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 'Inter', sans-serif; padding: 14px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.cta .go::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform 400ms var(--m-ease); }
.cta:hover .go::after { transform: translateX(3px) rotate(45deg); }
.cta.brass .go { background: var(--brass); color: var(--ink); }
.cta .models { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.cta .models li { font: 500 13px/1 'Inter', sans-serif; padding: 7px 10px; border-radius: 999px; background: var(--paper); color: #3a3b3e; }

.band { background: var(--ink); color: var(--paper); }
.band .in { max-width: 1240px; margin: 0 auto; padding: var(--m-section-tight) clamp(16px, 5vw, 64px); display: grid; gap: var(--m-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .band .in { grid-template-columns: repeat(3, 1fr); } }
.band h3 { font: 700 var(--m-title)/1.2 var(--font-heading-family); margin: 0 0 8px; }
.band p { margin: 0; color: rgba(244, 244, 244, .72); }
.band .k { font: 700 12px/1 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 244, 244, .5); display: block; margin-bottom: 14px; }

.foot { max-width: 1240px; margin: 0 auto; padding: var(--m-5) clamp(16px, 5vw, 64px) var(--m-6); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font: 400 14px/1.5 'Inter', sans-serif; color: var(--stone); }
.foot a { color: var(--ink); }
.foot .sp { flex: 1; }

/* ---- the app pages: a bar of choices over the live 3D ---- */
body.app { height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.picker { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px clamp(12px, 3vw, 32px); background: var(--paper); border-bottom: 1px solid var(--line); }
.picker .set { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.picker .set::-webkit-scrollbar { display: none; }
.picker .set[hidden], .chip[hidden] { display: none; }
@media (max-width: 700px) {
  .picker { gap: 8px; padding: 8px 12px; }
  .picker .set > span { display: none; }
  .chip { font-size: 13px; padding: 8px 12px; }
}
.picker .set > span { font: 700 11px/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin-right: 4px; white-space: nowrap; }
.chip { font: 500 14px/1 'Inter', sans-serif; color: var(--ink); background: var(--white); border: 1px solid var(--line); padding: 10px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 200ms var(--m-ease), color 200ms var(--m-ease), border-color 200ms var(--m-ease); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:disabled { opacity: .35; cursor: default; }
.stagewrap { position: relative; flex: 1 1 auto; min-height: 0; background: #e7e5e1; }
.stagewrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 28px; border-radius: 16px; background: rgba(244, 244, 244, .94); text-align: center; font: 500 15px/1.4 'Inter', sans-serif; pointer-events: none; box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .3); }
.wait[hidden] { display: none; }
.wait i { width: 140px; height: 3px; border-radius: 3px; background: rgba(11, 11, 11, .12); overflow: hidden; position: relative; }
.wait i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--ink); border-radius: 3px; animation: slide 1.2s var(--m-ease) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.tip { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: rgba(11, 11, 11, .82); color: var(--paper); font: 400 13.5px/1.35 'Inter', sans-serif; text-align: center; pointer-events: none; transition: opacity 600ms var(--m-ease); }
.tip.gone { opacity: 0; }
@media (max-width: 700px) { .tip { border-radius: 14px; top: 12px; bottom: auto; font-size: 13px; } }

/* ---- studio grade: one reformer per page ---- */
.sg-head { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) clamp(16px, 5vw, 64px) var(--m-4); }
.sg-head h1 { font: 700 var(--m-headline)/1.06 var(--font-heading-family); letter-spacing: -.02em; margin: var(--m-3) 0 var(--m-3); max-width: 18ch; text-wrap: balance; }
.sg-head p { max-width: var(--m-measure-wide); margin: 0; color: #2a2b2d; }
.sg-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--m-4) 0 0; }
.sg-pick a { text-decoration: none; }
.sg-next { max-width: 1240px; margin: 0 auto; padding: var(--m-5) clamp(16px, 5vw, 64px) var(--m-6); display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 15px/1 'Inter', sans-serif; padding: 14px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn:hover { opacity: .88; }