/* Home: the walk (a pinned sideways pass through all eight pieces), the dip (the peak), the making, the close. */

/* ---- the walk ------------------------------------------------------------------------------------- */
.walk { position: relative; --oh: min(56svh, 38rem); }
.walk__stick { position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h) - var(--shelf-h)); overflow: hidden; display: flex; align-items: center; }
.walk__track { position: relative; display: flex; align-items: center; gap: clamp(2rem, 4vw, 4.5rem); width: max-content; min-width: 100%; padding-inline: var(--gutter); will-change: transform; }
.walk__intro { flex: 0 0 clamp(16rem, 21vw, 22rem); display: grid; gap: var(--s5); align-content: center; padding-right: var(--s4); }
.walk__intro h1 { font-size: clamp(2.4rem, 3.9vw, 4.2rem); line-height: 0.98; letter-spacing: -0.05em; }
.walk__intro p { color: var(--ink-soft); max-width: 30ch; }
.walk__intro .btn { justify-self: start; }
.obj { flex: 0 0 auto; width: calc(var(--oh) * 0.8); }
.obj__pic { display: block; height: var(--oh); margin-bottom: var(--s4); transition: transform 0.28s var(--ease); }
.obj__pic .pic, .obj__pic .ph { height: 100%; width: 100%; }
@media (hover: hover) and (pointer: fine) { .obj:hover .obj__pic { transform: translateY(-6px); } }
.walk__end { flex: 0 0 auto; display: grid; gap: var(--s3); padding-inline: var(--s5) var(--s8); align-content: center; }

.walk__row { display: contents; } /* on a phone it becomes the swipeable row, under the intro */
.walk.is-static, html:not(.js) .walk { height: auto !important; }
.walk.is-static .walk__stick, html:not(.js) .walk__stick { position: static; height: auto; overflow-x: auto; scroll-snap-type: x proximity; padding-block: var(--s7); }
.walk.is-static .walk__track, html:not(.js) .walk__track { transform: none !important; }
.walk.is-static .obj, html:not(.js) .obj { scroll-snap-align: center; }

/* ---- the dip: four glazes rise up one vessel (the peak, the longest span) ------------------------------- */
.dip { position: relative; margin-top: var(--section); }
.dip__stick { --tint: #cdbb93; position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h) - var(--shelf-h)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; padding-inline: var(--gutter); gap: var(--s8); background: color-mix(in srgb, var(--tint) 22%, var(--ground)); }
.dip__h { position: absolute; left: var(--gutter); top: var(--s6); font-size: var(--t-lg); letter-spacing: -0.02em; }
.dip__legs { position: relative; display: grid; align-items: center; min-height: 20rem; }
.leg { grid-area: 1 / 1; display: grid; gap: var(--s4); align-content: center; max-width: 34rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s 0.16s; }
.leg.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dip.is-quiet .leg.is-on { opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s 0.4s; }
.leg__n { font-size: clamp(3.4rem, 8vw, 7rem); letter-spacing: -0.06em; line-height: 0.92; }
.leg__note { max-width: 38ch; color: var(--ink-soft); }
.leg__on a { font-weight: 600; }
.leg__on .mono { margin-right: var(--s2); }
.leg__static { display: none; }
/* One piece per glaze. Each photo has a white backdrop and is multiplied onto the tinted ground, so only the piece and its shadow show. */
.dip__vase { position: relative; height: 100%; max-height: 52rem; aspect-ratio: 4 / 5; justify-self: center; overflow-x: visible; overflow-y: clip; }
.dip__p { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: translateY(104%) scale(1.25); will-change: transform; }
.dip__s { width: 100%; height: auto; mix-blend-mode: multiply; }

.dip.is-static, html:not(.js) .dip { height: auto !important; }
.dip.is-static .dip__stick, html:not(.js) .dip__stick { position: static; height: auto; display: block; background: none; padding-block: var(--s9) 0; }
.dip.is-static .dip__h, html:not(.js) .dip__h { position: static; margin-bottom: var(--s6); font-size: var(--t-2xl); }
.dip.is-static .dip__legs, html:not(.js) .dip__legs { display: grid; gap: var(--s8); min-height: 0; }
.dip.is-static .leg, html:not(.js) .leg { grid-area: auto; opacity: 1; visibility: visible; transform: none; grid-template-columns: 1fr 8rem; align-items: center; max-width: none; background: color-mix(in srgb, var(--tint) 22%, var(--ground)); padding: var(--s6); border-radius: var(--r); }
.dip.is-static .leg > *:not(.leg__static), html:not(.js) .leg > *:not(.leg__static) { grid-column: 1; }
.dip.is-static .leg__static, html:not(.js) .leg__static { display: block; grid-column: 2; grid-row: 1 / span 6; }
.dip.is-static .dip__vase, html:not(.js) .dip__vase { display: none; }

/* ---- the making ------------------------------------------------------------------------------------------- */
.making { padding: var(--section) var(--gutter) 0; max-width: var(--maxw); margin-inline: auto; }
.making__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--s3) var(--s8); align-items: end; margin-bottom: var(--s8); }
.making__head h2 { font-size: var(--t-2xl); grid-column: 1; }
.making__head p { grid-column: 2; grid-row: 1; color: var(--ink-soft); max-width: 40ch; }
.making__head .line { grid-column: 2; grid-row: 2; justify-self: start; }
.making__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s8) var(--s6); align-items: start; }
.mk { display: grid; gap: var(--s3); }
.mk .pic, .mk .ph { width: 100%; }
.mk figcaption { display: grid; gap: var(--s1); max-width: 44ch; }
.mk figcaption p { color: var(--ink-soft); font-size: var(--t-sm); }
.mk--1 { grid-column: 1 / 8; }
.mk--2 { grid-column: 9 / 13; margin-top: var(--s9); }
.mk--3 { grid-column: 2 / 7; }
.mk--4 { grid-column: 8 / 13; margin-top: var(--s7); }

/* ---- the close: the shelf, set large, with a plate typeset like a label ---------------------------------------- */
.plate { margin-top: var(--section); background: var(--ink); color: var(--ground); --ink-soft: #b8bbb4; }
.plate .mono, .plate .ref { color: #b8bbb4; }
.plate__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: end; padding: var(--section) var(--gutter); max-width: var(--maxw); margin-inline: auto; }
.plate__label { display: grid; gap: var(--s5); align-self: center; }
.plate__n { font-size: var(--t-2xl); }
.plate__d { display: grid; border-top: 1px solid rgb(223 224 219 / 0.3); }
.plate__d div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid rgb(223 224 219 / 0.3); font-size: var(--t-sm); }
.plate__d dt { font: 500 var(--t-xs) / 1.7 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #b8bbb4; }
.plate__d [data-plate-total] { font-weight: 600; font-size: var(--t-lg); }
.plate__go { color: #b8bbb4; font-size: var(--t-sm); max-width: 30ch; }
.plate .line { color: var(--ground); font-size: var(--t-lg); }
.plate :focus-visible { outline-color: var(--ground); }
.plate__shelf { position: relative; min-height: 15rem; display: flex; align-items: flex-end; flex-wrap: nowrap; padding-bottom: 14px; }
.plate__shelf::after { content: ""; position: absolute; inset: auto 0 9px; height: 6px; background: var(--ground); border-radius: 3px; }
.plate__shelf > li { position: relative; z-index: 1; margin-right: -0.7rem; flex: 0 1 auto; min-width: 0; }
.plate__shelf .unit { width: clamp(4.5rem, 8vw, 8rem); }
.plate__shelf .unit .sil { height: clamp(4.5rem, 8vw, 8rem); filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.35)); }
.plate__shelf .unit:hover, .plate__shelf .unit:focus-visible { transform: translateY(-8px); }
.plate__shelf .ghost { color: transparent; }
.ghost { display: block; width: clamp(3.4rem, 6.4vw, 6.4rem); padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.16s var(--ease), opacity 0.16s var(--ease); opacity: 0.85; }
.ghost svg { height: clamp(3.4rem, 6.4vw, 6.4rem); overflow: visible; }
.ghost svg * { fill: none; stroke: #b8bbb4; stroke-width: 1.2; stroke-dasharray: 3 2.4; vector-effect: non-scaling-stroke; }
.ghost svg path[fill="none"] { stroke-width: 1.2; }
.ghost:hover, .ghost:focus-visible { transform: translateY(-6px); opacity: 1; }
.ghost:hover svg *, .ghost:focus-visible svg * { stroke: var(--ground); stroke-dasharray: none; }

@media (max-width: 1099px) {
  .making__grid { grid-template-columns: minmax(0, 1fr); }
  .dip__stick { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .making__head { grid-template-columns: 1fr; }
  .making__head p, .making__head .line { grid-column: 1; grid-row: auto; }
  .mk--1, .mk--2, .mk--3, .mk--4 { grid-column: 1 / -1; margin-top: 0; }
  .plate__in { grid-template-columns: 1fr; gap: var(--s7); }
}
@media (max-width: 640px) {
  .walk { --oh: min(52svh, 26rem); }
  .walk__intro h1 { font-size: var(--t-2xl); }
  /* Phone: the intro on top, then the pieces as a swipeable row, so the first piece is in view straight away. */
  .walk.is-static .walk__stick, html:not(.js) .walk__stick { display: block; overflow: visible; padding-block: var(--s6) var(--s5); }
  .walk.is-static .walk__track, html:not(.js) .walk__track { display: block; width: auto; min-width: 0; }
  .walk.is-static .walk__intro, html:not(.js) .walk__intro { flex: none; padding: 0 0 var(--s6); }
  .walk.is-static .walk__row, html:not(.js) .walk__row { display: flex; align-items: flex-start; gap: var(--s5); overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: var(--s4); }
  .walk.is-static .obj, html:not(.js) .obj { width: clamp(14rem, 68vw, 19rem); scroll-snap-align: start; }
  .walk.is-static .obj__pic, html:not(.js) .obj__pic { height: auto; }
  .walk.is-static .obj__pic .pic, .walk.is-static .obj__pic .ph, html:not(.js) .obj__pic .pic, html:not(.js) .obj__pic .ph { height: auto; }
  .walk.is-static .walk__end, html:not(.js) .walk__end { padding-inline: var(--s3) var(--gutter); }
  .dip__stick { grid-template-columns: 1fr; }
  .dip.is-static .leg { grid-template-columns: minmax(0, 1fr) 6rem; padding: var(--s5); }
  .plate__shelf { overflow-x: auto; }
}

/* The glaze cards answer to the width of their own column: when it is narrow the piece goes above the words. */
.dip__legs { container-type: inline-size; }
@container (max-width: 25.5rem) {
  .dip.is-static .leg { grid-template-columns: minmax(0, 1fr); }
  .dip.is-static .leg__static { grid-column: 1; grid-row: auto; order: -1; justify-self: start; width: 6.5rem; }
}
.dip.is-static .leg__n { font-size: clamp(2.2rem, 13cqi, 3.4rem); }