#work { padding-block: 30px 90px; padding-inline: 0; }
.rooms-head { display: flex; justify-content: space-between; align-items: baseline; padding-inline: var(--gutter); color: var(--faint); }
.rooms-head h2 { font-weight: 500; }
.stage { padding-top: 44px; }
/* Wide screens: waves down the left, the panel on the right. The panel sits
   straight after the selected wave in the page, so the Tab key reaches its
   link; the grid is what moves it across to the right-hand column. */
.js .stage { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(5, 116px) 1fr; align-items: start; }
.js .waves { display: contents; }
.js .wave { grid-column: 1; }
.js .panel { grid-column: 2; grid-row: 1 / -1; }

/* Row geometry. Each wave's centre line is 78px down its row (48 + half of 60)
   and rows are 116px apart, so the midpoint between the wave above and the
   wave below is 20px down the row. The label box is 46px tall, so its top is
   at 20 - 23 = -3px: each name's middle sits exactly between its two waves. */
.wave { position: relative; display: block; width: 100%; height: 116px; color: var(--c); }
.wave svg.line { position: absolute; left: 0; top: 48px; width: 100%; height: 60px; overflow: visible; }
.wave svg.line path { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .5; transition: opacity .4s ease, stroke-width .4s ease; }
.wave .lab { position: absolute; left: var(--gutter); top: -3px; height: 46px; display: flex; align-items: center; gap: 18px; transition: transform .4s ease; }
.wave .n { font-size: 11px; letter-spacing: .2em; opacity: .75; }
.wave .name { display: flex; align-items: center; gap: 14px; white-space: nowrap; color: var(--cream); transition: color .4s ease; }
.wave .word { display: block; }
.wave:hover svg.line path, .wave[aria-pressed="true"] svg.line path { opacity: 1; stroke-width: 3; }
.wave:hover .lab, .wave[aria-pressed="true"] .lab { transform: translateX(12px); }
.wave:hover .name, .wave[aria-pressed="true"] .name { color: var(--c); }

/* Each product's name in its own typeface. "Your problem?" stays in the house serif. */
.f-mum { font-family: 'Gilda Display', Georgia, serif; font-size: 32px; letter-spacing: .02em; }
.f-mum i { font-style: normal; color: var(--c); margin: 0 .03em; }
.f-braid { font-family: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif; font-size: 35px; }
.f-braid small { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: .62em; font-style: italic; opacity: .8; }
.f-overflight { font-family: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; font-weight: 500; font-size: 27px; letter-spacing: .16em; text-transform: uppercase; }
.f-cream { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 33px; letter-spacing: -.005em; }
.f-invite { font-family: var(--serif); font-weight: 300; font-size: 34px; letter-spacing: -.01em; }

/* The small mark before each product name, drawn in the wave's colour. */
.wave .mark { width: 33px; height: 33px; flex: none; color: var(--c); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.wave .mark .solid { fill: currentColor; stroke: none; }
.wave .mark.glyph { width: 31px; height: 31px; stroke-width: 1.4; }
.wave:focus-visible { outline-offset: -4px; }

/* Shown only when JavaScript is unavailable: the same words the panel would show. */
.fallback { padding: 0 var(--gutter) 26px; max-width: 60ch; color: var(--soft); }
.fallback .caps { color: var(--faint); margin-bottom: 6px; }
.fallback a { display: inline-block; margin-top: 8px; color: var(--sand); }
.js .fallback { display: none; }

.panel { --pc: var(--w1); margin-right: var(--gutter); padding: 6px 0 0 36px; border-left: 1px solid var(--pc); position: sticky; top: 24px; transition: border-color .5s ease; }
.panel .label { color: var(--pc); transition: color .5s ease; }
.panel .vis { position: relative; aspect-ratio: 1 / 1; margin: 18px 0 24px; background: var(--navy-2); border-radius: 3px; overflow: hidden; color: var(--pc); }
.panel .vis[data-room="braid"] { aspect-ratio: 4 / 5; }
.panel .vis[data-room="mum"] { aspect-ratio: 4 / 3; }
.panel .title { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.15; margin-bottom: 10px; }
.panel .sentence { font-size: 14px; line-height: 1.7; color: var(--soft); max-width: 38ch; }
.panel a.out { display: inline-block; margin-top: 22px; color: var(--pc); transition: color .5s ease; }
.panel a.out[hidden] { display: none; }

@media (max-width: 860px) {
  #work { padding-bottom: 60px; }
  .js .stage { display: block; }
  .js .waves { display: block; }
  .wave .lab { gap: 12px; }
  .wave .name { gap: 10px; zoom: .86; }
  .panel { position: static; margin: 4px var(--gutter) 34px; padding-left: 20px; }
}