/* Design refresh: one palette, a firmer type scale and full-strength ink.
   Loaded last; every colour below comes from these tokens. Layout, media and motion stay in their files. */
:root{
  --ground:#f5f7f9;      /* porcelain, matches the silk and marble photography */
  --surface:#e9eef2;     /* one tone step from the ground */
  --ink:#0a1d30;         /* deep sapphire navy, the brand's ink at full strength */
  --text:#22364a;        /* running text: readable, never washed-out grey */
  --muted:#4d6176;       /* secondary notes; 6:1 on the ground */
  --accent:#c4a26f;      /* champagne gold, for the action's hover, focus and selection only */
  --field:#0b1e31;       /* the one dark field: social section and footer */
  --field-ink:#eef2f6;
  --field-muted:#b3c1cf;
  --step-body:clamp(16px,.95rem + .25vw,18px);
  --step-lead:clamp(17px,1rem + .45vw,21px);
  --step-head:clamp(42px,1.6rem + 3.6vw,88px);
}
::selection{background:var(--accent);color:var(--ink)}
html body{background:var(--ground)}
html body :focus-visible{outline-color:var(--accent)}

/* Section headings: larger, tighter, one ink. A second line may be italic as a whole line. */
html body #fine-jewelry .fine-copy h2,
html body #selected-pieces .collection-heading h2,
html body .shared-boutique #meet-allan h2,
html body #social-presence .social-copy h2,
html body #contact .contact-copy h2{font-size:var(--step-head);line-height:1.02;letter-spacing:-.032em;color:var(--ink);-webkit-text-fill-color:currentColor;text-wrap:balance}
html body #fine-jewelry .fine-copy h2 em,
html body #selected-pieces .collection-heading h2 em,
html body .shared-boutique #meet-allan h2 em,
html body #social-presence .social-copy h2 em,
html body #contact .contact-copy h2 em{color:inherit;-webkit-text-fill-color:currentColor;letter-spacing:-.025em}

/* Running text: regular weight, full ink, comfortable measure. */
html body #home .hero-editorial-copy .hero-description{font-size:var(--step-lead);font-weight:400;line-height:1.5;letter-spacing:0;color:var(--text);max-width:34ch;text-wrap:pretty}
html body #fine-jewelry .fine-copy p,
html body .shared-boutique #meet-allan .alan-description,
html body #social-presence .social-copy p{font-size:var(--step-body);font-weight:400;line-height:1.6;letter-spacing:0;color:var(--text);max-width:44ch;text-wrap:pretty}
html body .shared-boutique #meet-allan .alan-intro{font:italic 400 var(--step-lead)/1.45 var(--font-display);letter-spacing:-.01em;color:var(--ink);max-width:30ch;text-wrap:pretty}

/* The action: flat sapphire, champagne on hover. One name everywhere. */
html body #home .hero-explore,
html body #home .hero-explore:focus-visible{background:var(--ink);color:var(--field-ink);font-size:15px;font-weight:500;letter-spacing:.01em;padding:18px 28px;transition:background .25s ease,color .25s ease,transform .22s ease}
@media(hover:hover) and (pointer:fine){
  html body #home .hero-explore:hover{background:var(--accent);color:var(--ink)}
}
html body #home .hero-explore:active{transform:translateY(1px) scale(.98)}
html body .header-appointment{background:var(--ink);color:var(--field-ink);transition:background .25s ease,color .25s ease}
@media(hover:hover) and (pointer:fine){html body .header-appointment:hover{background:var(--accent);color:var(--ink)}}

/* Reviews: the caption was 9px. */
html body :is(#fine-jewelry,#client-reviews) .testimonials .review-caption{font-size:12px;color:var(--muted)}
html body :is(#fine-jewelry,#client-reviews) .review-position{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Collection: piece names readable, a sentence instead of a tracked caps strip. */
html body #selected-pieces .piece h3{font-size:clamp(15px,1.1vw,18px);font-weight:500;color:var(--ink)}
html body #selected-pieces .piece h3 span+span{font-weight:400;color:var(--muted)}
html body #selected-pieces .collection-footer>span{font:400 15px/1.5 var(--font-text);letter-spacing:0;text-transform:none;color:var(--muted)}
html body #selected-pieces .carousel-count{color:var(--muted);font-variant-numeric:tabular-nums}

/* The dark field: the social section turns the page to sapphire for one chapter. */
html body #social-presence{background:var(--field);color:var(--field-ink)}
html body #social-presence .social-copy h2{color:var(--field-ink)}
html body #social-presence .social-copy p{color:var(--field-muted)}
html body #social-presence .social-copy p strong{color:var(--field-ink);font-weight:500}

/* Contact: address first, sentence case, real size. */
html body #contact .contact-copy .contact-lede{margin:18px 0 0;font-size:var(--step-body);line-height:1.6;color:var(--text);max-width:36ch}
html body #contact .contact-copy address{margin-top:clamp(24px,2.6vw,36px);font-size:clamp(15px,1.05vw,17px);letter-spacing:0;color:var(--ink)}
html body #contact .contact-copy address a{color:inherit;text-decoration:none;text-underline-offset:.2em;text-decoration-thickness:.07em}
@media(hover:hover){html body #contact .contact-copy address a:hover{text-decoration:underline}}
html body #contact .contact-copy address .contact-street svg{flex:0 0 auto;overflow:visible}

/* Footer: a designed close, the name returns at full width. */
html body .site-legal-footer{background:var(--field);color:var(--field-ink);padding:clamp(48px,7vw,96px) 24px 28px;overflow:hidden}
html body .site-legal-footer .footer-wordmark{margin:0 0 clamp(20px,3vw,36px);font:400 clamp(26px,5.2vw,88px)/.95 var(--font-display);letter-spacing:-.035em;color:var(--field-ink);white-space:nowrap;text-wrap:nowrap}
html body .site-legal-footer p:not(.footer-wordmark){font-size:13px;color:var(--field-muted)}

@media(max-width:650px){
  html body #home .hero-editorial-copy .hero-description{max-width:30ch}
  html body #contact .contact-copy address{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  html body #home .hero-explore,html body .header-appointment{transition:none}
}

/* Ask about this ring: a quiet text link under each piece, champagne on hover. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
html body #selected-pieces .piece-ask{display:inline-flex;align-items:center;gap:9px;margin-top:12px;min-height:44px;color:var(--ink);font:500 14px/1.3 var(--font-text);letter-spacing:.01em;text-decoration:none;position:relative;z-index:2}
html body #selected-pieces .piece-ask svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor}
html body #selected-pieces .piece-ask span{text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .25s ease}
@media(hover:hover) and (pointer:fine){
  html body #selected-pieces .piece-ask:hover{color:#8a6a3c}
  html body #selected-pieces .piece-ask:hover span{text-decoration-color:var(--accent)}
}
html body #selected-pieces .piece-ask:active{transform:translateY(1px)}
html body #selected-pieces .piece-ask .ask-short{display:none}
@media(max-width:650px){
  html body #selected-pieces .piece-ask .ask-full{display:none}
  html body #selected-pieces .piece-ask .ask-short{display:inline}
}

/* Mobile header: the same faceted logo as desktop, not the thin outline. */
@media(max-width:650px){
  html body .header .brand-mark{--mark:30px;overflow:hidden;clip-path:polygon(25% 2%,77% 2%,98% 29%,49% 96%,1% 29%)}
  html body .header .brand-mark img{display:block}
  html body .header .mobile-brand-outline{display:none}
}

/* Hero: description centred on phones; the action hugs its arrow. */
@media(max-width:650px){
  html body #home .hero-editorial-copy .hero-description{margin-left:auto;margin-right:auto;width:auto;text-align:center}
  html body #home .hero-editorial-copy .hero-actions{margin-left:0;width:100%;justify-content:center}
}
html body #home .hero-explore,
html body #home .hero-explore:focus-visible{gap:10px;padding:16px 22px}
html body #home .hero-explore span{margin:0;line-height:1}

/* Reviews stay under "Made for one" on phones too; the old mobile slot after Alan is retired. */
html body #client-reviews{display:none}

/* Legal links in the footer close. */
html body .site-legal-footer .footer-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;margin:0 0 10px}
html body .site-legal-footer .footer-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--field-ink);font-size:14px;text-decoration:none;text-underline-offset:.25em}
@media(hover:hover){html body .site-legal-footer .footer-legal a:hover{color:var(--accent);text-decoration:underline}}

/* The logo is now its own small image (assets/logo-mark.webp) instead of a crop of a 1449px sprite. */
html body .header .brand-mark img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover}

/* New logo (assets/logo-mark.webp): shown whole, no diamond-shaped clipping, on every width. */
html body .header .brand-mark,
html body .header .brand-mark{clip-path:none;overflow:visible}
html body .header .brand-mark img{object-fit:contain}
@media(max-width:650px){html body .header .brand-mark{clip-path:none;overflow:visible}}