/* Noga Diamonds · site chrome: top bar, Back link, drop-down and phone panel,
   clickable section titles (.h-link), social links, contact block and contact form.
   Markup is generated by build.mjs; behaviour in assets/js/chrome.js. No inline styles (CSP). */

/* ---------------------------------------------------------------- top bar */
.topbar__bar{gap:clamp(10px,1.6vw,28px)}
.topbar__brand{flex:none}
.topbar__back{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 12px 0 8px;border:1px solid var(--line-2);border-radius:var(--radius-pill);color:var(--stone);font-size:var(--step--2);letter-spacing:.08em;text-decoration:none;transition:color var(--dur-2),border-color var(--dur-2)}
.topbar__back:hover{color:var(--gold-hi);border-color:var(--gold-deep)}
.topbar__back-ico{flex:none}
.topbar__nav{margin-left:auto}
.topbar__list{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);margin:0;padding:0;list-style:none}
.topbar__item{position:relative}
.topbar__link{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--stone);font-family:var(--font-body);font-weight:400;font-size:var(--step--1);letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:color var(--dur-2)}
.topbar__link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold-grad);transform:scaleX(0);transition:transform var(--dur-3) var(--ease-lux)}
.topbar__link:hover,.topbar__link[aria-current="page"],.topbar__item.is-current>.topbar__link,.topbar__subbtn[aria-expanded="true"]{color:var(--ivory)}
.topbar__link:hover::after,.topbar__link[aria-current="page"]::after,.topbar__item.is-current>.topbar__link::after{transform:scaleX(1)}
.topbar__chev{flex:none;transition:transform var(--dur-2) var(--ease-out)}
.topbar__subbtn[aria-expanded="true"] .topbar__chev{transform:rotate(180deg)}
.topbar__sub{margin:0;padding:0;list-style:none}
.topbar__sub a{display:block;color:var(--stone);text-decoration:none;transition:color var(--dur-2),background-color var(--dur-2)}
.topbar__sub a:hover,.topbar__sub a[aria-current="page"]{color:var(--gold-hi)}
.topbar__toggle{display:none;position:relative;width:44px;height:44px;flex:none;padding:0;border:1px solid var(--line-2);border-radius:50%;background:transparent;cursor:pointer}
.topbar__bars span{position:absolute;left:13px;right:13px;height:1px;background:var(--gold);transition:transform var(--dur-3) var(--ease-lux),opacity var(--dur-2)}
.topbar__bars span:nth-child(1){top:17px}.topbar__bars span:nth-child(2){top:22px}.topbar__bars span:nth-child(3){top:27px}
.topbar__toggle[aria-expanded="true"] .topbar__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.topbar__toggle[aria-expanded="true"] .topbar__bars span:nth-child(2){opacity:0}
.topbar__toggle[aria-expanded="true"] .topbar__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* shape pages listed under «Formas» (compact, indented, two columns) */
.topbar__kids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px;margin:0 0 4px;padding:0 0 0 12px;list-style:none;border-left:1px solid var(--line-2)}
.topbar__kids a{font-size:var(--step--2)!important;letter-spacing:.04em;padding-block:7px!important}

/* desktop: drop-down panel */
@media (min-width:1024px){
  .topbar__sub{position:absolute;top:calc(100% + 4px);left:-18px;z-index:var(--z-menu);min-width:280px;max-height:calc(100vh - var(--header-h) - 16px);overflow-y:auto;padding:10px;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(12,11,9,.97);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
  .topbar__sub::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
  .topbar__subbtn[aria-expanded="true"]+.topbar__sub,
  html:not(.js) .topbar__item--has-sub:hover>.topbar__sub,
  html:not(.js) .topbar__item--has-sub:focus-within>.topbar__sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .topbar__sub a{padding:10px 12px;border-radius:var(--radius-sm);font-size:var(--step--1);letter-spacing:.04em}
  .topbar__sub a:hover,.topbar__sub a:focus-visible{background:var(--gold-veil)}
  .topbar__sub>li:first-child>a{color:var(--gold)}
}
@media (min-width:1024px) and (max-width:1180px){.topbar__list{gap:14px}.topbar__link{font-size:13px;letter-spacing:.03em}.topbar__back-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.topbar__back{padding:0 12px}}

/* phone and tablet: full-height panel under the bar */
@media (max-width:1023.98px){
  .topbar__toggle{display:inline-block}
  .topbar__bar .lang-switch{margin-left:auto}
  .topbar__nav{position:fixed;z-index:var(--z-menu);top:var(--header-h);left:0;right:0;height:calc(100dvh - var(--header-h));margin:0;padding:clamp(24px,6vh,56px) var(--gutter) 48px;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(120% 60% at 50% 0%,rgba(226,199,186,.09),transparent 60%),var(--ink);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-3)}
  .site-header.is-open .topbar__nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  html:not(.js) .topbar__nav{position:static;height:auto;opacity:1;visibility:visible;transform:none;padding:0}
  .topbar__list{flex-direction:column;align-items:stretch;gap:0}
  .topbar__link{width:100%;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:500;font-size:var(--step-3);letter-spacing:0;color:var(--ivory);text-align:left}
  .topbar__link::after{display:none}
  .topbar__link[aria-current="page"],.topbar__item.is-current>.topbar__link{color:var(--gold-hi)}
  .topbar__sub{display:none;padding:6px 0 12px 16px;border-bottom:1px solid var(--line)}
  .topbar__subbtn[aria-expanded="true"]+.topbar__sub,html:not(.js) .topbar__sub{display:block}
  .topbar__sub a{padding:12px 0;font-size:var(--step-1)}
  .topbar__kids{margin:0 0 8px 2px}
  .topbar__kids a{padding:10px 0!important;font-size:var(--step-0)!important}
}
/* very narrow phones: the Back link keeps its arrow and its accessible name */
@media (max-width:479.98px){
  .topbar__back{padding:0;width:44px;justify-content:center}
  .topbar__back-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .topbar__bar{gap:8px}
  .topbar__bar .brand .mark{width:84px}
}

/* ---------------------------------------------------------------- clickable section titles (point 15) */
.h-link{color:inherit;text-decoration:none;border-radius:var(--radius-xs)}
.h-link::after{content:"\2192";display:inline-block;margin-left:.35em;font-family:var(--font-body);font-weight:300;font-size:.62em;line-height:1;vertical-align:.18em;color:var(--gold);opacity:.75;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2)}
.h-link:hover{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--gold-deep)}
.h-link:hover::after,.h-link:focus-visible::after{transform:translateX(4px);opacity:1}

/* ---------------------------------------------------------------- social links */
.social{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0;padding:0;list-style:none}
.social--center{justify-content:center;margin-top:var(--space-5)}
.social--footer{margin-top:var(--space-4)}
.social__link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--stone);text-decoration:none;transition:color var(--dur-2)}
.social__link:hover{color:var(--gold-hi)}
.social__ico{flex:none;color:var(--gold)}
.social__handle{color:var(--ivory)}

/* ---------------------------------------------------------------- contact block + form */
.contact-block{max-width:720px;margin-inline:auto}
.mail{flex-wrap:wrap}
.cform{margin-top:clamp(32px,5vw,48px);padding:clamp(20px,4vw,36px);border:1px solid var(--line-2);border-radius:var(--radius);background:var(--ink-2);text-align:left}
.cform[hidden]{display:none}
.cform__title{margin:0 0 var(--space-5);font-family:var(--font-display);font-weight:500;font-size:var(--step-2);color:var(--ivory)}
.cform__grid{display:grid;gap:var(--space-5)}
@media (min-width:640px){.cform__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cform__field--wide{grid-column:1/-1}}
.cform__field{display:grid;gap:8px;min-width:0}
.cform label{color:var(--stone);font-size:var(--step--1);letter-spacing:.04em}
.cform input,.cform textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--ink);color:var(--ivory);font:inherit;font-size:16px;line-height:1.4;transition:border-color var(--dur-2)}
.cform textarea{min-height:140px;resize:vertical}
.cform input:hover,.cform textarea:hover{border-color:var(--gold-deep)}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--gold-hi);outline-offset:1px;border-color:var(--gold)}
.cform [aria-invalid="true"]{border-color:#e0837b}
.cform__err{margin:0;color:#f0a49d;font-size:var(--step--1)}
.cform__err[hidden]{display:none}
.cform__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cform__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:var(--space-5)}
.cform__note{margin:0;color:var(--mute);flex:1 1 220px}
.cform__status{margin:var(--space-4) 0 0;color:var(--ivory);min-height:1.5em}
.cform__status.is-ok{color:var(--gold-hi)}
.cform__status.is-error{color:#f0a49d}
.cform__status a{color:var(--gold-hi);overflow-wrap:anywhere}
.cform.is-sending .cform__submit{opacity:.6;cursor:progress}

@media (prefers-reduced-motion:reduce){
  .topbar__link::after,.topbar__chev,.topbar__sub,.topbar__nav,.topbar__bars span,.h-link::after{transition:none!important}
  .h-link:hover::after,.h-link:focus-visible::after{transform:none}
}
html.reduced .topbar__sub,html.reduced .topbar__nav,html.reduced .h-link::after{transition:none!important}
@media print{.topbar,.cform{display:none!important}}

/* ==========================================================================
   PALETTE v4 (owner, 12/10/2026): one rule per colour, the same on every page.
   Black #000 ........ the page
   Eggplant .......... cards and alternate sections (Cotinga Purple, darkened)
   Violet indigo ..... hairlines, chart bars, quiet frames (#4F4086)
   Light violet ...... links and small interactive text (#9A8AD8)
   Ruby .............. buttons, active choices, the Noga highlight (#C8323F); never body text
   Rose gold ......... the logo metal, the ONE italic accent word in each heading, numerals
   Ribbon ............ ruby → violet → rose gold, only on short decorative rules (kickers, quote bars)
   ========================================================================== */
:root{
  --ink-2:#0d040c;
  --surface:#190817;
  --surface-2:#230b20;
  --line:#2c1328;
  --line-2:#46254a;
  --violet-line:rgba(79,64,134,.55);
  --ribbon:linear-gradient(90deg,var(--ruby) 0%,var(--violet) 55%,var(--gold) 100%);
  --ribbon-v:linear-gradient(180deg,var(--ruby) 0%,var(--violet) 55%,var(--gold) 100%);
}
/* every accent word in a heading: rose gold, nothing else */
h1 em,h2 em,h3 em,.h-link em,em.em--rose{color:var(--gold-hi);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em}
@media (forced-colors:active){h1 em,h2 em,h3 em,em.em--rose{-webkit-text-fill-color:currentColor;background:none}}
/* alternate sections: eggplant with a faint violet light from above */
.section--alt{background:radial-gradient(120% 60% at 50% 0%,rgba(79,64,134,.16),transparent 70%),linear-gradient(180deg,#0f050e,#0b030a)}
.section{border-top-color:var(--violet-line)}
/* kicker rules and quote bars wear the ribbon */
.kicker::before,.center .kicker::after,.kicker--center::after,.edu-hero .kicker::after{background:var(--ribbon);height:2px;border-radius:2px}
.kicker--center::after,.center .kicker::after,.edu-hero .kicker::after{transform:scaleX(-1)}
.takeaway{border-left:0;position:relative;padding-left:calc(var(--space-4) + 2px)}
.takeaway::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;border-radius:2px;background:var(--ribbon-v)}
/* numerals: rose gold metal */
.pillar__n,.steps__n,.ladder__n{color:transparent;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text}
/* small labels and tags: violet */
.ladder__tag,.card__kicker{color:var(--violet-hi)}
.ladder li{border-color:var(--line-2)}
/* hairlines inside content */
.fact,.steps li,.accordion__item{border-top-color:var(--violet-line)}
/* rarity chart: violet bars for the market, ruby for Noga */
.bars__bar{background:linear-gradient(90deg,var(--violet-deep),#6b5bb0)}
.bars--tiny .bars__bar{background:linear-gradient(90deg,#6b5bb0,var(--violet-hi))}
/* Noga row: the count, and the share of GCAL 8X rounds as a ruby badge that can't be missed */
.bars--noga .bars__value{font-weight:500;color:var(--ivory);white-space:nowrap}
html .bars--noga .bars__label{font-family:var(--font-display);font-size:var(--step-1);font-weight:500;letter-spacing:.04em;color:var(--ivory)}
.bars__pct{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-top:14px;padding:14px 18px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(200,50,63,.22),rgba(79,64,134,.18));box-shadow:inset 0 0 0 1px rgba(200,50,63,.55)}
.bars__pct-n{flex:none;display:inline-grid;place-items:center;min-width:3.2em;padding:6px 14px;border-radius:var(--radius-pill);background:var(--ruby);color:var(--ivory);font-family:var(--font-display);font-size:var(--step-4);font-weight:500;line-height:1;box-shadow:0 0 28px -4px rgba(200,50,63,.8)}
.bars__pct-t{font-size:var(--step-0);line-height:1.4;color:var(--ivory);text-wrap:balance}
.js [data-bars] .bars__pct{opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease-out) 2.4s,transform .7s var(--ease-lux) 2.4s}
.js [data-bars].is-in .bars__pct{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-bars] .bars__pct{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   TRUE SCALE (owner, 12/10/2026): carat sizes measured in millimetres on the screen.
   --px-mm = CSS px per mm, set by assets/js/true-scale.js (estimate per device, or the visitor's card
   calibration). The fallback below is the CSS reference pixel (96 per inch).
   Drawn round (shape-round.svg): girdle 330 of 400 → the image box is the diameter ÷ 0.825.
   Photo round (real-redondo-186-cut.webp): girdle 277 of 280 → ÷ 0.989.
   ========================================================================== */
:root{--px-mm:3.78}
.ts{display:grid;gap:14px;justify-items:center;width:100%}
.ts .ts__gem,.ts .ts__pick{display:block;flex:none;width:calc(var(--mm) * var(--px-mm) * 1px / var(--frac));aspect-ratio:1;--frac:.825}
.ts .ts__gem--photo{--frac:.989}
.ts__gem img,.ts__pick img{display:block;width:100%;height:100%}
/* the chosen diamond, alone, under a soft light */
.ts__stage{position:relative;display:grid;place-items:center;width:100%;min-height:calc(11.1 * var(--px-mm) * 1px / .825 + 56px);border-radius:var(--radius);background:radial-gradient(closest-side,rgba(246,233,226,.10),rgba(79,64,134,.08) 55%,transparent 100%)}
.ts__stage .ts__gem{grid-area:1/1;display:none}
.ts__stage .ts__gem.is-active{display:block;animation:ts-in .5s var(--ease-lux)}
.ts__stage .ts__gem--svg img{filter:brightness(1.45) saturate(.85) drop-shadow(0 0 10px rgba(246,233,226,.35))}
.ts__stage .ts__gem--photo img{border-radius:50%;filter:drop-shadow(0 0 12px rgba(246,233,226,.4))}
@keyframes ts-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
/* a millimetre ruler, so anyone can check the size with a real ruler */
.ts__ruler{position:relative;width:calc(15 * var(--px-mm) * 1px + 1px);height:22px;color:var(--gold-lo);
  background:linear-gradient(currentColor,currentColor) left top/100% 1px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px calc(var(--px-mm) * 1px)) left top/100% 5px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px calc(var(--px-mm) * 5px)) left top/100% 9px no-repeat}
.ts__mark{position:absolute;top:10px;left:calc(var(--t) * var(--px-mm) * 1px);transform:translateX(-50%);font-size:10px;line-height:1;letter-spacing:.04em;color:var(--mute);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.ts__mark--u{transform:translateX(-30%)}
/* every size, side by side at true size; the chosen one leaves an empty ring */
.ts__row{display:flex;align-items:center;gap:10px;max-width:100%;padding:6px 4px 10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.ts__row::-webkit-scrollbar{display:none}
.ts__pick{position:relative;cursor:pointer;opacity:.55;transition:opacity var(--dur-2)}
.ts__pick:hover{opacity:.9}
.ts__pick--svg img{filter:brightness(1.35) saturate(.8)}
.ts__pick--photo img{border-radius:50%}
.ts__pick.is-active{opacity:1}
.ts__pick.is-active img{visibility:hidden}
.ts__pick.is-active::after{content:"";position:absolute;inset:calc(50% - var(--mm) * var(--px-mm) * .5px);border:1px dashed var(--ruby);border-radius:50%}
.ts__pick--svg.is-active::after{inset:calc(50% - var(--mm) * var(--px-mm) * .5px)}
.ts__note{margin:6px 0 0;text-align:center;color:var(--mute)}
.ts__calib-btn{margin-left:4px;padding:0;border:0;background:none;color:var(--violet);font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.ts__calib-btn:hover{color:var(--violet-hi)}
.ts__calib-btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.ts-calib{display:grid;gap:12px;justify-items:center;margin-top:12px;padding:16px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface-2);text-align:center}
.ts-calib[hidden]{display:none}
.ts-calib__title{margin:0;font-family:var(--font-display);font-size:var(--step-1);color:var(--ivory)}
.ts-calib__how{margin:0;max-width:44ch;font-size:var(--step--1);color:var(--stone)}
.ts-calib__card{display:grid;place-items:end start;width:calc(85.6 * var(--px-mm) * 1px);height:calc(53.98 * var(--px-mm) * 1px);max-width:none;padding:8px 10px;border:1.5px solid var(--gold);border-radius:calc(3.18 * var(--px-mm) * 1px);background:linear-gradient(135deg,rgba(226,199,186,.12),rgba(79,64,134,.18))}
.ts-calib__card-t{font-size:10px;color:var(--stone)}
.ts-calib__range{width:min(100%,320px)}
.ts-calib__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
/* the card is wider than a phone screen when held upright: let it bleed so its real width is still measurable */
@media (max-width:560px){.ts-calib{overflow-x:auto}}
/* hand and ear photos at true size: the window shows the part around the diamond */
.hand-win{position:relative;width:100%;height:calc(42 * var(--px-mm) * 1px);min-height:180px;max-height:340px;overflow:hidden;border-radius:var(--radius-sm);background:#000;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(120% 100% at 50% 50%,#000 60%,transparent 100%)}
.hand-win .hand{position:absolute;left:50%;top:50%;width:calc(138.89 * var(--px-mm) * 1px);max-width:none;margin:0;transform:translate(-37.18%,-53.37%);-webkit-mask-image:none;mask-image:none}
.hand-win--ear .hand{width:calc(49.1 * var(--px-mm) * 1px);transform:translate(-32%,-79.83%)}
@media (prefers-reduced-motion:reduce){.ts__stage .ts__gem.is-active{animation:none}}
/* stage = the diamond + a dimension line exactly as wide as its diameter */
.ts__stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:calc(11.1 * var(--px-mm) * 1px / .825 + 48px)}
.ts__stage .ts__gem{grid-area:auto}
.ts__dim{position:relative;display:block;width:calc(var(--mm-a,6.5) * var(--px-mm) * 1px);height:9px;border-inline:1px solid var(--gold);transition:width var(--dur-3) var(--ease-lux)}
.ts__dim::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--gold)}
.ts__dim-t{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:var(--step--1);color:var(--gold-hi);white-space:nowrap}
.ts__stage{padding-bottom:22px}
/* ear: the whole photo, at its true 49.1 × 54.1 mm */
.hand-win--ear{height:calc(54.11 * var(--px-mm) * 1px);max-height:none}
.hand-win--ear .hand{top:0;transform:translateX(-50%)}