/* Coast Origin — the mineral pages (Mica, Quartz; his pick, 20 Oct ~08:5x: "New Quartz & Mica pages").
   Loaded only by those pages, after site.css: the same look as the home's calm parts (black first, gold, Cormorant
   Garamond + Jost, golden dust), and no 3D. Pranay asked for "No unnecessary animations or complicated features that
   affect speed", so these pages stay still and light; the home keeps its motion. */

/* ── the opening: shorter than the home's, the photo still ───────────── */
.sub-hero{min-height:88vh;min-height:88svh;align-items:flex-end}
.sub-hero .hero-media{inset:0}
.sub-hero .hero-media img{object-position:62% 50%}
.sub-hero .wrap{padding-top:140px;padding-bottom:72px}
@media (max-width:700px){        /* phones: the words sit over the brightest part of the picture, so it darkens from below */
  .sub-hero::before{background:linear-gradient(0deg,rgba(15,13,11,.94) 0%,rgba(15,13,11,.78) 50%,rgba(15,13,11,.34) 100%)}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:30px;font:500 11px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--night-soft)}
.crumbs a{text-decoration:none;color:var(--night-soft);transition:color .3s}
.crumbs a:hover{color:var(--night-ink)}
.crumbs i{font-style:normal;opacity:.5}
.page-title{font-family:var(--serif);font-weight:300;font-size:clamp(3.6rem,1.8rem + 7vw,7.6rem);line-height:.95;letter-spacing:.01em;color:var(--night-ink)}
.sub-hero .rule{margin:28px 0 22px}
.key-facts{display:grid;margin-top:54px;border-top:1px solid var(--night-line);max-width:980px}
.key-facts div{padding:16px 0;border-bottom:1px solid var(--night-line)}
.key-facts b{display:block;font:500 10.5px/1.6 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sand)}
.key-facts span{display:block;margin-top:4px;font-family:var(--serif);font-size:1.28rem;line-height:1.3;color:var(--night-ink)}
@media (min-width:900px){.key-facts{grid-template-columns:repeat(3,1fr)}.key-facts div{border-bottom:0;padding:22px 32px 0 0}}

/* ── the calm parts: the golden dust sits behind the words (air.js) ──── */
.calm{overflow:hidden}
.has-air .calm > .wrap{position:relative;z-index:1}
.on-page{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:44px;padding-top:22px;border-top:1px solid var(--page-line)}
.on-page a{text-decoration:none;font:500 11px/1.9 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--page-label);transition:color .3s}
.on-page a:hover{color:var(--page-ink)}
.head{max-width:44em}
.head .lead{margin-top:0}

/* ── forms and grades: cards with a fine gold line ───────────────────── */
.grades{display:grid;margin-top:56px;border-top:1px solid var(--page-line)}
@media (min-width:760px){.grades{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1180px){.grades.n4{grid-template-columns:repeat(4,1fr)}.grades.n3{grid-template-columns:repeat(3,1fr)}}
.grade{position:relative;padding:30px 0 32px;border-bottom:1px solid var(--page-line)}
.grade::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:1px;background:linear-gradient(90deg,#9A754D,#E8C590)}
.grade .n{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--page-label)}
.grade h3{margin-top:8px;font-family:var(--serif);font-size:1.75rem;line-height:1.15;color:var(--page-ink)}
.grade p{margin-top:12px;font-size:.96rem;color:var(--page-text)}
.grade .for{display:block;margin-top:16px;font:500 10.5px/1.8 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--page-soft)}

/* ── specifications: the test tables (values come from Coast Origin's own lab reports) ── */
.spec-note{margin-top:30px}
.spec-wrap{display:grid;gap:48px;margin-top:44px}
@media (min-width:1000px){.spec-wrap{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.spec{width:100%;border-collapse:collapse;font-size:.95rem}
.spec caption{caption-side:top;text-align:left;padding-bottom:14px;font:500 11.5px/1.6 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--night-ink)}
.spec th,.spec td{padding:12px 14px 12px 0;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--night-line)}
.spec thead th{font:500 10px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--sand)}
.spec tbody th{font-weight:400;color:var(--night-ink)}
.spec tbody th small{display:block;font-size:.8rem;color:var(--night-soft)}
.spec td{color:var(--night-text)}
.spec .val{text-align:right;padding-right:0;font-family:var(--serif);font-size:1.15rem;color:var(--sand);white-space:nowrap}
.spec thead .val{font:500 10px/1.6 var(--sans);letter-spacing:.22em}          /* (the column's name keeps the small label look) */
@media (max-width:560px){.spec .how{display:none}}

/* ── quality: four checks, the lab photo, the reports to come ────────── */
.checks{list-style:none;padding:0;margin-top:34px;border-left:1px solid var(--page-line)}
.checks li{display:grid;grid-template-columns:52px 1fr;gap:4px;padding:16px 0 16px 26px}
.checks .n{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--page-label)}
.checks b{font:500 12.5px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--page-ink)}
.checks p{grid-column:2;font-size:.96rem;color:var(--page-text)}
.reports{display:grid;grid-template-columns:repeat(2,minmax(0,170px));gap:18px;margin-top:40px}
.doc{position:relative;aspect-ratio:1/1.414;border:1px dashed var(--bronze);display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
  font:500 10px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--page-label)}
.doc::before{content:"";position:absolute;left:16px;right:16px;top:20px;height:44%;opacity:.9;
  background:repeating-linear-gradient(to bottom,var(--page-line) 0 1px,transparent 1px 11px)}
.doc b{display:block;margin-bottom:6px;font:italic 400 1.05rem/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--page-ink)}

/* ── uses: what industry makes with it ───────────────────────────────── */
.uses-grid{display:grid;margin-top:56px;border-top:1px solid var(--night-line)}
@media (min-width:760px){.uses-grid{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1100px){.uses-grid{grid-template-columns:repeat(3,1fr)}}
.use{padding:30px 0 32px;border-bottom:1px solid var(--night-line)}
.use .n{font-family:var(--serif);font-style:italic;color:var(--sand)}
.use h3{margin-top:6px;font-family:var(--serif);font-size:1.6rem;line-height:1.15;color:var(--night-ink)}
.use p{margin-top:10px;font-size:.96rem;color:var(--night-text);max-width:30em}

/* ── his own photos: dashed frames until they arrive ────────────────── */
.frames{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
@media (min-width:1000px){.frames{grid-template-columns:repeat(4,1fr)}}
.frame{aspect-ratio:4/5;border:1px dashed var(--bronze);display:flex;flex-direction:column;justify-content:flex-end;padding:18px;
  background:linear-gradient(160deg,rgba(154,117,77,.1),rgba(154,117,77,0) 62%)}
.frame svg{width:28px;height:28px;color:var(--bronze);margin-bottom:auto}
.frame b{font-family:var(--serif);font-size:1.3rem;font-weight:400;line-height:1.2;color:var(--page-ink)}
.frame span{display:block;margin-top:6px;font:500 10px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--page-label)}

/* ── packing and shipping: the papers row (site.css), four across ───── */
@media (min-width:900px){.papers.n4{grid-template-columns:repeat(4,1fr)}}
.export-more .papers{margin-top:0}

/* ── documents and registrations ─────────────────────────────────────── */
.doc-lists{display:grid;gap:44px;margin-top:48px}
@media (min-width:900px){.doc-lists{grid-template-columns:1fr 1fr;gap:64px}}
.doc-lists h3{margin-bottom:12px;font:500 12px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--page-ink)}
.doc-lists ul{list-style:none;padding:0;border-top:1px solid var(--page-line)}
.doc-lists li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--page-line);color:var(--page-text)}
.doc-lists li .todo{font-size:.9em}
.doc-lists li em{font-style:normal;font-size:.86rem;color:var(--page-soft)}

/* ── the next mineral ─────────────────────────────────────────────────── */
.next-min{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:40px 0;border-top:1px solid var(--page-line);border-bottom:1px solid var(--page-line);text-decoration:none;color:var(--page-ink)}
.next-min b{display:block;margin-top:10px;font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,1.5rem + 3vw,4.2rem);line-height:1}
.next-min svg{width:48px;height:20px;flex:none;color:var(--bronze);transition:transform .4s var(--ease)}
.next-min:hover svg{transform:translateX(8px)}
.contact.calm{padding-top:120px}

/* small helpers */
.section.follow{padding-top:24px}
@media (min-width:900px){.section.follow{padding-top:40px}}
.spec-foot{margin-top:22px;font-size:.88rem;color:var(--night-soft);max-width:40em}
.calm .band{margin-top:64px}

/* the Contact page: a shorter opening above the home's own contact part */
.contact-hero{min-height:64vh;min-height:64svh}
.contact-hero + .contact{padding-top:110px}

/* "From mine to ship": four illustrative photographs with their captions (his word, 20 Oct: photos "from the other sources") */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;margin-top:48px}
@media (min-width:1000px){.shots{grid-template-columns:repeat(4,1fr)}}
.shot figcaption{margin-top:14px}
.shot figcaption b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:400;line-height:1.2;color:var(--page-ink)}
.shot figcaption span{display:block;margin-top:4px;font:500 10px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--page-soft)}
:lang(zh) .shot figcaption span{letter-spacing:.1em}