/* Rouri — the whole landing is one painted lime wall. Copy lives only on bare plaster;
   the frame, niche, window, shelf and bench are never written over.
   Desktop (≥1080px): the wall is one image and every block is pinned to it in wall percentages.
   Below that: the wall is cut into object-centred slices with the copy between them. */

:root {
  --ink: #2a1e14;
  --ink-2: #4a3727;
  --paint: #6f4126;
  --terra: #87472a;
  --terra-d: #6a341c;
  --cream: #f6eddf;
  --rule: rgba(42, 30, 20, .28);
  --rule-2: rgba(42, 30, 20, .5);
  --err: #8a2a17;
  --stone: #2c2119;
  --f-sign: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-disp: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
  --f-body: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --k: 1;

  /* type, scaled to the wall on desktop */
  --fs-body: clamp(16px, 1.22cqw, 21px);
  --fs-h2: clamp(32px, 2.85cqw, 56px);
  --fs-caps: clamp(11px, .78cqw, 14px);
  --fs-lede: clamp(20px, 1.7cqw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  color: var(--ink);
  font: 400 18px/1.58 var(--f-body);
  background: #d5c0a5 url(../assets/plaster-tile.webp) 0 0 / 300px auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--cream); padding: 10px 16px; }
.skip:focus { left: 12px; }

.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: 0 .75em; opacity: .7; }
.dash { display: inline-block; width: 2.4em; height: 1px; background: currentColor; opacity: .55; }

/* ---------------------------------------------------------------- type */
.eyebrow {
  display: flex; align-items: center; gap: .9em;
  margin: 0 0 .2em;
  font: 500 var(--fs-caps)/1.4 var(--f-sign);
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2);
}
h2 {
  margin: .3em 0 .55em;
  font: 400 var(--fs-h2)/1.04 var(--f-disp);
  letter-spacing: -.005em; color: var(--ink);
  text-wrap: balance;
}
.copy p { font-size: var(--fs-body); margin: 0 0 .85em; max-width: 34em; text-wrap: pretty; }

/* the house name, signwritten straight onto the lime */
.sign {
  margin: .35em 0 .3em;
  font: 500 clamp(54px, 6.2cqw, 128px)/.98 var(--f-sign);
  letter-spacing: .05em;
  color: var(--paint);
  filter: url(#worn);
  mix-blend-mode: multiply;
}
.sign span { display: block; }
.lede { font: italic 400 var(--fs-lede)/1.34 var(--f-disp) !important; color: var(--ink-2); max-width: 23em !important; }

.fig {
  margin: 0; text-align: center;
  font: italic 400 clamp(15px, 1.04cqw, 19px)/1.35 var(--f-disp); color: var(--ink-2);
}
.fig span { font: 500 max(11px, .7em) var(--f-sign); font-style: normal; letter-spacing: .24em; text-transform: uppercase; margin-right: .6em; color: var(--paint); }

.meta { font: 500 var(--fs-caps)/1.6 var(--f-sign) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin: 1.3em 0 1.5em !important; }

/* ---------------------------------------------------------------- actions */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.8em; margin-top: 1.6em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.8em;
  font: 500 clamp(12px, .8cqw, 14px)/1 var(--f-sign); letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream); background: var(--terra); border: 1px solid var(--terra); border-radius: 1px;
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.btn:hover { background: var(--terra-d); border-color: var(--terra-d); }
.btn:active { transform: scale(.98); }
.btn--ghost { color: var(--ink); background: transparent; border-color: var(--rule-2); }
.btn--ghost:hover { background: rgba(42, 30, 20, .07); border-color: var(--ink); }
.btn--sm { min-height: 44px; padding: 0 1.3em; font-size: 12px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: progress; }
.link {
  display: inline-flex; align-items: center; gap: .35em; min-height: 44px;
  font: italic 400 clamp(18px, 1.35cqw, 24px)/1.2 var(--f-disp); color: var(--ink);
  text-decoration: underline 1px; text-underline-offset: .28em; text-decoration-color: var(--rule-2);
  transition: text-decoration-color .25s ease;
}
.link:hover { text-decoration-color: var(--ink); }
.link span { transition: transform .25s var(--ease); }
.link:hover span { transform: translateX(3px); }

/* ---------------------------------------------------------------- hero */
.topnav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 2.1em; margin-bottom: clamp(36px, 6.4cqw, 124px); }
.topnav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 var(--fs-caps)/1 var(--f-sign); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.topnav a:hover { border-bottom-color: var(--ink); }
.topnav .topnav__cta { color: var(--terra-d); }

/* ---------------------------------------------------------------- intro + motto */
.copy--intro { text-align: center; }
.copy--intro .fleuron { display: block; width: 120px; height: 16px; margin: 0 auto 1.8em; color: var(--ink-2); }
.copy .manifesto {
  max-width: 29em; margin: 0 auto;
  font: 400 clamp(24px, 2.05cqw, 40px)/1.36 var(--f-disp); color: var(--ink);
}
.initial { font: 400 1.5em/0 var(--f-sign); color: var(--paint); margin-right: .02em; }
.facts { display: flex; justify-content: center; gap: 1.5em 3.6em; flex-wrap: wrap; margin: 2.4em 0 0; }
.facts div { text-align: center; }
.facts dt { font: 400 clamp(26px, 2.1cqw, 40px)/1.1 var(--f-sign); color: var(--paint); letter-spacing: .06em; }
.facts dd { margin: .2em 0 0; font: italic 400 clamp(16px, 1.1cqw, 20px)/1.3 var(--f-body); color: var(--ink-2); }

.copy--motto { margin: 0; text-align: center; }
.copy .motto { max-width: none; margin: 0; font: italic 300 clamp(44px, 4.3cqw, 84px)/1 var(--f-disp); color: var(--paint); }
.copy .motto__gloss { margin: .6em auto 0; font-style: italic; color: var(--ink-2); max-width: 32em; }

/* ---------------------------------------------------------------- rooms + pantry */
.rooms {
  list-style: none; margin: 1.5em 0 0; padding: 1.1em 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .95em 2em;
  border-top: 1px solid var(--rule);
}
.rooms li { display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline; }
.rooms__n { font: 500 calc(var(--fs-caps) * 1.05)/1 var(--f-sign); color: var(--paint); letter-spacing: .08em; }
.rooms__name { font: 500 calc(var(--fs-body) * 1.24)/1.2 var(--f-disp); }
.rooms__note { grid-column: 2; font: italic 400 calc(var(--fs-body) * .9)/1.3 var(--f-body); color: var(--ink-2); }

.pantry { list-style: none; margin: 1.3em 0 1em; padding: 0; border-top: 1px solid var(--rule); max-width: 36em; }
.pantry li { display: flex; align-items: baseline; gap: 1em; padding: .7em 0; border-bottom: 1px solid var(--rule); }
.pantry__item { flex: 1; font: 500 calc(var(--fs-body) * 1.2)/1.2 var(--f-disp); }
.pantry__item em { display: block; margin-top: .1em; font: italic 400 .74em/1.3 var(--f-body); color: var(--ink-2); }
.pantry__price { font: 400 calc(var(--fs-body) * 1.12)/1 var(--f-body); font-variant-numeric: lining-nums tabular-nums; }

/* ---------------------------------------------------------------- form */
.form { margin-top: 1.3em; font-size: var(--fs-body); }
.field { margin-bottom: .85em; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 0 .8em; }
.form label { display: block; margin-bottom: .3em; font: 500 clamp(11px, .72cqw, 12.5px)/1.3 var(--f-sign); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.form .opt { text-transform: none; letter-spacing: 0; font: italic 400 1.1em var(--f-body); }
.form input, .form select, .form textarea {
  display: block; width: 100%; min-height: 46px; margin: 0; padding: .5em .6em;
  font: 400 max(16px, var(--fs-body))/1.35 var(--f-body); color: var(--ink);
  background: rgba(250, 244, 234, .4); border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.form textarea { resize: vertical; min-height: 64px; }
.form select {
  appearance: none; -webkit-appearance: none; padding-right: 1.8em; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.form input:hover, .form select:hover, .form textarea:hover { background-color: rgba(250, 244, 234, .58); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background-color: rgba(250, 244, 234, .72); border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.form [aria-invalid="true"] { border-bottom-color: var(--err); box-shadow: 0 1px 0 var(--err); }
.copy .field__err { margin: .3em 0 0; font-size: .86em; color: var(--err); }
.copy .field__err:empty { display: none; }
.copy .form__done { margin: 1em 0 0; font: italic 400 1.25em/1.35 var(--f-disp); }
.copy .contact { margin-top: 1.2em; font-size: calc(var(--fs-body) * .92); color: var(--ink-2); }

/* ---------------------------------------------------------------- fixed bar */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 8px clamp(16px, 3vw, 40px);
  background: rgba(224, 209, 186, .86);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid rgba(42, 30, 20, .14);
  transform: translateY(-105%);
  transition: transform .4s var(--ease);
}
.bar.is-shown { transform: none; }
.bar__mark { margin-right: auto; font: 600 17px/1 var(--f-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--paint); text-decoration: none; padding: 12px 0; }
.bar__nav { display: flex; gap: 1.9rem; }
.bar__nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 12px/1 var(--f-sign); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.bar__nav a:hover { color: var(--terra); }
.bar__menu { display: none; }
.sheet { display: none; }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--stone); color: #e9dcc7; padding: 64px clamp(24px, 5vw, 72px) 40px; }
.foot__in { max-width: 1280px; margin: 0 auto; }
.foot__mark { margin: 0 0 .4em; font: 500 26px/1.1 var(--f-sign); letter-spacing: .14em; text-transform: uppercase; color: #e2c7a0; }
.foot__line { margin: 0; font-size: 17px; color: #d9cab3; }
.foot__line a { color: #f1e5d2; text-underline-offset: .2em; text-decoration-color: rgba(241, 229, 210, .4); }
.foot__bot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 2rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(233, 220, 199, .18); font-size: 15px; color: #cdbda5; }
.foot__bot p { margin: 0; }
.foot__bot a.cr-fusco { font-family: 'Jost', system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .24em; color: #e9dcc7; text-decoration: none; }

/* ---------------------------------------------------------------- the curtain */
.cloth {
  position: absolute; left: 65.0298%; top: 54.789%; width: 34.9702%; height: auto;
  transform-origin: 50% 0;
  animation: breeze 9s cubic-bezier(.45, .05, .55, .95) infinite;
  pointer-events: none; user-select: none;
}
/* only ever lean into the room (positive skew): the right edge is the wall's edge */
@keyframes breeze {
  0%, 100% { transform: skewX(0deg); }
  22% { transform: skewX(.26deg); }
  40% { transform: skewX(.07deg); }
  63% { transform: skewX(.34deg); }
  82% { transform: skewX(.09deg); }
}

/* ---------------------------------------------------------------- reveal */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.copy--hero .eyebrow { --d: .15s; }
.copy--hero .lede { --d: 1s; }
.copy--hero .actions { --d: 1.2s; }
@media (prefers-reduced-motion: no-preference) {
  .js .sign {
    -webkit-mask-image: linear-gradient(100deg, #000 45%, transparent 56%); mask-image: linear-gradient(100deg, #000 45%, transparent 56%);
    -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
    -webkit-mask-position: 0 0; mask-position: 0 0;
    animation: paint 1.9s var(--ease) .3s both;
  }
}
@keyframes paint { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

/* ================================================================ DESKTOP: one wall */
@media (min-width: 1080px) {
  .wall {
    position: relative; width: 100%; max-width: 2400px; margin: 0 auto;
    aspect-ratio: 672 / 3696; overflow: hidden;
    container-type: inline-size;
    background: #d5c0a5 url(../assets/wall-1344.webp) top center / 100% auto no-repeat;
  }
  /* fine grain so the 2x upscale reads as plaster, not blur */
  .wall::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .32  0 0 0 0 .24  0 0 0 1.2 -.42'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 220px 220px;
    mix-blend-mode: multiply; opacity: .5;
  }
  .band, .band__art { display: contents; }
  .band__plate { position: absolute; inset: 0; pointer-events: none; }
  .copy, .fig { position: absolute; left: var(--l); right: var(--r); top: var(--t); }
  .copy { scroll-margin-top: 14vh; }
  #reserve { scroll-margin-top: 6vh; }
  .copy--hero { scroll-margin-top: 0; }
}

/* ================================================================ STACKED: slices of wall */
@media (max-width: 1079.98px) {
  :root {
    --fs-body: 17.5px; --fs-h2: clamp(31px, 7.4vw, 44px); --fs-caps: 11.5px; --fs-lede: clamp(20px, 5.4vw, 26px);
  }
  @media (min-width: 600px) { :root { --k: .5; } }

  .bar { transform: none; padding: 6px 10px 6px 18px; gap: 10px; }
  .bar__nav { display: none; }
  .bar__mark { font-size: 15px; }
  .bar__menu {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    background: none; border: 0; color: var(--ink); cursor: pointer;
  }
  .bar__menu-lines, .bar__menu-lines::before { display: block; width: 20px; height: 1px; background: currentColor; transition: transform .25s ease; }
  .bar__menu-lines { position: relative; transform: translateY(-3px); }
  .bar__menu-lines::before { content: ""; position: absolute; top: 7px; }
  .bar__menu[aria-expanded="true"] .bar__menu-lines { transform: translateY(0) rotate(45deg); }
  .bar__menu[aria-expanded="true"] .bar__menu-lines::before { transform: translateY(-7px) rotate(-90deg); }
  .sheet {
    display: flex; flex-direction: column; position: fixed; top: 56px; left: 0; right: 0; z-index: 49;
    padding: 12px 24px 24px; background: rgba(224, 209, 186, .97);
    border-bottom: 1px solid rgba(42, 30, 20, .14); box-shadow: 0 18px 30px -20px rgba(42, 30, 20, .35);
  }
  .sheet[hidden] { display: none; }
  .sheet a { display: flex; align-items: center; min-height: 52px; font: 400 24px/1.1 var(--f-disp); text-decoration: none; border-bottom: 1px solid var(--rule); }

  .wall { container-type: inline-size; overflow-x: clip; padding-top: 56px; }
  .band { display: block; position: relative; --z: calc(1 + (var(--s) - 1) * var(--k)); }
  .band__art {
    position: relative; overflow: hidden;
    height: calc((var(--y1) - var(--y0)) * var(--z) * 550cqw);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  }
  .band__plate {
    position: absolute; width: calc(var(--z) * 100cqw); aspect-ratio: 672 / 3696;
    left: clamp(calc((1 - var(--z)) * 100cqw), calc((.5 - var(--fx) * var(--z)) * 100cqw), 0px);
    top: calc(var(--y0) * var(--z) * -550cqw);
    background: url(../assets/wall-1344.webp) 0 0 / 100% auto no-repeat;
  }
  .copy { position: static; max-width: 36rem; margin: 0 auto; padding: 4px 24px 56px; scroll-margin-top: 64px; }
  .fig { position: static; max-width: 30rem; margin: -18px auto 26px; padding: 0 24px; font-size: 15px; }

  /* hero: the copy sits on the plaster under the olive bough */
  .band--hero { padding-top: 34cqw; min-height: calc(.235 * 550cqw); }
  .band--hero .band__art {
    position: absolute; inset: 0 0 auto 0; height: calc(.235 * 550cqw);
    -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent);
  }
  .copy--hero { position: relative; padding-bottom: 40px; }
  .copy--hero .eyebrow { letter-spacing: .22em; white-space: nowrap; }
  .topnav { display: none; }
  .sign { font-size: clamp(50px, 14.5vw, 96px); margin-top: .25em; }
  .copy--intro { padding-top: 24px; padding-bottom: 72px; }
  .copy--motto { padding-top: 16px; padding-bottom: 64px; }
  .band--reserve .band__art { -webkit-mask-image: linear-gradient(transparent, #000 24%); mask-image: linear-gradient(transparent, #000 24%); }
  .rooms { gap: .9em 1.2em; }
}
@media (max-width: 380px) {
  .rooms { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row .field:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .cloth { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .bar { transition: none; }
}


/* ================================================================ ROURI
   Brand type: Cormorant for display (as on rouri.com), Inter for text and labels. */
:root {
  --ink: #2b2822;
  --ink-2: #4d493f;
  --paint: #5e5a4b;
  --terra: #3a372f;
  --terra-d: #5e5543;
  --cream: #f5efe4;
  --f-sign: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-disp: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-body: clamp(15px, 1.06cqw, 18px);
  --fs-caps: clamp(10.5px, .72cqw, 12.5px);
}
body { font: 400 16px/1.7 var(--f-body); }
.copy p { line-height: 1.72; }
.eyebrow { font-weight: 500; letter-spacing: .22em; }
.topnav a, .bar__nav a { font-weight: 500; letter-spacing: .18em; font-size: var(--fs-caps); }
.btn { font-weight: 500; letter-spacing: .16em; font-size: clamp(11px, .76cqw, 13px); }
.copy .meta { font-weight: 500 !important; letter-spacing: .16em; }
.fig { font-family: var(--f-disp); }
.fig span { font-weight: 500; letter-spacing: .2em; }
.form label { font-weight: 500; letter-spacing: .16em; }
.form .opt { font-family: var(--f-disp); }
.link { font-family: var(--f-disp); }

/* hero: the logo, printed onto the lime */
.logo { margin: .25em 0 .1em; width: clamp(250px, 29cqw, 560px); line-height: 0; }
.logo img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; opacity: .88; }
.copy .tagline { margin: .55em 0 .35em; max-width: none; font: italic 300 clamp(30px, 2.75cqw, 54px)/1.08 var(--f-disp); color: var(--ink); }
.copy .lede { font: 400 var(--fs-body)/1.7 var(--f-body) !important; max-width: 30em !important; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .js .logo {
    -webkit-mask-image: linear-gradient(100deg, #000 45%, transparent 56%); mask-image: linear-gradient(100deg, #000 45%, transparent 56%);
    -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
    -webkit-mask-position: 0 0; mask-position: 0 0;
    animation: paint 1.9s var(--ease) .25s both;
  }
}
.copy--hero .tagline { --d: .8s; }
.copy--hero .lede { --d: 1s; }
.copy--hero .actions { --d: 1.2s; }

.copy .manifesto { font: italic 300 clamp(25px, 2.1cqw, 42px)/1.34 var(--f-disp); max-width: 27em; }
.facts dt { font: italic 400 clamp(22px, 1.7cqw, 32px)/1.15 var(--f-disp); letter-spacing: 0; color: var(--ink); }
.facts dd { font: 500 var(--fs-caps)/1.4 var(--f-sign); letter-spacing: .18em; text-transform: uppercase; font-style: normal; margin-top: .5em; }
.rooms__n { font: italic 400 calc(var(--fs-body) * 1.1)/1 var(--f-disp); color: var(--paint); }
.rooms__name { font: 400 calc(var(--fs-body) * 1.45)/1.15 var(--f-disp); }
.rooms__note { font: 400 calc(var(--fs-body) * .86)/1.4 var(--f-body); }
.copy .motto { font: italic 300 clamp(40px, 3.8cqw, 76px)/1.05 var(--f-disp); color: var(--ink); }
.copy .motto__gloss { font-family: var(--f-disp); font-size: calc(var(--fs-body) * 1.25); }

/* the diary's chapters */
.chapters { list-style: none; margin: 1.2em 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 30em; }
.chapters a { display: flex; align-items: baseline; gap: 1em; min-height: 48px; padding: .55em 0; border-bottom: 1px solid var(--rule); text-decoration: none; font: 400 calc(var(--fs-body) * 1.4)/1.2 var(--f-disp); color: var(--ink); transition: padding-left .3s var(--ease); }
.chapters a::after { content: "→"; margin-left: auto; font-size: .8em; color: var(--ink-2); }
.chapters a:hover { padding-left: .4em; }
.chapters span { min-width: 2em; font: 500 var(--fs-caps)/1 var(--f-sign); letter-spacing: .14em; color: var(--paint); }

/* the collections: photographs pinned to the wall with a strip of tape */
.copy--prints { text-align: center; }
.copy .eyebrow--center { justify-content: center; max-width: none; }
.prints { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4.5cqw, 90px); align-items: start; }
.print { transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg)); transition: transform .5s var(--ease); }
.print a { display: block; text-decoration: none; color: var(--ink); }
.print__paper {
  position: relative; display: block; padding: clamp(7px, .65cqw, 12px); background: #f4eee3;
  box-shadow: -12px 16px 26px -6px rgba(40, 28, 16, .34), -2px 3px 5px rgba(40, 28, 16, .18);
  transition: box-shadow .5s var(--ease);
}
.print__paper::before { /* tape */
  content: ""; position: absolute; top: -12px; left: 50%; width: 38%; height: 26px; transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, rgba(236, 226, 205, .82), rgba(226, 214, 190, .74));
  box-shadow: 0 1px 2px rgba(40, 28, 16, .12);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 100% 4%, 97% 50%, 100% 96%, 93% 100%, 88% 90%, 82% 100%, 0 94%, 3% 50%);
}
.print__paper img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.88) sepia(.08); }
.print__cap { display: block; margin-top: .9em; font: 400 calc(var(--fs-caps) * 1.05)/1.3 var(--f-sign); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.print__cap em { display: block; margin-bottom: .15em; font: italic 400 clamp(22px, 1.75cqw, 32px)/1.1 var(--f-disp); letter-spacing: 0; text-transform: none; color: var(--ink); }
.print a:hover .print__paper, .print a:focus-visible .print__paper { box-shadow: -16px 24px 34px -6px rgba(40, 28, 16, .38), -2px 3px 5px rgba(40, 28, 16, .18); }
.print:hover { transform: translateY(calc(var(--dy, 0px) - 6px)) rotate(0deg); }

/* best sellers, with small pinned thumbnails */
.loved { list-style: none; margin: 1.1em 0 1em; padding: 0; border-top: 1px solid var(--rule); max-width: 36em; }
.loved a { display: flex; align-items: center; gap: 1.1em; padding: .7em 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.loved img { flex: none; width: clamp(48px, 3.9cqw, 72px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 3px solid #f4eee3; box-shadow: -4px 6px 10px -2px rgba(40, 28, 16, .3); filter: saturate(.9) sepia(.06); transition: transform .35s var(--ease); }
.loved a:hover img { transform: rotate(-2deg) scale(1.04); }
.loved__item { flex: 1; font: 400 calc(var(--fs-body) * 1.4)/1.15 var(--f-disp); }
.loved__item em { display: block; margin-top: .2em; font: 500 calc(var(--fs-caps) * .95)/1.3 var(--f-sign); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--ink-2); }
.loved__price { font: 400 calc(var(--fs-body) * 1.2)/1 var(--f-disp); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.loved__price s { margin-right: .35em; color: var(--ink-2); opacity: .75; }

.copy .form__note { margin: .8em 0 0; font-size: calc(var(--fs-body) * .78); color: var(--ink-2); }
.copy .contact a { color: var(--ink); text-underline-offset: .25em; }
.copy .form__done { font-family: var(--f-disp); }

.bar__mark { padding: 8px 0; line-height: 0; }
.bar__mark img { height: 18px; width: auto; }
.foot__mark img { height: 30px; width: auto; filter: invert(1) sepia(.2) brightness(.95); opacity: .92; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .4em 1.8em; margin: 1.4em 0 1.2em; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 12px/1 var(--f-sign); letter-spacing: .16em; text-transform: uppercase; color: #efe5d3; text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; text-underline-offset: .3em; }
.foot__line { font-size: 14px; letter-spacing: .04em; }
.foot__bot a { color: #e9dcc7; }

@media (max-width: 1079.98px) {
  :root { --fs-body: 16px; --fs-caps: 11px; }
  .logo { width: min(78vw, 420px); margin-top: .5em; }
  .copy .tagline { font-size: clamp(30px, 8.4vw, 40px); }
  .copy--prints { max-width: none; padding-left: 0; padding-right: 0; }
  .copy--prints .eyebrow { padding: 0 24px; }
  .prints {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; gap: 22px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 24px 30px; scrollbar-width: none;
  }
  .prints::-webkit-scrollbar { display: none; }
  .print { scroll-snap-align: center; }
  .loved img { width: 56px; }
}

.topnav .topnav__cta { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 1079.98px) { .copy--hero .eyebrow { white-space: normal; flex-wrap: wrap; row-gap: .2em; } }

/* ================================================================ HERO PHOTOGRAPH
   Kept deliberately quiet: the name centred on the still life, a line of motto, the top bar. */
.hero { position: relative; height: 100svh; min-height: 560px; max-height: 1300px; overflow: hidden; background: #4a4926; color: #f1ead9; }
.hero picture, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img { display: block; object-fit: cover; object-position: 50% 58%; transform-origin: 50% 60%; filter: saturate(.9) contrast(1.03); }
/* film grain and a soft vignette, as on the reference */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .28; mix-blend-mode: overlay;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.1 -.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") 0 0 / 200px 200px;
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(125% 95% at 50% 46%, transparent 52%, rgba(22, 20, 8, .34) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__img { animation: settle 8s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero__name { animation: logo-in 2.2s var(--ease) .25s both; }
}
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes logo-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.hero__bar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: clamp(28px, 3.4vw, 56px) clamp(24px, 5vw, 88px); }
.hero__motto { margin: 0; font: 500 clamp(11px, .74vw, 13px)/1.8 var(--f-disp); letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 236, 223, .9); }
.hero__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 2.3em; margin-top: -13px; }
.hero__nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 clamp(11px, .74vw, 13px)/1 var(--f-disp); letter-spacing: .24em; text-transform: uppercase; color: #f3ecdf; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 72% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.hero__nav a:hover, .hero__nav a:focus-visible { background-size: 100% 1px; }
.hero__mark { position: absolute; z-index: 2; left: 50%; top: 49%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.hero__name { margin: 0; line-height: 0; }
/* the Rouri wordmark itself (their black transparent mark), turned to the hero's cream */
.hero__name img { display: block; width: clamp(200px, 15vw, 350px); height: auto; margin: 0 auto;
  filter: invert(1) sepia(.18) brightness(.97) drop-shadow(0 2px 26px rgba(20, 20, 8, .28)); }
.hero__sub { margin: 1.1em 0 0; font: italic 400 clamp(10px, .66vw, 12px)/1 var(--f-disp); letter-spacing: .3em; text-transform: uppercase; color: rgba(246, 240, 228, .92); text-shadow: 0 1px 10px rgba(20, 20, 8, .5); }
.hero .hero__sub { --d: 1s; }
.hero .hero__motto { --d: 1.3s; }
.hero .hero__nav { --d: 1.3s; }

/* the fixed bar sits clear over the photograph on small screens */
.bar { transition: transform .4s var(--ease), background-color .35s ease, border-color .35s ease; }
.bar.is-over { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar.is-over .bar__mark { opacity: 0; pointer-events: none; }
.bar.is-over .bar__menu { color: #f3ecdf; }

@media (max-width: 1079.98px) {
  .wall { padding-top: 0; }
  .hero__img { object-position: 51% 58%; }
  .hero__nav { display: none; }
  .hero__bar { padding: 16px 22px; }
  .hero__motto { font-size: 10.5px; line-height: 1.75; }
  .hero__name img { width: min(50vw, 240px); }
  .hero__sub { font-size: 9.5px; letter-spacing: .24em; }
}
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

/* the essence copy must paint above the absolutely-placed bough slice behind it */
@media (max-width: 1079.98px) { .band--hero .copy { position: relative; } }

/* ================================================================ PAGE 2: cream white */
.page { position: relative; }
.page--cream { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: clamp(110px, 15vh, 180px) clamp(24px, 6vw, 96px) clamp(100px, 14vh, 170px); background: #f4efe6; color: var(--ink); }
.page__in { width: 100%; max-width: 1180px; margin: 0 auto; text-align: center; }
.page .fleuron { display: block; width: 120px; height: 16px; margin: 0 auto 1.6em; color: var(--ink-2); }
.page__eyebrow { margin: 0 0 1.6em; font: 500 clamp(11px, .74vw, 13px)/1.4 var(--f-disp); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); }
.page .manifesto { max-width: 25em; margin: 0 auto; font: italic 300 clamp(26px, 2.3vw, 44px)/1.34 var(--f-disp); color: var(--ink); text-wrap: balance; }
.page .facts { margin-top: 2.6em; }
.page .collections { margin-top: clamp(84px, 12vh, 150px); }
.page .prints { max-width: 1100px; margin: 0 auto; gap: clamp(28px, 4vw, 72px); }
.page--cream .print__paper { background: #fdfbf6; }
.page--cream .print__paper::before { background: linear-gradient(180deg, rgba(222, 210, 184, .85), rgba(212, 198, 170, .78)); }
.page .fleuron { --d: 0s; } .page .page__eyebrow { --d: .1s; } .page .manifesto { --d: .2s; } .page .facts { --d: .35s; }

/* ================================================================ PAGE 3: Hydrangea, a cover that fades into the collection
   The photograph (ref/hyd-white-clean.png, 1920 × 1088: the woman in the Josefina Skirt carrying white blossom past the
   blue door, the sign above the door taken out) fills the screen. It is cover-fitted and sits on the bottom edge, so
   her feet, with the ground under them, show on any desktop shape; wide, short windows lose the top of the wall instead.
   Title and button are large and centred on the cover, over her (the user's choice), in cream with a soft dark glow
   behind the words so they read over the white skirt; sizes are fractions of --iw, the drawn width of the image.
   On phones the photo is shown whole instead, with the title and button below it.
   "See the collection" fades the cover softly away and the Hydrangea pieces fade in underneath, one at a
   time as on New in; "Back to the cover" fades back (main.js). */
.hyd { position: relative; display: grid; overflow: hidden; background: #f4efe6; }
.hyd > .hyd__cover, .hyd > .hyd__pieces { grid-area: 1 / 1; }
.hyd:not(.is-open) .hyd__pieces { position: absolute; inset: 0 0 auto; }   /* waiting underneath; the section is as tall as the cover */
/* a soft fade through the cream: the cover fades away, then the pieces fade in (and the other way round) */
.hyd__cover { position: relative; z-index: 2; height: 100svh; min-height: 640px; max-height: 1100px; background: #f4efe6; container-type: size;
  --iw: max(100cqw, calc(100cqh * 1920 / 1088)); --ih: calc(var(--iw) * 1088 / 1920);
  /* where the drawn image sits: centred across, and on the bottom edge (her feet are near the foot of this photo) */
  --ox: calc((100cqw - var(--iw)) / 2); --oy: min(0px, 100cqh - var(--ih));
  transition: opacity .9s ease .35s, visibility 0s linear 0s; }
.hyd.is-open .hyd__cover { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.hyd__pieces { transition: opacity .9s ease .45s; }
.hyd:not(.is-open) .hyd__pieces { opacity: 0; transition: opacity .45s ease; }
.hyd.no-turn .hyd__cover, .hyd.no-turn .hyd__pieces { transition: none !important; }
.hyd__photo { position: absolute; inset: 0; }
.hyd__photo picture, .hyd__img { display: block; width: 100%; height: 100%; }
.hyd__img { object-fit: cover; object-position: var(--ox) var(--oy); }
.hyd__title { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap;
  color: #f6efe2; text-shadow: 0 1px 3px rgba(8, 24, 48, .5), 0 0 34px rgba(8, 24, 48, .45); }
/* a soft dark glow behind the words, so they read over the white skirt and the white blossom (a little stronger than it
   was over the mimosa; the user allows a little dark behind the title here) */
.hyd__title::before { content: ""; position: absolute; z-index: -1; inset: -38% -22%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 22, 44, .5), rgba(8, 22, 44, .22) 60%, rgba(8, 22, 44, 0)); }
.hyd__title h2 { margin: 0; font-weight: 400; line-height: 1; color: inherit; }
.hyd__the { display: block; height: calc(.04 * var(--iw)); font: 400 calc(.036 * var(--iw))/1 'Pinyon Script', 'Snell Roundhand', cursive; }
.hyd__name { display: block; margin: calc(.008 * var(--iw)) -.36em 0 0; font: 500 calc(.03 * var(--iw))/1 'Bodoni Moda', 'Didot', serif; letter-spacing: .36em; text-transform: uppercase; }
.hyd__coll { display: block; margin: calc(.012 * var(--iw)) -.62em 0 0; font: 500 max(9px, calc(.0105 * var(--iw)))/1 'Bodoni Moda', 'Didot', serif; letter-spacing: .62em; text-transform: uppercase; }
.hyd__open { display: inline-flex; align-items: center; min-height: max(44px, calc(.036 * var(--iw))); margin-top: calc(.025 * var(--iw)); padding: 0 2em; border: 1px solid rgba(246, 239, 226, .9);
  background: rgba(10, 26, 48, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #f6efe2; cursor: pointer;
  font: 500 max(10px, calc(.0082 * var(--iw)))/1 var(--f-disp); letter-spacing: .24em; text-transform: uppercase; text-shadow: none; transition: background-color .3s ease, color .3s ease; }
.hyd__open:hover { background: #f6efe2; color: #1f4f8a; }
.hyd__open:focus-visible { outline: 1px solid rgba(246, 239, 226, .9); outline-offset: 4px; }
/* on the pieces (in New in's three columns): the heading, and under it the way back to the cover */
.pc__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pc__back { display: inline-flex; align-items: center; gap: .7em; min-height: 44px; padding: 0; background: none; border: 0; color: var(--ink-2); cursor: pointer;
  font: 500 clamp(11px, .74vw, 13px)/1.2 var(--f-disp); letter-spacing: .24em; text-transform: uppercase; transition: color .25s ease; }
.pc__back::before { content: "←"; font-family: var(--f-body); letter-spacing: 0; transition: transform .3s var(--ease); }
.pc__back:hover, .pc__back:focus-visible { color: var(--ink); }
.pc__back:hover::before { transform: translateX(-4px); }
.hyd__pieces .pc__kicker:focus { outline: none; }   /* focus lands here after the turn, for screen readers; it is not a control */
@media (max-width: 1079.98px) {
  /* on a phone the whole photograph runs the width of the screen, with the title and button beneath it */
  .hyd__cover { height: auto; min-height: 0; max-height: none; padding: 64px 0 44px; container-type: normal; }
  .hyd__photo { position: static; }
  .hyd__photo picture { aspect-ratio: 1920 / 1088; height: auto; }
  .hyd__img { object-position: 50% 50%; }   /* the whole photo; the desktop offsets don't apply here */
  .hyd__title { position: static; transform: none; margin-top: 30px; padding: 0 22px; color: #564f35; text-shadow: none; }
  .hyd__the { height: auto; font-size: 38px; }
  .hyd__name { margin-top: 8px; font-size: clamp(24px, 7.2vw, 32px); letter-spacing: .24em; margin-right: -.24em; }
  .hyd__coll { margin-top: 12px; font-size: 11px; letter-spacing: .5em; margin-right: -.5em; }
  .hyd__open { min-height: 44px; margin-top: 26px; padding: 0 1.7em; font-size: 12px; border-color: currentColor; color: var(--ink); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hyd__title::before { display: none; }
  .hyd__open:hover { background: var(--ink); color: #f4efe6; }
  .hyd__open:focus-visible { outline-color: var(--ink); }
  .pc__head { align-items: center; }   /* stacked, the left column is centred */
}
@media (prefers-reduced-motion: reduce) {
  .hyd__cover, .hyd.is-open .hyd__cover, .hyd__pieces, .hyd:not(.is-open) .hyd__pieces { transition-duration: .2s; transition-delay: 0s; }
}

.pc__zoom[hidden] { display: none; }

/* ================================================================ THE DIARY, after the user's mock-up (ref/diary-mockup.png)
   Plain white, the same #fcfaf6 as the footer (the user: "white as the end of the page, white white"); the paper texture
   was taken off. Round the edges, decorative: a taped print of leaf shadows (cut from the mock-up) with a word
   list top left, a small shell pressed into the paper top right, mirroring the word list (the mock-up's shell as light and shadow only). Centred: kicker, the title
   ("The" upright, "Diary" in the Hydrangea cover's script), a short rule, then the four
   chapters, each photograph in its own shape (an oval, an arch, a rectangle with scooped corners, a tile) with a fine ink
   line on its edge and another just outside it, the numeral with a short rule, the name; then Read the whole story. */
/* the windowpane (the user's pick): warm hairlines in 56px squares, barely there (the user: "very very at the back"), on a
   whisper of cream (#f8f4ec, just warmer than the white columns either side). The middle of New in sits on it */
:root { --pane-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M.5 0v56M0 .5h56' stroke='%236f5a40' stroke-opacity='.04'/%3E%3C/svg%3E") center top, #f8f4ec; }
.journal { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; color: #3b362f;
  /* the grain of the Rouri card (the user's: "only the texture, not the color. We want it white"): its fibres and
     light and shadow on white, never its kraft colour. One wide seamless tile (tools/paper_texture.py), drawn at 75%:
     as fine as the grain looks on the card when it fills a 1440px screen */
  background: #fbf9f5 url(../assets/diary-paper.webp) 0 0 / 576px auto repeat;
  padding: clamp(104px, 8.4vw, 130px) clamp(22px, 5vw, 88px) clamp(88px, 7.4vw, 112px); }
.journal__defs { position: absolute; width: 0; height: 0; }
.journal__kicker { position: relative; margin: 0; font: 500 clamp(11px, .82vw, 13px)/1 var(--f-disp); letter-spacing: .32em; text-transform: uppercase; color: #4a443c; }
/* the title: "The" upright, "Diary" in the script of the Hydrangea cover's "The" (the user's) */
.journal__title { position: relative; margin: clamp(14px, 1.3vw, 20px) 0 0; display: flex; align-items: baseline; justify-content: center; gap: clamp(10px, 1vw, 16px); font-weight: 400; line-height: 1; color: #5a4634;
  filter: url(#emboss); }   /* pressed into the paper like the AQUA reference (the user's): light and shadow only; walnut if filters are off */
.journal__the { font: 400 clamp(52px, 5vw, 78px)/1 'Pinyon Script', 'Snell Roundhand', cursive; }   /* the same script as "Diary" (the user's) */
.journal__script { font: 400 clamp(52px, 5vw, 78px)/1 'Pinyon Script',   /* 72px at 1440 (the user's pick) */ 'Snell Roundhand', cursive; }
.journal__rule { display: block; width: 40px; height: 1px; margin: clamp(14px, 1.3vw, 20px) 0 0; background: rgba(59, 54, 47, .55); }
.journal__tiles { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; align-items: end; width: min(1080px, 78vw); gap: 0 clamp(16px, 1.6vw, 28px); margin: clamp(38px, 3.6vw, 56px) 0 0; padding: 0; list-style: none; }   /* wider apart (the user's) */
.journal__tiles a { display: flex; flex-direction: column; align-items: center; color: #3b362f; text-decoration: none; }
/* each chapter's photograph in its shape, a fine ink line on its edge (inside the clip) and one just outside (on the frame) */
.journal__frame { position: relative; display: block; transition: transform .6s var(--ease); }
.journal__frame::after { content: ""; position: absolute; inset: -6px; pointer-events: none; background: center / 100% 100% no-repeat; }
.journal__tile { position: relative; display: block; height: clamp(150px, 13vw, 196px); width: auto; aspect-ratio: var(--ar, .67); -webkit-clip-path: var(--clip); clip-path: var(--clip); overflow: hidden; background: #bdb4a7; }
.journal__tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--edge) center / 100% 100% no-repeat; }
.journal__tile picture { display: block; width: 100%; height: 100%; }
.journal__tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
/* the arch shows the painting whole, and with it a reposter's handle near the bottom right: framed a touch tighter from the
   top left, so the handle falls outside the arch (the painting is otherwise untouched) */
.journal__tile--watercolors img { transform: scale(1.3); transform-origin: 0 0; }
.journal__tile--garden { --ar: 0.67; --clip: url(#oval); --op: 50% 50%; --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cellipse cx='.5' cy='.5' rx='.5' ry='.5' fill='none' stroke='%233b362f' stroke-opacity='0.55' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.journal__frame:has(.journal__tile--garden)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.004 -0.004 1.008 1.008' preserveAspectRatio='none'%3E%3Cellipse cx='.5' cy='.5' rx='.5' ry='.5' fill='none' stroke='%233b362f' stroke-opacity='0.42' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.journal__tile--watercolors { --ar: 0.67; --clip: url(#arch); --op: 0% 0%; --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 1V.335A.5 .335 0 0 1 1 .335V1Z' fill='none' stroke='%233b362f' stroke-opacity='0.55' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.journal__frame:has(.journal__tile--watercolors)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.004 -0.004 1.008 1.008' preserveAspectRatio='none'%3E%3Cpath d='M0 1V.335A.5 .335 0 0 1 1 .335V1Z' fill='none' stroke='%233b362f' stroke-opacity='0.42' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.journal__tile--women { --ar: 0.6; --clip: url(#ticket); --op: 100% 50%; --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M.12 0H.88A.12 .072 0 0 0 1 .072V.928A.12 .072 0 0 0 .88 1H.12A.12 .072 0 0 0 0 .928V.072A.12 .072 0 0 0 .12 0Z' fill='none' stroke='%233b362f' stroke-opacity='0.55' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.journal__frame:has(.journal__tile--women)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.004 -0.004 1.008 1.008' preserveAspectRatio='none'%3E%3Cpath d='M.12 0H.88A.12 .072 0 0 0 1 .072V.928A.12 .072 0 0 0 .88 1H.12A.12 .072 0 0 0 0 .928V.072A.12 .072 0 0 0 .12 0Z' fill='none' stroke='%233b362f' stroke-opacity='0.42' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.journal__tile--linen { --ar: 0.8; --clip: url(#lantern); --op: 50% 50%; --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M.5 0C.58 .083 .66 .117 .74 .133C.72 .217 .8 .283 .92 .35C1 .417 1 .583 .92 .65C.8 .717 .72 .783 .74 .867C.66 .883 .58 .917 .5 1C.42 .917 .34 .883 .26 .867C.28 .783 .2 .717 .08 .65C0 .583 0 .417 .08 .35C.2 .283 .28 .217 .26 .133C.34 .117 .42 .083 .5 0Z' fill='none' stroke='%233b362f' stroke-opacity='0.55' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.journal__frame:has(.journal__tile--linen)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.004 -0.004 1.008 1.008' preserveAspectRatio='none'%3E%3Cpath d='M.5 0C.58 .083 .66 .117 .74 .133C.72 .217 .8 .283 .92 .35C1 .417 1 .583 .92 .65C.8 .717 .72 .783 .74 .867C.66 .883 .58 .917 .5 1C.42 .917 .34 .883 .26 .867C.28 .783 .2 .717 .08 .65C0 .583 0 .417 .08 .35C.2 .283 .28 .217 .26 .133C.34 .117 .42 .083 .5 0Z' fill='none' stroke='%233b362f' stroke-opacity='0.42' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.journal__num { display: flex; flex-direction: column; align-items: center; margin-top: clamp(16px, 1.4vw, 22px); font: 300 clamp(13px, .95vw, 15px)/1 var(--f-disp); color: #4a443c; }
.journal__num::after { content: ""; width: 14px; height: 1px; margin-top: 5px; background: rgba(59, 54, 47, .6); }
.journal__name { margin-top: 8px; padding-bottom: 3px; font: 300 clamp(19px, 1.45vw, 23px)/1.1 var(--f-disp);   /* thin (the user's) */
 
  background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.journal__tiles a:hover .journal__frame, .journal__tiles a:focus-visible .journal__frame { transform: translateY(-4px); }
.journal__tiles a:hover .journal__name, .journal__tiles a:focus-visible .journal__name { background-size: 100% 1px; }
.journal__tiles a:focus-visible { outline: 1px solid #3b362f; outline-offset: 10px; }
.journal__cta { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-top: clamp(38px, 3.6vw, 54px); color: #4a443c; text-decoration: none;
  font: 300 clamp(11px, .8vw, 12.5px)/1 var(--f-sign);   /* light and thin (the user's) */ letter-spacing: .22em; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 88% / 100% 1px no-repeat; transition: background-size .35s var(--ease); }
.journal__cta svg { width: 22px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1; transition: transform .35s var(--ease); }
.journal__cta:hover, .journal__cta:focus-visible { background-size: 35% 1px; }
.journal__cta:hover svg { transform: translateX(4px); }
/* ---- the collage round the edges ---- */
.journal__words { position: absolute; left: clamp(24px, 5vw, 88px); top: clamp(28px, 3.4vw, 56px); margin: 0; text-align: left; font: 500 clamp(11px, .74vw, 13px)/1.8 var(--f-disp); letter-spacing: .24em; text-transform: uppercase; color: #4a443c; }   /* where the hero's motto sits (the user's) */
.journal__words::after { content: ""; display: block; width: 16px; height: 1px; margin-top: 8px; background: rgba(59, 54, 47, .55); }
.journal__shell { position: absolute; right: clamp(24px, 5vw, 88px); top: clamp(28px, 3.4vw, 56px); width: clamp(46px, 4.1vw, 62px);   /* small, mirroring the word list top right (the user's) */
  aspect-ratio: 376 / 492; background: url(../assets/diary-shell.png) center / contain no-repeat; }
@media (max-width: 1079.98px) {
  /* a phone or a narrow window: the four shapes two by two; the collage keeps only the shell */
  .journal { padding: 96px 22px 120px; }
  .journal__words { display: none; }
  .journal__shell { right: 16px; top: 76px; width: 30px; opacity: .9; }
  .journal__title { gap: 8px; }
  .journal__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 34px 16px; }
  .journal__tile { height: min(46vw, 190px); }
}
/* every word of the Diary pressed into the paper too (the user's), with the finer effect for the small type */
.journal__kicker, .journal__words, .journal__rule, .journal__cta { filter: url(#emboss-sm); }
.journal__num, .journal__name { filter: url(#emboss-xs); }   /* a hairline edge, so the light chapter names stay thin (the user's) */
@media (prefers-reduced-motion: reduce) { .journal__frame, .journal__name { transition: none; } }
/* the Diary, pared back (the user's): the title, its rule, the Hydrangea line, Read the whole story and the word list are
   taken out. On top, close to the top edge and centred, the shell with Rouri Journal under it; the four chapters centred in
   the space below them, a little lower than the middle of the screen-high page */
.journal { justify-content: flex-start; min-height: min(100svh, 1000px); padding-top: clamp(40px, 3.9vw, 56px); padding-bottom: 40px; }
.journal__shell { position: relative; top: auto; right: auto; }   /* in the flow now, centred */
.journal__kicker { margin: clamp(12px, 1.1vw, 18px) 0 40px; }   /* at least this much air under it */
.journal__tiles { margin: auto 0; }   /* centred in the space under Rouri Journal */
@media (max-width: 1079.98px) { .journal { padding-top: 76px; } .journal__shell { width: 42px; } }   /* clear of the phone bar; the shell a little larger than it was in the corner */

/* the painted wall now begins at the framed print: its top 23.5% (the olive bough) is cropped away */
@media (min-width: 1080px) {
  .wall-crop { max-width: 2400px; margin: 0 auto; overflow: hidden; }
  .wall-crop > .wall { margin-top: -129.25%; }   /* 0.235 × 5.5 wall heights per width */
}
@media (max-width: 1079.98px) {
  .page--cream { padding: 96px 24px 80px; }
  .page .manifesto { font-size: clamp(24px, 6.4vw, 30px); }
  .page .collections { margin: 72px -24px 0; }
  .page .prints { max-width: none; }
}

/* ================================================================ PAGE 2: the pieces
   One garment at a time, floating on cream as if someone were wearing it; pass to the next. */
.page--pieces {
  position: relative; display: grid; grid-template-columns: 1fr minmax(0, 1.2fr) 1fr; grid-template-rows: auto 1fr auto;
  align-items: center; height: 100svh; min-height: 640px; max-height: 1100px; padding: clamp(28px, 3.4vw, 56px) clamp(24px, 5vw, 88px) clamp(26px, 4vh, 44px);
  background: #f4efe6; color: var(--ink); overflow: hidden;
}
.pc__top { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; align-items: center; }
.pc__kicker, .pc__all, .pc__link, .pc__next span { font: 500 clamp(11px, .74vw, 13px)/1.2 var(--f-disp); letter-spacing: .24em; text-transform: uppercase; }
.pc__kicker { margin: 0; color: var(--ink); }
.pc__all, .pc__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 76% / 100% 1px no-repeat; transition: background-size .35s var(--ease); }
.pc__all:hover, .pc__link:hover { background-size: 30% 1px; }
.pc__info { grid-column: 1; grid-row: 2; max-width: 22rem; transition: opacity .35s ease, transform .45s var(--ease); }
.pc__info.swap { opacity: 0; transform: translateY(8px); }
.pc__count { margin: 0; font: 500 12px/1 var(--f-disp); letter-spacing: .24em; color: var(--ink-2); }
.pc__name { margin: .55em 0 .25em; font: 400 clamp(38px, 3.3vw, 64px)/1.02 var(--f-disp); color: var(--ink); }
.pc__meta { margin: 0; font: italic 400 clamp(17px, 1.2vw, 21px)/1.3 var(--f-disp); color: var(--ink-2); }
.pc__price { margin: 1.3em 0 1.1em; font: 400 clamp(21px, 1.5vw, 27px)/1 var(--f-disp); font-variant-numeric: lining-nums; }
.pc__price s { margin-right: .45em; opacity: .55; }
.pc__stage { grid-column: 2; grid-row: 2; position: relative; align-self: stretch; min-height: 0; margin: 2vh 0; touch-action: pan-y; cursor: grab; user-select: none; }
.pc__fig { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 1s cubic-bezier(.25, .8, .25, 1), opacity .6s ease; }
/* changing piece: a short, slow drift and a soft fade (the user: "very soft and gentle") */
.pc__fig.out-l { transform: translateX(-3vw); opacity: 0; }
.pc__fig.out-r { transform: translateX(3vw); opacity: 0; }
.pc__fig.no-anim { transition: none; }
/* a little depth (the user's request): the piece can turn a few degrees toward the pointer (main.js sets --rx, --ry) */
.pc__piece { position: relative; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 1.4s cubic-bezier(.25, .8, .25, 1); }
.pc__float { animation: float 7s ease-in-out infinite; }
.pc__img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(min(60svh, 640px) * var(--scale, 1)); pointer-events: none;
  /* layered shadows give the garment thickness: a crisp edge, a near soft shade, a wide ambient one */
  filter: drop-shadow(0 1px 1px rgba(60, 46, 30, .2)) drop-shadow(0 8px 12px rgba(60, 46, 30, .13)) drop-shadow(0 26px 32px rgba(60, 46, 30, .12)); }
.pc__fig.is-empty .pc__img { display: none; }
.pc__fig.is-empty .pc__float { width: min(26vw, 340px); }
.pc__fig.is-empty .pc__float::after {
  content: "Photograph to come"; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5;
  border: 1px dashed rgba(46, 42, 37, .3); font: italic 400 18px/1 var(--f-disp); color: var(--ink-2);
}
.pc__shadow { position: absolute; left: 50%; top: calc(100% + 2.5vh); width: 62%; height: 28px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(52, 44, 26, .2), transparent); animation: shadow 7s ease-in-out infinite; pointer-events: none; }
@keyframes float { 0%, 100% { transform: translateY(-1.3%) rotate(-.4deg); } 50% { transform: translateY(1.3%) rotate(.4deg); } }
@keyframes shadow { 0%, 100% { transform: translateX(-50%) scale(.86); opacity: .75; } 50% { transform: translateX(-50%) scale(1); opacity: 1; } }
.pc__next { grid-column: 3; grid-row: 2; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: .6em; padding: 10px 0; background: none; border: 0; color: var(--ink); cursor: pointer; text-align: right; }
.pc__next em { font: italic 400 clamp(20px, 1.5vw, 28px)/1.1 var(--f-disp); transition: transform .35s var(--ease); }
.pc__next:hover em { transform: translateX(-6px); }
.pc__nav { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 1.6em; }
.pc__arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%; background: transparent; color: var(--ink); font: 400 18px/1 var(--f-body); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.pc__arrow:hover { background: var(--ink); color: #f4efe6; }
@media (prefers-reduced-motion: reduce) { .pc__float, .pc__shadow { animation: none; } .pc__fig, .pc__info { transition: none; } }
@media (max-width: 1079.98px) {
  .page--pieces { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; height: auto; min-height: 0; max-height: none; padding: 76px 22px 36px; }
  .pc__stage { grid-column: 1; grid-row: 2; height: min(56vh, 500px); margin: 12px 0 8px; }
  .pc__img { max-height: calc(min(46vh, 420px) * var(--scale, 1)); }
  .pc__info { grid-column: 1; grid-row: 3; max-width: none; text-align: center; }
  .pc__name { font-size: clamp(34px, 9.5vw, 46px); }
  .pc__price { margin: .9em 0 .5em; }
  .pc__next { display: none; }
  .pc__nav { grid-row: 4; margin-top: 18px; }
}


/* all seven pieces along the bottom of page 2: the current one full strength with a short rule under it */
.pc__thumbs { display: flex; align-items: flex-end; gap: clamp(8px, 1.1vw, 18px); }
.pc__thumb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; min-width: 44px; height: 82px; padding: 0 2px; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
.pc__thumb img { display: block; width: auto; height: calc(62px * var(--k, 1)); max-width: 66px; opacity: .36; filter: saturate(.75); transition: opacity .3s ease, transform .35s var(--ease), filter .3s ease; }
.pc__thumb i { display: block; width: 34px; height: 44px; border: 1px dashed rgba(46, 42, 37, .3); }
.pc__thumb:hover img, .pc__thumb:focus-visible img { opacity: .75; transform: translateY(-3px); }
.pc__thumb[aria-current] img { opacity: 1; filter: none; }
.pc__thumb span { width: 18px; height: 1px; background: transparent; transition: background-color .3s ease; }
.pc__thumb[aria-current] span { background: var(--ink); }
@media (max-width: 1079.98px) {
  .pc__nav .pc__arrow { display: none; }
  /* on a phone the strip sits right under the garment, the name and price below it */
  .page--pieces .pc__nav { grid-row: 3; margin-top: 0; }
  .page--pieces .pc__info { grid-row: 4; margin-top: 22px; }
  .page--pieces .pc__stage { height: min(50vh, 460px); }
  .pc__thumbs { gap: 4px; }
  .pc__thumb { min-width: 44px; height: 64px; gap: 7px; }
  .pc__thumb img { height: calc(44px * var(--k, 1)); max-width: 44px; }
}

/* seeing the linen: a loupe that follows the mouse over the piece, and a full-screen close-up for every device */
.pc__zoom { display: flex; align-items: center; gap: .5em; width: fit-content; min-height: 44px; margin-top: .4em; padding: 0; background: none; border: 0;
  color: var(--ink-2); font: italic 400 clamp(16px, 1.1vw, 19px)/1.2 var(--f-disp); cursor: pointer; transition: color .25s ease; }
.pc__zoom svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; }
.pc__zoom:hover, .pc__zoom:focus-visible { color: var(--ink); }
.pc__zoom:hover span { text-decoration: underline 1px; text-underline-offset: .3em; }
.pc__loupe { --d: clamp(170px, 14vw, 250px); position: absolute; z-index: 3; left: 0; top: 0; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; background: #f4efe6 no-repeat; pointer-events: none; opacity: 0; scale: .5;
  box-shadow: 0 0 0 1px rgba(46, 42, 37, .2), 0 0 0 6px rgba(244, 239, 230, .92), 0 0 0 7px rgba(46, 42, 37, .1), 0 22px 44px -14px rgba(46, 42, 37, .38);
  transition: opacity .25s ease, scale .35s var(--ease); }
.pc__stage.is-looking { cursor: none; }
.pc__stage.is-looking .pc__loupe { opacity: 1; scale: 1; }
.pc__stage.is-looking .pc__float, .pc__stage.is-looking .pc__shadow { animation-play-state: paused; }   /* hold still while you look */
@media (max-width: 1079.98px) { .pc__zoom { margin-inline: auto; } }

.zoom { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: #f4efe6; color: var(--ink); }
.zoom::backdrop { background: #f4efe6; }
.zoom[open] { animation: zoom-fade .4s ease; }
.zoom__view { position: absolute; inset: 0; display: flex; overflow: auto; padding: clamp(80px, 11vh, 120px) 6vw; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.zoom__view::-webkit-scrollbar { display: none; }
.zoom__img { flex: none; display: block; margin: auto; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; }
.zoom[open] .zoom__img { animation: zoom-grow .7s var(--ease); }
.zoom__bar { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: clamp(16px, 2.2vw, 36px) clamp(22px, 5vw, 88px) clamp(28px, 3vw, 48px); background: linear-gradient(#f4efe6 45%, rgba(244, 239, 230, 0)); pointer-events: none; }
.zoom__bar > * { pointer-events: auto; }
.zoom__title { margin: 0; font: 500 clamp(11px, .74vw, 13px)/1.2 var(--f-disp); letter-spacing: .24em; text-transform: uppercase; }
.zoom__title em { margin-left: 1.1em; font: italic 400 1.5em/1 var(--f-disp); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.zoom__close { display: inline-flex; align-items: center; gap: .8em; min-height: 44px; padding: 0 0 0 12px; background: none; border: 0; color: var(--ink); cursor: pointer;
  font: 500 clamp(11px, .74vw, 13px)/1 var(--f-disp); letter-spacing: .24em; text-transform: uppercase; }
.zoom__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; transition: transform .35s var(--ease); }
.zoom__close:hover svg, .zoom__close:focus-visible svg { transform: rotate(90deg); }
.zoom__close:focus-visible { outline: 1px solid rgba(46, 42, 37, .45); outline-offset: 6px; border-radius: 2px; }
.zoom__hint { position: absolute; z-index: 2; left: 50%; bottom: clamp(18px, 3.5vh, 40px); transform: translateX(-50%); margin: 0; padding: .6em 1.2em; border-radius: 99px;
  background: rgba(244, 239, 230, .88); font: italic 400 17px/1 var(--f-disp); color: var(--ink-2); white-space: nowrap; pointer-events: none; transition: opacity .8s ease; }
.zoom__hint.is-gone { opacity: 0; }
@keyframes zoom-fade { from { opacity: 0; } }
@keyframes zoom-grow { from { opacity: 0; transform: scale(.93); } }
@media (hover: hover) and (pointer: fine) { .zoom__view { cursor: zoom-out; } }
@media (max-width: 1079.98px) { .zoom__title em { display: block; margin: .5em 0 0; } }
@media (prefers-reduced-motion: reduce) { .zoom[open], .zoom[open] .zoom__img { animation: none; } .pc__loupe { transition: opacity .2s ease; } }

/* ================================================================ TOP BAR, after rouri.com
   Shop, Collections, About, Diary, Unique pieces on the left in small tracked sans capitals; the wordmark in the
   middle; currency, Search and Cart on the right in sentence case. Solid cream with a hairline. On a phone: Menu,
   wordmark, Cart; over the hero photograph it turns clear and the words go cream (is-over, set in main.js). */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 66px; padding: 0 clamp(20px, 3vw, 52px);
  background: rgba(243, 239, 230, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(42, 30, 20, .14); color: var(--ink); }
.bar.is-over { color: #f3ecdf; }
.bar__start { display: flex; align-items: center; min-width: 0; }
.bar__nav { display: flex; gap: clamp(20px, 2.6vw, 46px); }
.bar__nav a, .bar__menu-word { font: 500 11.5px/1 var(--f-sign); letter-spacing: .12em; text-transform: uppercase; }
.bar__nav a, .bar__util, .bar__cur { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; white-space: nowrap; }
.bar__nav a, .bar__util { background: linear-gradient(currentColor, currentColor) 0 72% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.bar__nav a:hover, .bar__nav a:focus-visible, .bar__util:hover, .bar__util:focus-visible { background-size: 100% 1px; color: inherit; }
.bar__mark { margin: 0; padding: 0; justify-self: center; line-height: 0; transition: opacity .35s ease; }
.bar__mark img { height: 22px; width: auto; }
.bar__end { justify-self: end; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 42px); }
.bar__util, .bar__cur { font: 400 12.5px/1 var(--f-sign); letter-spacing: .02em; }
@media (max-width: 1260px) and (min-width: 1080px) { .bar__nav { gap: 18px; } .bar__end { gap: 18px; } .bar__nav a { letter-spacing: .08em; } }
@media (max-width: 1079.98px) {
  .bar { height: 58px; padding: 0 12px 0 6px; gap: 8px; }
  .bar__menu { display: inline-flex; align-items: center; gap: 10px; width: auto; height: 44px; padding: 0 10px; color: inherit; }
  .bar__nav, .bar__cur, .bar__util--search { display: none; }   /* on a phone these live in the Menu sheet */
  .hero__bar { padding-top: 74px; }   /* the motto sits below the bar, clear of Menu */
  .bar__menu-word { font-size: 11px; }
  .bar__mark img { height: 17px; }
  .bar__util { padding: 0 8px; font-size: 12px; }
  .sheet { top: 58px; padding: 6px 22px 22px; background: rgba(243, 239, 230, .98); border-bottom: 1px solid rgba(42, 30, 20, .12); box-shadow: 0 24px 40px -28px rgba(42, 30, 20, .4); }
  .sheet a { min-height: 56px; font: 400 26px/1.1 var(--f-disp); color: var(--ink); border-bottom-color: rgba(42, 30, 20, .12); }
  .sheet__util { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 0; font: 400 13px/1 var(--f-sign); letter-spacing: .02em; color: var(--ink-2); }
  .sheet .sheet__util a { min-height: 44px; font: inherit; color: var(--ink); border: 0; text-decoration: underline; text-underline-offset: .3em; }
}

/* ================================================================ FOOTER (redesign)
   Linen instead of the dark brown: the brand's line and three short columns, the wordmark across the whole
   width, then the fine print, with the Fusco Studio credit (just the studio, the user's) opposite. */
.foot { background: #fcfaf6; color: var(--ink); padding: clamp(72px, 7vw, 104px) clamp(24px, 6.4vw, 120px) 34px; border-top: 1px solid rgba(42, 30, 20, .06); }   /* more air round it (the user's) */
.foot__in { max-width: 1240px; margin: 0 auto; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .8fr)); gap: 48px clamp(32px, 5vw, 96px); align-items: start; }
.foot__ode { margin: 0; font: 400 clamp(32px, 2.6vw, 44px)/1.1 'Pinyon Script', 'Snell Roundhand', cursive; color: var(--ink); }
.foot__text { margin: 1.1em 0 0; max-width: 23em; text-wrap: pretty; font: italic 400 clamp(16px, 1.05vw, 18px)/1.65 var(--f-disp); color: var(--ink-2); }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; }
.foot__h { margin: 0 0 1.5em; font: 500 11.5px/1 var(--f-disp); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.foot__col a { display: inline-flex; align-items: center; min-height: 42px; font: 400 clamp(17px, 1.2vw, 19.5px)/1.2 var(--f-disp); color: var(--ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 82% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.foot__col a:hover, .foot__col a:focus-visible { background-size: 100% 1px; }
/* the wordmark under the ode and its line (the user's placement), about as wide as the ode */
.foot__word { margin: clamp(36px, 3.4vw, 52px) 0 0; line-height: 0; }
.foot__word img { display: block; width: clamp(180px, 17vw, 260px); max-width: 100%; height: auto; opacity: .82;
  transform: translateX(-3.5%); }   /* the logo file has a little empty margin on its left: line its R up with the ode */
.foot__bot { margin-top: clamp(64px, 6vw, 96px); padding-top: 22px; border-top: 1px solid rgba(42, 30, 20, .1); gap: .6rem 2rem; font: 400 13.5px/1.5 var(--f-body); color: var(--ink-2); }
.foot__bot a { color: inherit; }
.foot__bot a.cr-fusco { color: var(--ink); }
.foot__bot .nw { white-space: nowrap; }   /* each phrase stays whole when the line wraps */
@media (max-width: 1079.98px) {
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__about { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .foot__bot { flex-direction: column; align-items: flex-start; } }

/* ================================================================ THE PIECES: every piece small along the top to choose from,
   and along the bottom this piece's own photographs (the floating piece first, then its studio and detail shots
   from rouri.com); a photograph opens large in the middle. */
@media (min-width: 1080px) { .page--pieces { padding-top: calc(66px + clamp(14px, 1.6vw, 28px)); } }   /* clear of the top bar */
.pc__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.pc__top > :first-child { justify-self: start; }
.pc__top > :last-child { justify-self: end; }
.pc__top .pc__thumbs { gap: clamp(6px, .8vw, 14px); }
.pc__top .pc__thumb { height: 64px; gap: 7px; }
.pc__top .pc__thumb img { height: calc(46px * var(--k, 1)); max-width: 52px; }
.pc__top .pc__thumb:not([aria-current]) img { opacity: .5; }   /* small up here, so a little stronger than before */
.pc__gal { display: flex; align-items: center; gap: 12px; }
.pc__gt { display: block; flex: none; width: 52px; height: 65px; padding: 0; border: 0; background: #ebe4d8; outline: 1px solid transparent; outline-offset: 3px; opacity: .6; cursor: pointer; transition: opacity .25s ease, outline-color .25s ease; }
.pc__gt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc__gt.is-ghost img { object-fit: contain; padding: 5px; box-sizing: border-box; }
.pc__gt:hover, .pc__gt:focus-visible { opacity: .9; }
.pc__gt[aria-current] { opacity: 1; outline-color: var(--ink); }
.pc__nav.is-single .pc__arrow { visibility: hidden; }
.pc__photo-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.pc__stage.is-photo .pc__photo-wrap { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.pc__stage.is-photo .pc__fig { opacity: 0; visibility: hidden; }
.pc__photo { display: block; height: 100%; max-height: min(62svh, 620px); width: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 26px 50px -30px rgba(40, 30, 20, .45); transition: opacity .35s ease; }
.pc__photo.is-loading { opacity: 0; }
@media (max-width: 1079.98px) {
  .pc__top { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 6px; }
  .pc__top .pc__thumbs { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 4px 0 2px; }
  .pc__top .pc__thumb { height: 56px; }
  .pc__top .pc__thumb img { height: calc(40px * var(--k, 1)); max-width: 44px; }
  .pc__gal { gap: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px; }
  .pc__gt { width: 46px; height: 58px; }
  .pc__photo { max-height: 100%; }
}

/* ================================================================ NEW IN, IN THREE (the user's layout)
   Three columns, the middle one raised a little above the white ones (a soft shadow at its edges): the words on white on the left (New in, the count, name, fabric, price,
   Discover the piece, the close-up, Shop new in at the foot); the piece in the middle on a faint windowpane, with every
   new piece beneath it between two arrows; and on the right, on white, one of Rouri's studio photographs of the piece,
   with a step to the next. On a phone the three stack: the words, the piece, the photograph. */
.page--split { grid-template-columns: 30% 40% 30%; grid-template-rows: minmax(0, 1fr); align-items: stretch; padding: 0; background: #fcfaf6; }
.pc__left, .pc__right { display: flex; flex-direction: column; justify-content: space-between; min-height: 0; box-sizing: border-box; background: #fcfaf6;
  padding: calc(66px + clamp(18px, 2.4vw, 34px)) clamp(26px, 3.9vw, 56px) clamp(26px, 4vh, 40px); }
.pc__left .pc__all { align-self: flex-start; }
.page--split .pc__info { max-width: none; }
.pc__right { align-items: stretch; }
.pc__right .pc__kicker { align-self: flex-end; }
/* the middle panel sits a little above the page (the user's pick): a soft shadow falls onto the white on both sides */
.pc__mid { position: relative; z-index: 1; overflow: hidden;   /* the pieces never leave the middle, even while they slide (the user) */
  box-shadow: -18px 0 30px -20px rgba(62, 46, 30, .34), 18px 0 30px -20px rgba(62, 46, 30, .34), -1px 0 0 rgba(62, 46, 30, .07), 1px 0 0 rgba(62, 46, 30, .07);
  display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 0; background: var(--pane-paper); padding: calc(66px + 10px) 0 clamp(22px, 3.4vh, 32px); }
.page--split .pc__stage { flex: 1; align-self: stretch; margin: 0; }
.page--split .pc__img { max-height: calc(min(100svh - 250px, 640px) * var(--scale, 1)); }
/* every piece beneath the one in the middle, the current one framed */
.page--split .pc__nav { gap: 10px; }
.page--split .pc__arrow { width: 38px; height: 38px; margin: 0 4px; font-size: 16px; }
.page--split .pc__thumbs { gap: 8px; }
.page--split .pc__thumb { width: 40px; min-width: 40px; height: 54px; padding: 4px; gap: 0; outline: 1px solid transparent; transition: outline-color .3s ease; }
.page--split .pc__thumb img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; opacity: .5; }
.page--split .pc__thumb i { width: 100%; height: 100%; }
.page--split .pc__thumb span { display: none; }
.page--split .pc__thumb[aria-current] { outline-color: var(--ink); }
.page--split .pc__thumb[aria-current] img { opacity: 1; }
/* the studio photograph */
.pc__studio { width: 100%; max-height: calc(100svh - 250px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; background: #ebe4d8; align-self: center; }
.pc__studio-img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: opacity .4s ease; }
.pc__studio-img.is-loading { opacity: 0; }
.page--split.no-studio .pc__studio, .page--split.no-studio .pc__cap { visibility: hidden; }
.pc__cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pc__cap em { font: italic 400 clamp(16px, 1.15vw, 19px)/1.2 var(--f-disp); color: var(--ink-2); }
.pc__step { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 400 15px/1 var(--f-disp); letter-spacing: .1em; font-variant-numeric: lining-nums; }
.pc__step svg { width: 26px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .35s var(--ease); }
.pc__step:hover svg, .pc__step:focus-visible svg { transform: translateX(4px); }
.pc__step[hidden] { display: none; }
@media (max-width: 1079.98px) {
  .page--split { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding: 0; }
  .pc__left, .pc__right { padding: 26px 22px 30px; border: 0; }
  .pc__left { padding-top: 84px; align-items: center; text-align: center; gap: 8px; }
  .pc__left .pc__all { align-self: center; }
  .page--split .pc__info { margin-top: 10px; }
  .pc__mid { padding: 22px 0 20px; box-shadow: 0 -16px 28px -20px rgba(62, 46, 30, .3), 0 16px 28px -20px rgba(62, 46, 30, .3), 0 -1px 0 rgba(62, 46, 30, .07), 0 1px 0 rgba(62, 46, 30, .07); }   /* stacked: the shadow falls above and below */
  .page--split .pc__stage { flex: none; height: min(52vh, 460px); }
  .page--split .pc__img { max-height: calc(min(42vh, 400px) * var(--scale, 1)); }
  .page--split .pc__nav .pc__arrow { display: none; }
  .page--split .pc__thumbs { max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 6px; }
  .pc__right { gap: 16px; }
  .pc__right .pc__kicker { align-self: flex-start; }
  .pc__studio { max-height: none; }
}

/* New in, the first time it comes into view, and the Hydrangea pieces each time they open (they share .page--split; main.js
   adds .pc-pre, then .pc-in): slowly, in three steps, in the user's
   order. 1, the words on the left, line by line. 2, the studio photograph on the right. 3, last, once you are there, the
   piece in the middle: its panel lifts off the page (the shadow grows, it warms to cream), the garment rises into it, the
   pieces beneath follow. Soft, once, about five seconds; no zoom */
.page--split.pc-pre .pc__mid { box-shadow: none; background-color: #fcfaf6; }
.page--split.pc-pre .pc__stage, .page--split.pc-pre .pc__left > *, .page--split.pc-pre .pc__right > *, .page--split.pc-pre .pc__nav { opacity: 0; }
/* 1 · the words: the kicker, then the count, name, fabric, price, link and close-up one after another, then Shop new in */
.page--split.pc-in .pc__left > :not(.pc__info), .page--split.pc-in .pc__info > * { animation: pc-rise 1.4s var(--ease) both; }
.page--split.pc-in .pc__left > :nth-child(1) { animation-delay: .2s; }
.page--split.pc-in .pc__info > :nth-child(1) { animation-delay: .45s; }
.page--split.pc-in .pc__info > :nth-child(2) { animation-delay: .57s; }
.page--split.pc-in .pc__info > :nth-child(3) { animation-delay: .69s; }
.page--split.pc-in .pc__info > :nth-child(4) { animation-delay: .81s; }
.page--split.pc-in .pc__info > :nth-child(5) { animation-delay: .93s; }
.page--split.pc-in .pc__info > :nth-child(6) { animation-delay: 1.05s; }
.page--split.pc-in .pc__left > :nth-child(3) { animation-delay: 1.2s; }
/* 2 · the photograph on the right */
.page--split.pc-in .pc__right > * { animation: pc-rise 1.4s var(--ease) both; }
.page--split.pc-in .pc__right > :nth-child(1) { animation-delay: 1.5s; }
.page--split.pc-in .pc__right > :nth-child(2) { animation-delay: 1.7s; }
.page--split.pc-in .pc__right > :nth-child(3) { animation-delay: 2s; }
/* 3 · the piece in the middle, last */
.page--split.pc-in .pc__mid { animation: pc-lift 1.8s cubic-bezier(.22, .61, .36, 1) 2.5s both; }
.page--split.pc-in .pc__stage { animation: pc-arrive 2s var(--ease) 2.9s both; }
.page--split.pc-in .pc__nav { animation: pc-rise 1.4s var(--ease) 3.8s both; }
@keyframes pc-lift { from { background-color: #fcfaf6; box-shadow: 0 0 30px -20px rgba(62, 46, 30, 0), 0 0 30px -20px rgba(62, 46, 30, 0), 0 0 0 rgba(62, 46, 30, 0), 0 0 0 rgba(62, 46, 30, 0); } }
@keyframes pc-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pc-arrive { from { opacity: 0; transform: translateY(26px); } }   /* the garment: a little further, a little slower */

/* The Diary, the first time it comes into view (main.js adds .dy-pre, then .dy-in), in the same slow way as New in (the
   user's). 1, the words: the kicker, the title, the short rule drawn out from its middle. 2, round the
   edges, the word list and the shell, a soft fade. 3, the four chapters one after another, each shape rising with its
   numeral and name. 4, Read the whole story. Soft, once, about five seconds. Only opacity and transform move, on their own
   layers while it plays, so the pressed-paper filters don't have to be redrawn */
.journal.dy-pre .journal__kicker, .journal.dy-pre .journal__title, .journal.dy-pre .journal__rule,
.journal.dy-pre .journal__words, .journal.dy-pre .journal__shell, .journal.dy-pre .journal__tiles > li, .journal.dy-pre .journal__cta { opacity: 0; }
.journal.dy-in .journal__kicker, .journal.dy-in .journal__title, .journal.dy-in .journal__rule,
.journal.dy-in .journal__words, .journal.dy-in .journal__shell, .journal.dy-in .journal__tiles > li, .journal.dy-in .journal__cta { will-change: transform, opacity; }
/* 1 · the words */
.journal.dy-in .journal__kicker { animation: pc-rise 1.4s var(--ease) .45s both; }
.journal.dy-in .journal__title { animation: pc-arrive 1.8s var(--ease) .4s both; }
.journal.dy-in .journal__rule { animation: dy-draw 1.2s var(--ease) 1s both; }
/* 2 · round the edges */
.journal.dy-in .journal__words, .journal.dy-in .journal__shell { animation: dy-fade 1.6s ease .15s both; }
/* 3 · the four chapters, one after another */
.journal.dy-in .journal__tiles > li { animation: pc-arrive 1.8s var(--ease) both; }
.journal.dy-in .journal__tiles > li:nth-child(1) { animation-delay: .8s; }
.journal.dy-in .journal__tiles > li:nth-child(2) { animation-delay: 1.1s; }
.journal.dy-in .journal__tiles > li:nth-child(3) { animation-delay: 1.4s; }
.journal.dy-in .journal__tiles > li:nth-child(4) { animation-delay: 1.7s; }
/* 4 · the link */
.journal.dy-in .journal__cta { animation: pc-rise 1.4s var(--ease) 3.2s both; }
@keyframes dy-draw { from { opacity: 0; transform: scaleX(0); } }
@keyframes dy-fade { from { opacity: 0; } }

/* ================================================================ HERO: the still life, then the film
   The still life holds a few seconds, then fades into the film (assets/film.mp4, muted, played once); as the film
   ends it fades back to the still life, and round again (main.js). The name, the lines and the bar stay put. */
.hero__slide { opacity: 0; transition: opacity 1.8s ease; }
.hero__slide.is-on { opacity: 1; }
/* the third picture: the user's painting of a white butterfly over a green meadow, shown as painted (no settle, no
   colour change, never enlarged). Its butterfly sits almost where the name is, so the painting is placed to keep it
   clear: up and to the left on wide screens, beside the name on phones */
.hero__img--paint { object-position: 100% 100%; filter: none; }
.js .hero__img--paint { animation: none; }
@media (max-width: 1079.98px) { .hero__img--paint { object-position: 64% 50%; } }   /* the butterfly just left of the name */
.hero__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* the film's window is bright where the motto sits: a soft shadow on the letters themselves (no layer over the film) */
.hero__motto, .hero__nav a { text-shadow: 0 1px 2px rgba(40, 28, 12, .85), 0 0 6px rgba(40, 28, 12, .6), 0 0 22px rgba(40, 28, 12, .55); }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition-duration: .01s; } .hero__video { display: none; } }

@media (prefers-reduced-motion: reduce) { .hero__slide { transition-duration: .01s; } }