/* bar: status left, name centred, one action right */
.skip { position: absolute; left: var(--margin); top: 0.75rem; z-index: 60; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; }
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0.9rem var(--margin); color: var(--header-ink, var(--ink)); background: var(--header-bg, var(--bg)); transition: color 300ms ease, background-color 300ms ease, transform 420ms var(--ease-out); }
.bar.is-hidden { transform: translateY(-100%); }
.bar-status { justify-self: start; font-size: var(--step-small); text-decoration-thickness: 1px; }
.bar-status::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.55rem; border-radius: 50%; background: var(--soft); vertical-align: 0.08em; }
.bar-status.is-open::before { background: var(--accent); }
.bar-mark { font-size: var(--step-lead); line-height: 1; letter-spacing: -0.02em; text-decoration: none; padding-bottom: 0.2rem; }
.bar-action { justify-self: end; }
.bar--dark .bar-action { background: var(--dark-ink); color: var(--dark); }
@media (max-width: 40em) { .bar { grid-template-columns: auto 1fr; } .bar-status { display: none; } }

/* hero: one large photograph, the title and the sentence beneath it */
.hero { padding-top: 4.25rem; }
.hero-photo { margin: 0; height: calc(100svh - 4.25rem - clamp(11rem, 24svh, 15rem)); min-height: 22rem; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; padding: 2.25rem var(--margin) 0; }
.hero-title { grid-column: 1 / 8; margin: 0; font-size: var(--step-display); line-height: 1; }
.hl { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; width: max-content; }
.hl-in { display: block; }
.hero-text { grid-column: 8 / 13; padding-bottom: 0.3rem; }
.hero-link { display: inline-block; margin-top: 1rem; font-size: var(--step-small); }
@media (max-width: 52em) {
  .hero-photo { height: 58svh; }
  .hero-row { display: block; padding-top: 1.75rem; }
  .hero-text { margin-top: 1.5rem; }
}

/* the range as pictures: large prints at their own sizes, the name under each */
.range-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.range-head .range-title { grid-column: 1 / 8; }
.range-lead { grid-column: 8 / 13; }
.pics { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(4rem, 8vw, 8rem); margin-top: clamp(4rem, 7vw, 7rem); align-items: start; }
.pic { margin: 0; }
.pic img { width: 100%; height: auto; display: block; }
.pic figcaption { margin-top: 0.9rem; font-size: var(--step-body); }
.pic--sofa { grid-column: 1 / 9; }
.pic--teddy { grid-column: 9 / 13; margin-top: 10rem; }
.pic--glas { grid-column: 2 / 6; }
.pic--asteria { grid-column: 7 / 13; margin-top: 12rem; }
.pic--ghia { grid-column: 1 / 13; }
.pic--tisch { grid-column: 1 / 8; margin-top: 6rem; }
.pic--raum { grid-column: 9 / 13; }
.pic--draussen { grid-column: 1 / 5; margin-top: 8rem; }
.pic--wunder { grid-column: 6 / 9; }
.pic--cord { grid-column: 10 / 13; margin-top: 12rem; }
@media (max-width: 52em) {
  .range-head { display: block; }
  .range-lead { margin-top: 1.25rem; }
  .pics { display: flex; flex-direction: column; gap: 3rem; margin-top: 3rem; }
  .pic { width: 100%; margin-top: 0 !important; }
  .pic--teddy, .pic--raum, .pic--cord { width: 78%; align-self: flex-end; }
  .pic--glas, .pic--draussen, .pic--wunder { width: 78%; }
}

/* a pause: one picture across the whole width */
.pause { margin: var(--section) 0 0; height: min(56vw, 88svh); overflow: hidden; }
.pause img { width: 100%; height: 100%; object-fit: cover; }

/* Sortiment: statement, table pushed right */
.range { padding: var(--section) var(--margin) 0; }
.range-title { max-width: 16ch; }
.range-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--section); align-items: start; }
.range-pic { grid-column: 1 / 5; grid-row: 1; align-self: end; margin: 0; }
.range-pic img { width: 100%; height: auto; }
.range-name { grid-column: 6 / 8; grid-row: 1; margin: 0.2rem 0 0; font-size: var(--step-body); font-weight: 500; letter-spacing: 0; }
.range-table { grid-column: 8 / 13; grid-row: 1; width: 100%; border-collapse: collapse; font-size: var(--step-body); }
.range-table th, .range-table td { padding: 0.55rem 0; text-align: left; font-weight: 400; vertical-align: baseline; }
.range-table th { width: 22%; color: var(--soft); }
.range-table td + td { text-align: right; color: var(--soft); white-space: nowrap; padding-left: 1rem; }
.range-table tr.g > * { padding-top: 2.25rem; }
.range-table tbody tr:first-child > * { padding-top: 0.55rem; }
@media (max-width: 52em) {
  .range-title { text-indent: 0; }
  .range-body { display: flex; flex-direction: column; margin-top: 3rem; }
  .range-name { display: none; }
  .range-pic { order: 2; width: 62%; align-self: flex-end; margin-top: 3rem; }
  .range-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .range-table th { grid-column: 1 / -1; width: auto; }
  .range-table th:empty { display: none; }
  .range-table tr.g > td { padding-top: 0.2rem; }
  .range-table tbody tr:first-child > th { padding-top: 0; }
}

/* motion: each title line rises from behind its own baseline, then the pictures and the sentence follow */
@media (prefers-reduced-motion: no-preference) {
  .js .hl-in { animation: hl-rise 1000ms var(--ease-expo) both; animation-delay: 150ms; }
  .js .hl + .hl .hl-in { animation-delay: 260ms; }
  .js .hero-text { animation: hl-fade 900ms var(--ease-out) both; animation-delay: 520ms; }
  .js .hero-photo img { animation: photo-in 1600ms var(--ease-soft) both; }
  .js [data-reveal] { transition-delay: calc(var(--i, 0) * 80ms); }
  .js .work-item[data-reveal] { transform: translateY(64px); transition-duration: 900ms, 1100ms; }
  .js .work-item[data-reveal].is-in { transform: none; }
  .range-pic img { transition: transform 900ms var(--ease-soft); }
  @media (hover: hover) and (pointer: fine) { .range-pic:hover img { transform: scale(1.03); } }
  .range-pic { overflow: hidden; }
}
@keyframes hl-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hl-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes photo-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }