/* Kumi: one alignment system, restrained decoration, native scroll construction. */
:root { --grid: rgba(127,151,194,.18); --section: clamp(64px,7vw,104px); }
.page-home { --max: 1440px; }
.op { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); align-items: stretch; max-width: var(--max); margin: 0 auto; padding: calc(var(--header-h) + 40px) var(--gutter) 64px; column-gap: clamp(32px,5vw,72px); color: var(--ink); }
.op__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
.op__eyebrow { margin-bottom: 24px; letter-spacing: .1em; font-size: .625rem; }
.op__line { font: 400 clamp(3rem,4.5vw,4.7rem)/1.04 var(--sans); letter-spacing: -.05em; }
.op__intro { max-width: 32ch; margin-top: 24px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }
.op__cta { margin-top: 28px; }
.op__cta::after { display: none; }
.op__media { position: relative; aspect-ratio: 1.04; min-width: 0; overflow: hidden; background: var(--paper-2); }
.op__media picture, .op__media img { width: 100%; height: 100%; }
.op__media img { object-fit: cover; object-position: 66% 56%; }
.co { max-width: var(--max); margin: 0 auto; padding: 64px var(--gutter) 80px; border-top: 1px solid var(--rule); }
.sheet { border: 0; background: transparent; }
.sheet__draw { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); gap: clamp(32px,5vw,72px); align-items: center; }
.sheet__title { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sheet__name { margin-top: 16px; font: 400 clamp(2.5rem,3.4vw,3.6rem)/1.08 var(--sans); letter-spacing: -.04em; }
.sheet__summary { max-width: 33ch; margin-top: 20px; color: var(--ink-soft); font-size: 1.0625rem; }
.sheet__facts { width: 100%; margin-top: 24px; }
.sheet__facts > div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: .9375rem; }
.sheet__facts dt { color: var(--ink-soft); }
.sheet__details { margin: 12px 0 16px; font-size: .625rem; letter-spacing: .1em; }
.sheet__img { overflow: hidden; aspect-ratio: 1.04; background: var(--paper-2); }
.sheet__img picture, .sheet__img img { width: 100%; height: 100%; }
.sheet__img img { object-fit: cover; object-position: 51% 60%; }
.ob { width: 100%; border-top: 1px solid var(--rule); padding-top: 20px; }
.ob__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.ob__buy > [hidden], .ob__buy > :empty { display: none; }
.ob__price { flex: 1; font-size: 1.125rem; }
.ob__label { display: block; font-size: .5625rem; margin-bottom: 6px; color: var(--ink-soft); }
.ob__options, .ob__act, .ob__status, .ob__feedback, .ob__error { flex: 1 1 100%; min-width: 0; }
.ob__act .btn { width: 100%; justify-content: space-between; }
.ob__status, .ob__feedback, .ob__error { font-size: .9375rem; }
.ob__qty .stepper { height: 44px; }
.ob__qty .stepper__btn { width: 44px; }
.ob__price.is-unpriced { color: var(--ink-soft); }
.fg { position: relative; border-top: 1px solid var(--rule); background: var(--paper-2); }
.fg__stage { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); align-items: center; gap: clamp(32px,5vw,72px); padding: 64px var(--gutter); }
.fg__text { min-width: 0; }
.fg__label { margin-bottom: 16px; }
.fg__statement { max-width: 15ch; font: 400 clamp(2.5rem,3.4vw,3.6rem)/1.08 var(--sans); letter-spacing: -.04em; }
.fg__statement .w { color: var(--ink); }
.fg__sub { max-width: 31ch; margin-top: 24px; color: var(--ink-soft); }
.fg__step { margin-top: 32px; color: var(--ink-soft); letter-spacing: .07em; }
.fg__panel { position: relative; min-width: 0; aspect-ratio: 1.04; border-color: var(--rule-strong); }
.fg__fit { position: absolute; inset: 44px 20px 32px; display: grid; place-items: center; container-type: size; }
.fg__drawing { position: relative; aspect-ratio: var(--ar); width: min(100cqw, calc(100cqh * var(--ar))); }
.fg__drawing svg { width: 100%; height: 100%; }
.fg__vert, .fg__gloss { display: none; }
.fg__toggle { margin-top: 28px; }
.fg__toggle-label { color: var(--ink-soft); }
.fg__toggle-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fg__btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 400 .625rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fg__btn[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.dw--fig .dw-face, .dw--fig .dw-grain { vector-effect: non-scaling-stroke; stroke-width: 1.15px; }
.dw--fig .dw-grain { stroke-width: .85px; }
.dw--fig .dw-line-thin { vector-effect: non-scaling-stroke; stroke-width: .6px; }
.dw-guide { fill: none; stroke: var(--ink); stroke-width: 1px; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: .6; }
.ann--desk { display: none; }
@media (min-height: 560px) {
  .js.motion .fg[data-mode='scroll'] { height: 460svh; }
  .js.motion .fg[data-mode='scroll'] .fg__stage { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); min-height: 0; padding-top: 36px; padding-bottom: 36px; }
  .js.motion .fg[data-mode='scroll'] .fg__panel { height: 100%; min-height: 0; aspect-ratio: auto; }
}
@media (max-width: 799px) {
  .op, .sheet__draw, .fg__stage { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .op { padding-top: calc(var(--header-h) + 36px); padding-bottom: 40px; }
  .op__line { font-size: clamp(2.65rem,7vw,4.2rem); }
  .op__eyebrow { margin-bottom: 20px; }
  .op__intro { margin-top: 20px; max-width: 42ch; }
  .op__intro br { display: none; }
  .op__cta { margin-top: 24px; }
  .op__media { aspect-ratio: 4 / 3; }
  .op__media img { object-position: 67% 60%; }
  .co { padding-top: 40px; padding-bottom: 48px; }
  .sheet__fig { grid-row: 1; }
  .sheet__img { aspect-ratio: 4 / 3; }
  .sheet__name, .fg__statement { font-size: clamp(2.1rem,5vw,3rem); }
  .sheet__facts { max-width: 480px; }
  .ob { max-width: 480px; }
  .fg__stage { padding: 40px var(--gutter); }
  .fg__statement { max-width: 25ch; }
  .fg__panel { aspect-ratio: 1.05; }
  .ann__line { width: 30px !important; }
  .ann__txt { font-size: .5625rem; }
  .ann--n .ann__txt { top: -50px; }
  .ann--wl .ann__line { width: 44px !important; }
  .ann--wl .ann__txt { right: 50px; }
  .ann--se .ann__txt { left: 30px; top: 10px; }
  .ann--mob-n { --rot: -90deg; }
  .ann--mob-n .ann__txt { left: 0; right: auto; top: -50px; transform: translateX(-50%); }
  .fg__step { margin-top: 16px; font-size: .625rem; }
  @media (min-height: 560px) {
    .js.motion .fg[data-mode='scroll'] { height: 420svh; }
    .js.motion .fg[data-mode='scroll'] .fg__stage { grid-template-rows: auto minmax(0,1fr); gap: 18px; padding-top: 20px; padding-bottom: 20px; }
    .js.motion .fg[data-mode='scroll'] .fg__statement { font-size: clamp(1.6rem,4vw,2.5rem); }
    .js.motion .fg[data-mode='scroll'] .fg__sub { display: none; }
    .js.motion .fg[data-mode='scroll'] .fg__fit { inset: 42px 12px 28px; }
  }
}

.ann { position: absolute; width: 0; height: 0; pointer-events: none; --lo: 1; --rot: 0deg; }
.ann[data-phase='b'] { --lo: 0; }
.ann__dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: var(--lo); }
.ann__line { position: absolute; left: 0; top: 0; width: 56px; height: 1px; background: var(--ink); transform-origin: 0 50%; transform: rotate(var(--rot)) scaleX(var(--lo)); }
.ann__txt { position: absolute; white-space: nowrap; font-size: 0.625rem; background: var(--paper); padding: 2px 5px; opacity: calc(var(--lo) * 2 - 1); }
.ann--ne { --rot: -32deg; } .ann--ne .ann__txt { left: 44px; top: -46px; }
.ann--nw { --rot: -148deg; } .ann--nw .ann__txt { right: 42px; top: -46px; }
.ann--w { --rot: 180deg; } .ann--w .ann__txt { right: 62px; top: -10px; }
.ann--e { --rot: 18deg; } .ann--e .ann__line { width: 64px; } .ann--e .ann__txt { left: 66px; top: 10px; }
.ann--sw { --rot: 148deg; } .ann--sw .ann__txt { right: 42px; top: 24px; }
.ann--se { --rot: 32deg; } .ann--se .ann__txt { left: 44px; top: 24px; }
/* Straight up, and a long leader to the left: for labels that must clear the silhouette. */
.ann--n { --rot: -90deg; } .ann--n .ann__line { width: 58px; } .ann--n .ann__txt { left: 0; top: -78px; transform: translateX(-50%); }
.ann--wl { --rot: 180deg; } .ann--wl .ann__line { width: 96px; } .ann--wl .ann__txt { right: 102px; top: -10px; }


.sp { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 112px) var(--gutter) var(--section); }
.sp__head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.sp__item { color: var(--ink-soft); }
.sp__list { margin: 0; }
.sp__row { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.sp__row dt { color: var(--ink-soft); padding-top: 4px; }
.sp__row dd { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.35; }
.sp__next { margin-top: clamp(28px, 3vw, 44px); }
.sp__next .btn { min-width: min(100%, 320px); }
@media (min-width: 720px) {
  .sp__row { grid-template-columns: minmax(10rem, 28%) minmax(0, 1fr); }
}


/* Keep the product introduction ahead of its image on narrow screens. */
@media (max-width: 799px) {
  .sheet__draw { gap: 0; }
  .sheet__title { display: contents; }
  .sheet__title > .label { order: 1; }
  .sheet__name { order: 2; }
  .sheet__summary { order: 3; }
  .sheet__fig { grid-row: auto; order: 4; margin-top: 24px; }
  .sheet__facts { order: 5; }
  .sheet__details { order: 6; }
  .ob { order: 7; }
}

/* Homepage: a product experience, with shopping on Collection. */
.page-experience .op { position: relative; display: flex; align-items: flex-end; max-width: none; min-height: 640px; height: 100svh; padding: 0; overflow: hidden; color: var(--cream); background: #554b3d; }
.page-experience .op__media { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.page-experience .op__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(26,30,25,.65),rgba(26,30,25,.16) 60%,rgba(26,30,25,.03)),linear-gradient(0deg,rgba(26,30,25,.24),transparent 50%); }
.page-experience .op__media img { object-position: 64% 56%; }
.page-experience .op__copy { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: calc(var(--header-h) + 48px) var(--gutter) clamp(64px,9svh,120px); }
.page-experience .op__eyebrow { margin-bottom: 28px; font-size: .6875rem; }
.page-experience .op__line { max-width: 12ch; font-size: clamp(3.75rem,6.5vw,6.8rem); line-height: 1.02; font-weight: 300; }
.op__discover { display: inline-flex; align-items: center; gap: 44px; min-height: 48px; margin-top: 32px; text-decoration: none; border-bottom: 1px solid currentColor; font-size: .9375rem; }
.op__discover span { font-size: 1.5rem; transition: transform .3s var(--ease); }
.op__discover:hover span { transform: translateY(4px); }
.op__note { position: absolute; right: var(--gutter); bottom: 32px; z-index: 1; font-size: .5625rem; letter-spacing: .1em; }
.intro { max-width: 980px; margin: 0 auto; padding: clamp(88px,12vw,160px) var(--gutter); text-align: center; }
.intro h2 { margin: 24px auto; font: 300 clamp(2.6rem,5vw,5.2rem)/1.06 var(--sans); letter-spacing: -.045em; }
.intro > p:not(.label) { max-width: 48ch; margin: 0 auto; font-size: clamp(1.0625rem,1.5vw,1.375rem); color: var(--ink-soft); }
.intro__continue { display: inline-flex; align-items: center; gap: 28px; min-height: 48px; margin-top: 28px; font-size: .875rem; text-underline-offset: 6px; }
.page-experience .fg { border: 0; }
.page-experience .fg__panel { border: 0; }
.page-experience .fg__statement { font-weight: 300; }
.everyday { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); align-items: center; gap: clamp(32px,5vw,72px); max-width: 1440px; margin: 0 auto; padding: clamp(64px,8vw,120px) var(--gutter); }
.everyday__copy h2 { margin: 24px 0; font: 300 clamp(2.6rem,4.2vw,4.5rem)/1.06 var(--sans); letter-spacing: -.045em; }
.everyday__copy > p:not(.label) { max-width: 33ch; color: var(--ink-soft); font-size: 1.0625rem; }
.everyday__views { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; }
.everyday__views button { position: relative; min-height: 48px; border: 0; border-bottom: 1px solid transparent; padding: 8px 0; color: var(--ink-soft); background: transparent; font-size: .9375rem; }
.everyday__views button[aria-pressed='true'] { border-bottom-color: var(--ink); color: var(--ink); }
.everyday__media { min-width: 0; }
.everyday__media picture { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.everyday__media img { width: 100%; height: 100%; object-fit: cover; }
.everyday__media figcaption { padding-top: 16px; font-size: .875rem; color: var(--ink-soft); }
.motion .everyday__media figure:not([hidden]) { animation: everyday-in .45s var(--ease); }
@keyframes everyday-in { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.invitation { padding: clamp(72px,10vw,136px) var(--gutter); text-align: center; background: var(--ink); color: var(--cream); }
.invitation h2 { margin: 24px 0; font: 300 clamp(2.6rem,5vw,5rem)/1.05 var(--sans); letter-spacing: -.04em; }
.invitation > p:not(.label) { max-width: 42ch; margin: 0 auto; color: var(--cream-soft); font-size: 1.125rem; }
.invitation .btn { margin-top: 32px; }
.page-experience .ft { border-top: 1px solid var(--cream-rule); }
.page-experience .ft__lead { display: none; }
.page-experience .ft__inner { display: block; }
.page-experience .ft__nav { max-width: 720px; margin-left: auto; }
.shop-intro { max-width: 1440px; margin: 0 auto; padding: calc(var(--header-h) + 56px) var(--gutter) 48px; }
.shop-intro h1 { margin: 20px 0; font: 300 clamp(3rem,5vw,5rem)/1.05 var(--sans); letter-spacing: -.04em; }
.shop-intro > p:not(.label) { color: var(--ink-soft); max-width: 45ch; }
.page-collection .co { padding-top: 48px; }
@media (min-width: 800px) {
  .page-experience .hd[data-tone='dark']:not(.is-solid) { background: transparent; color: var(--cream); box-shadow: none; }
}
@media (max-width: 799px) {
  .page-experience .op { display: flex; flex-direction: column; height: auto; min-height: 100svh; padding-top: var(--header-h); color: var(--ink); background: var(--paper); }
  .page-experience .op__media { position: relative; inset: auto; flex: none; min-height: 280px; height: 54svh; max-height: 600px; order: 0; }
  .page-experience .op__media::after { display: none; }
  .page-experience .op__media img { object-position: 66% 59%; }
  .page-experience .op__copy { flex: 1; justify-content: center; order: 1; padding: 28px var(--gutter) 36px; }
  .page-experience .op__line { max-width: none; font-size: clamp(2.6rem,7vw,4rem); }
  .page-experience .op__eyebrow { margin-bottom: 18px; font-size: .625rem; }
  .op__discover { margin-top: 20px; gap: 28px; }
  .op__note { display: none; }
  .intro { padding-top: 72px; padding-bottom: 72px; }
  .intro h2 { font-size: clamp(2.4rem,7vw,4rem); }
  .intro h2 br { display: none; }
  .everyday { grid-template-columns: minmax(0,1fr); padding-top: 56px; padding-bottom: 56px; gap: 28px; }
  .everyday__copy h2 { font-size: clamp(2.4rem,7vw,4rem); }
  .everyday__copy h2 br { display: none; }
  .everyday__copy > p:not(.label) { max-width: 42ch; }
  .everyday__media picture { aspect-ratio: 1.1; }
  .everyday__media img { object-position: 54% center; }
  .shop-intro { padding-top: calc(var(--header-h) + 36px); padding-bottom: 32px; }
  .page-collection .co { padding-top: 32px; }
}
@media (min-width: 800px) {
  .page-experience .hd:not(.is-solid) { background: transparent; color: var(--cream); box-shadow: none; }
  .page-experience .op__line { max-width: 16ch; }
  .page-experience .op__media::after { background: linear-gradient(180deg,rgba(22,27,23,.5),transparent 25%),linear-gradient(90deg,rgba(26,30,25,.65),rgba(26,30,25,.16) 60%,rgba(26,30,25,.03)),linear-gradient(0deg,rgba(26,30,25,.24),transparent 50%); }
}