/* VIP Lab Diamonds — type system 'Same Faces, One Ruler' (13 Sep 2026). Loaded after theme.css on every page.
   Cormorant Garamond 500 (display), Instrument Sans 400/500 (body, nav, buttons, prices), IBM Plex Mono 400 (labels 13px / data 15px). */
/* type.css — VIP Lab Diamonds. "Same Faces, One Ruler."
   Loaded by every page AFTER theme.css. Cormorant Garamond, Instrument Sans and IBM Plex Mono exactly as they ship;
   ten sizes (13 15 17 20 24 30 38 48 62 80), six trackings, six line-heights, one uppercase style, one breakpoint (860px).
   Roles are classes (.t-*) and, inside <main>, elements. Inline font-* declarations on the pages are to be REMOVED,
   not overridden: an inline style always beats this file. The guard block at the end is the only !important. */

/* ---- 0. loading ------------------------------------------------------------------------------------------ */
/* size-adjusted local stand-in so the splash does not reflow when Cormorant Garamond lands (display=swap).
   Every page also carries: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> before the fonts <link>. */
@font-face{font-family:"Display Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:92%;ascent-override:88%;descent-override:24%;line-gap-override:0%}

/* ---- 1. tokens ------------------------------------------------------------------------------------------- */
:root{
  --t-display:"Cormorant Garamond","Display Fallback",Georgia,"Times New Roman",serif;   /* Pablo picked option 7 on 14 Sep: Cormorant Garamond over Instrument Sans */
  --t-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --t-label:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* the ramp: these ten values and no others */
  --t-13:13px;--t-15:15px;--t-17:17px;--t-20:20px;--t-24:24px;--t-30:30px;--t-38:38px;--t-48:48px;--t-62:62px;--t-80:80px;

  /* roles: size / line-height / tracking. Desktop here; the 860px block swaps the phone values. Two clamp() formulae total.
     TRACKING FOLLOWS THE SIZE. Cormorant is a high-contrast old-style face: tightening is an optical correction for
     display sizes, where the letters are large enough that the default spacing looks loose. Applied at 24px the same
     value closes the counters instead. Negative above 38px, zero at 24, positive where the face is smallest. */
  --t-h1:clamp(var(--t-48),5.5vw,var(--t-80));--t-h1-lh:1.02;--t-h1-track:-0.02em;
  --t-statement:clamp(var(--t-38),4.4vw,var(--t-62));--t-statement-lh:1.06;--t-statement-track:-0.015em;
  --t-h2:var(--t-38);--t-h2-lh:1.12;--t-h2-track:-0.01em;
  --t-card:var(--t-24);--t-card-lh:1.22;--t-card-track:0;
  --t-card-mini:var(--t-17);--t-card-mini-lh:1.28;--t-card-mini-track:0.005em;
  --t-brand:var(--t-20);--t-brand-track:0.02em;
  /* the display face carries two weights, not one: 500 above 30px, 600 at and below it. A face with no optical-size
     axis has to be compensated by hand, and light-on-dark is where a Garamond's hairlines go first. */
  --t-display-w:500;--t-display-w-small:600;
  --t-lead:var(--t-20);
  --t-body-size:var(--t-17);--t-body-lh:1.5;
  --t-small:var(--t-15);--t-small-lh:1.5;
  --t-label-size:var(--t-13);--t-label-lh:1.4;--t-label-track:0.06em;   /* uppercase still wants air; 0.08em shouted over the Garamond */
  --t-data:var(--t-15);--t-data-lh:1.4;
  --t-price:var(--t-20);--t-price-page:var(--t-30);--t-price-bag:var(--t-15);--t-price-lh:1.1;
  --t-nav:var(--t-15);--t-btn:var(--t-15);--t-ui-track:0.01em;
  --t-measure:34em;--t-tap:48px;

  /* colour by role (PALETTE.md). Status #6E93B6 is never text below 24px; hairline is never text. */
  --t-ink:#F2F5F8;--t-muted:#9AAEC2;--t-accent:#7FB4E6;--t-hairline:#23384D;--t-ground:#010204;--t-hover:#121A22;
  --t-scrim:rgba(1,2,4,.42);--t-scrim-label:rgba(1,2,4,.55);
  --t-photo-scrim:linear-gradient(rgba(1,2,4,0),rgba(1,2,4,.72));
  --t-photo-shadow:0 1px 2px rgba(1,2,4,.5);
}
@media (max-width:860px){:root{
  --t-h2:var(--t-30);
  --t-h1-lh:1.05;              /* 1.0 is set for 80px; at the 48px floor the extenders of one line touch the next */
  --t-lead:var(--t-17);
  --t-body-lh:1.55;
  --t-price-page:var(--t-24);
}}

/* ---- 2. base --------------------------------------------------------------------------------------------- */
html{font-family:var(--t-body);font-size:var(--t-body-size);line-height:var(--t-body-lh);color:var(--t-ink);letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font:inherit;color:inherit}
/* the display face is never synthesised: an editor's <strong> or <em> in a heading stays 400 upright on every engine */
h1,h2,h3,[data-role="display"],.t-h1,.t-h2,.t-statement,.t-card,.t-brand{font-synthesis:none}

/* ---- 3. display: Cormorant Garamond, never italic, never caps, never below 17px, never under opacity ----------
   Two weights and five trackings, all of them an optical correction for the size they are used at -- see the tokens.
   font-variant-numeric is pinned because every product name now ends in a number ("Eternity band, 3.46 ct total"):
   a build of the face that defaults to old-style figures would drop those numerals below the baseline mid-title. */
main h1,main h2,main h3,[data-role="display"],.t-h1,.t-h2,.t-statement,.t-card,.t-brand{
  font-family:var(--t-display);font-weight:var(--t-display-w);font-style:normal;font-optical-sizing:auto;text-transform:none;opacity:1;margin:0;color:var(--t-ink);letter-spacing:0;
  font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"lnum" 1}
main h1,.t-h1{font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-track);text-wrap:balance;max-width:12em}
.t-statement{font-size:var(--t-statement);line-height:var(--t-statement-lh);letter-spacing:var(--t-statement-track);text-wrap:balance;max-width:12em}
main h2,.t-h2{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-track);text-wrap:balance}
main h1.t-h2{max-width:none}                       /* a product title is an h1 at h2 size */
main h3,.t-card{font-size:var(--t-card);line-height:var(--t-card-lh);letter-spacing:var(--t-card-track);font-weight:var(--t-display-w-small);text-wrap:balance}
/* the name on a suggestion rail: the same voice as a catalogue card, one step down, so a rail reads as a footnote
   to the page and not as a second catalogue competing with it */
.t-card.is-mini{font-size:var(--t-card-mini);line-height:var(--t-card-mini-lh);letter-spacing:var(--t-card-mini-track)}
/* in a grid the names are different lengths, so the line under them, the price and the button all land at a
   different height in every column and the row reads as rubble. Two lines of room for the name puts them back on
   one baseline; a name long enough to need a third still gets it. */
main .t-card.is-grid{min-height:calc(2em * var(--t-card-lh))}
/* a piece's name on two lines: the name in the title style, the cut under it as a small, slightly see-through line with a soft glow
   ("Solitaire engagement ring" / "Cushion cut"; shop.js splitName). Body face, sentence case, never the uppercase label. Light cool ink
   at .82 over the black ground measures 9:1 or better at the brightest glow-lit pixel behind the letters (10:1 on the plain ground), so it
   stays easy to read. Under prefers-contrast:more the glow and the see-through go. A name with no cut (a necklace) is just .vld-nm. */
.vld-nm{display:block}
.vld-nm-cut{display:block;margin-top:3px;font-family:var(--t-body);font-size:var(--t-13);line-height:1.35;letter-spacing:.02em;font-weight:400;font-style:normal;text-transform:none;text-wrap:balance;
  color:rgba(220,235,250,.82);text-shadow:0 0 10px rgba(127,180,230,.45)}
/* under a large name (the page title, the hero piece) the line steps up to 15px, the next size on the ramp */
.vld-nm-cut.is-lg{font-size:var(--t-15);margin-top:6px}
@media (prefers-contrast:more){.vld-nm-cut{color:rgb(220,235,250);text-shadow:none}}
/* the grid names keep two lines of room for the name AND one for the cut, so a row of cards still lands its prices on one baseline */
main .t-card.is-grid.has-cut-room{min-height:calc(2em * var(--t-card-lh) + 3px + var(--t-13) * 1.35)}
.t-brand{font-size:var(--t-brand);line-height:1;letter-spacing:var(--t-brand-track);font-weight:var(--t-display-w-small)}

/* ---- 4. body: Instrument Sans 400, everything a person reads ------------------------------------------- */
main p,main li,main dd,.t-body{font-family:var(--t-body);font-size:var(--t-body-size);line-height:var(--t-body-lh);letter-spacing:0;font-weight:400;text-transform:none}
main p,.t-body{max-width:var(--t-measure);text-wrap:pretty}
.t-lead{font-size:var(--t-lead);line-height:1.5}
/* the floor for any sentence: captions, notes, form help, bag lines, footnotes, "Price on request", error text */
.t-small,main small,main figcaption,main caption{font-family:var(--t-body);font-size:var(--t-small);line-height:var(--t-small-lh);letter-spacing:0;font-weight:400;text-transform:none;color:var(--t-muted)}
.t-small.is-ink{color:var(--t-ink)}
.t-note{color:var(--t-accent)}                     /* accent is for notes and links only, never for a 13px label */

/* ---- 5. label and data: IBM Plex Mono 400. The label is the ONLY uppercase style on the site. ------------- */
.t-label,main th,main label,main [data-role="label"]{font-family:var(--t-label);font-size:var(--t-label-size);line-height:var(--t-label-lh);letter-spacing:var(--t-label-track);text-transform:uppercase;font-weight:400;color:var(--t-muted)}
.t-label .is-muted,.t-label.is-quiet{color:var(--t-muted)}
.t-label.is-current,.t-label[aria-current],main th[aria-sort]{color:var(--t-ink)}
/* filter chips are labels with a border; the selected chip is ink fill / ground text */
.t-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--t-hairline);color:var(--t-ink);background:transparent;border-radius:0;white-space:nowrap;cursor:pointer;text-decoration:none}
.t-chip.is-on{border-color:var(--t-ink);background:var(--t-ink);color:var(--t-ground)}
/* the lane bar: by stone / by piece, under the header on every catalogue page (theme.js laneBar) */
.vld-lane{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 40px;border-bottom:1px solid var(--t-hairline);background:rgba(1,2,4,0.55)}
.vld-lane>.t-label{margin-right:4px}
.vld-lane .t-chip{min-height:32px;padding:0 12px}
.vld-lane .vld-lane-hint{margin-left:auto;color:var(--t-muted)}
a.vld-lane-hint{text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.vld-lane{padding:10px 20px}.vld-lane .vld-lane-hint{flex:1 1 100%;margin-left:0}}
/* one unbreakable token: report number, SKU, carat, grade, mm spread, quantity. As written, tracking 0, never wraps, selectable in one tap. */
.t-data,main [data-role="data"],main code,main kbd{font-family:var(--t-label);font-size:var(--t-data);line-height:var(--t-data-lh);letter-spacing:0;text-transform:none;font-weight:400;color:var(--t-ink);font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-user-select:all;user-select:all}
.t-data.is-muted{color:var(--t-muted)}

/* ---- 6. price: Instrument Sans 500, the only weight besides 400 (shared with buttons) ------------------- */
.t-price,main [data-role="price"]{font-family:var(--t-body);font-weight:500;font-size:var(--t-price);line-height:var(--t-price-lh);letter-spacing:0;text-transform:none;color:var(--t-ink);font-variant-numeric:lining-nums tabular-nums}
.t-price.is-page{font-size:var(--t-price-page)}
.t-price.is-bag{font-size:var(--t-price-bag)}
.t-price.is-mini{font-size:var(--t-17)}            /* on a suggestion rail, where the price informs but does not decide */
.t-col-num{text-align:right}                       /* the backstop if the Google build lacks tnum: every price column right-aligned */
/* "Price on request" is not a price: it is .t-small */

/* ---- 7. nav, button, link: Instrument Sans, sentence case, 15px --------------------------------------- */
header nav,.t-nav{font-family:var(--t-body);font-size:var(--t-nav);line-height:1;letter-spacing:var(--t-ui-track);text-transform:none;font-weight:400;color:var(--t-muted)}
header nav a,.t-nav a{color:var(--t-muted);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
header nav a[aria-current="page"],.t-nav .is-current{color:var(--t-ink);font-weight:500}
header .t-brand{color:var(--t-ink)}
/* the bar the nav sits on: a backing that holds to 80% of its height (not 55%), so links never sit on a photograph scrolling under */
.t-bar{background:linear-gradient(rgba(1,2,4,.92) 0,rgba(1,2,4,.92) 80%,rgba(1,2,4,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mix-blend-mode:normal}

.t-btn,main button,main [role="button"],main input[type="submit"]{font-family:var(--t-body);font-size:var(--t-btn);font-weight:500;line-height:1;letter-spacing:var(--t-ui-track);text-transform:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--t-tap);padding:16px 28px;border:1px solid var(--t-ink);background:var(--t-ink);color:var(--t-ground);border-radius:0;cursor:pointer;white-space:nowrap;text-decoration:none}
.t-btn.is-secondary,main button.is-secondary{background:transparent;color:var(--t-ink)}
.t-btn.is-secondary:hover,main button.is-secondary:hover{background:var(--t-ink);color:var(--t-ground)}
.t-btn.is-quiet,main button.is-quiet{background:transparent;color:var(--t-ink);border-color:var(--t-hairline)}
.t-btn.is-quiet:hover,main button.is-quiet:hover{border-color:var(--t-ink)}
.t-btn[disabled],main button[disabled]{cursor:default;opacity:1;background:transparent;color:var(--t-ink)}

.t-link,main p a,main li a{font-family:var(--t-body);font-weight:400;letter-spacing:var(--t-ui-track);text-transform:none;color:var(--t-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;text-decoration-color:var(--t-hairline)}
.t-link:hover,main p a:hover,main li a:hover{text-decoration-color:currentColor}
/* arrows ("Every piece →") stay in the sans link, never mono */

/* form controls are read and pressed: sans, sentence case, never mono caps */
main input,main textarea{font-family:var(--t-body);font-size:var(--t-body-size);letter-spacing:0;text-transform:none}
main select{font-family:var(--t-body);font-size:var(--t-small);letter-spacing:0;text-transform:none;font-weight:400}

/* ---- 8. type on the water and on photographs ----------------------------------------------------------- */
/* Display face over the live plate (homepage hero lines, the strip head): opsz pinned at 72 with wght restated in the same declaration,
   tracking no tighter than -0.015em (light-on-dark bloom fills a tighter serif collision), no shadow, no glow;
   placed in the outer 25% columns away from the centred stone, 24px of black between any hairline and a glinting edge. */
.t-on-water{font-variation-settings:normal;font-weight:500;letter-spacing:0;text-shadow:none;filter:none;opacity:1}   /* Cormorant has no opsz axis; weight stays 500 over the plate */
/* prose and labels on the plate sit on a scrim, or on nothing at all: .42 minimum, .55 under a 13px label */
.t-scrim{background:var(--t-scrim)}
.t-scrim.has-label{background:var(--t-scrim-label)}
/* text on a photograph: the name lives under the image. Where a tile must carry text on desktop: a bottom scrim over the lower 45%,
   ink only, 15px minimum, the 0 1px 8px glow retired. Never any text on the #DDE1E6 specimen frame; the label goes outside it. */
.t-on-photo{position:relative;isolation:isolate;color:var(--t-ink)}
.t-on-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:var(--t-photo-scrim);pointer-events:none;z-index:0}
.t-on-photo>*{position:relative;z-index:1}
.t-on-photo .t-card,.t-on-photo .t-h2,.t-on-photo .t-small,.t-on-photo .t-label{color:var(--t-ink);text-shadow:var(--t-photo-shadow)}
.t-on-photo .t-label{font-family:var(--t-body);font-size:var(--t-small);letter-spacing:0;text-transform:none}   /* no 13px mono on a photograph */
/* labels under the ten-cut strip are sans: not the Didone (a hairline flickers under the one-at-a-time glint) and not a 10px mono */
.t-strip-label{font-family:var(--t-body);font-size:var(--t-small);line-height:1.25;letter-spacing:0;text-transform:none;font-weight:400;color:var(--t-muted);text-align:center;white-space:normal;overflow-wrap:break-word;min-height:2.5em}
.t-strip-label.is-current{color:var(--t-ink)}

/* ---- 9. phone: the one breakpoint. Sizes come from the :root block above; only geometry lives here. ------- */
@media (max-width:860px){
  header nav a,.t-nav a,.t-btn,main button,.t-chip{min-height:var(--t-tap)}
  /* the scroll + right-edge fade live on .t-nav-links (below), not the nav: a fade on the nav dimmed the bag icon at the far right */
  header nav{max-width:100%}
}

/* ---- 10. floors: the only !important in this file. Wins over the pages' own 860px/420px nav rules by specificity
   until those rules are deleted. 13px is the floor for the mono label, 15px for everything else; the 420px query is dead.
   A font-size below 13px anywhere is a build failure for blender/audit_site.py once its type pass exists. ----------- */
html body header nav,html body header nav a{font-size:var(--t-nav) !important;letter-spacing:var(--t-ui-track) !important;text-transform:none !important}
html body .types a span:nth-child(2){font-size:var(--t-card) !important}
html body .types a span:nth-child(3){font-size:var(--t-small) !important}
@media (max-width:480px){.t-data,main [data-role="data"]{white-space:normal}}   /* phones: a report number plus millimetres cannot sit on one line */
@media (max-width:480px){#cuts .t-strip-label{font-size:13px;line-height:1.2}}   /* phones: five labels across 375 px; "Emerald" clipped at 15 px */

/* catalogue card ------------------------------------------------------------------------------------------
   Added for the Grown-Brilliance-molded card: image, title, plain-language subtitle, price (pieces.dc.html,
   diamonds.dc.html, and the piece.dc.html info column all use this line). The subtitle states metal + carat
   for a piece, or colour + clarity + growth for a loose stone — plain Instrument Sans prose, sentence case,
   never the mono/uppercase .t-label. It shares .t-small's size and colour tokens on purpose (same 15px floor,
   same muted colour) but gets its own class so a future change to .t-small (captions, notes, "Price on
   request", form help) never silently reflows every catalogue card and product subtitle along with it.
   The category kicker (Type/Cut on a pieces.dc.html tile) and the diamond report line (lab + cert + mm) stay
   on .t-label / .t-data respectively — untouched, and still the only two mono uses on a card. */
.t-card-sub{font-family:var(--t-body);font-size:var(--t-small);line-height:var(--t-small-lh);letter-spacing:0;font-weight:400;text-transform:none;color:var(--t-muted)}

/* header: one markup on every page - brand, six links (two open a mega menu), search, bag; a menu button below 1025px */
header.t-bar>.t-brand{flex:none;white-space:nowrap}
.t-nav{display:flex;align-items:center;gap:28px;min-width:0}
.t-nav-links{display:flex;gap:28px;min-width:0}
.t-cart{flex:none;white-space:nowrap;position:relative;width:32px;height:32px;justify-content:center;padding:0;color:var(--t-muted)}
.t-cart:hover{color:var(--t-ink)}
.t-cart::before{content:"";display:block;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8.5c0-2.2 1.5-4 3.5-4s3.5 1.8 3.5 4'/%3E%3Cpath d='M7 8.5h10l1.2 10.2a1.2 1.2 0 0 1-1.2 1.3H7a1.2 1.2 0 0 1-1.2-1.3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8.5c0-2.2 1.5-4 3.5-4s3.5 1.8 3.5 4'/%3E%3Cpath d='M7 8.5h10l1.2 10.2a1.2 1.2 0 0 1-1.2 1.3H7a1.2 1.2 0 0 1-1.2-1.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.t-cart[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:calc(50% - 15px);right:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--t-ink);color:#010204;font:500 10px/14px var(--t-label);text-align:center;letter-spacing:0}
/* six labels need about 990px beside the brand, search and bag: at 1024px and below the header is one row of brand, search,
   bag and menu, and the labels live in the menu sheet (theme.js). Header geometry only: type sizes keep the 860px breakpoint. */
@media (min-width:1025px) and (max-width:1180px){.t-nav-links{gap:20px}.t-nav{gap:20px}}
@media (max-width:1024px){
  header.t-bar{padding:10px 20px !important;gap:8px !important;flex-wrap:nowrap !important;min-height:64px}
  header.t-bar>.t-brand{flex:1 1 auto;min-width:0}
  .t-nav{flex:none;gap:4px;justify-content:flex-end}
  .t-nav-links{display:none}
  .t-search,.t-menu,.t-cart{width:44px;height:44px}
  .t-menu{display:inline-flex}
}
@media (max-width:374px){.t-search{display:none}}