/* ==========================================================================
   AJ & CO — homepage variant 3 ("dark house")
   Loaded ONLY by index_3.html, on top of style.css.

   THE BRIEF WAS "premium look and feel, animated". Both halves of that are easy
   to get wrong in the same way — by adding more. So the rules this file follows:

   PREMIUM IS SPACE AND RESTRAINT, not ornament. Lighter type at larger sizes,
   roughly double the vertical rhythm of the other two homepages, one accent
   colour used sparingly, and dark grounds carrying most of the page — which is
   also simply how jewellery photographs. Nothing here adds a gradient, a shadow
   or a border radius that the design did not already use.

   MOTION IS DIRECTION, not decoration. Every animation does one of three jobs:
   it reveals content in reading order, it links a change to the scroll position
   that caused it, or it draws attention to a number. Anything that moved purely
   to look busy is not here.

   ONLY transform AND opacity ARE ANIMATED. Both are composited, so none of this
   triggers layout or paint while scrolling. The pinned sections set their own
   height once and then only translate.

   REDUCED MOTION IS A FIRST-CLASS PATH, not an afterthought. The reveal states
   are scoped to `.h3-js`, a class added by a two-line inline script in the head
   that deliberately does NOT add it when the user has asked for reduced motion.
   So: no JavaScript, or reduced motion, and every element is simply visible in
   its final state — no opacity:0 orphans, no empty page. The block at the end of
   this file neutralises the rest.
   ========================================================================== */

.h3 {
  /* On-dark text alphas. Fixed values rather than tokens because they sit on
     --ib-deep in every palette and have to stay legible against all three. */
  --h3-on-dark: rgba(255, 255, 255, .74);
  --h3-on-dark-dim: rgba(255, 255, 255, .48);
  --h3-hairline: rgba(255, 255, 255, .14);
  --h3-pad: clamp(4rem, 10vw, 9rem);
}

/* Generous, consistent rhythm. The other homepages use .ib-section; this one is
   deliberately roomier, which is most of what reads as "premium". */
.h3-sec { padding: var(--h3-pad) 0; }
.h3-sec--dark { background: var(--ib-deep); color: var(--h3-on-dark); }
.h3-sec--dark h2, .h3-sec--dark h3, .h3-sec--dark .h3-stat-v { color: #fff; }
.h3-sec--dark .ib-eyebrow { color: var(--h3-on-dark-dim); }
.h3-sec--tint { background: var(--ib-tint); }

.h3-display {
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  font-weight: 200; line-height: 1.04; letter-spacing: -.03em; margin: 0;
}
.h3-h2 {
  font-size: clamp(1.625rem, 3.4vw, 2.75rem);
  font-weight: 200; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 1.25rem;
}
.h3-lede {
  font-size: clamp(.9375rem, 1.2vw, 1.0625rem); line-height: 1.75;
  max-width: 52ch; margin: 0 0 2rem;
}
.h3-kicker {
  font-size: .625rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ib-accent); margin-bottom: 1.25rem;
}
.h3-rule { height: 1px; background: var(--ib-line); border: 0; margin: 0; }
.h3-sec--dark .h3-rule { background: var(--h3-hairline); }

/* ==========================================================================
   Scroll progress
   Two pixels of accent at the very top. It is the one piece of pure chrome on
   the page, and it earns its place because the page is long and mostly dark:
   without it there is no cue for how much is left.
   ========================================================================== */
.h3-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 1050; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--ib-accent);
}

/* ==========================================================================
   Reveal primitives
   One attribute, four flavours, driven by a single IntersectionObserver. The
   --i custom property staggers siblings without a class per position.
   ========================================================================== */
.h3-js [data-h3-reveal] {
  opacity: 0;
  transition:
    opacity .9s cubic-bezier(.22, .61, .36, 1),
    transform .9s cubic-bezier(.22, .61, .36, 1),
    clip-path .9s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.h3-js [data-h3-reveal="up"]   { transform: translateY(28px); }
.h3-js [data-h3-reveal="fade"] { transform: none; }
.h3-js [data-h3-reveal="left"] { transform: translateX(-28px); }
/* A wipe rather than a fade, for images: the frame stays put and the picture
   arrives inside it, which reads as intent rather than as a slow load. */
.h3-js [data-h3-reveal="mask"] {
  opacity: 1; clip-path: inset(0 0 100% 0);
}
.h3-js [data-h3-reveal].is-in {
  opacity: 1; transform: none; clip-path: inset(0 0 0 0);
}

/* Headline words. Each word is wrapped by JS in a span inside a clipping span,
   so the line assembles from below instead of fading in as a block. */
.h3-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.h3-word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--w, 0) * 55ms);
}
.h3-js .is-in .h3-word > span,
.h3-word.is-in > span { transform: none; }
/* Without JS the wrappers are never created, so the text is just text. */

/* ==========================================================================
   1. Cinematic hero
   ========================================================================== */
.h3-hero {
  position: relative; min-height: min(96vh, 900px);
  display: flex; align-items: flex-end;
  background: var(--ib-hero-bg); color: #fff; overflow: hidden;
}
.h3-hero-media { position: absolute; inset: 0; }
.h3-hero-media img,
.h3-hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Slow push in. 24s is long enough that it reads as stillness with life in it
     rather than as movement. */
  animation: h3-push 24s ease-out both;
}
@keyframes h3-push {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
.h3-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .1) 38%, rgba(0, 0, 0, .82) 100%);
}
.h3-hero-in {
  position: relative; width: 100%;
  padding-bottom: clamp(3.5rem, 8vw, 7rem); padding-top: clamp(6rem, 14vw, 10rem);
}
.h3-hero .h3-display { max-width: 22ch; }
.h3-hero .h3-display { color:#fff; max-width:18ch; font-size:clamp(3.2rem,7vw,6.8rem); line-height:.92; letter-spacing:-.055em; text-shadow:0 2px 30px rgba(0,0,0,.2); }
.h3-hero .h3-lede { color: rgba(255, 255, 255, .82); }
.h3-hero .h3-kicker { color: rgba(255, 255, 255, .7); }
.h3-hero-edition { position:absolute; right:0; bottom:clamp(4rem,8vw,7rem); display:grid; grid-template-columns:auto auto; align-items:end; gap:0 .75rem; padding-left:1.25rem; border-left:1px solid rgba(255,255,255,.38); color:#fff; }
.h3-hero-edition span,.h3-hero-edition small { font-size:.57rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.58); }
.h3-hero-edition strong { grid-row:1/3; grid-column:2; font-size:3.75rem; line-height:.8; font-weight:200; }
.h3-hero-edition small { display:block; }

.h3-ticker { overflow:hidden; background:var(--ib-accent); color:#111; }
.h3-ticker>div { display:flex; width:max-content; min-width:100%; justify-content:space-around; }
.h3-ticker span { display:flex; align-items:center; gap:1.5rem; padding:1rem 1.5rem; white-space:nowrap; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; }
.h3-ticker span::after { content:'◆'; font-size:.42rem; }

.h3-cue {
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: .625rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); margin-top: 3rem;
}
.h3-cue::after {
  content: ""; width: 1px; height: 34px; background: rgba(255, 255, 255, .4);
  transform-origin: 50% 0; animation: h3-cue 2.4s ease-in-out infinite;
}
@keyframes h3-cue {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ==========================================================================
   2. Stat band — figures count up when they arrive
   ========================================================================== */
.h3-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--h3-hairline);
}
.h3-stat { padding: clamp(1.75rem, 4vw, 3rem) 1.5rem clamp(1.75rem, 4vw, 3rem) 0; }
.h3-stat + .h3-stat { padding-left: 1.5rem; border-left: 1px solid var(--h3-hairline); }
.h3-stat-v {
  font-size: clamp(1.875rem, 4vw, 3.25rem); font-weight: 200;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.h3-stat-l {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--h3-on-dark-dim); margin-top: .875rem; line-height: 1.6;
}

/* ==========================================================================
   3. Pinned chapters
   The media column stays while the copy moves past it, and the picture changes
   with the chapter you are reading. Scroll position drives the change, so the
   image is never showing something the words are not talking about.
   ========================================================================== */
.h3-chapters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
.h3-chapters-media {
  position: sticky; top: calc(var(--ib-header-h) + 2.5rem);
  height: min(72vh, 660px); background: var(--ib-hero-bg); overflow: hidden;
}
.h3-chapters-media figure { position: absolute; inset: 0; margin: 0; }
.h3-chapters-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Crossfade, with the outgoing frame drifting very slightly so the swap has a
   direction rather than being a dissolve. */
.h3-chapters-media figure {
  opacity: 0; transform: scale(1.04);
  transition: opacity .8s ease, transform 1.2s ease;
}
.h3-chapters-media figure.is-on { opacity: 1; transform: none; }
.h3-chapter { padding: clamp(3rem, 12vh, 8rem) 0; }
.h3-chapter:first-child { padding-top: 0; }
.h3-chapter-n {
  font-size: .625rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ib-accent); margin-bottom: 1rem;
}
.h3-chapter h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 300; letter-spacing: -.015em; margin: 0 0 1rem; }
.h3-chapter p { max-width: 46ch; margin: 0 0 1rem; }

/* ==========================================================================
   4. Pinned horizontal gallery
   Vertical scroll drives horizontal travel. The section is made as tall as the
   track is wide, the viewport sticks, and the track translates — so the browser
   keeps native scrolling and momentum instead of us reimplementing either.

   Only above 992px, and only when motion is allowed. On touch, a pinned
   sideways scroller fights the gesture the user is already making, so it
   degrades to the ordinary .h3-rail below.
   ========================================================================== */
.h3-pin { position: relative; }

/* Default state is an ordinary horizontal scroller, so the section works with
   no JavaScript at all and on every touch device. */
.h3-pin-vp { overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.h3-pin-track {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  /* The track carries its own gutters rather than sitting in a .container: the
     travel maths has to know the exact track width, and a max-width ancestor
     makes that a guess. */
  padding: 0 clamp(1.25rem, 6vw, 4rem);
}
.h3-pin-track > * { flex: 0 0 clamp(230px, 26vw, 340px); scroll-snap-align: start; }

/* Pinned state, added by JS only above 992px and only when motion is allowed.
   The viewport must be a DIRECT child of the tall section — sticky travels
   inside its parent, so nesting it in a wrapper would give it nowhere to go. */
.h3-pin.is-pinned .h3-pin-vp {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; padding-bottom: 0; scroll-snap-type: none;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.h3-pin.is-pinned .h3-pin-track { will-change: transform; }

/* Editorial card. Taller and quieter than .ib-card — no swatches, no wishlist
   heart, no badge. On a page like this the product is a photograph with a name. */
.h3-piece { display: block; color: inherit; }
.h3-piece-media { position: relative; overflow: hidden; background: var(--ib-tile); aspect-ratio: 3 / 4; }
.h3-piece-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.h3-piece:hover .h3-piece-media img { transform: scale(1.06); }
.h3-piece-body { padding: 1.125rem 0 0; }
.h3-piece h3 { font-size: 1rem; font-weight: 400; margin: 0 0 .3125rem; letter-spacing: -.01em; }
.h3-piece-sub { font-size: .8125rem; color: var(--h3-on-dark-dim); margin: 0 0 .625rem; }
.h3-sec--dark .h3-piece h3 { color: #fff; }
.h3-piece-price { font-size: .875rem; color: var(--ib-accent); }
.h3-edit-head { display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:end; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.h3-piece-index { position:absolute; top:1rem; left:1rem; padding:.45rem .6rem; background:rgba(0,0,0,.72); color:#fff; font-size:.6rem; letter-spacing:.15em; }
.h3-piece-type { margin:0 0 .45rem; color:var(--ib-accent)!important; font-size:.6rem!important; letter-spacing:.16em; text-transform:uppercase; }
.h3-piece-meta { display:flex; justify-content:space-between; gap:1rem; padding-top:.75rem; border-top:1px solid var(--h3-hairline); font-size:.7rem; }
.h3-piece-meta span { color:var(--h3-on-dark-dim); text-transform:uppercase; letter-spacing:.08em; }
.h3-piece-meta strong { color:#fff; font-weight:500; }
.h3-rooms { padding-top:calc(var(--h3-pad) * .8); }
.h3-rooms-head { display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:end; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.h3-room-grid { display:grid; grid-template-columns:1.08fr .92fr .92fr; gap:2px; }
.h3-room { position:relative; display:block; min-height:min(64vw,680px); overflow:hidden; background:#111; color:#fff; }
.h3-room:nth-child(2),.h3-room:nth-child(3) { min-height:min(56vw,620px); margin-top:clamp(2rem,5vw,5rem); }
.h3-room>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.h3-room:hover>img { transform:scale(1.055); }
.h3-room-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 65%); }
.h3-room>small { position:absolute; top:1.25rem; left:1.25rem; padding:.45rem .65rem; border:1px solid rgba(255,255,255,.42); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; }
.h3-room>div { position:absolute; left:clamp(1.25rem,3vw,2.5rem); right:clamp(1.25rem,3vw,2.5rem); bottom:clamp(1.5rem,3vw,2.75rem); }
.h3-room em { display:block; margin-bottom:.55rem; color:var(--ib-accent); font-style:normal; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; }
.h3-room strong { display:block; margin-bottom:.7rem; color:#fff; font-size:clamp(1.35rem,2.4vw,2.3rem); font-weight:300; line-height:1; }
.h3-room b { color:rgba(255,255,255,.62); font-size:.68rem; font-weight:400; letter-spacing:.04em; }
.h3-closing-mark { display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:4rem 1rem; background:#080808; color:rgba(255,255,255,.45); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; }
.h3-closing-mark img { width:48px; filter:invert(1); opacity:.7; }

/* ==========================================================================
   5. Editorial split with a wipe
   ========================================================================== */
.h3-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.h3-split--flip .h3-split-media { order: 2; }
.h3-split-media { position: relative; overflow: hidden; background: var(--ib-hero-bg); aspect-ratio: 4 / 5; }
.h3-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   6. Quote
   ========================================================================== */
.h3-quote-in { max-width: 40ch; margin: 0 auto; text-align: center; }
.h3-quote blockquote {
  font-size: clamp(1.375rem, 3vw, 2.25rem); font-weight: 200;
  line-height: 1.35; letter-spacing: -.02em; color: #fff; margin: 0 0 2rem;
}
.h3-quote-stars { color: var(--ib-accent); letter-spacing: .3em; font-size: .75rem; margin-bottom: 1.75rem; }
.h3-quote-who { font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--h3-on-dark-dim); }
.h3-quote-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 2.5rem; }
.h3-quote-dots button {
  width: 22px; height: 1px; padding: 0; border: 0; background: rgba(255, 255, 255, .26);
  cursor: pointer; transition: background-color .3s ease, transform .3s ease;
}
.h3-quote-dots button.is-on { background: var(--ib-accent); transform: scaleY(2); }

/* ==========================================================================
   7. Capsule / service cards with a hover lift
   ========================================================================== */
.h3-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.h3-card { display: block; color: inherit; }
.h3-card-media { position: relative; overflow: hidden; background: var(--ib-tile); aspect-ratio: 4 / 3; }
.h3-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.h3-card:hover .h3-card-media img { transform: scale(1.05); }
.h3-card-body { padding: 1.125rem 0 0; }
.h3-card h3 { font-size: 1.0625rem; font-weight: 400; margin: 0 0 .375rem; letter-spacing: -.01em; }
.h3-card p { font-size: .8125rem; margin: 0; color: var(--ib-muted); }

/* A link whose underline draws itself. Cheap, and it is the sort of detail the
   word "premium" actually refers to. */
.h3-link {
  display: inline-block; position: relative; padding-bottom: .25rem;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ib-ink);
}
.h3-sec--dark .h3-link { color: #fff; }
.h3-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.h3-link:hover { color: var(--ib-accent); }
.h3-link:hover::after, .h3-link:focus-visible::after { transform: scaleX(1); }

/* ==========================================================================
   8. Instagram band
   ========================================================================== */
.h3-ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.h3-ig .ib-ig-cell img { transition: transform 1.1s cubic-bezier(.22, .61, .36, 1); }
.h3-ig .ib-ig-cell:hover img { transform: scale(1.07); }

/* ==========================================================================
   9. Closing block
   ========================================================================== */
.h3-visit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 5rem); }
.h3-hours div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .625rem 0; border-bottom: 1px solid var(--h3-hairline); font-size: .8125rem;
}
.h3-hours span { color: var(--h3-on-dark-dim); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .h3-edit-head { grid-template-columns:1fr; }
  .h3-rooms-head { grid-template-columns:1fr; }
  .h3-room-grid { grid-template-columns:1fr 1fr; }
  .h3-room:first-child { grid-column:1/-1; min-height:70vw; }
  .h3-room:nth-child(2),.h3-room:nth-child(3) { margin-top:0; min-height:70vw; }
  .h3-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h3-stat:nth-child(3) { border-left: 0; }
  .h3-stat:nth-child(n+3) { border-top: 1px solid var(--h3-hairline); }
  .h3-chapters, .h3-split, .h3-visit { grid-template-columns: minmax(0, 1fr); }
  .h3-split--flip .h3-split-media { order: 0; }
  /* Un-stick the media column: a picture that holds half a small screen while
     text scrolls past it is a picture in the way.

     `relative`, not `static`. The frames inside are absolutely positioned with
     inset:0, so they need this element to stay their containing block — with
     `static` they resolved against the page instead, sized themselves to the
     whole document, and the 1.04 scale on the inactive frame then pushed the
     document 2% wider at every mobile width. */
  .h3-chapters-media { position: relative; height: min(52vh, 420px); }
  .h3-chapter { padding: 2.5rem 0; }
  .h3-chapter:first-child { padding-top: 2rem; }
  .h3-ig { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 575.98px) {
  .h3-hero-edition { display:none; }
  .h3-room-grid { grid-template-columns:1fr; }
  .h3-room:first-child { grid-column:auto; }
  .h3-room,.h3-room:first-child,.h3-room:nth-child(2),.h3-room:nth-child(3) { min-height:125vw; }
  .h3-stats { grid-template-columns: minmax(0, 1fr); }
  .h3-stat, .h3-stat + .h3-stat { padding: 1.5rem 0; border-left: 0; }
  .h3-stat + .h3-stat { border-top: 1px solid var(--h3-hairline); }
  .h3-ig { grid-template-columns: repeat(3, 1fr); }
  .h3-hero { min-height: min(88vh, 720px); }
}

/* ==========================================================================
   Reduced motion
   Everything above becomes a static layout. Note this also covers the case
   where .h3-js was never added, because the reveal states only exist under it.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .h3-hero-media img,
  .h3-hero-media video { animation: none; transform: none; }
  .h3-cue::after { animation: none; transform: none; opacity: .6; }
  .h3-progress { display: none; }
  .h3-chapters-media { position: relative; height: min(56vh, 460px); }
  .h3-chapters-media figure { transition: none; }
  .h3-pin.is-pinned .h3-pin-vp { position: static; height: auto; }
  .h3-piece-media img,
  .h3-card-media img,
  .h3-ig .ib-ig-cell img { transition: none; }
  .h3-piece:hover .h3-piece-media img,
  .h3-card:hover .h3-card-media img,
  .h3-ig .ib-ig-cell:hover img { transform: none; }
  .h3-link::after { transition: none; }
  .h3-quote-dots button { transition: none; }
}