/* Rodi boutique: base layout and brand */
:root {
  --pith: #f3e8e4;
  --pith-deep: #eadad4;
  --aril: #a3213a;
  --rind: #5e1626;
  --shutter: #1e3a33;
  --didot: "GFS Didot", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(1.25rem, 4vw, 3rem);
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(4.25rem + env(safe-area-inset-top, 0px)); background: var(--pith); }
body { margin: 0; background: var(--pith); color: var(--shutter); font-family: var(--sans); font-weight: 350; font-size: 1.0625rem; line-height: 1.62; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--didot); font-weight: 400; letter-spacing: -0.01em; color: inherit; }
p { margin: 0 0 1.1em; }
a { color: inherit; }
img, video { display: block; max-width: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--aril); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 60; background: var(--shutter); color: var(--pith); padding: .6rem 1rem; text-decoration: none; }
.skip:focus { top: calc(1rem + env(safe-area-inset-top, 0px)); }

/* masthead */
.masthead { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: calc(4.25rem + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gut) 0; background: rgba(243, 232, 228, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(30, 58, 51, .12); transform: translateY(-105%); opacity: 0; pointer-events: none; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
.masthead[data-show], .masthead:focus-within { transform: none; opacity: 1; pointer-events: auto; }
.mark { display: inline-flex; align-items: center; text-decoration: none; color: var(--shutter); }
.mark svg { display: block; height: 2.35rem; width: auto; overflow: visible; }
.masthead nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); font-size: .95rem; font-weight: 450; }
.masthead nav a { position: relative; text-decoration: none; padding: .45rem 0; }
.masthead nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.masthead nav a:hover::after { transform: scaleX(1); }
.masthead .masthead__call { color: var(--aril); font-weight: 550; }

/* hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; background: var(--pith-deep); }
.hero__film { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.hero__poster img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.hero__video { opacity: 0; transition: opacity .9s ease; }
.hero__video[data-playing] { opacity: 1; }
.hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(243,232,228,.55) 0%, rgba(243,232,228,0) 16%), radial-gradient(95% 95% at 0% 100%, rgba(243,232,228,.95) 0%, rgba(243,232,228,.74) 38%, rgba(243,232,228,0) 68%); }
.hero__inner { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(1.75rem, 6vh, 3.5rem); display: grid; grid-template-columns: minmax(0, 40rem); justify-content: start; row-gap: clamp(1rem, 2.4vh, 1.6rem); }
.hero__word { margin: 0; color: var(--shutter); will-change: transform; line-height: 1; }
.hero__mark { display: block; width: clamp(15rem, min(38vw, 66vh), 36rem); height: auto; overflow: hidden; }
.hero__mark .hl { transform-box: fill-box; animation: rodi-rise 1.15s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 95ms + 250ms); }
.hero__mark .hf { transform-box: fill-box; transform-origin: 50% 92%; animation: rodi-fruit 1.1s cubic-bezier(.3, 1.45, .5, 1) both; animation-delay: 380ms; }
@keyframes rodi-rise { from { transform: translateY(112%); } to { transform: none; } }
@keyframes rodi-fruit { from { transform: translateY(14%) scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
.hero__greek { display: block; font-size: clamp(1.4rem, 2.3vw, 2.15rem); line-height: 1; color: var(--aril); margin: .7rem 0 0 .4rem; letter-spacing: .03em; }
.hero__copy { will-change: transform; padding-bottom: .5rem; }
.hero__copy p { font-size: 1.06rem; line-height: 1.55; margin-bottom: 1.4rem; max-width: 27rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.75rem; }

/* CTA: swing tag */
.tagbtn { position: relative; display: inline-flex; align-items: center; padding: .95rem 1.45rem .95rem 2.35rem; background: var(--aril); color: var(--pith); font-weight: 550; font-size: 1rem; letter-spacing: .01em; text-decoration: none; clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%); transform-origin: 17px 50%; transition: transform .7s cubic-bezier(.3, 1.8, .45, 1), background-color .3s ease; }
.tagbtn::before { content: ""; position: absolute; left: 15px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--pith); }
.tagbtn:hover { transform: rotate(-5deg); background: var(--rind); }
.tagbtn:active { transform: rotate(-2deg) scale(.98); }
.hero__call { display: inline-grid; text-decoration: none; line-height: 1.2; }
.hero__call span { font-size: .85rem; font-weight: 450; opacity: .8; }
.hero__call strong { font-family: var(--didot); font-weight: 400; font-size: 1.35rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: .1rem; transition: background-size .35s ease; }
.hero__call:hover strong { background-size: 100% 2px; color: var(--aril); }

/* shop */
.shop { position: relative; z-index: 0; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; max-width: 1320px; margin: 0 auto; padding: clamp(5rem, 12vw, 10rem) var(--gut); }
.shop__text h2 { font-size: clamp(2.5rem, 5.2vw, 4.6rem); line-height: 1.02; margin: 0 0 2rem; max-width: 12ch; }
.shop__text p { max-width: 34rem; }
.shop .shop__name { font-family: var(--didot); font-size: 1.4rem; line-height: 1.3; color: var(--aril); margin-top: 1.75rem; }
.shop__stack { position: relative; min-height: clamp(30rem, 60vw, 46rem); }
.shop__ghost { position: absolute; right: -1.5rem; top: -3.5rem; z-index: 0; font-family: var(--didot); font-size: clamp(8rem, 21vw, 19rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(163, 33, 58, .38); pointer-events: none; user-select: none; will-change: transform; }
.shop__stack figure { position: absolute; overflow: hidden; will-change: transform; }
.shop__stack img { width: 100%; height: 100%; object-fit: cover; }
.shop__street { left: 4%; top: 2%; width: 60%; aspect-ratio: 896 / 1200; z-index: 1; }
.shop__counter { right: 0; bottom: 0; width: 46%; aspect-ratio: 1; z-index: 2; box-shadow: 0 0 0 10px var(--pith), 0 30px 50px -30px rgba(30, 58, 51, .5); }

/* edit / rail */
.edit { position: relative; overflow: hidden; isolation: isolate; background: var(--pith-deep); padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(5rem, 10vw, 9rem); }
.edit__fruit { position: absolute; z-index: -1; right: 2vw; top: 18%; width: clamp(12rem, 22vw, 20rem); opacity: .95; pointer-events: none; will-change: transform; }
.edit__fruit svg { width: 100%; height: auto; display: block; }
.edit__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; max-width: 1320px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); padding: 0 var(--gut); }
.edit__head h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; margin: 0; max-width: 13ch; }
.edit__head p { max-width: 25rem; margin: 0; }
.cat { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; max-width: 1320px; margin: 0 auto clamp(4rem, 8vw, 6.5rem); padding: 0 var(--gut); }
.cat:last-child { margin-bottom: 0; }
.cat:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
.cat:nth-of-type(even) .cat__head { order: 2; }
.cat__head { padding-top: 3.2rem; }
.cat__head h3 { font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1.02; margin: 0 0 .8rem; }
.cat__head p { margin: 0; font-size: .98rem; line-height: 1.55; max-width: 17rem; }
.rail { position: relative; }
.rail__bar { position: relative; z-index: 1; height: 12px; margin: 0 -1.4rem; border-radius: 6px; background: linear-gradient(180deg, #f3dca8 0%, #d6b071 28%, #b48743 62%, #7d5a26 100%); box-shadow: 0 13px 14px -10px rgba(40, 30, 20, .5), inset 0 1px 0 rgba(255, 255, 255, .55); }
.rail__bar::before, .rail__bar::after { content: ""; position: absolute; top: -8px; width: 11px; height: 28px; border-radius: 3px; background: linear-gradient(90deg, #6e4f22 0%, #c9a35c 35%, #f0d59a 50%, #a87c3c 72%, #5f431b 100%); box-shadow: 0 6px 10px -4px rgba(40, 30, 20, .5); }
.rail__bar::before { left: 14px; }
.rail__bar::after { right: 14px; }
.rail__items { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.6rem); align-items: start; }
.hang { --r: -1.1deg; position: relative; margin-top: 23px; padding: 9px 9px 0; background: #fbf8f3; box-shadow: 0 1px 1px rgba(40, 30, 20, .12), 0 18px 28px -18px rgba(40, 30, 20, .55); transform: rotate(var(--r)); transform-origin: 50% -29px; transition: transform 1.2s cubic-bezier(.25, 1.6, .4, 1); }
.hang:nth-child(2) { --r: .8deg; }
.hang:nth-child(3) { --r: -.4deg; }
.cat:nth-of-type(even) .hang:nth-child(1) { --r: .6deg; }
.cat:nth-of-type(even) .hang:nth-child(2) { --r: -1deg; }
.cat:nth-of-type(even) .hang:nth-child(3) { --r: .9deg; }
.hang:hover { transform: rotate(calc(var(--r) + 1.8deg)); }
.clip { position: absolute; z-index: 3; top: -44px; left: 50%; width: 30px; height: 56px; margin-left: -15px; overflow: visible; }
.hang__frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--pith); }
.hang__frame img, .visit__front img { position: absolute; left: 0; top: calc(var(--f) * -100%); width: 100%; height: calc(100% + var(--f) * 200%); object-fit: cover; will-change: transform; }
.hang__cap { margin: 0; padding: .7rem .25rem .85rem; font-size: .9rem; line-height: 1.35; }

/* voices */
.voices { position: relative; overflow: hidden; isolation: isolate; background: var(--shutter); color: var(--pith); padding: clamp(5rem, 11vw, 9rem) var(--gut); }
.voices__palm { position: absolute; z-index: -1; right: -14%; top: -8%; width: min(125vw, 1600px); height: auto; opacity: .14; pointer-events: none; will-change: transform; }
.voices h2 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); line-height: 1.04; max-width: 1320px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); }
.voices ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.voice { will-change: transform; }
.voice:nth-child(2) { margin-top: 4.5rem; }
.voice:nth-child(3) { margin-top: 1.75rem; }
.voice blockquote { margin: 0; }
.voice blockquote p { font-family: var(--didot); font-size: clamp(1.35rem, 1.95vw, 1.8rem); line-height: 1.32; margin: 0; }
.voice blockquote::before { content: "\201C"; display: block; font-family: var(--didot); font-size: 5rem; line-height: .55; color: #e38a9a; margin-bottom: .5rem; }
.voice figcaption { margin-top: 1.4rem; font-size: .95rem; font-weight: 500; letter-spacing: .02em; display: flex; align-items: center; gap: .75rem; }
.voice figcaption::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .6; }

/* visit */
.visit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; max-width: 1320px; margin: 0 auto; padding: clamp(5rem, 11vw, 9rem) var(--gut); }
.visit__front { position: relative; overflow: hidden; aspect-ratio: 1200 / 896; }
.visit h2 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 1.02; margin: 0 0 1.1rem; max-width: 11ch; }
.visit .visit__status { display: inline-flex; align-items: center; gap: .6rem; min-height: 1.6em; margin: 0 0 1.75rem; font-weight: 500; }
.visit__status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: rgba(30, 58, 51, .35); }
.visit__status[data-open="true"]::before { background: #3f8a5f; box-shadow: 0 0 0 4px rgba(63, 138, 95, .18); }
.visit__status[data-open="false"]::before { background: var(--aril); }
.visit__address { display: grid; margin-bottom: 1.9rem; text-decoration: none; font-family: var(--didot); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.22; }
.visit__address span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.visit__address:hover { color: var(--aril); }
.hours { width: 100%; max-width: 27rem; border-collapse: collapse; margin: 0 0 2.2rem; font-variant-numeric: tabular-nums; font-size: 1rem; }
.hours th, .hours td { padding: .55rem 0; border-bottom: 1px solid rgba(30, 58, 51, .16); font-weight: 350; text-align: left; }
.hours td { text-align: right; }
.hours tr[data-today] th, .hours tr[data-today] td { color: var(--aril); font-weight: 600; }
.hours em { font-style: normal; font-weight: 400; font-size: .85rem; margin-left: .4rem; opacity: .85; }
.visit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.mapbtn { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.3rem .85rem 1rem; border: 1px solid var(--shutter); text-decoration: none; font-weight: 500; transition: background-color .3s ease, color .3s ease; }
.mapbtn svg { width: 1.25rem; height: 1.25rem; color: var(--aril); transition: transform .45s cubic-bezier(.3, 1.8, .45, 1); }
.mapbtn:hover { background: var(--shutter); color: var(--pith); }
.mapbtn:hover svg { transform: translateY(-4px); }
.visit__phone { font-family: var(--didot); font-size: 1.5rem; text-decoration: none; border-bottom: 1px solid currentColor; line-height: 1.2; }
.visit__phone:hover { color: var(--aril); }

/* footer */
.foot { background: var(--rind); color: var(--pith); padding: clamp(4rem, 8vw, 6rem) var(--gut) 2rem; overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2rem; max-width: 1320px; margin: 0 auto; font-size: .98rem; }
.foot .mark { color: var(--pith); }
.foot .mark svg { height: 2.6rem; }
.foot__lede { margin-top: 1rem; max-width: 16rem; opacity: .85; }
.foot .foot__h { font-family: var(--sans); font-size: .85rem; font-weight: 550; letter-spacing: .04em; margin: 0 0 .7rem; opacity: .7; }
.foot a { text-decoration: none; }
.foot__grid a:hover { text-decoration: underline; text-underline-offset: .2em; }
.foot .foot__word { font-family: var(--didot); font-size: clamp(6rem, 22vw, 21rem); line-height: .78; letter-spacing: -.02em; max-width: 1320px; margin: clamp(3rem, 6vw, 5rem) auto 0; color: rgba(243, 232, 228, .93); }
.foot .foot__note { max-width: 1320px; margin: 2.25rem auto 0; font-size: .82rem; opacity: .72; }
.foot__note a { text-decoration: underline; text-underline-offset: .2em; }
.foot .foot__word svg { display: block; width: min(100%, 64rem); height: auto; color: var(--pith); }

/* responsive */
@media (max-width: 960px) {
  .shop, .visit { grid-template-columns: 1fr; }
  .shop__stack { min-height: 118vw; }
  .voices ul { grid-template-columns: 1fr; }
  .voice:nth-child(n) { margin-top: 0; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .cat, .cat:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 0; }
  .cat > * { min-width: 0; }
  .cat:nth-of-type(even) .cat__head { order: 0; }
  .cat__head { padding: 0 var(--gut); }
  .cat__head p { max-width: 30rem; }
  .rail__bar { display: none; }
  .rail__items { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(64vw, 20rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); padding: 20px var(--gut) 2rem; background: linear-gradient(180deg, #f3dca8 0%, #d6b071 28%, #b48743 62%, #7d5a26 100%) 0 8px / 100% 12px no-repeat local; scrollbar-width: none; }
  .rail__items::-webkit-scrollbar { display: none; }
  .hang { scroll-snap-align: start; }
}
@media (max-aspect-ratio: 4/5) {
  .hero__poster img, .hero__video { object-position: 50% 45%; }
  .hero__veil { background: linear-gradient(180deg, rgba(243,232,228,.55) 0%, rgba(243,232,228,0) 14%), linear-gradient(0deg, rgba(243,232,228,.97) 0%, rgba(243,232,228,.88) 34%, rgba(243,232,228,.5) 50%, rgba(243,232,228,0) 64%); }
  .hero__mark { width: clamp(14rem, 66vw, 25rem); }
}
@media (max-width: 520px) {
  .masthead nav { gap: 1rem; font-size: .9rem; }
  .mark svg { height: 1.9rem; }
  .hero__copy p { font-size: 1rem; }
  .foot__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__mark .hl, .hero__mark .hf { animation: none; }
  .hero__video { display: none; }
  .tagbtn, .hang, .mapbtn svg, .masthead { transition: none; }
  [data-speed], [data-hero-speed], [data-inner] { transform: none !important; }
}

/* Rodi boutique: interactive features */
/* ===================== Rodi v2: interactive layer ===================== */
html.is-locked, html.is-locked body { overflow: hidden; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
[lang="el"] .hero__greek { display: none; }

/* masthead tools */
.masthead__nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); font-size: .95rem; font-weight: 450; margin-left: auto; margin-right: clamp(1rem, 2.4vw, 2rem); }
.masthead__nav a { position: relative; text-decoration: none; padding: .45rem 0; }
.masthead__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.masthead__nav a:hover::after { transform: scaleX(1); }
.masthead__tools { display: flex; align-items: center; gap: .9rem; }
.masthead__tools .masthead__call { color: var(--aril); font-weight: 550; text-decoration: none; font-size: .95rem; }
.langbtn { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; font-size: .82rem; font-weight: 550; letter-spacing: .04em; border: 1px solid rgba(30, 58, 51, .35); border-radius: 999px; padding: 0 .7rem; transition: background-color .25s, color .25s; }
.langbtn:hover { background: var(--shutter); color: var(--pith); }
.fitbtn { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .9rem; border-radius: 999px; background: var(--shutter); color: var(--pith); font-size: .9rem; font-weight: 500; }
.fitcount { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--aril); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1; }
.fitcount.bump { animation: rodi-bump .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes rodi-bump { 40% { transform: scale(1.45); } }

/* hero top controls (visible while the bar is hidden) */
.hero__top { position: absolute; z-index: 2; top: calc(1rem + env(safe-area-inset-top, 0px)); right: var(--gut); display: flex; align-items: center; gap: .75rem; }
.langbtn--hero { background: rgba(243, 232, 228, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* story rings */
.ring { display: grid; justify-items: center; gap: .5rem; width: 5.6rem; text-align: center; }
.ring__img { position: relative; display: block; width: 4.6rem; height: 4.6rem; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #A3213A, #E38A9A, #C9A35C, #5E1626, #A3213A); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.ring__img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--pith); background: var(--pith-deep); }
.ring:hover .ring__img, .ring:focus-visible .ring__img { transform: scale(1.06) rotate(-4deg); }
.ring__label { font-size: .8rem; line-height: 1.25; font-weight: 500; }
.ring--hero { width: auto; grid-auto-flow: column; gap: .55rem; align-items: center; padding: .3rem .85rem .3rem .3rem; border-radius: 999px; background: rgba(243, 232, 228, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ring--hero .ring__img { width: 2.6rem; height: 2.6rem; padding: 2px; }
.ring--hero .ring__img img { border-width: 2px; }
.ring--hero .ring__label { font-size: .85rem; }

/* lookbook strip */
.lookbook { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut) clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
.lookbook__head h2 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.02; margin: 0 0 .6rem; }
.lookbook__head p { margin: 0; }
.lookbook__rings { list-style: none; margin: 0; padding: .5rem 0; display: flex; gap: 1.1rem; justify-content: space-between; }

/* edit: prints become buttons */
.hang { cursor: pointer; outline-offset: 6px; }
.hang.is-unclip { animation: rodi-unclip .55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rodi-unclip { 35% { transform: rotate(calc(var(--r) + 7deg)) translateY(6px); } }
.hang__frame::after { content: ""; position: absolute; inset: -20%; pointer-events: none; background: var(--palm) no-repeat 70% 0 / 160% auto; filter: brightness(0) blur(2px); opacity: 0; transform: translate3d(-6%, -4%, 0) rotate(-3deg); transition: opacity .8s ease; }
.hang__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, rgba(255, 236, 205, 0) 30%, rgba(255, 236, 205, .28) 50%, rgba(255, 236, 205, 0) 70%) no-repeat; background-size: 250% 100%; background-position: 120% 0; opacity: 0; transition: opacity .8s ease; }
.hang.is-live .hang__frame::after, .hang:hover .hang__frame::after { opacity: .16; animation: rodi-leaf 7s ease-in-out infinite alternate; }
.hang.is-live .hang__frame::before, .hang:hover .hang__frame::before { opacity: 1; animation: rodi-light 7s ease-in-out infinite alternate; }
@keyframes rodi-leaf { to { transform: translate3d(4%, 3%, 0) rotate(2deg); } }
@keyframes rodi-light { to { background-position: -20% 0; } }
.hang__cap { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.hang__cap .addmini { flex: none; display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin: -.4rem -.2rem -.4rem 0; border-radius: 50%; color: var(--shutter); transition: background-color .2s, color .2s; }
.hang__cap .addmini:hover { background: var(--shutter); color: var(--pith); }
.hang__cap .addmini[aria-pressed="true"] { background: var(--aril); color: #fff; }

/* occasions */
.occ { max-width: 1320px; margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) var(--gut); }
.occ__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; align-items: end; margin-bottom: 2rem; }
.occ__head h2 { grid-column: 1; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; margin: 0; max-width: 14ch; }
.occ__head p { grid-column: 1; margin: 0; max-width: 34rem; }
.stylebtn { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: inline-flex; align-items: center; gap: .55rem; min-height: 3.2rem; padding: 0 1.4rem; border-radius: 999px; background: var(--aril); color: #fff; font-weight: 550; box-shadow: 0 14px 26px -16px rgba(163, 33, 58, .9); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), background-color .25s; }
.stylebtn:hover { transform: translateY(-2px); background: var(--rind); }
.occ__tabs { display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none; padding: .25rem 0 1rem; margin-bottom: 1rem; scroll-snap-type: x proximity; }
.occ__tabs::-webkit-scrollbar { display: none; }
.occ__tabs button { flex: none; min-height: 2.75rem; padding: 0 1.15rem; border-radius: 999px; border: 1px solid rgba(30, 58, 51, .3); font-size: .95rem; scroll-snap-align: start; transition: background-color .25s, color .25s, border-color .25s; }
.occ__tabs button[aria-selected="true"] { background: var(--shutter); border-color: var(--shutter); color: var(--pith); }
.occ__panel { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.occ__note { font-family: var(--didot); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.3; margin: 0 0 1.4rem; }
.occ__looks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.6rem); }
.mini { display: block; width: 100%; text-align: left; }
.mini__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--pith-deep); box-shadow: 0 16px 26px -20px rgba(40, 30, 20, .6); }
.mini__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.mini:hover .mini__img img { transform: scale(1.04); }
.mini__name { display: block; margin-top: .65rem; font-size: .9rem; line-height: 1.35; }
.occ.is-swap .occ__panel { animation: rodi-fadeup .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes rodi-fadeup { from { opacity: 0; transform: translateY(12px); } }

/* buttons used in sheets and panels */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.1rem; padding: 0 1.3rem; border-radius: 999px; font-weight: 550; font-size: .98rem; text-decoration: none; transition: background-color .25s, color .25s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.btn--fill { background: var(--shutter); color: var(--pith); }
.btn--fill:hover { background: #142a25; }
.btn--red { background: var(--aril); color: #fff; }
.btn--red:hover { background: var(--rind); }
.btn--line { border: 1px solid var(--shutter); color: var(--shutter); }
.btn--line:hover { background: var(--shutter); color: var(--pith); }
.btn--ghost { color: var(--shutter); text-decoration: underline; text-underline-offset: .25em; padding: 0 .6rem; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* gift studio */
.gift { background: var(--pith-deep); }
.gift > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.gift { padding: clamp(5rem, 10vw, 8rem) var(--gut); }
.gift__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.gift__intro h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; margin: 0; max-width: 12ch; }
.gift__intro p { margin: 0; }
.gift__studio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.gift__preview { perspective: 1200px; }
.gcard { --g-bg: var(--rind); --g-ink: #F6E7DD; --g-accent: #E9C98F; position: relative; aspect-ratio: 1.6; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 140% at 85% 10%, rgba(255, 255, 255, .14), transparent 55%), var(--g-bg); color: var(--g-ink); box-shadow: 0 40px 60px -36px rgba(40, 20, 20, .7), inset 0 0 0 1px rgba(255, 255, 255, .12); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), background-color .5s; will-change: transform; }
.gcard[data-design="birthday"] { --g-bg: #F7EDE9; --g-ink: var(--shutter); --g-accent: var(--aril); }
.gcard[data-design="thanks"] { --g-bg: var(--shutter); --g-ink: #F3E8E4; --g-accent: #E38A9A; }
.gcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%); background-size: 250% 100%; background-position: var(--shine, 120%) 0; pointer-events: none; }
.gcard__fruit { position: absolute; left: -4%; bottom: -10%; width: 50%; height: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .25)); transform: rotate(-8deg); }
.gcard__text { position: absolute; right: 7%; top: 10%; bottom: 10%; width: 55%; display: flex; flex-direction: column; justify-content: center; text-align: right; }
.gcard__text p { margin: 0; overflow-wrap: anywhere; }
.gcard__greet { font-family: var(--didot); font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--g-accent); }
.gcard__amount { font-family: var(--didot); font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; margin-top: .35rem !important; }
.gcard__to, .gcard__from { font-size: clamp(.78rem, 1.3vw, .95rem); opacity: .85; }
.gcard__to { margin-top: .6rem !important; }
.gcard__msg { font-family: var(--didot); font-size: clamp(.9rem, 1.5vw, 1.1rem); line-height: 1.3; margin: .3rem 0 !important; }
.gcard__brand { position: absolute; left: 6%; top: 8%; color: var(--g-ink); }
.gcard__brand svg { display: block; height: clamp(1.3rem, 2.4vw, 1.9rem); width: auto; }
.gift__form { display: grid; gap: 1.3rem; }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { width: 100%; padding: 0; margin-bottom: .55rem; font-size: .85rem; font-weight: 550; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-grid; place-items: center; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid rgba(30, 58, 51, .3); font-size: .95rem; transition: background-color .2s, color .2s, border-color .2s; }
.chips input:checked + span { background: var(--shutter); border-color: var(--shutter); color: var(--pith); }
.chips input:focus-visible + span { outline: 2px solid var(--aril); outline-offset: 3px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.field { display: grid; gap: .4rem; font-size: .85rem; font-weight: 550; }
.field--wide { grid-column: 1 / -1; }
.field input, .field textarea { font: inherit; font-weight: 350; font-size: 1rem; color: var(--shutter); background: #FBF8F5; border: 1px solid rgba(30, 58, 51, .25); border-radius: 12px; padding: .8rem .9rem; min-height: 3rem; resize: none; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--aril); outline-offset: 1px; border-color: transparent; }
.gift__form .btn { justify-self: start; }
.gift__note { margin: -.4rem 0 0; font-size: .85rem; opacity: .8; }

/* visit: photo or illustrated map */
.visit__media { position: relative; }
.seg { position: absolute; z-index: 2; top: 1rem; left: 1rem; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(243, 232, 228, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 20px -14px rgba(40, 30, 20, .6); }
.seg button { min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; font-size: .88rem; font-weight: 500; }
.seg button[aria-selected="true"] { background: var(--shutter); color: var(--pith); }
.visit__map { display: block; aspect-ratio: 1200 / 896; overflow: hidden; }
.visit__map[hidden] { display: none; }
.map { display: block; width: 100%; height: 100%; }
.map text { font-family: var(--sans); }
.map__street { font-size: 24px; font-weight: 500; fill: var(--shutter); letter-spacing: .02em; }
.map__street--soft { fill: #5d7a63; }
.map__sea { font-family: var(--didot) !important; font-size: 40px; fill: #5f8378; }
.map__n { font-size: 15px; font-weight: 600; fill: var(--shutter); }
.map__label { font-family: var(--didot) !important; font-size: 24px; fill: #F3E8E4; }
.map__cap { font-size: 20px; fill: rgba(30, 58, 51, .75); }
.map__pulse { transform-origin: center; transform-box: fill-box; animation: rodi-pulse 2.4s ease-out infinite; }
@keyframes rodi-pulse { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

/* bottom dock (phones) */
.dock { position: fixed; z-index: 45; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .35rem; border-radius: 22px; background: rgba(243, 232, 228, .9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 18px 40px -18px rgba(30, 30, 20, .55), inset 0 0 0 1px rgba(30, 58, 51, .08); transform: translateY(calc(100% + 2rem)); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.dock[data-show] { transform: none; }
.dock a, .dock button { position: relative; display: grid; justify-items: center; align-content: center; gap: .2rem; min-height: 3.4rem; border-radius: 16px; font-size: .7rem; font-weight: 550; color: var(--shutter); text-decoration: none; }
.dock a:active, .dock button:active { background: rgba(30, 58, 51, .08); }
.dock .ico { width: 1.35rem; height: 1.35rem; }
.dock .dock__fit { background: var(--shutter); color: var(--pith); }
.dock .fitcount { position: absolute; top: .3rem; right: calc(50% - 1.45rem); min-width: 1.15rem; height: 1.15rem; font-size: .65rem; }

/* sheet: bottom sheet on phones, side drawer on desktop */
.sheet { position: fixed; inset: 0; z-index: 80; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(24, 20, 18, .45); opacity: 0; transition: opacity .4s ease; }
.sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--pith); border-radius: 26px 26px 0 0; padding: 0 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 60px -20px rgba(20, 15, 10, .5); transform: translateY(100%); transition: transform .5s cubic-bezier(.2, .85, .2, 1); outline: none; }
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__panel.is-dragging { transition: none; }
.sheet__grab { position: sticky; top: 0; z-index: 2; display: grid; place-items: center; height: 1.6rem; margin: 0 -1.25rem; background: var(--pith); }
.sheet__grab span { width: 2.6rem; height: 5px; border-radius: 3px; background: rgba(30, 58, 51, .22); }
.sheet__close { position: absolute; z-index: 3; top: .55rem; right: .7rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: rgba(243, 232, 228, .9); }
.sheet__body { padding-top: .4rem; }
.sheet__body h2 { font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.05; margin: 0 0 .6rem; padding-right: 2.5rem; }
.sheet__lede { margin: 0 0 1.2rem; }
.sheet__actions { display: grid; gap: .6rem; margin-top: 1.2rem; }

/* piece card */
.pc__img { margin: 0 -1.25rem 1.1rem; aspect-ratio: 4 / 5; max-height: 58vh; overflow: hidden; background: var(--pith-deep); }
.pc__img img { width: 100%; height: 100%; object-fit: cover; animation: rodi-zoomin 1s cubic-bezier(.2, .8, .2, 1); }
@keyframes rodi-zoomin { from { transform: scale(1.08); } }
.pc__cat { margin: 0 0 .25rem; font-size: .85rem; font-weight: 550; color: var(--aril); }
.pc__note { margin: 0 0 1.1rem; }
.pc__label { margin: 0 0 .5rem; font-size: .85rem; font-weight: 550; }
.sizes { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sizes li { min-width: 2.75rem; min-height: 2.5rem; display: grid; place-items: center; padding: 0 .7rem; border: 1px solid rgba(30, 58, 51, .25); border-radius: 10px; font-size: .9rem; }

/* fitting room list */
.fitlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.fitlist li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .55rem; border-radius: 14px; background: #FBF8F5; }
.fitlist img { width: 4.2rem; height: 5.2rem; object-fit: cover; border-radius: 8px; }
.fitlist .nm { font-family: var(--didot); font-size: 1.1rem; line-height: 1.2; }
.fitlist .ct { display: block; font-size: .8rem; opacity: .75; margin-top: .15rem; }
.fitlist .rm { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; }
.fitlist .rm:hover { background: rgba(30, 58, 51, .08); }
.empty { text-align: center; padding: 1.5rem 0 .5rem; }
.empty svg { width: 3rem; height: 3rem; color: var(--aril); }
.pickrow { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .2rem 0 .8rem; margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.pickrow::-webkit-scrollbar { display: none; }
.pick { flex: none; display: grid; place-items: center; min-height: 3.1rem; min-width: 4.4rem; padding: .3rem .8rem; border-radius: 14px; border: 1px solid rgba(30, 58, 51, .25); font-size: .88rem; line-height: 1.2; text-align: center; }
.pick[aria-pressed="true"] { background: var(--shutter); border-color: var(--shutter); color: var(--pith); }
.label { display: block; margin: 1rem 0 .5rem; font-size: .85rem; font-weight: 550; }
.done { text-align: center; padding: 1rem 0; }
.done .tick { width: 4rem; height: 4rem; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--shutter); color: var(--pith); font-size: 1.8rem; }

/* quiz and votes */
.steps { display: flex; gap: .35rem; margin: 0 0 1rem; }
.steps span { height: 4px; flex: 1; border-radius: 2px; background: rgba(30, 58, 51, .15); }
.steps span.on { background: var(--aril); }
.opts { display: grid; gap: .6rem; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.6rem; padding: .8rem 1.1rem; border-radius: 16px; background: #FBF8F5; border: 1px solid rgba(30, 58, 51, .12); text-align: left; font-size: 1.02rem; transition: border-color .2s, transform .3s; }
.opt:hover { border-color: var(--shutter); }
.opt:active { transform: scale(.985); }
.opt .sw { display: flex; gap: 4px; }
.opt .sw i { width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.looks3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.vote { position: relative; display: block; width: 100%; text-align: left; border-radius: 12px; padding: 4px; border: 2px solid transparent; }
.vote[aria-pressed="true"] { border-color: var(--aril); }
.vote[aria-pressed="true"]::after { content: "✓"; position: absolute; top: .5rem; right: .5rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--aril); color: #fff; font-size: .9rem; }

/* story mode */
.story { position: fixed; inset: 0; z-index: 70; background: #120e0c; color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .35s ease; }
.story.is-open { opacity: 1; }
.story[hidden], .sheet[hidden] { display: none !important; }
.story__backdrop { position: absolute; inset: 0; overflow: hidden; }
.story__backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.1) brightness(.55); transform: scale(1.2); }
.story__frame { position: relative; width: 100%; height: 100%; overflow: hidden; transform: scale(.96); transition: transform .5s cubic-bezier(.2, .85, .2, 1); touch-action: none; user-select: none; -webkit-user-select: none; }
.story.is-open .story__frame { transform: none; }
.story__stage, .story__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.story__img { object-fit: cover; }
.story__img.kb { animation: rodi-kb 6s ease-out both; }
@keyframes rodi-kb { from { transform: scale(1.1); opacity: .2; } 12% { opacity: 1; } to { transform: scale(1); } }
.story__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 45%, rgba(10, 6, 6, .78) 100%); }
.story__bars { position: absolute; z-index: 3; top: calc(.7rem + env(safe-area-inset-top, 0px)); left: .8rem; right: .8rem; display: flex; gap: 4px; }
.story__bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.story__bars i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.story__close { position: absolute; z-index: 4; top: calc(1.4rem + env(safe-area-inset-top, 0px)); right: .6rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: #fff; }
.story__text { position: absolute; z-index: 3; left: 1.25rem; right: 1.25rem; bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.story__kicker { margin: 0 0 .3rem; font-size: .8rem; font-weight: 550; opacity: .85; }
.story__title { font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1; margin: 0 0 .5rem; color: #fff; }
.story__line { margin: 0 0 1rem; font-size: 1rem; opacity: .92; max-width: 28rem; }
.story__tags { display: flex; flex-wrap: wrap; gap: .5rem; pointer-events: auto; }
.story__tags button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .25rem .9rem .25rem .3rem; border-radius: 999px; background: rgba(243, 232, 228, .94); color: var(--shutter); font-size: .85rem; font-weight: 500; }
.story__tags img { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; }
.story__arrow { display: none; }

/* toast, cursor, curtain */
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(6.2rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; padding: .8rem 1.2rem; border-radius: 999px; background: var(--shutter); color: var(--pith); font-size: .9rem; font-weight: 500; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); transition: opacity .3s, transform .4s cubic-bezier(.2, .85, .2, 1); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cursor { position: fixed; z-index: 60; top: 0; left: 0; pointer-events: none; padding: .45rem .85rem; border-radius: 999px; background: var(--shutter); color: var(--pith); font-size: .8rem; font-weight: 550; opacity: 0; transform: translate3d(-100px, -100px, 0) scale(.6); transition: opacity .25s, transform .12s linear; display: none; }
.cursor.is-on { opacity: 1; }
.curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: grid; place-items: center; background:
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(90deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 4px), #EADAD4; transform: translateY(101%); }
.curtain svg { width: 5rem; height: 5rem; opacity: 0; transition: opacity .3s; }
.curtain.in { transform: none; transition: transform .45s cubic-bezier(.7, 0, .3, 1); }
.curtain.in svg { opacity: 1; }
.curtain.out { transform: translateY(-101%); transition: transform .55s cubic-bezier(.7, 0, .3, 1); }

/* ---------- desktop ---------- */
@media (min-width: 961px) {
  .sheet__panel { left: auto; top: 0; bottom: 0; width: min(500px, 92vw); max-height: none; border-radius: 26px 0 0 26px; padding: 0 2rem 2rem; transform: translateX(100%); }
  .sheet__grab { display: none; }
  .sheet__close { top: 1rem; right: 1rem; }
  .sheet__body { padding-top: 1.2rem; }
  .pc__img { margin: 0 -2rem 1.3rem; max-height: 62vh; }
  .pickrow { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; }
  .story__frame { width: min(440px, 92vw); height: min(92vh, 800px); border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
  .story__arrow { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; border-radius: 50%; background: rgba(243, 232, 228, .92); color: var(--shutter); transition: transform .3s; }
  .story__arrow:hover { transform: scale(1.08); }
  .story__arrow--prev { left: calc(50% - min(220px, 46vw) - 4.6rem); }
  .story__arrow--next { right: calc(50% - min(220px, 46vw) - 4.6rem); }
  .cursor { display: block; }
}

/* ---------- phones and tablets ---------- */
@media (max-width: 960px) {
  .masthead__nav, .masthead__tools .masthead__call, .fitbtn { display: none; }
  .masthead__tools { margin-left: auto; }
  .dock { display: grid; }
  .foot { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
  .lookbook { grid-template-columns: 1fr; gap: 1.2rem; padding-left: 0; padding-right: 0; }
  .lookbook__head { padding: 0 var(--gut); }
  .lookbook__rings { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: .5rem var(--gut) .5rem; gap: .9rem; scroll-snap-type: x proximity; }
  .lookbook__rings::-webkit-scrollbar { display: none; }
  .lookbook__rings li { scroll-snap-align: start; }
  .occ__head { grid-template-columns: 1fr; }
  .occ__head h2, .occ__head p { grid-column: 1; }
  .stylebtn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
  .occ__tabs { margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); }
  .occ__panel { grid-template-columns: 1fr; gap: 1rem; }
  .occ__looks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) .5rem; }
  .occ__looks::-webkit-scrollbar { display: none; }
  .occ__looks li { scroll-snap-align: start; }
  .gift__intro, .gift__studio { grid-template-columns: 1fr; }
  .gift__form .btn { justify-self: stretch; }
  .fields { grid-template-columns: 1fr 1fr; }
  .hero__top { left: var(--gut); justify-content: space-between; }
}
@media (max-width: 420px) {
  .fields { grid-template-columns: 1fr; }
  .gcard__text { width: 58%; right: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .hang.is-unclip, .hang__frame::after, .hang__frame::before, .map__pulse, .story__img.kb, .fitcount.bump, .occ.is-swap .occ__panel, .pc__img img { animation: none !important; }
  .sheet__panel, .sheet__backdrop, .story, .story__frame, .dock, .toast, .gcard { transition: none !important; }
}

/* ---- polish after phone testing ---- */
.fitcount[hidden] { display: none !important; }
html.is-locked .toast { bottom: auto; top: calc(1rem + env(safe-area-inset-top, 0px)); }
.hang__cap .addmini .i-on { display: none; }
.hang__cap .addmini[aria-pressed="true"] .i-off { display: none; }
.hang__cap .addmini[aria-pressed="true"] .i-on { display: block; }
.visit__map { position: relative; }
.visit__mapcap { position: absolute; left: .9rem; bottom: .8rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(243, 232, 228, .9); color: var(--shutter); font-size: .78rem; text-decoration: none; }
.masthead .mark { min-height: 2.75rem; }
@media (pointer: coarse) { .hang__cap .addmini { width: 2.75rem; height: 2.75rem; margin: -.6rem -.45rem -.6rem 0; } }
@media (max-width: 960px) {
  .masthead .masthead__nav { display: none; }
  .dock { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); }
  .dock a, .dock button { font-size: .68rem; }
}