@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Cormorant+Garamond:ital,wght@1,400&display=swap");

:root {
  --fog: #7e8a98;
  --fog-light: #a6b0ba;
  --cream: #e8e4d6;
  --cyan: #a6d6d2;
  --teal: #7fa9a4;
  --ink: #1b1f22;
  --stone: #3d4348;
  --warm: #d9a98a;
  --display: "Cinzel", Georgia, serif;
  --body: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--cream); background: var(--ink); font-family: var(--display); }
button, a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .7rem 1rem; color: var(--ink); background: var(--cream); transform: translateY(-180%); transition: transform 180ms ease; }
.skip-link:focus { transform: translateY(0); }
.site-shell { overflow: clip; }
.timeline-node { touch-action: manipulation; }

.hero { position: relative; min-height: 100svh; padding: 1.5rem clamp(1rem,3vw,3rem); overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 50%,var(--fog-light),var(--fog) 58%,#606c79); }
.fog-layer { position: absolute; z-index: -2; inset: -20%; background: radial-gradient(ellipse at 15% 50%,rgba(255,255,255,.25),transparent 35%), radial-gradient(ellipse at 85% 45%,rgba(255,255,255,.2),transparent 32%), linear-gradient(90deg,rgba(70,82,94,.3),transparent 45%,rgba(70,82,94,.3)); filter: blur(18px); }
.snow-layer { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: .45; background-image: radial-gradient(circle,#fff 0 1px,transparent 1.4px),radial-gradient(circle,#fff 0 .8px,transparent 1.2px); background-position: 0 0,31px 49px; background-size: 83px 97px,109px 127px; }
.monolith { position: absolute; z-index: -1; top: -4%; left: 50%; width: clamp(20rem,36vw,38rem); height: 110%; overflow: hidden; background: var(--stone); box-shadow: 0 0 5rem rgba(27,31,34,.55); clip-path: polygon(8% 0,93% 3%,100% 98%,3% 100%,0 12%); transform: translateX(-50%); }
.monolith img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.4) brightness(.36); }
.stone-grade { position: absolute; inset: 0; background: linear-gradient(110deg,rgba(27,31,34,.72),rgba(61,67,72,.28),rgba(27,31,34,.74)); }
.sigil { position: absolute; width: clamp(5rem,9vw,9rem); aspect-ratio: 1; border: 2px solid var(--cyan); opacity: .7; transform: rotate(45deg); }
.sigil::before, .sigil::after { position: absolute; content: ""; border: 1px solid var(--cyan); }
.sigil::before { inset: 15%; border-radius: 50%; }
.sigil::after { top: 49%; left: -15%; width: 130%; height: 1px; background: var(--cyan); transform: rotate(-45deg); }
.sigil-one { top: 20%; left: 11%; opacity: .35; }
.sigil-two { top: 38%; right: 9%; }
.sigil-three { left: 35%; bottom: 18%; transform: rotate(12deg); }
.hud { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hud-mark { font-size: .9rem; letter-spacing: .3em; text-decoration: none; }
.hud-search { display: grid; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(232,228,214,.55); border-radius: 50%; place-items: center; }
.hud-search span { width: .65rem; height: .65rem; border: 1px solid var(--cream); border-radius: 50%; }
.hud-search span::after { display: block; width: .4rem; height: 1px; margin: .6rem 0 0 .5rem; content: ""; background: var(--cream); transform: rotate(45deg); }
.hud-links { justify-self: end; display: flex; gap: 1.4rem; }
.hud-links a { font-size: .62rem; letter-spacing: .16em; text-decoration: none; }
.hud a:hover, .hud a:focus-visible { color: var(--cyan); }
.hero-copy { position: absolute; top: 50%; left: 50%; z-index: 5; width: min(32rem,82vw); text-align: center; transform: translate(-50%,-50%); }
.hero-kicker { margin: 0 0 2rem; color: var(--cyan); font-size: .58rem; letter-spacing: .22em; line-height: 1.5; }
.hero-copy h1 { margin: 0; font-size: clamp(2rem,4vw,4.5rem); font-weight: 400; letter-spacing: .34em; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hero-manifest { margin: 2rem 0 .7rem; font-family: var(--body); font-size: clamp(1.25rem,2vw,1.8rem); font-style: italic; line-height: 1.3; }
.hero-subcopy { margin: 0; color: var(--teal); font-family: var(--body); font-size: 1rem; font-style: italic; }
.scroll-cue { position: absolute; z-index: 6; left: clamp(1rem,3vw,3rem); bottom: 1.5rem; display: flex; align-items: flex-end; gap: .8rem; font-size: .55rem; letter-spacing: .15em; text-decoration: none; }
.scroll-line { width: 1px; height: 4rem; background: var(--cream); }
.warm-orb { position: absolute; z-index: 6; right: clamp(1rem,3vw,3rem); bottom: 1.5rem; display: grid; width: 2.7rem; height: 2.7rem; border-radius: 50%; color: var(--ink); background: var(--warm); place-items: center; }
.warm-orb span { font-size: .75rem; }
.utility-rail { position: absolute; z-index: 7; right: 5rem; bottom: 1.5rem; display: flex; gap: .4rem; }
.share-pill, .settings-pill { border: 1px solid rgba(232,228,214,.55); color: var(--cream); background: rgba(27,31,34,.28); backdrop-filter: blur(8px); cursor: pointer; transition: color 180ms ease, background 180ms ease; }
.share-pill { padding: .65rem .9rem; border-radius: 999px; font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; }
.settings-pill { display: grid; width: 2.35rem; height: 2.35rem; padding: 0; border-radius: 50%; place-items: center; }
.settings-icon { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
.share-pill:hover, .share-pill:focus-visible, .settings-pill:hover, .settings-pill:focus-visible { color: var(--ink); background: var(--cyan); }

.taxonomy { position: relative; padding: clamp(7rem,12vw,13rem) clamp(1rem,5vw,6rem); overflow: hidden; background: linear-gradient(180deg,#2a3035,var(--ink)); isolation: isolate; }
.taxonomy-fog { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 20% 20%,rgba(166,214,210,.1),transparent 28%),radial-gradient(ellipse at 80% 60%,rgba(126,138,152,.18),transparent 32%); }
.section-head { display: grid; grid-template-columns: .6fr 2fr 1fr; align-items: end; gap: 2rem; margin-bottom: 7rem; }
.section-head > p { margin: 0; color: var(--teal); font-size: .58rem; letter-spacing: .18em; line-height: 1.6; }
.section-head h2 { margin: 0; font-size: clamp(4rem,8vw,9rem); font-weight: 400; letter-spacing: .18em; line-height: .88; }
.size-timeline { position: relative; max-width: 82rem; margin: 0 auto; padding: 0; list-style: none; }
.size-timeline::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; content: ""; background: linear-gradient(var(--cyan),var(--teal),transparent); }
.subject-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 4rem; }
.subject-card { display: contents; color: var(--cream); cursor: pointer; }
.timeline-marker { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; justify-items: center; gap: .5rem; transform: translate(-50%,-50%); }
.timeline-marker i { width: 1rem; height: 1rem; border: 2px solid var(--cyan); border-radius: 50%; background: var(--ink); box-shadow: 0 0 1rem rgba(166,214,210,.35); transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.timeline-marker b { color: var(--cyan); font-size: .52rem; font-weight: 400; letter-spacing: .15em; }
.subject-panel { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 20rem; border: 1px solid rgba(166,214,210,.28); background: rgba(61,67,72,.52); backdrop-filter: blur(7px); transition: border-color 180ms ease, transform 260ms ease, box-shadow 260ms ease; }
.item-left .subject-panel { grid-column: 1; margin-right: 3rem; }
.item-right .subject-panel { grid-column: 2; margin-left: 3rem; }
.item-right .subject-media { order: 2; }
.subject-card:hover .subject-panel, .subject-card:focus-visible .subject-panel, .subject-card.is-active .subject-panel { border-color: var(--cyan); box-shadow: 0 1rem 3rem rgba(0,0,0,.35); transform: translateY(-.6rem); }
.subject-card:hover .timeline-marker i, .subject-card:focus-visible .timeline-marker i, .subject-card.is-active .timeline-marker i { background: var(--cyan); box-shadow: 0 0 2rem var(--cyan); transform: scale(1.25); }
.subject-media { position: relative; min-height: 20rem; overflow: hidden; }
.subject-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.8) contrast(1.1) brightness(.65); transition: filter 220ms ease, transform 350ms ease; }
.subject-card:hover .subject-image, .subject-card:focus-visible .subject-image { filter: grayscale(.25) contrast(1.08) brightness(.8); transform: scale(1.04); }
.panel-sigil { position: absolute; right: 1rem; bottom: 1rem; width: 2.5rem; height: 2.5rem; border: 1px solid var(--cyan); transform: rotate(45deg); }
.subject-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem,3vw,3rem); }
.subject-index { color: var(--teal); font-family: var(--body); font-size: 1rem; font-style: italic; }
.subject-line { margin: .6rem 0; font-size: clamp(1.3rem,2.2vw,2.3rem); font-weight: 400; letter-spacing: .12em; }
.subject-size, .subject-price { font-size: .62rem; letter-spacing: .1em; }
.subject-compare, .subject-delivery { margin-top: .35rem; color: #aeb9bd; font-family: var(--body); font-size: .8rem; font-style: italic; }
.subject-tooltip { width: max-content; max-width: 100%; margin: .9rem 0; padding: .35rem .55rem; border: 1px solid var(--teal); border-radius: 999px; font-size: .5rem; letter-spacing: .1em; }

.production { padding: clamp(7rem,12vw,13rem) clamp(1rem,7vw,8rem); background: linear-gradient(140deg,#56616c,#263038); }
.stone-card { max-width: 80rem; margin: 0 auto; padding: clamp(3rem,7vw,8rem); background: rgba(27,31,34,.74); border: 1px solid rgba(166,214,210,.28); box-shadow: 0 2rem 6rem rgba(0,0,0,.32); }
.stone-card > p:first-child { margin: 0; color: var(--teal); font-size: .58rem; letter-spacing: .18em; }
.stone-card h2 { margin: 2rem 0; font-size: clamp(3.5rem,7vw,8rem); font-weight: 400; letter-spacing: .1em; line-height: .9; }
.stone-card > p { max-width: 43rem; font-family: var(--body); font-size: 1.15rem; font-style: italic; line-height: 1.4; }
.quality-grid { display: grid; grid-template-columns: repeat(5,1fr); margin-top: 5rem; border-top: 1px solid var(--teal); border-bottom: 1px solid var(--teal); }
.quality-grid article { padding: 1.3rem; border-right: 1px solid var(--teal); }
.quality-grid article:last-child { border-right: 0; }
.quality-grid span { color: var(--cyan); font-family: var(--body); font-style: italic; }
.quality-grid h3 { margin: .7rem 0 0; font-size: .62rem; font-weight: 400; line-height: 1.5; }
.compliance { padding: .6rem 1rem; border: 1px solid var(--teal); border-radius: 999px; color: var(--cyan); }

.custom { position: relative; padding: clamp(7rem,12vw,13rem) clamp(1rem,7vw,8rem); text-align: center; background: var(--ink); }
.custom-kicker { margin: 0 0 2rem; color: var(--teal); font-size: .58rem; letter-spacing: .18em; }
.custom h2 { margin: 0; font-size: clamp(3.5rem,7vw,8rem); font-weight: 400; letter-spacing: .12em; line-height: .92; }
.custom-copy { max-width: 42rem; margin: 2rem auto; font-family: var(--body); font-size: 1.15rem; font-style: italic; line-height: 1.4; }
.custom-cta { display: inline-block; padding: .7rem 1rem; border: 1px solid var(--cyan); color: var(--cyan); font-size: .58rem; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.custom-cta:hover, .custom-cta:focus-visible { color: var(--ink); background: var(--cyan); }
.custom-list { display: grid; grid-template-columns: repeat(4,1fr); max-width: 72rem; margin: 5rem auto 0; border-top: 1px solid var(--teal); border-bottom: 1px solid var(--teal); }
.custom-list div { padding: 1.2rem; border-right: 1px solid var(--teal); }
.custom-list div:last-child { border-right: 0; }
.custom-list dt, .custom-list dd { margin: 0; font-size: .55rem; }
.custom-list dd { margin-top: .4rem; color: var(--cyan); }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 3rem; padding: 4rem clamp(1rem,5vw,6rem); border-top: 1px solid var(--stone); background: var(--ink); }
.footer-mark { font-size: clamp(3rem,7vw,8rem); font-weight: 400; letter-spacing: .25em; line-height: .8; text-decoration: none; }
.footer-links { display: grid; align-content: start; justify-items: end; gap: .7rem; }
.footer-links a { font-size: .56rem; letter-spacing: .12em; text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--cyan); }
.footer-meta { grid-column: 1 / -1; margin: 0; padding-top: 1rem; border-top: 1px solid var(--stone); color: var(--teal); font-size: .55rem; }

.product-modal { width: min(68rem,calc(100% - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 1px solid var(--teal); color: var(--cream); background: var(--ink); }
.product-modal::backdrop { background: rgba(20,25,29,.84); backdrop-filter: blur(10px); }
.modal-shell { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 38rem; }
.modal-close { position: absolute; z-index: 3; top: 1rem; right: 1rem; display: grid; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); background: var(--ink); font-size: 1.4rem; cursor: pointer; place-items: center; }
.modal-close:hover, .modal-close:focus-visible { color: var(--ink); background: var(--cyan); }
.modal-visual { min-height: 38rem; overflow: hidden; background: var(--stone); }
.modal-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.65) contrast(1.1) brightness(.72); }
.modal-content { display: flex; flex-direction: column; padding: clamp(2.5rem,5vw,5rem); }
.modal-line { margin: 0 0 auto; color: var(--teal); font-family: var(--body); font-style: italic; }
.modal-title { margin: 3rem 0 1rem; font-size: clamp(3.5rem,7vw,7rem); font-weight: 400; letter-spacing: .12em; line-height: .85; }
.modal-description { margin: 0 0 2rem; font-family: var(--body); font-size: 1.1rem; font-style: italic; line-height: 1.4; }
.modal-meta { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--teal); border-bottom: 1px solid var(--teal); }
.modal-size-block, .modal-price-block { display: grid; gap: .35rem; padding: 1rem 0; }
.modal-label { color: var(--teal); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.modal-size, .modal-price { font-size: 1.4rem; font-weight: 400; }
.modal-price-note, .modal-compliance { color: var(--teal); font-size: .54rem; line-height: 1.4; }
.modal-delivery { margin: 1rem 0 .3rem; color: var(--cyan); font-size: .6rem; }
.modal-compliance { margin: 0; }
.site-shell.is-quiet .fog-layer, .site-shell.is-quiet .snow-layer, .site-shell.is-quiet .sigil, .site-shell.is-quiet .taxonomy-fog { display: none; }

@media (max-width: 900px) {
  .hud-links { gap: .6rem; }
  .subject-panel { grid-template-columns: 1fr; }
  .item-right .subject-media { order: 0; }
  .quality-grid { grid-template-columns: repeat(2,1fr); }
  .quality-grid article:nth-child(2n) { border-right: 0; }
  .custom-list { grid-template-columns: repeat(2,1fr); }
  .custom-list div:nth-child(2) { border-right: 0; }
}

@media (max-width: 720px) {
  .hero { min-height: 52rem; padding: 1rem; }
  .hud { grid-template-columns: 1fr auto; }
  .hud-search { display: none; }
  .hud-links a:first-child { display: none; }
  .monolith { width: 80vw; }
  .hero-copy h1 { font-size: 2rem; letter-spacing: .2em; }
  .warm-orb { display: none; }
  .utility-rail { right: 1rem; bottom: 1rem; }
  .section-head { display: block; }
  .section-head h2 { margin: 1.5rem 0 2rem; letter-spacing: .08em; }
  .size-timeline::before { left: .5rem; }
  .subject-item { display: block; margin: 0 0 3rem 2rem; }
  .timeline-marker { left: -1.5rem; }
  .timeline-marker b { display: none; }
  .item-left .subject-panel, .item-right .subject-panel { margin: 0; }
  .quality-grid, .custom-list { grid-template-columns: 1fr; }
  .quality-grid article, .custom-list div { border-right: 0; border-bottom: 1px solid var(--teal); }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { justify-items: start; }
  .footer-meta { grid-column: auto; }
  .modal-shell { grid-template-columns: 1fr; }
  .modal-visual { min-height: 19rem; }
  .modal-content { padding: 2.5rem 1rem; }
}

::selection {
  color: #fff;
  background: #111;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (hover: hover) {
  .subject-card {
    will-change: transform;
  }

  .subject-image {
    backface-visibility: hidden;
  }

  .share-pill,
  .settings-pill {
    will-change: transform;
  }
}

@supports (backdrop-filter: blur(1px)) {
  .share-pill,
  .settings-pill {
    -webkit-backdrop-filter: blur(8px);
  }

  .product-modal::backdrop {
    -webkit-backdrop-filter: blur(8px);
  }
}

@media (forced-colors: active) {
  .subject-card,
  .modal-close,
  .share-pill,
  .settings-pill {
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}