/* ==========================================================================
   CIZELE — `.czn` design layer (Frontend Design concept)
   --------------------------------------------------------------------------
   A refinement layer over the existing design system, NOT a replacement. It inherits every brand
   token from base.css (plum / gold / champagne / ivory, Cormorant + Inter, the button system) and
   changes only the things that make an interface feel calm: rhythm, restraint and room.

   The five rules this layer enforces (they are what the references actually have in common):
     1. NO CARD CHROME. A product is an image on a ground plus two lines of text. No borders, no
        shadows, no rounded boxes competing with the photography.
     2. ONE ACCENT PER VIEW. Champagne is reserved for the single most important thing on screen.
     3. SPACE IS THE LUXURY. Section rhythm is generous and consistent; nothing is ever dense.
     4. MOTION IS SLOW AND OPTIONAL. 700-1100ms, ease-out, opacity + small translate only. Never a
        bounce, never a scale-up, and nothing at all under prefers-reduced-motion.
     5. TYPE CARRIES THE HIERARCHY, not weight or colour. One serif statement, one sans label, one
        body size. Size does the work.

   The "flowing colour" identity is preserved but re-authored: instead of decorative blurred orbs
   sitting ON the page, `.czn-aura` is an ambient plum/gold field drifting BEHIND content at very
   low opacity over a 60s cycle. Present, never noticed — which is the point.

   Scoped under `.czn` so it cannot bleed into the live pages.
   ========================================================================== */

.czn{
  /* Rhythm — one cadence for the whole page. Every section uses these, nothing hard-codes padding. */
  --czn-sec:clamp(5rem,11vh,9rem);      /* standard section padding-block */
  --czn-sec-lg:clamp(7rem,16vh,13rem);  /* statement sections that need air */
  --czn-gut:clamp(1.4rem,5vw,4.5rem);   /* page gutter (matches header at desktop) */
  --czn-wrap:1440px;
  --czn-measure:52ch;                   /* reading measure — copy never runs wider */

  /* Deliberate 4/8/12/16/24/32 steps, exposed so spacing decisions read as decisions. */
  --czn-1:.25rem; --czn-2:.5rem; --czn-3:.75rem; --czn-4:1rem;
  --czn-5:1.5rem; --czn-6:2rem; --czn-7:3rem; --czn-8:4rem; --czn-9:6rem;

  /* Grounds. Dark = emotive/editorial. Ivory = product/utility (our photography is shot on ivory,
     so the product ground and the page ground become one surface — the Cullen lesson). */
  --czn-ink:#0E0A0F;
  --czn-ink-2:#150F17;
  --czn-ivory:#F6F2EC;
  --czn-ivory-2:#EFE9E1;
  --czn-on-ivory:#2A2130;
  --czn-on-ivory-mut:#6B6068;
  --czn-hair:rgba(255,255,255,.09);
  --czn-hair-ink:rgba(42,33,48,.14);

  --czn-e:cubic-bezier(.22,1,.36,1);
  --czn-t:.7s;

  position:relative;
  background:var(--czn-ink);
  color:var(--txt);
  overflow:clip;
}

/* Shared containers ------------------------------------------------------- */
.czn-wrap{max-width:var(--czn-wrap);margin-inline:auto;padding-inline:var(--czn-gut)}
.czn-sec{position:relative;padding-block:var(--czn-sec)}
.czn-sec--lg{padding-block:var(--czn-sec-lg)}
.czn-sec--ivory{background:var(--czn-ivory);color:var(--czn-on-ivory)}
/* Ground overrides are declared at 0,3,0 on purpose. The dark-ground defaults below (`.czn .czn-lede`)
   are 0,2,0 and are declared LATER in the file, so an equal-specificity override here would silently
   lose the cascade and print light-on-ivory — a real contrast failure rather than a styling nit.
   Specificity, not source order, keeps this correct. */
.czn .czn-sec--ivory .czn-lede{color:var(--czn-on-ivory-mut)}
.czn .czn-sec--ivory .czn-note{color:var(--czn-on-ivory-mut)}

/* Type -------------------------------------------------------------------- */
/* NO EYEBROWS. There was a tracked all-caps kicker above all six sections — the single most
   recognisable AI-landing-page tell, and it was doing no work here: "The collection" above a heading
   that already read "Designs to begin from" is the same sentence twice in two type styles. The
   headings now carry their own sections. The one fact the kickers held that wasn't repeated
   elsewhere ("no prices online, no checkout") moved into the closing note, where it reassures at the
   moment someone is deciding to make contact instead of decorating a section they're scrolling past.

   Element+class specificity (0,2,0) so these win over base.css `.cz h2` (0,1,1) without !important. */
.czn h1.czn-display{font-size:clamp(2.8rem,6.4vw,5.6rem);line-height:1.04;letter-spacing:-.025em;margin:0;text-wrap:balance}
.czn h2.czn-title{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance}
.czn h3.czn-sub{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.3;letter-spacing:-.01em;margin:0}
.czn .czn-display em,.czn .czn-title em{font-style:italic;color:var(--champ)}
.czn .czn-lede{
  font-family:var(--sans);font-size:1.0625rem;font-weight:340;line-height:1.75;
  color:#C4BAC3;max-width:var(--czn-measure);margin:var(--czn-5) 0 0;text-wrap:pretty
}
.czn .czn-note{font-family:var(--sans);font-size:.8rem;letter-spacing:.02em;color:#A79BA5}

/* Lucide icons (inc/icons.php). Inline SVG: colour comes from the text beside them. */
.czn .czi{display:inline-block;flex:0 0 auto;vertical-align:middle}

/* Ambient flowing colour --------------------------------------------------
   Two oversized radial fields (plum, gold) drifting behind the content. Very low opacity, very slow,
   blurred past the point of being a "shape" — it reads as light in the room, not as a graphic. */
.czn-aura{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;overflow:hidden}
.czn-aura::before,.czn-aura::after{
  content:"";position:absolute;width:70vw;height:70vw;max-width:1000px;max-height:1000px;
  border-radius:50%;filter:blur(120px);opacity:.22;will-change:transform
}
.czn-aura::before{
  top:-18%;left:-12%;
  background:radial-gradient(circle,rgba(131,77,114,.9),rgba(131,77,114,0) 68%);
  animation:czn-drift-a 64s ease-in-out infinite
}
.czn-aura::after{
  bottom:-24%;right:-14%;
  background:radial-gradient(circle,rgba(201,168,106,.55),rgba(201,168,106,0) 68%);
  animation:czn-drift-b 78s ease-in-out infinite
}
.czn-aura--soft::before,.czn-aura--soft::after{opacity:.13}
@keyframes czn-drift-a{
  0%,100%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(6%,4%,0)}
  66%{transform:translate3d(-4%,7%,0)}
}
@keyframes czn-drift-b{
  0%,100%{transform:translate3d(0,0,0)}
  40%{transform:translate3d(-7%,-5%,0)}
  75%{transform:translate3d(4%,-8%,0)}
}
.czn-sec>.czn-wrap{position:relative;z-index:1}

/* Motion -------------------------------------------------------------------
   There WAS a scroll-triggered fade-up on all seventeen `[data-czn-rise]` blocks. It is gone, for two
   reasons that both matter:

   1. It shipped a broken page. Gating content on an IntersectionObserver means anything that renders
      without scrolling — a screenshot, a social-preview crawler, a print — sees every section below
      the hero as blank. Verified: a full-page capture showed an empty document under the hero.
   2. Even working, it was the wrong motion. One identical entrance applied to every section is the
      uniform reflex that reads as generated; it also does nothing for the reader, since content that
      animates in on scroll is content you have already scrolled to.

   What replaces it is ONE deliberate moment: the hero settles on arrival. It is above the fold, so it
   always runs, and it is an animation rather than a JS-toggled class — nothing can leave it stuck in
   the hidden state. Everything below the hero is simply present, which is what a calm page does.
   `backwards` fill applies the from-state during the delay without a separate hiding rule. */
@keyframes czn-settle{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .czn-hero__copy>*,.czn-proof{animation:czn-settle .7s var(--czn-e) backwards}
  .czn-hero__copy>*:nth-child(2){animation-delay:.06s}
  .czn-hero__copy>*:nth-child(3){animation-delay:.12s}
  .czn-hero__cta{animation-delay:.18s}
  .czn-proof{animation-delay:.26s}
}

/* ==========================================================================
   1 · HERO — one image, one statement, one action. The proof line lives on the
   hero's own baseline instead of becoming a section of its own.
   ========================================================================== */
.czn-hero{position:relative;min-height:min(92vh,880px);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.czn-hero__media{position:absolute;inset:0;z-index:-1}
.czn-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* Two-stop scrim: a deep plum-black base for text contrast, fading to nothing over the upper half so
   the photograph is never flattened. */
.czn-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,10,15,.94) 0%,rgba(14,10,15,.72) 26%,rgba(14,10,15,.18) 58%,rgba(14,10,15,.3) 100%)}
.czn-hero__inner{position:relative;max-width:var(--czn-wrap);width:100%;margin-inline:auto;
  padding:0 var(--czn-gut) clamp(2.5rem,6vh,4rem)}
/* NOTE: this column is capped in px, not `ch`. `ch` resolves against the element's own inherited
   font-size (16px here), NOT against the 90px display type inside it — a 20ch cap produced a ~176px
   column that broke the headline to one word per line. Measure caps belong on the text element
   itself, where the font-size they are measuring actually applies. */
.czn-hero__copy{max-width:min(760px,62%)}
.czn-hero .czn-lede{max-width:44ch;color:#CFC5CD}
.czn-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--czn-5);margin-top:var(--czn-7)}
/* The secondary action is a text link, not a second button. Two buttons side by side make neither
   one primary — the single loudest element on the page should be the way into the builder. */
.czn-hero__quiet{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.72rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#D9D0D7;
  padding-block:.5rem;border-bottom:1px solid rgba(255,255,255,.22);transition:color .4s var(--czn-e),border-color .4s var(--czn-e)}
.czn-hero__quiet:hover{color:var(--champ);border-color:var(--champ)}
.czn-hero__quiet .czi{transition:transform .4s var(--czn-e)}
.czn-hero__quiet:hover .czi{transform:translateX(3px)}

/* Proof line — a hairline rule with four quiet facts. Replaces the marquee ticker: the same
   information, none of the motion or the retail-banner connotation. */
.czn-proof{border-top:1px solid var(--czn-hair);margin-top:clamp(2.5rem,6vh,4rem)}
.czn-proof__row{display:flex;flex-wrap:wrap;gap:var(--czn-4) clamp(1.5rem,4vw,3.5rem);padding-block:var(--czn-5)}
.czn-proof__i{display:flex;align-items:center;gap:.7rem;font-family:var(--sans);font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:#A79BA5}
.czn-proof__i::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.8;flex:0 0 4px}

/* ==========================================================================
   2 · THE PATH — how the experience works, and the primary door into the builder.
   Three steps, numbered, on ivory. This is the section that answers "what can I do here".
   ========================================================================== */
.czn-path__head{max-width:60ch;margin-bottom:clamp(3rem,7vh,5rem)}
.czn-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,4.5rem)}
.czn-step{position:relative;padding-top:var(--czn-6);border-top:1px solid var(--czn-hair-ink)}
.czn-step__n{display:block;font-family:var(--serif);font-size:1rem;font-style:italic;
  color:var(--plum);opacity:.75;margin-bottom:var(--czn-4)}
.czn-step__t{display:block;font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.25;letter-spacing:-.01em;color:var(--czn-on-ivory);margin-bottom:var(--czn-3)}
.czn-step__d{font-family:var(--sans);font-size:.95rem;line-height:1.7;color:var(--czn-on-ivory-mut);margin:0;max-width:34ch}
.czn-path__act{margin-top:clamp(3rem,7vh,5rem);display:flex;flex-wrap:wrap;align-items:center;gap:var(--czn-5)}
.czn-path__act .czn-note{color:var(--czn-on-ivory-mut)}

/* ==========================================================================
   3 · THE COLLECTION — product presentation with no card chrome at all.
   Image on the ivory ground, name, one attribute line, metal dots. The photograph is the card.
   ========================================================================== */
.czn-coll__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--czn-6);margin-bottom:clamp(2.5rem,6vh,4rem)}
.czn-coll__head .czn-lede{margin-top:var(--czn-4)}
.czn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem) clamp(1.5rem,3vw,3rem)}
.czn-piece{display:block;color:inherit}
.czn-piece__media{
  display:block;position:relative;aspect-ratio:4/5;background:var(--czn-ivory-2);
  overflow:hidden;margin-bottom:var(--czn-5)
}
/* `cover`, edge to edge, no inset. The catalogue photography is shot on its own warm styled
   backdrop rather than on a neutral cut-out ground, so `contain` + padding floated a small
   amber square inside an ivory box — two competing surfaces per tile. Letting the photograph
   BE the tile is both truer to the references and truer to the actual images we own. */
.czn-piece__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--czn-e);will-change:transform}
/* A cut-out has no background of its own, so it gets NO tile either: the ring sits directly on the
   section's ivory with room around it. That is the entire point of having a cut-out — boxing it in a
   tinted panel would put back the frame we just removed. Photographs keep their frame and fill it. */
.czn-piece__media.is-cutout{background:transparent}
.czn-piece__media.is-cutout img{object-fit:contain;padding:6%}
/* A 1.5% drift, not a zoom. Enough to acknowledge the pointer, not enough to feel like a shop. */
.czn-piece:hover .czn-piece__media img{transform:scale(1.015)}
.czn-piece__ph{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 40%,rgba(201,168,106,.1),transparent 70%)}
.czn-piece__name{display:block;font-family:var(--serif);font-size:1.3rem;line-height:1.25;
  color:var(--czn-on-ivory);margin-bottom:var(--czn-2)}
.czn-piece__meta{display:block;font-family:var(--sans);font-size:.82rem;letter-spacing:.02em;
  color:var(--czn-on-ivory-mut)}
.czn-piece__metals{display:flex;gap:.4rem;margin-top:var(--czn-4)}
.czn-piece__sw{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.czn-coll__more{margin-top:clamp(3rem,7vh,4.5rem);display:flex;justify-content:center}

/* ==========================================================================
   4 · EDITORIAL BAND — a full-bleed breath between the two halves of the page.
   ========================================================================== */
.czn-band{position:relative;min-height:min(62vh,560px);display:grid;place-items:center;isolation:isolate}
.czn-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.czn-band__scrim{position:absolute;inset:0;background:rgba(14,10,15,.52);z-index:-1}
.czn-band__line{position:relative;font-family:var(--serif);font-size:clamp(1.8rem,4vw,3.2rem);
  line-height:1.2;letter-spacing:-.02em;text-align:center;max-width:22ch;margin:0;
  padding-inline:var(--czn-gut);color:#F4EFF3}
.czn-band__line em{font-style:italic;color:var(--champ)}

/* ==========================================================================
   5 · THE CUTS — a quiet index, not a grid of buttons. Ten line-art marks on the dark ground.
   ========================================================================== */
.czn-cuts__head{max-width:56ch;margin-bottom:clamp(2.5rem,6vh,4rem)}
.czn-cutrow{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--czn-4)}
.czn-cut{display:flex;flex-direction:column;align-items:center;gap:var(--czn-4);
  padding-block:var(--czn-5);color:inherit;transition:transform .5s var(--czn-e)}
.czn-cut:hover{transform:translateY(-3px)}
.czn-cut__art{width:44px;height:44px;display:grid;place-items:center;opacity:.62;
  transition:opacity .5s var(--czn-e)}
.czn-cut:hover .czn-cut__art{opacity:1}
.czn-cut__art img{width:100%;height:100%;object-fit:contain}
.czn-cut__l{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#9A8E98;transition:color .5s var(--czn-e)}
.czn-cut:hover .czn-cut__l{color:var(--champ)}

/* ==========================================================================
   6 · THE ATELIER — the trust section. Image and copy, no icons, no badges, no boxes.
   ========================================================================== */
.czn-atelier{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2.5rem,6vw,6rem)}
.czn-atelier__media{position:relative;aspect-ratio:4/5}
.czn-atelier__media img{width:100%;height:100%;object-fit:cover}
.czn-atelier__copy{max-width:46ch}
.czn-facts{list-style:none;margin:clamp(2rem,4vh,3rem) 0 0;padding:0}
.czn-facts li{display:grid;grid-template-columns:auto 1fr;gap:var(--czn-5);align-items:baseline;
  padding-block:var(--czn-5);border-top:1px solid var(--czn-hair)}
.czn-facts li:last-child{border-bottom:1px solid var(--czn-hair)}
.czn-facts b{font-family:var(--serif);font-size:.95rem;font-style:italic;font-weight:400;
  color:var(--gold);opacity:.85}
.czn-facts span{font-family:var(--sans);font-size:.95rem;line-height:1.65;color:#B9AEB8}

/* ==========================================================================
   7 · THE INVITATION — the close. Centred, generous, two ways to begin.
   ========================================================================== */
.czn-invite{position:relative;text-align:center}
.czn-invite__inner{position:relative;z-index:1;max-width:44ch;margin-inline:auto}
.czn-invite .czn-lede{margin-inline:auto;text-align:center}
.czn-invite__btns{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--czn-5);margin-top:clamp(2.5rem,5vh,3.5rem)}
.czn-invite__note{margin-top:var(--czn-6)}

/* ==========================================================================
   RESPONSIVE — designed, not shrunk.
   ========================================================================== */
@media (max-width:1080px){
  .czn-grid{grid-template-columns:repeat(2,1fr)}
  .czn-cutrow{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:880px){
  .czn-steps{grid-template-columns:1fr;gap:0}
  /* Stacked, the three steps read better as a continuous list than as three separate blocks. */
  .czn-step{padding-block:var(--czn-6)}
  .czn-step:last-child{border-bottom:1px solid var(--czn-hair-ink)}
  .czn-step__d{max-width:none}
  .czn-atelier{grid-template-columns:1fr;gap:var(--czn-7)}
  .czn-atelier__media{aspect-ratio:3/2}
  .czn-atelier__copy{max-width:none}
}
@media (max-width:680px){
  .czn-hero{min-height:min(88vh,760px)}
  .czn-hero__copy{max-width:none}
  .czn-hero__cta{flex-direction:column;align-items:stretch;gap:var(--czn-5)}
  .czn-hero__cta .cz-btn{justify-content:space-between;width:100%}
  /* 44px minimum touch target. The underline still hugs the text (border-bottom on the inner
     span would drift away from the label if the padding were applied to the anchor alone). */
  .czn-hero__quiet{align-self:flex-start;min-height:44px;align-items:center;padding-block:.75rem}
  .czn-proof__row{gap:var(--czn-3) var(--czn-5)}
  .czn-proof__i{font-size:.68rem}
  /* Two per row keeps the photography large enough to be worth showing. */
  .czn-grid{grid-template-columns:repeat(2,1fr);gap:var(--czn-6) var(--czn-4)}
  .czn-piece__name{font-size:1.05rem}
  .czn-piece__meta{font-size:.75rem}
  .czn-cutrow{grid-template-columns:repeat(4,1fr);gap:var(--czn-2)}
  .czn-cut__art{width:36px;height:36px}
  .czn-cut__l{font-size:.62rem;letter-spacing:.1em}
  .czn-invite__btns{flex-direction:column;align-items:stretch}
  .czn-invite__btns .cz-btn{justify-content:space-between;width:100%}
}

/* Motion off — the layout must be complete without a single animation. */
@media (prefers-reduced-motion:reduce){
  .czn-aura::before,.czn-aura::after{animation:none}
  .czn-hero__copy>*,.czn-proof{animation:none}
  .czn-piece:hover .czn-piece__media img{transform:none}
  .czn-cut:hover{transform:none}
}