/* The panel accordion (20 Sep 2026) — hover or tap a panel and it opens. */
.pnl { background: var(--bg); color: var(--ink); padding: clamp(40px, 6vw, 80px) var(--edge) clamp(50px, 7vw, 90px); }
.pnl-head { display: grid; gap: 10px; margin-bottom: clamp(20px, 3vw, 34px); }
.pnl-head small { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.pnl-head h2 { margin: 0; font: 400 clamp(30px, 4.6vw, 62px)/1 'Anton', var(--display); letter-spacing: .01em; text-transform: uppercase; }

.pnl-row { display: flex; gap: 10px; height: min(78vh, 680px); }
.pnl-card { position: relative; flex: 1 1 0; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--tint);
  cursor: pointer; transition: flex-grow .65s var(--ease); outline: none; }
.pnl-card.is-open { flex-grow: 5.2; cursor: default; }
.pnl-card:focus-visible { box-shadow: 0 0 0 3px var(--ink); }

.pnl-photo { position: absolute; inset: 0; }
.pnl-photo picture, .pnl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  transition: transform .8s var(--ease), opacity .5s var(--ease), filter .5s var(--ease); }
/* closed: the photo takes the panel's colour, like the reference she sent */
.pnl-photo img { mix-blend-mode: luminosity; opacity: .88; }
.pnl-card.is-open .pnl-photo img { mix-blend-mode: normal; opacity: 1; transform: scale(1.02); }
/* open: colour on the left for the words, the photo left alone on the right */
.pnl-card::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease);
  background: linear-gradient(90deg, var(--tint) 0 26%, color-mix(in srgb, var(--tint) 78%, transparent) 46%, color-mix(in srgb, var(--tint) 20%, transparent) 72%, transparent); }
.pnl-card.is-open::after { opacity: 1; }

/* closed: the number and the name running up the side */
.pnl-side { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-rows: auto 1fr; justify-items: center; padding: 18px 6px;
  color: #fff; text-shadow: 0 2px 16px rgba(0,18,25,.5); transition: opacity .4s var(--ease); }
.pnl-side b { font: 400 22px 'Anton', var(--display); letter-spacing: .04em; }
.pnl-side i { writing-mode: vertical-rl; transform: rotate(180deg); align-self: end; font: 600 var(--tiny) var(--mono); font-style: normal;
  letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; overflow: hidden; max-height: 70%; }
.pnl-card.is-open .pnl-side { opacity: 0; }

/* open: the whole card */
.pnl-open { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; gap: 12px; padding: clamp(22px, 3vw, 46px);
  max-width: 46ch; color: #fff; opacity: 0; transform: translateY(10px); transition: opacity .5s .15s var(--ease), transform .5s .15s var(--ease); pointer-events: none; }
.pnl-card.is-open .pnl-open { opacity: 1; transform: none; pointer-events: auto; }
.pnl-num { font: 400 clamp(26px, 2.4vw, 34px)/1 'Anton', var(--display); opacity: .9; }
.pnl-open h3 { margin: 0; font: 400 clamp(28px, 3.4vw, 52px)/1.02 'Anton', var(--display); text-transform: uppercase; letter-spacing: .01em; }
.pnl-open small { font: 600 var(--tiny) var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.pnl-open p { margin: 4px 0 6px; font-size: 15px; line-height: 1.6; opacity: .92; max-width: 42ch; }
.pnl-btn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--navy);
  text-decoration: none; border-radius: 999px; padding: 12px 22px; font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; }
.pnl-btn i { font-style: normal; transition: transform .3s var(--ease); }
.pnl-btn:hover i { transform: translateX(4px); }
.pnl-price { position: absolute; left: clamp(22px, 3vw, 46px); bottom: clamp(22px, 3vw, 46px); font: 700 18px var(--body); }
.pnl-foot { margin: 22px 0 0; font: 600 var(--tiny) var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .7; }

@media (max-width: 900px) {
  .pnl-row { flex-direction: column; height: auto; gap: 8px; }
  .pnl-card { flex: none; height: 132px; transition: height .55s var(--ease); }
  .pnl-card.is-open { flex: none; height: min(66vh, 480px); }
  .pnl-side { grid-template-rows: auto; grid-auto-flow: column; justify-items: start; align-items: center; gap: 14px; padding: 0 18px; }
  .pnl-side i { writing-mode: horizontal-tb; transform: none; align-self: center; max-height: none; }
  .pnl-open { max-width: none; }
  .pnl-card::after { background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 75%, transparent), var(--tint)); }
}

/* The showcase (20 Sep 2026): one design at a time on its own colour. */
.shw { position: relative; background: var(--bg); color: var(--ink); padding: clamp(24px, 3vw, 40px) 0 clamp(34px, 4vw, 54px); overflow: hidden; }
.shw-top { text-align: center; font: 600 var(--tiny) var(--mono); letter-spacing: .34em; text-transform: uppercase; opacity: .8; padding-bottom: clamp(10px, 2vw, 22px); }
.shw-stage { position: relative; height: min(76vh, 660px); }
.shw-slide { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: end;
  padding: clamp(70px, 9vh, 120px) var(--edge) 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease); }
.shw-slide.is-on { opacity: 1; visibility: visible; }
.shw-word { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap;
  font: 400 clamp(54px, 11vw, 170px)/1 'Anton', var(--display); letter-spacing: .01em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tint) 72%, var(--bg)); }
.shw-side { position: absolute; top: 12%; font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.shw-side.left { left: clamp(16px, 5vw, 70px); } .shw-side.right { right: clamp(16px, 5vw, 70px); }
.shw-fig { position: relative; z-index: 2; min-height: 0; display: grid; align-items: end; justify-items: center; }
.shw-fig picture { display: block; }
.shw-fig img { height: auto; max-height: min(52vh, 440px); width: auto; max-width: min(84vw, 760px); object-fit: contain; }
.is-cut .shw-fig img { filter: drop-shadow(0 30px 50px rgba(0,18,25,.3)); }
/* a photo that is not a cut-out gets a frame instead of floating in the air */
.shw-slide:not(.is-cut) .shw-fig img { border-radius: 14px; object-fit: cover; width: min(38vw, 420px); height: min(52vh, 440px); box-shadow: 0 30px 60px -24px rgba(0,18,25,.5); }
.shw-under { position: relative; z-index: 3; display: grid; justify-items: center; gap: 14px; padding: 18px 0 6px; }
.shw-copy { width: min(74ch, 86vw); margin: 0; text-align: center; font-size: 14px; line-height: 1.65; opacity: .85; }
.shw-more { cursor: pointer;
  border: 1px solid currentColor; background: none; color: inherit; border-radius: 999px; padding: 11px 26px;
  font: 700 var(--tiny) var(--body); letter-spacing: .24em; text-transform: uppercase; transition: background .3s, color .3s; }
.shw-more:hover { background: var(--ink); color: var(--bg); }
.shw-arrow { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: inherit; font-size: 24px; cursor: pointer; }
.shw-arrow.prev { left: clamp(10px, 2vw, 26px); } .shw-arrow.next { right: clamp(10px, 2vw, 26px); }
.shw-arrow:hover { background: var(--ink); color: var(--bg); }
.shw-rail { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(30px, 8vw, 90px); margin-top: clamp(16px, 2vw, 26px); }
.shw-line { position: absolute; left: 12%; right: 12%; height: 1px; background: color-mix(in srgb, var(--ink) 26%, transparent); }
.shw-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  background: var(--bg); cursor: pointer; transition: transform .35s var(--ease), background .35s; }
.shw-dot.on { background: var(--ink); transform: scale(1.5); }

/* the white sheet */
.shw-sheets { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.shw-sheet { position: absolute; inset: clamp(12px, 4vw, 60px); background: #fff; color: #14130F; border-radius: 10px; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; box-shadow: 0 40px 90px -30px rgba(0,18,25,.6); pointer-events: auto;
  animation: shwIn .45s var(--ease) both; }
.shw-sheet[hidden] { display: none; }
@keyframes shwIn { from { opacity: 0; transform: translateY(18px); } }
.shw-x { position: absolute; z-index: 3; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,18,25,.06); cursor: pointer; font-size: 16px; }
.shw-gal { position: relative; background: #F4F1EA; }
.shw-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s var(--ease); }
.shw-shot.is-on { opacity: 1; }
.shw-shot picture, .shw-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.shw-dots { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; }
.shw-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; }
.shw-dots button.on { background: #fff; }
.shw-info { padding: var(--edge); overflow-y: auto; }
.shw-info h4 { margin: 0 0 10px; font: 400 clamp(26px, 2.6vw, 40px)/1 'Anton', var(--display); text-transform: uppercase; }
.shw-info > p { margin: 0 0 22px; font-size: 14px; line-height: 1.7; color: #555; }
.shw-info dl { margin: 0 0 24px; display: grid; gap: 10px; }
.shw-info dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #ECE8DF; }
.shw-info dt { font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #8A857B; padding-top: 3px; }
.shw-info dd { margin: 0; font-size: 14px; }
.shw-btn { display: inline-flex; align-items: center; gap: 10px; background: #14130F; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 13px 24px; font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; }
.shw-btn i { font-style: normal; }

@media (max-width: 900px) {
  .shw-stage { height: min(70vh, 540px); }
  .shw-word { font-size: clamp(30px, 9vw, 60px); }
  .shw-copy { bottom: 66px; font-size: 13px; }
  .shw-arrow { width: 42px; height: 42px; }
  .shw-sheet { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; inset: 10px; }
}

/* ---- the showcase on a phone (23 Sep 2026, mobile + iPad check) ----
   The slide carried clamp(60px, 8vw, 120px) of side padding, so a 375px screen
   left 255px of room — but the caption asks for min(74ch, 86vw), which is
   322px there. The paragraph ran 68px past its column and the last words of
   every line were cut off by .shw's overflow. The caption now takes the width
   it is actually given, and the side padding is a phone's, not a desktop's. */
@media (max-width: 700px) {
  .shw-slide { padding-left: 18px; padding-right: 18px; }
  .shw-copy { width: min(74ch, 100%); }
  /* the round arrows sat on the model; on a phone they belong at the edges */
  .shw-arrow.prev { left: 6px; } .shw-arrow.next { right: 6px; }
}

/* A long design name ("Never Again, Never Forget") ran 145px past a phone and
   73px past an iPad with white-space: nowrap. On both it wraps and stays
   centred instead; the desktop keeps its single line. (23 Sep 2026) */
@media (max-width: 900px) {
  .shw-word { white-space: normal; width: calc(100% - 36px); text-align: center;
    text-wrap: balance; line-height: 1.04; }
}