/* Tintame · startsida variant 3: en skärm hero med rullande film, sedan vanlig sida. Inget sticky, inga steg. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center;
  padding: clamp(110px, 16vh, 170px) var(--gutter) clamp(48px, 8vh, 96px); }
.hero__copy { min-width: 0; }
.hero__copy .lede { max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin: 0 0 1.4rem; }
.hero__note { margin: 0; font-size: 1.8rem; }
.hero__window { width: 100%; }
.hero__window .window__cut { aspect-ratio: 1614 / 1076; }
.hero .measure g { opacity: .45; } .hero .measure__wall { opacity: 0 !important; }
.hero .measure path { stroke-dasharray: none; }
.hero .measure path[stroke-dasharray] { stroke-dasharray: 14 12; }
.hero .ml { opacity: .55; } .hero .ml--wall { opacity: 0; }
.hero .hang__piece { opacity: 1; }
.hero .wallmark { display: none; }
.hero__dims { margin: 1rem 0 0; display: flex; justify-content: center; gap: 2rem; font-family: var(--f-pencil); font-size: 1.6rem; line-height: 1; color: var(--pencil); }

/* collection with prices */
.shelf { padding: clamp(80px, 12vh, 150px) var(--gutter) clamp(80px, 12vh, 150px); }
.shelf__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(36px, 6vh, 64px); }
.shelf__head .body { max-width: 40ch; }
.shelf__all { justify-self: start; }
.works3 { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3.5vw, 48px) clamp(18px, 2.4vw, 36px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work3 a { display: block; text-decoration: none; color: inherit; }
.work3__img { position: relative; aspect-ratio: 4 / 5; }
.work3__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 12px 14px rgba(40, 15, 5, .35)); transition: transform .5s var(--ease-out); }
.work3 a:hover .work3__img img { transform: translateY(-4px); }
.work3__meta { margin-top: 1rem; display: grid; gap: .15rem; }
.work3__artist { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.work3__title { font-weight: 700; line-height: 1.25; }
.work3__sizes { font-size: .92rem; opacity: .8; font-variant-numeric: tabular-nums; }
.work3__price { font-weight: 600; }
.work3__price small { font-weight: 400; font-size: .85em; opacity: .8; white-space: nowrap; }
.shelf__foot { margin: clamp(32px, 5vh, 56px) 0 0; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; }
.shelf__foot .pencil { font-size: 1.8rem; }

/* how we size it: three columns, plain */
.how { padding: clamp(80px, 12vh, 150px) var(--gutter); }
.how__head { max-width: 60ch; margin-bottom: clamp(36px, 6vh, 64px); }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.how__steps li { max-width: 34ch; }
.how__n { font-family: var(--f-pencil); font-size: 2.6rem; line-height: 1; color: rgba(255, 245, 235, .8); display: block; margin-bottom: .3em; }
.how__steps h3 { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); line-height: 1.05; letter-spacing: -.025em; margin: 0 0 .5em; }
.how__steps p { margin: 0 0 .5em; }
.how__rule { font-family: var(--f-pencil); font-size: 1.7rem; line-height: 1.1; color: rgba(255, 245, 235, .85); }
.how__foot { margin-top: clamp(36px, 6vh, 64px); display: flex; flex-wrap: wrap; gap: 1rem; }
.board--terracotta-deep .btn--outline:hover { background: #fbe9df; color: var(--terracotta-deep); }

/* entrances: by artist, by room */
.ways { padding: clamp(80px, 12vh, 150px) var(--gutter); }
.ways__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.ways h3 { font-family: var(--f-pencil); font-size: 2.2rem; line-height: 1; font-weight: 400; color: var(--pencil); margin: 0 0 .6em; }
.ways ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.ways li a { display: inline-block; padding: .7em 1.05em; border: 1.5px solid currentColor; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .98rem; line-height: 1;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .2s var(--ease-press); }
.ways li a:hover { background: var(--ink-ochre); color: var(--ochre); transform: translateY(-1px); }

@media (max-width: 1000px) { .works3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 1.6rem; padding-top: clamp(76px, 18vw, 96px); min-height: 0; }
  .hero__side { order: -1; }
  .hero .dim--side { display: none; } .hero .dim--top span { display: none; }
  .hero__dims { font-size: 1.35rem; gap: 1.4rem; }
  .shelf__head, .ways__grid { grid-template-columns: 1fr; }
  .works3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1rem; }
  .how__steps { grid-template-columns: 1fr; gap: 2rem; }
}