/* Velora — Atelier motion & finishes · layered over Noir Atelier (noir.css) · A. Kamen Studio
   Slow, editorial, ease-out only. No bounce, no springs, no glow. All motion is gated behind
   prefers-reduced-motion:no-preference — with reduced motion everything is simply present. */
:root{
  --a-ease:cubic-bezier(.22,.61,.36,1);      /* soft ease-out, no overshoot */
  --a-ease-slow:cubic-bezier(.25,.46,.3,1);
  --a-hair:rgba(216,192,146,.12);
  --a-hair-on:rgba(216,192,146,.46);
  --a-hair-inner:rgba(231,214,176,.30);
}

/* ---------- Static finishes (apply with or without motion) ---------- */
.mast{transition:box-shadow .9s var(--a-ease),background-color .9s var(--a-ease)}
.mast.is-scrolled{box-shadow:0 1px 0 rgba(216,192,146,.09)}
.mast-nav a{position:relative;border-bottom:0!important;transition:color .6s var(--a-ease)}
.mast-nav a::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--gold-light);transform:translateX(-50%);transition:width .8s var(--a-ease)}
.mast-nav a:hover{color:var(--ink)}
.mast-nav a:hover::after,.mast-nav a[aria-current="page"]::after{width:14px}
.mast-brand img{transition:opacity .8s var(--a-ease)}
.mast-brand:hover img{opacity:.82}

/* Section label flanked by hairlines: —— A SELECTION —— */
.section-head{align-items:center;gap:22px}
.section-head::before,.section-head::after{content:"";flex:0 0 clamp(28px,5vw,56px);height:1px;background:var(--a-hair)}

/* Collection squares + variety tiles: finer frame, inner engraved hairline on hover */
.ctile-frame,.tile-frame{border-color:var(--a-hair);transition:border-color 1s var(--a-ease)}
.ctile-frame::after,.tile-frame .clip::after{content:"";position:absolute;inset:clamp(7px,1vw,10px);border:1px solid transparent;pointer-events:none;transition:border-color 1.1s var(--a-ease)}
.tile-frame .clip{position:relative}
.ctile-frame img,.tile-frame img{transition:transform 1.6s var(--a-ease-slow),filter 1.2s var(--a-ease),opacity 1.1s var(--a-ease)!important;transform-origin:50% 50%}
.ctile:hover .ctile-frame,.ctile:focus-visible .ctile-frame,.tile:hover .tile-frame,.tile:focus-visible .tile-frame{border-color:var(--a-hair-on)}
.ctile:hover .ctile-frame::after,.ctile:focus-visible .ctile-frame::after,.tile:hover .clip::after,.tile:focus-visible .clip::after{border-color:var(--a-hair-inner)}
.ctile:hover img,.ctile:focus-visible img,.tile:hover img,.tile:focus-visible img{transform:scale(1.018);filter:brightness(1.04)}

/* Captions: quieten, then a short champagne hairline draws in from centre on hover */
.ctile-cap,.tile-cap{transition:color .8s var(--a-ease)}
.ctile-cap,.tile-cap{position:relative}
.ctile-cap::after,.tile-cap::after{content:"";position:absolute;left:50%;bottom:-10px;width:0;height:1px;background:var(--gold-light);transform:translateX(-50%);transition:width .9s var(--a-ease)}
.ctile:hover .ctile-cap,.ctile:focus-visible .ctile-cap,.tile:hover .tile-cap,.tile:focus-visible .tile-cap{color:var(--ink)}
.ctile:hover .ctile-cap::after,.ctile:focus-visible .ctile-cap::after,.tile:hover .tile-cap::after,.tile:focus-visible .tile-cap::after{width:22px}
.ctile:focus-visible,.tile:focus-visible{outline:none}

/* Text button (landing “View the collection”): hairline that tightens from the centre */
.btn{position:relative;border-bottom-color:transparent!important;transition:color .7s var(--a-ease)}
.btn:not(.btn-solid)::after{content:"";position:absolute;left:50%;bottom:0;width:100%;height:1px;background:var(--gold-light);transform:translateX(-50%);transition:width .9s var(--a-ease),background-color .9s var(--a-ease)}
.btn:not(.btn-solid):hover::after,.btn:not(.btn-solid):focus-visible::after{width:42%;background:var(--gold)}
.btn:not(.btn-solid):hover{color:var(--ink)}

/* Download: hairline box, champagne fill rises slowly from the base */
.btn-solid{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(216,192,146,.34)!important;padding:18px 34px 18px 40px;letter-spacing:.48em;background:transparent!important;
  transition:color .6s var(--a-ease),border-color .8s var(--a-ease)!important}
.btn-solid::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--ink);clip-path:inset(100% 0 0 0);transition:clip-path .8s var(--a-ease)}
.btn-solid:hover,.btn-solid:focus-visible{color:#0b0b0a;border-color:var(--ink)!important}
.btn-solid:hover::before,.btn-solid:focus-visible::before{clip-path:inset(0 0 0 0)}
.btn-solid .arrow{display:inline-block;font-family:var(--sans);font-size:12px;line-height:1;transform:none;transition:transform .8s var(--a-ease)}
.btn-solid:hover .arrow{transform:translateY(2px)}
.piece-actions{margin-top:38px;display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:360px}
.piece-actions .btn-solid{text-align:center;width:100%;box-sizing:border-box;letter-spacing:.36em}

/* Piece detail: finer frame, quieter spec ledger, clearer hierarchy */
.piece-visual{border-color:var(--a-hair);position:relative;overflow:hidden}
.piece-text .eyebrow{color:var(--gold);letter-spacing:.42em;font-weight:400;font-size:9.5px}
.piece-text h1{margin-top:20px}
.piece-spec{border-top-color:rgba(216,192,146,.1)}
.piece-spec div{border-bottom-color:rgba(216,192,146,.1);padding:13px 0}
.piece-spec dd{font-weight:400;color:var(--ink)}
.piece-nav{border-top-color:rgba(216,192,146,.1)}
.piece-nav a{transition:color .7s var(--a-ease)}
.piece-nav small{transition:color .7s var(--a-ease),letter-spacing .9s var(--a-ease)}
.piece-nav a:hover small{color:var(--gold)}
.back{transition:color .7s var(--a-ease)}
.back .arrow{display:inline-block;transition:transform .9s var(--a-ease)}
.back:hover .arrow{transform:translateX(-4px)}
:focus-visible{outline:1px solid rgba(216,192,146,.6);outline-offset:6px}
.foot-credit a{transition:color .7s var(--a-ease),border-color .7s var(--a-ease)}
.foot-credit a:hover{color:var(--ink);border-color:var(--gold)}

/* ---------- Motion (only when the visitor has not asked for less) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Route veil: the page quietly fades out, the next settles in. No slide. */
  .view{animation:a-veil .75s var(--a-ease) both!important}
  main{transition:opacity .32s var(--a-ease)}
  main.is-leaving{opacity:0}
  @keyframes a-veil{from{opacity:0}to{opacity:1}}

  /* Landing cadence — mark, wordmark (tracking settles), rule draws, then the lines */
  .hero>*{animation:a-fade 1.2s var(--a-ease) both}
  .hero .mark-plate{animation-duration:1.4s;animation-delay:.05s}
  .hero .wordmark{animation:a-track 1.8s var(--a-ease-slow) .2s both}
  .hero .rule{animation:a-draw 1.1s var(--a-ease) .75s both;transform-origin:50% 0}
  .hero .hero-sub{animation-delay:1.0s}
  .hero .hero-by{animation-delay:1.15s}
  .hero .hero-copy{animation-delay:1.4s;animation-duration:1.4s}
  @keyframes a-fade{from{opacity:0}to{opacity:1}}
  @keyframes a-track{from{opacity:0;letter-spacing:.74em;padding-left:.74em}to{opacity:1;letter-spacing:.62em;padding-left:.62em}}
  @keyframes a-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  /* Page heads (browse, interior): eyebrow → title → rule → line */
  .page-head>*{animation:a-fade 1s var(--a-ease) both}
  .page-head>:nth-child(2){animation-delay:.12s}
  .page-head .rule{animation:a-draw .9s var(--a-ease) .3s both;transform-origin:50% 0}
  .page-head>p{animation-delay:.45s}

  /* Staggered fade-and-rise of tiles as they first come into view (delay set by JS) */
  .js-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--a-ease) var(--d,0ms),transform .7s var(--a-ease) var(--d,0ms)}
  .js-reveal.is-in{opacity:1;transform:none}

  /* Images settle in once decoded — space is held by width/height + frame tone, no jump */
  .js-img{opacity:0}
  .js-img.is-loaded{opacity:1}

  /* Detail image: fade with the gentlest scale settle (1.012 → 1), clipped in its frame */
  .piece-visual img.js-img{transform:scale(1.012);transition:opacity 1.2s var(--a-ease),transform 2.2s var(--a-ease-slow)}
  .piece-visual img.js-img.is-loaded{transform:none}
  .piece-text>*{animation:a-fade 1s var(--a-ease) both}
  .piece-text>:nth-child(1){animation-delay:.25s}
  .piece-text>:nth-child(2){animation-delay:.35s}
  .piece-text>.rule{animation:a-draw .9s var(--a-ease) .5s both;transform-origin:50% 0}
  .piece-text>:nth-child(4){animation-delay:.6s}
  .piece-text>:nth-child(5){animation-delay:.72s}
  .piece-text>:nth-child(6){animation-delay:.84s}
  .piece-nav{animation:a-fade 1s var(--a-ease) .9s both}
  .crumb,.piece>.back{animation:a-fade .9s var(--a-ease) .1s both}
}
@media (prefers-reduced-motion:reduce){
  .js-reveal,.js-img{opacity:1!important;transform:none!important}
  .ctile:hover img,.tile:hover img{transform:none!important}
}


/* ---------- Footer (maison close) ---------- */
.foot-inner{padding:clamp(64px,9vw,96px) var(--gutter) clamp(52px,7vw,80px);gap:0}
.foot img{margin-bottom:22px}
.foot-credit{margin:0}
.foot-credit a{letter-spacing:.36em;padding-left:.36em;border-bottom-color:transparent}
.foot-credit a:hover{border-color:var(--gold)}
.foot-rule{display:block;width:1px;height:28px;background:var(--gold-light);margin:22px auto 20px;opacity:.75}
.foot-note{letter-spacing:.4em;padding-left:.4em;margin:0}

/* ---------- QA polish 2026-11-09 ---------- */
/* Small phones (≤389px, e.g. 360 Android, 320 SE): keep brand and nav from touching / overflowing */
@media (max-width:389px){
  .mast-brand{gap:10px}
  .mast-brand span{letter-spacing:.42em}
  .mast-nav{gap:14px}
  .mast-nav a{letter-spacing:.3em}
}
@media (max-width:340px){
  .mast-brand span{letter-spacing:.3em;font-size:12px}
  .mast-nav{gap:12px}
  .mast-nav a{letter-spacing:.22em;font-size:10px}
}
/* Collection index on phones: centre a lone last square, matching the interior grids */
@media (max-width:759px){
  .cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cgrid .ctile{grid-column:span 2}
  .cgrid .ctile:last-child:nth-child(odd){grid-column:2 / span 2}
}

@media(min-width:760px){.cgrid .ctile:last-child:nth-child(3n+1){grid-column:2}}