/*
 * WordPress-specific additions on top of the handover styles (base/journey/global.css,
 * which are kept verbatim). Everything here uses the same tokens: --bg --ink --muted
 * --line --gold --serif --sans.
 */

/* ---- markup differences from the static build ------------------------------- */
/* Stones and cards are now links (real URLs) instead of buttons. */
a.floating-stone, a.gem-card { display: block; color: inherit; }
.floating-stone picture, .stone-motion picture { display: block; width: 100%; height: 100%; }
.floating-stone picture img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.rendered-stones .film-loaded > picture { visibility: hidden; }
.gallery-tile[hidden] { display: none; }
.dl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Homepage welcome screen skipped for the rest of the visit (set before first paint). */
.dl-skip-arrival .arrival { display: none; }
.dl-skip-arrival .splash-pending main, .dl-skip-arrival .splash-pending header, .dl-skip-arrival .splash-pending footer { opacity: 1; animation: none; }

/* ---- stone pages ------------------------------------------------------------------
   Layout comes from stone-detail.css (live preview). Only the WordPress additions live here. */
.stone-editorial .prose { margin-top: 18px; }
.stone-editorial .prose h2 { font-size: clamp(30px, 3vw, 46px); }
#stone-references .text-link + .text-link { margin-left: 28px; }

/* ---- inner pages ----------------------------------------------------------------- */
.inner-page:not(.stone-detail-page) main { padding-top: 102px; }
.inner-section { padding: 90px 7% 100px; }
.page-hero { max-width: 1000px; margin-bottom: 60px; }
.page-hero .eyebrow { color: var(--gold); margin-bottom: 26px; }
.page-title { font-size: clamp(52px, 6vw, 96px); letter-spacing: -.04em; line-height: 1.02; }
.page-title em { color: #b8c4b7; }
.page-lead { margin-top: 28px; color: #b0b7af; max-width: 640px; font-size: 18px; }
.page-figure { margin: 0 0 60px; }
.page-figure img { width: 100%; height: auto; max-height: 78vh; object-fit: cover; }

/* Editor content, styled in the house typography. */
.prose { max-width: 760px; color: #d6d7d0; font-size: 17px; line-height: 1.85; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: clamp(34px, 3.6vw, 54px); margin-top: 1.6em; letter-spacing: -.03em; color: var(--ink); }
.prose h3 { font-size: clamp(26px, 2.4vw, 36px); margin-top: 1.4em; color: var(--ink); }
.prose h4 { font: 500 14px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: 1.8em; }
.prose a { color: var(--ink); border-bottom: 1px solid #b4b6a954; transition: border-color .2s; }
.prose a:hover { border-color: var(--gold); }
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin: 2em 0; padding-left: 28px; border-left: 1px solid var(--gold); font: italic 400 clamp(24px, 2.4vw, 32px)/1.35 var(--serif); color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 10px; border-top: 1px solid var(--line); }
.prose .wp-block-image.alignwide, .prose .alignwide { max-width: 1100px; }
.prose .wp-block-columns { display: flex; gap: 32px; flex-wrap: wrap; }
.prose .wp-block-column { flex: 1 1 260px; }
.prose .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.prose .wp-block-button__link { display: inline-flex; background: #d3c5a7; color: #171c17; padding: 12px 22px; border: 0; }
.prose .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; }

/* Journal listings, filters, pagination, post navigation. */
.journal.inner-section .journal-grid { row-gap: 60px; }
.journal-grid a { color: inherit; }
.post-card-blank { display: grid; place-items: center; aspect-ratio: 1.3; background: #10140f; color: #ffffff30; letter-spacing: .3em; font-size: 14px; }
.term-filter { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: -20px 0 50px; font-size: 15px; }
.term-filter a { color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid transparent; }
.term-filter a:hover, .term-filter a[aria-current] { color: var(--ink); border-color: var(--gold); }
.pagination { display: flex; gap: 18px; margin-top: 70px; font-size: 16px; }
.pagination .current { color: var(--gold); }
.post-meta { max-width: 760px; margin-top: 70px; padding-top: 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.post-nav { display: flex; justify-content: space-between; gap: 30px; margin-top: 20px; }
.post-nav a:hover { color: var(--ink); }
.search-form { display: flex; gap: 12px; max-width: 520px; margin: 30px 0; }
.search-form input[type=search] { flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; padding: 10px 0; }
.search-form input[type=submit] { background: none; border: 1px solid var(--line); color: var(--ink); padding: 10px 18px; font: inherit; cursor: pointer; }

/* Contact page: the enquiry form in-page, with company details beside it. */
.contact-layout { display: grid; grid-template-columns: 1.5fr .8fr; gap: 8%; }
.contact-details address { font-style: normal; color: #b0b7af; margin: 14px 0 24px; }
.contact-details .eyebrow { color: var(--gold); }
.contact-details a { border-bottom: 1px solid #b4b6a954; }
.contact-page .enquiry-form label { display: grid; gap: 6px; }
.form-status { min-height: 1.7em; margin-top: 14px; color: var(--gold); }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 0 5% 20px; font-size: 14px; color: var(--muted); }

/* WordPress core alignment helpers. */
.alignleft { float: left; margin: 0 2em 1em 0; }
.alignright { float: right; margin: 0 0 1em 2em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---- view transitions (stone flies from homepage into its page) ------------------ */
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.22, .7, .15, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

@media (max-width: 700px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .inner-section { padding: 60px 7% 70px; }
  .inner-page:not(.stone-detail-page) main { padding-top: 96px; }
  .page-hero { margin-bottom: 40px; }
}

/* WordPress adds width/height attributes; let the design's aspect-ratio win. */
.journal-grid img, .card-visual img, /* Core table block draws heavy borders; use the house hairlines. */
.prose .wp-block-table table, .prose .wp-block-table td, .prose .wp-block-table th { border: 0; }
.prose .wp-block-table tr { border-top: 1px solid var(--line); }
.prose .wp-block-table td:first-child { color: var(--muted); }

/* Header enquiry button: bold. */
.header .header-enquire.primary-cta { font-weight: 600; }

/* Instagram reels embedded directly; height is set from Instagram's measurement (site.js). */
.instagram .instagram-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: start; gap: 32px; }
.instagram .instagram-card { max-width: 380px; width: 100%; margin: 0; }
.instagram .instagram-player, .instagram .instagram-player:has(iframe) { aspect-ratio: auto; height: auto; border: 0; background: #fff; display: block; border-radius: 3px; }
.instagram .instagram-player iframe { display: block; width: 100%; height: 680px; min-height: 0; border: 0; background: #fff; }
.instagram .instagram-card h3 { font-size: 26px; margin-top: 18px; }
@media (max-width: 700px) {
  .instagram .instagram-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .instagram .instagram-card { max-width: 400px; }
}

/* Grading set photograph: keep its own proportions (the width/height attributes made it 1024px tall). */
.grading-layout img { height: auto; }

/* Journal post: headline left, featured image right on wide screens (tablet landscape and up). */
@media (min-width: 900px) {
  .post-head.has-figure { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 5vw; align-items: center; margin-bottom: 70px; }
  .post-head.has-figure .page-hero { margin-bottom: 0; }
  .post-head.has-figure .page-title { font-size: clamp(40px, 4.2vw, 72px); }
  .post-head.has-figure .page-figure { margin: 0; }
  .post-head.has-figure .page-figure img { max-height: 72vh; }
}

/* Journal post body: centred reading column with a sticky share rail to its left (wide screens);
   share icons sit in a row below the text on narrow screens. */
.post-main { display: flex; flex-direction: column; }
.post-main .prose { order: 1; }
.post-share { order: 2; margin-top: 50px; }
.post-share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.post-share a, .post-share button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff22; border-radius: 50%; color: var(--muted); transition: color .2s, border-color .2s, background .2s; }
.post-share a:hover, .post-share button:hover, .post-share a:focus-visible, .post-share button:focus-visible { color: var(--ink); border-color: #ffffff55; background: #ffffff0d; }
.post-share svg { width: 17px; height: 17px; }
.post-share li { position: relative; }
.share-copied { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; color: var(--gold); pointer-events: none; }
@media (max-width: 999px) { .share-copied { right: auto; left: 50%; top: auto; bottom: calc(100% + 6px); transform: translateX(-50%); } }
@media (max-width: 420px) { .post-share ul { gap: 7px; } .post-share a, .post-share button { width: 40px; height: 40px; } }
@media (min-width: 1000px) {
  /* Share rail | reading column (left-aligned) | sidebar at the right edge. */
  .post-main { display: grid; grid-template-columns: 42px minmax(0, 760px) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .post-main .prose { grid-column: 2; grid-row: 1; }
  .post-main .post-meta { grid-column: 2; grid-row: 2; }
  .post-share { grid-column: 1; grid-row: 1 / span 2; margin: 0; position: sticky; top: 120px; }
  .post-share ul { flex-direction: column; }
  .post-main .journal-sidebar { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin-top: 0; }
}

/* Floating header (all pages except gem pages): see site.js. Slim bar on a translucent dark ground. */
body:not(.stone-page-journey) .header.is-floating { position: fixed; top: 0; left: 0; right: 0; height: 76px; min-height: 0; z-index: 50; background: #080b0ad9; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid #ffffff14; transform: translateY(-100%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
body:not(.stone-page-journey) .header.is-floating.is-shown { transform: none; }
body:not(.stone-page-journey) .header.is-floating.no-anim { transition: none; }
.header.is-floating .company-mark img, .header.is-floating .company-mark svg { height: 48px; width: auto; }
.header.is-floating .brand { font-size: 19px; }
.header.is-floating .brand span { font-size: 12px; margin-top: 7px; }
.header.is-floating .header-enquire { padding-top: 9px; padding-bottom: 9px; }
@media (max-width: 680px) {
  body:not(.stone-page-journey) .header.is-floating { height: 64px; }
  .header.is-floating .company-mark img, .header.is-floating .company-mark svg { height: 36px; }
  .header.is-floating .brand { font-size: 13px; }
  .header.is-floating .brand span { font-size: 9px; margin-top: 4px; }
}

/* Journal sidebar: search, categories, archive (posts and journal listings). */
.post-main .post-meta { order: 3; }
.post-main .journal-sidebar { order: 4; }
.journal-sidebar { width: 100%; max-width: 300px; margin-top: 70px; font-size: 15px; }
.sidebar-block + .sidebar-block { margin-top: 44px; }
.journal-sidebar .sidebar-title { font: 500 13px/1.6 var(--sans); letter-spacing: .2em; line-height: 1.6; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.journal-sidebar .search-form { margin: 0; max-width: none; }
.journal-sidebar .search-form input[type=submit] { padding: 8px 14px; }
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #ffffff10; }
.sidebar-list a { color: #c9cbc3; }
.sidebar-list a:hover, .sidebar-list a[aria-current] { color: var(--ink); }
.sidebar-list a[aria-current] { box-shadow: inset 0 -1px 0 var(--gold); }
.journal-sidebar .count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.sidebar-year summary { display: flex; justify-content: space-between; cursor: pointer; padding: 7px 0; border-bottom: 1px solid #ffffff10; color: #c9cbc3; list-style: none; }
.sidebar-year summary::-webkit-details-marker { display: none; }
.sidebar-year summary::before { content: '+'; color: var(--muted); width: 1.2em; }
.sidebar-year[open] summary::before { content: '−'; }
.sidebar-year summary .count { margin-left: auto; }
.sidebar-year .sidebar-list { padding-left: 1.2em; }
.journal-layout { display: block; }
@media (min-width: 1000px) {
  .journal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 64px; align-items: start; }
  .journal-layout .journal-sidebar { margin-top: 0; position: sticky; top: 110px; }
  .journal-layout .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal .term-filter { display: none; }   /* the sidebar lists the categories */
}
@media (min-width: 1500px) { .journal-layout .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.journal-sidebar .search-form label { flex: 1; min-width: 0; }
.journal-sidebar .search-form input[type=search] { width: 100%; }
.journal-sidebar .search-form input[type=submit] { flex: none; }
/* Journal cards: one image shape for every card (WordPress's height attribute would otherwise win). */
.journal-grid img { height: auto; }
.journal-grid .post-card-blank { display: grid; place-items: center; width: 100%; aspect-ratio: 1.3; }

/* Japanese/Chinese journal with no articles yet */
.journal-empty{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:baseline;margin:0 0 2.5rem;color:var(--muted,#a9aaa5)}

/* ---- Language menu: current language's code, opens to a list of links (works without JavaScript) ---- */
.language-picker{position:relative;font:16px/1.5 var(--sans);letter-spacing:0}
.language-picker>summary{list-style:none;display:flex;align-items:center;min-height:44px;padding:8px 24px 8px 6px;cursor:pointer;color:#d7d3c8;letter-spacing:.08em;white-space:nowrap;position:relative}
.language-picker>summary::-webkit-details-marker{display:none}
.language-picker>summary::after{content:'';position:absolute;right:8px;top:calc(50% - 5px);width:6px;height:6px;border-right:1px solid #bfb7a5;border-bottom:1px solid #bfb7a5;transform:rotate(45deg);transition:transform .2s}
.language-picker[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
.language-picker>summary:focus-visible{outline:2px solid #c9bea6;outline-offset:2px}
.header .language-picker::after{content:none}
.language-picker ul{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:190px;margin:0;padding:6px;list-style:none;background:#101410;border:1px solid #5b6351;box-shadow:0 12px 32px #0009}
.language-picker li{margin:0}
.language-picker a{display:flex;align-items:center;gap:8px;padding:10px 12px;min-height:44px;color:#e8e4da;text-decoration:none;white-space:nowrap}
.language-picker .language-code{color:#a7ae9e;letter-spacing:.06em}
.language-picker a:hover,.language-picker a:focus-visible{background:#ffffff0f;outline:none}
.language-picker a[aria-current]{color:#d3c5a7}
.language-picker a[aria-current]::after{content:'✓';margin-left:auto;padding-left:16px}
.footer-language .language-picker{display:inline-block}
.footer-language .language-picker ul{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.footer-language .language-picker>summary{border:1px solid #45483e;padding-left:12px}
.arrival>.language-picker{position:absolute;z-index:5}
@media(max-width:700px){
 .header .language-picker{flex:0 0 auto}
 .header .language-picker>summary{padding:8px 20px 8px 4px}
 .header .language-picker ul{right:-60px}
}