/* Home page layouts only. Shared components live in site.css. */

/* ---------- 1. Hero: split + arch ---------- */
.hero { position: relative; overflow: clip; padding-block: 2.5rem 4.5rem; background: var(--paper); }
.hero .dust { inset: 0 0 -18% 0; }
.hero__grid { position: relative; z-index: 1; display: grid; gap: 3.5rem; align-items: center; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { max-width: 12ch; padding-bottom: .06em; }
.hero .lead { margin-top: 1.5rem; max-width: 34rem; color: var(--ink-soft); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; width: 100%; }
.hero__ctas .btn { width: 100%; justify-content: center; }

.hero__media { position: relative; width: min(86vw, 420px); margin-inline: auto; }
.hero__media .arch-frame { width: 100%; }
.hero__accent { position: absolute; z-index: 2; width: 38%; left: -6%; bottom: -6%; }

@media (min-width: 480px) {
  .hero__ctas { width: auto; gap: 1rem; }
  .hero__ctas .btn { width: auto; }
}

@media (min-width: 768px) {
  .hero { padding-block: clamp(2rem, 5vw, 4rem); }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
  .hero__copy { grid-column: 1 / 8; }
  .hero__media { grid-column: 8 / 13; width: 100%; margin: 0; }
  .hero__accent { width: 40%; left: -22%; bottom: 6%; }
}

@media (min-width: 1024px) {
  .hero { min-height: min(calc(100dvh - var(--nav-h)), 920px); display: flex; align-items: center; }
  .hero__grid { width: min(100% - 2 * var(--gutter), var(--container)); }
  .hero__copy { grid-column: 1 / 7; }
  .hero__media { width: min(100%, calc((100dvh - var(--nav-h) - 6rem) * .8)); justify-self: end; }
  .hero__accent { width: 36%; left: -22%; bottom: 6%; }
}

/* ---------- 2. Our mark: centered manifesto ---------- */
.mark { text-align: center; }
.mark__logo { width: min(100%, 549px); margin: 0 auto; background: var(--paper); }
.mark__crop { aspect-ratio: 549 / 212; overflow: hidden; }
.mark__crop img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 45%, black 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 45%, black 62%, transparent 100%);
}
.mark .rule { margin: 2.5rem auto; }
.mark h2 { margin-bottom: 1.75rem; }
.mark__words {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.4; color: var(--ink);
  max-width: 34ch; margin-inline: auto; text-wrap: balance;
}

/* ---------- 3. Collections: horizontal pan ---------- */
.collections { position: relative; }
.collections__pan { padding-block: var(--section-y); scroll-padding-inline: var(--gutter); }
.collections__track { align-items: flex-start; }
.panel { width: min(80vw, 26rem); }
.panel--intro { width: min(80vw, 26rem); align-self: center; }
.panel--intro .eyebrow { margin-bottom: 1.25rem; }
.panel--intro h2 { margin-bottom: 1.25rem; }
.panel--intro p:last-child { color: var(--ink-soft); max-width: 30ch; }
.panel__link { display: block; color: inherit; text-decoration: none; }
.panel__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; margin-top: 1.25rem; }
.panel > p { margin-top: .75rem; color: var(--ink-soft); max-width: 32ch; }
.panel .link-arrow { margin-top: 1.1rem; }

@media (min-width: 768px) {
  .collections__track { gap: clamp(2rem, 5vw, 5rem); padding-inline: var(--gutter) 12vw; }
  .panel--intro { width: clamp(18rem, 30vw, 26rem); }
  .panel { width: min(34vw, calc((100svh - var(--nav-h) - 14rem) * .8)); min-width: 15rem; }
  .panel--intro { min-width: 0; }
  .panel:nth-child(3) { margin-top: 10svh; }
}
.collections__pan.is-pinned { padding-block: 0; padding-top: var(--nav-h); box-sizing: border-box; }
.collections__pan.is-pinned .collections__track { align-items: center; }

/* ---------- 4. Walking canes: image + overlapping card ---------- */
.canes__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ivory); }
.canes__frame img { position: absolute; inset: 0 auto auto 0; width: 100%; height: 125%; object-fit: cover; object-position: 50% 40%; }
.canes__card { position: relative; z-index: 2; margin: -3rem var(--s-4) 0; padding: clamp(1.75rem, 3vw, 3rem); box-shadow: var(--shadow-lift); }
.canes__card h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin-bottom: 1.1rem; }
.canes__card p { color: var(--ink-soft); margin-bottom: 1.5rem; }

@media (min-width: 768px) {
  .canes__frame { aspect-ratio: 16 / 9; }
  .canes__card { width: min(30rem, 42%); min-width: 22rem; margin: -9rem 0 0 auto; }
}

/* ---------- 5. Showroom: bento ---------- */
.showroom h2 { margin-bottom: 3rem; max-width: 18ch; }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.bento > div { min-width: 0; }
.bento__a, .bento__c, .bento__d, .bento__e { position: relative; overflow: hidden; background: var(--ivory); }
.bento img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.bento__a { grid-column: span 2; aspect-ratio: 4 / 3; }
.bento__b { grid-column: span 2; background: var(--ivory-deep); border: 1px solid var(--line-gold); padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 12rem; }
.bento__b h3 { margin-bottom: .75rem; }
.bento__b p { color: var(--ink-soft); max-width: 36ch; }
.bento__c, .bento__e { aspect-ratio: 1 / 1; }
.bento__d { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (hover: hover) and (pointer: fine) {
  .bento__a:hover img, .bento__c:hover img, .bento__d:hover img, .bento__e:hover img { transform: scale(1.04); }
}

@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(11rem, 16vw, 15rem); }
  .bento__a, .bento__c, .bento__d, .bento__e { aspect-ratio: auto; }
  .bento__a { grid-column: 1 / 4; grid-row: 1 / 3; }
  .bento__b { grid-column: 4; grid-row: 1 / 3; }
  .bento__c { grid-column: 1; grid-row: 3; }
  .bento__d { grid-column: 2 / 4; grid-row: 3; }
  .bento__e { grid-column: 4; grid-row: 3; }
}

/* ---------- 6. Visit: info + map ---------- */
.visit { background: var(--ivory); }
.visit__grid { display: grid; gap: 3rem; align-items: center; }
.visit__info .eyebrow { margin-bottom: 1.25rem; }
.visit__info h2 { margin-bottom: 1.25rem; }
.visit__info > p:not(.eyebrow) { color: var(--ink-soft); max-width: 36rem; }
.visit__list { margin-top: 2rem; }
.visit__list > div { display: grid; grid-template-columns: 1fr; gap: .25rem; border-top: 1px solid var(--line-gold); padding-block: 1rem; }
.visit__list > div:last-child { border-bottom: 1px solid var(--line-gold); }
.visit__list dt { font: 500 var(--fs-micro)/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700); }
.visit__list dd { margin: 0; color: var(--ink); }
.visit__list a { color: inherit; text-decoration: underline 1px var(--gold-600); text-underline-offset: .3em; }
.visit__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.visit__ctas .btn { width: 100%; justify-content: center; }
.visit__map .mat__img { aspect-ratio: 4 / 3; }
.visit__map iframe { display: block; filter: grayscale(1) sepia(.18) contrast(1.02); }

@media (min-width: 480px) {
  .visit__list > div { grid-template-columns: 9rem 1fr; gap: 1rem; }
  .visit__ctas { gap: 1rem; }
  .visit__ctas .btn { width: auto; }
}
@media (min-width: 1024px) {
  .visit__grid { grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 6vw, 6rem); }
  .visit__map .mat__img { aspect-ratio: 4 / 5; }
}