/* Coast Origin — site styles (his picks, 19 Oct 2026: DESIGN_DECISIONS.md).
   Colours: obsidian · charcoal · ivory · sand · bronze · graphite. Fonts: Cormorant Garamond + Jost.
   Black first (his word, 20 Oct ~00:3x: "The white background doesn't look good. Change it completely to black"): every
   section black, with golden dust drifting and gentle motion. The switch still offers the white look. Gentle motion only (reveals, drift, golden dust, a wave that draws with the
   scroll), all off for reduced-motion visitors. Widely supported CSS (no color-mix, :has, nesting), so it
   renders the same in WeChat's in-app browser. Nothing loads from outside the site. */

@font-face{font-family:"Cormorant Garamond";src:url(../fonts/CormorantGaramond-300-600.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/CormorantGaramond-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/Jost-300-600.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* his six colours */
  --obsidian:#151412; --charcoal:#201D19; --ivory:#F3EFE7; --sand:#D3C0A3; --bronze:#9A754D; --graphite:#45433F;
  /* helpers made from them */
  --bronze-deep:#7A5C3A; --bronze-light:#C9A97C;

  /* "page" = the ivory sections (charcoal in the dark theme) */
  --page:#F3EFE7; --page-ink:#201D19; --page-text:#45433F; --page-soft:#6A645B; --page-label:#7A5C3A;
  --page-line:#D6CAB5; --card:#EAE3D6;
  /* "night" = the dark sections (the same in both themes) */
  --night:#0A0A09; --night-2:#141311; --night-ink:#F3EFE7; --night-text:rgba(243,239,231,.76);
  --night-soft:rgba(243,239,231,.56); --night-label:#D3C0A3; --night-line:rgba(211,192,163,.22);

  --header-solid:rgba(243,239,231,.94); --header-ink:#201D19; --header-line:rgba(32,29,25,.1);
  --logo-word-solid:#4A4038;
  --focus:#C9A97C;
  --serif:"Cormorant Garamond",Georgia,"Songti SC","STSong","SimSun",serif;
  --sans:"Jost",-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --wrap:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#0A0A09; --page-ink:#F3EFE7; --page-text:rgba(243,239,231,.78); --page-soft:rgba(243,239,231,.58);
    --page-label:#D3C0A3; --page-line:rgba(211,192,163,.2); --card:#141311;
    --header-solid:rgba(10,10,9,.9); --header-ink:#F3EFE7; --header-line:rgba(211,192,163,.16);
    --logo-word-solid:#F3EFE7;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0A0A09; --page-ink:#F3EFE7; --page-text:rgba(243,239,231,.78); --page-soft:rgba(243,239,231,.58);
  --page-label:#D3C0A3; --page-line:rgba(211,192,163,.2); --card:#141311;
  --header-solid:rgba(10,10,9,.9); --header-ink:#F3EFE7; --header-line:rgba(211,192,163,.16);
  --logo-word-solid:#F3EFE7;
}

/* ── base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.lenis{scroll-behavior:auto}          /* the smooth scrolling does it; the browser's own smoothing would fight it */
body{margin:0;background:var(--page);color:var(--page-text);font:400 17px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
p,ul,ol,figure{margin:0}
h1,h2,h3{margin:0;font-weight:400}
.wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
@media (min-width:900px){.wrap{padding-left:40px;padding-right:40px}}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:var(--ivory);color:var(--charcoal);padding:10px 14px}
.skip:focus{left:10px}

/* type */
.label{display:block;font:500 12px/1.5 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--page-label)}
.night .label{color:var(--night-label)}
.h1{font-family:var(--serif);font-weight:300;text-transform:uppercase;letter-spacing:.1em;line-height:1.14;
  font-size:clamp(1.85rem,0.9rem + 3vw,3.5rem);color:var(--night-ink)}            /* sleek, so the picture shows (his note, 20 Oct) */
.h2{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.003em;
  font-size:clamp(2.15rem,1.35rem + 2.7vw,3.7rem);color:var(--page-ink)}
.night .h2{color:var(--night-ink)}
.lead{font-size:1.06rem;max-width:34em}
.rule{width:64px;height:1px;background:var(--bronze);border:0;margin:26px 0}
.night .rule{background:var(--bronze-light)}
.more{display:inline-flex;align-items:center;gap:14px;margin-top:30px;text-decoration:none;font:500 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--page-ink);padding-bottom:8px;border-bottom:1px solid var(--page-line)}
.more svg{width:22px;height:10px;transition:transform .3s var(--ease)}
.more:hover svg{transform:translateX(5px)}
.night .more{color:var(--night-ink);border-bottom-color:var(--night-line)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 26px;border:1px solid currentColor;background:transparent;color:inherit;
  font:500 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s;white-space:nowrap}
.btn svg{width:20px;height:10px}
.btn-solid{background:var(--bronze-deep);border-color:var(--bronze-deep);color:var(--ivory)}
.btn-solid:hover{background:var(--bronze);border-color:var(--bronze)}
.btn-ghost:hover{background:rgba(243,239,231,.08)}
.page .btn-ghost:hover{background:rgba(122,92,58,.08)}

/* ── header ───────────────────────────────────────────────────────── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--night-ink);transition:background-color .35s,color .35s,box-shadow .35s}
.site-header .bar{display:flex;align-items:center;gap:18px;height:84px}
.site-header.is-solid{background:var(--header-solid);color:var(--header-ink);box-shadow:0 1px 0 var(--header-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand .logo{height:46px;width:auto}
.logo .word{fill:var(--night-ink);transition:fill .35s}
.is-solid .logo .word{fill:var(--logo-word-solid)}
.nav{display:none;margin-left:auto;gap:30px}
.nav a{text-decoration:none;font:500 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.86}
.nav a:hover{opacity:1}
.head-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
@media (min-width:1080px){.nav{display:flex}.head-actions{margin-left:28px}}
.head-actions .btn{display:none;min-height:42px;padding:0 20px}
@media (min-width:700px){.head-actions .btn{display:inline-flex}}
.icon-btn{width:42px;height:42px;display:inline-grid;place-items:center;background:transparent;border:1px solid rgba(243,239,231,.3);color:inherit;cursor:pointer;padding:0;border-radius:50%}
.is-solid .icon-btn{border-color:var(--header-line)}
.icon-btn svg{width:18px;height:18px}
.menu-btn{display:inline-grid}
@media (min-width:1080px){.menu-btn{display:none}}
.theme-btn .moon{display:block}.theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:none}[data-theme="dark"] .theme-btn .sun{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .moon{display:none}:root:not([data-theme="light"]) .theme-btn .sun{display:block}}

/* phone menu */
.menu{position:fixed;inset:0;z-index:70;background:var(--obsidian);color:var(--night-ink);display:none;flex-direction:column;justify-content:center;padding:96px 28px 40px}
.menu.open{display:flex}
.menu a{font-family:var(--serif);font-size:2.1rem;line-height:1.5;text-decoration:none}
.menu .label{margin-top:34px;color:var(--night-label)}
.menu-close{position:absolute;top:21px;right:20px}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--night);color:var(--night-ink);overflow:hidden;display:flex;align-items:center}
.hero-media{position:absolute;inset:-6% 0 -6% 0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
@media (max-aspect-ratio:9/10){.hero-media img{object-position:95% 50%}}   /* a tall screen starts on the lit mine (the glide: liquid.js) */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(21,20,18,.82) 0%,rgba(21,20,18,.5) 40%,rgba(21,20,18,.08) 75%),
  linear-gradient(0deg,rgba(21,20,18,.85) 0%,rgba(21,20,18,0) 32%)}
.dust{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}
.hero .wrap{position:relative;z-index:3;width:100%;padding-top:120px;padding-bottom:140px}
.hero-sub{font:500 12px/1.9 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--sand);max-width:30em}
.hero .rule{background:var(--bronze-light);margin:30px 0 24px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:40px}
.hero-ctas .more{margin-top:0}
.scroll-cue{position:absolute;z-index:3;left:max(20px,calc((100vw - var(--wrap)) / 2 + 40px));bottom:36px;display:flex;align-items:center;gap:16px;
  font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--night-soft);text-decoration:none}
.scroll-cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--sand),transparent);transform-origin:top;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero-side{display:none;position:absolute;z-index:3;right:max(20px,calc((100vw - var(--wrap)) / 2 + 40px));bottom:40px;text-align:left}
@media (min-width:900px){.hero-side{display:block}}
.hero-side .words{font-family:var(--serif);font-size:1.35rem;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--night-ink)}
.hero-side .rule{width:46px;margin:18px 0 14px}
.hero-side .count{font:500 11px/1 var(--sans);letter-spacing:.3em;color:var(--night-soft)}

/* ── sections ─────────────────────────────────────────────────────── */
.section{position:relative;padding-top:96px;padding-bottom:96px}
@media (min-width:900px){.section{padding-top:140px;padding-bottom:140px}}
.page{background:var(--page);color:var(--page-text)}
.night{background:var(--night);color:var(--night-text)}
.split{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:5fr 7fr;gap:72px}.split.flip{grid-template-columns:7fr 5fr}}

/* photo slots: a styled stand-in until his ChatGPT photo lands (assets/img/photos/) */
.photo{position:relative;overflow:hidden;background:var(--charcoal)}
.photo .ph{position:absolute;inset:-8% 0;background:
  radial-gradient(120% 90% at 78% 22%,rgba(201,169,124,.55),rgba(154,117,77,.18) 38%,rgba(21,20,18,0) 70%),
  linear-gradient(160deg,#3A2F24 0%,#201D19 55%,#151412 100%)}
.photo .ph::after{content:"";position:absolute;inset:0;background:url(../img/strata-sand.svg) center/100% 38% repeat-y;opacity:.18}
.photo img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.photo figcaption{position:absolute;left:16px;bottom:14px;z-index:2;font:500 10.5px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(243,239,231,.62)}
.ratio-43{aspect-ratio:4/3}.ratio-45{aspect-ratio:4/5}.ratio-wide{aspect-ratio:21/9}
@supports not (aspect-ratio:1){.ratio-43{height:0;padding-bottom:75%}.ratio-45{height:0;padding-bottom:125%}.ratio-wide{height:0;padding-bottom:42.85%}}

/* our story */
.story .side-words{display:none}
@media (min-width:1180px){.story .media-col{position:relative;padding-right:120px}
  .story .side-words{display:block;position:absolute;right:0;top:50%;transform:translateY(-50%);width:96px;font:500 11px/2.1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--page-label)}
  .story .side-words .rule{width:40px;margin:0 0 18px}}

/* headings rise line by line, as if out of a slit */
.h2 .ln{display:block;overflow:hidden;padding:.06em 0 .16em;margin:-.06em 0 -.16em}
.h2 .ln > span{display:inline-block}

/* the logo's wave: a thread that draws itself as you scroll */
.wave-divider{display:block;width:100%;height:70px;color:var(--bronze)}
.night .wave-divider{color:var(--bronze-light)}
.wave-divider path{fill:none;stroke:currentColor;stroke-width:1.2}

/* operations (dark band) */
.ops{overflow:hidden}
.ops .bg{position:absolute;inset:0;opacity:.5}
.ops .bg .photo{position:absolute;inset:0}
.ops::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(21,20,18,.94) 0%,rgba(21,20,18,.78) 48%,rgba(21,20,18,.55) 100%)}
.ops .wrap{position:relative;z-index:2}
.ops .strata{position:absolute;left:0;right:0;bottom:0;height:180px;background:url(../img/strata-sand.svg) center/100% 100% no-repeat;opacity:.16;z-index:1}
.steps-list{list-style:none;padding:0;display:grid;gap:0;border-left:1px solid var(--night-line)}
.steps-list li{display:grid;grid-template-columns:52px 1fr;gap:6px;padding:20px 0 20px 26px}
.steps-list .n{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--sand)}
.steps-list .t{font:500 12.5px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--night-ink)}
.steps-list p{grid-column:2;font-size:.98rem;color:var(--night-text)}

/* minerals */
.minerals .tiles{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (min-width:1080px){.minerals .grid{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}.minerals .tiles{grid-template-columns:repeat(4,1fr)}}
/* phones: the minerals as cards you swipe sideways, each snapping into place, the next one peeking in (his mobile round, 20 Oct) */
@media (max-width:700px){.minerals .tiles{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.minerals .tiles::-webkit-scrollbar{display:none}
  .minerals .tiles .tile{flex:0 0 74%;scroll-snap-align:center}}
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tile .name{margin-top:18px;font:500 12px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--page-ink)}
.tile .uses{margin-top:6px;font-size:.92rem;line-height:1.55;color:var(--page-soft)}
.tile .go{margin-top:12px;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--page-label)}
.tile .photo{transition:transform .6s var(--ease)}
.tile:hover .photo{transform:translateY(-4px)}
.minerals .top-strata{position:absolute;left:0;right:0;top:0;height:64px;background:url(../img/strata-bronze.svg) center/100% 100% no-repeat;opacity:.35}

/* export journey (dark, map contour lines) */
.export{overflow:hidden}
.export .contours{position:absolute;inset:0;background:url(../img/contours.svg) center/cover no-repeat;opacity:.17}
.export .wrap{position:relative}
.journey{position:relative;margin-top:56px}
.journey ol{list-style:none;padding:0;display:grid;gap:30px;position:relative;z-index:1}
@media (min-width:980px){.journey ol{grid-template-columns:repeat(5,1fr);gap:28px}}
.journey li .dot{display:block;width:13px;height:13px;border-radius:50%;background:var(--night);border:1px solid var(--sand);margin-bottom:22px;transition:background-color .4s}
.journey li.is-on .dot{background:var(--sand)}
.journey .n{font-family:var(--serif);font-style:italic;color:var(--sand);font-size:1.1rem}
.journey h3{font-family:var(--serif);font-size:1.55rem;line-height:1.15;color:var(--night-ink);margin-top:4px}
.journey p{margin-top:10px;font-size:.96rem;color:var(--night-text)}
.journey .thread{display:none}
@media (min-width:980px){.journey .thread{display:block;position:absolute;left:0;right:0;top:-14px;height:44px;z-index:0;color:var(--bronze-light)}
  .journey .thread path{fill:none;stroke:currentColor;stroke-width:1.2}}
.papers{margin-top:64px;padding-top:28px;border-top:1px solid var(--night-line);display:grid;gap:16px 40px;font-size:.95rem}
@media (min-width:900px){.papers{grid-template-columns:repeat(3,1fr)}}
.papers b{display:block;font:500 11.5px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--night-ink);margin-bottom:4px}
.export .band{margin-top:80px}

/* responsibility */
.resp .items{list-style:none;padding:0;display:grid;gap:0;border-top:1px solid var(--page-line)}
.resp .items li{display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start;padding:22px 0;border-bottom:1px solid var(--page-line)}
.resp .items svg{width:30px;height:30px;color:var(--bronze)}
.resp .items b{display:block;font:500 12px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--page-ink)}
.resp .items span{display:block;font-size:.96rem;color:var(--page-soft);margin-top:2px}
.draft-note{display:inline-block;margin-bottom:22px;padding:6px 12px;border:1px dashed var(--bronze);color:var(--page-label);font:500 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* contact */
.contact .grid{display:grid;gap:56px}
@media (min-width:1000px){.contact .grid{grid-template-columns:5fr 7fr;gap:80px}}
.ways{list-style:none;padding:0;margin-top:38px;display:grid;gap:18px}
.ways li{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--page-line)}
.ways .k{font:500 11px/1.6 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--page-label)}
.ways .v{color:var(--page-ink);word-break:break-word}
.ways .v a{text-decoration:none;border-bottom:1px solid var(--page-line)}
.qr{margin-top:12px;width:132px;height:132px;border:1px dashed var(--bronze);display:grid;place-items:center;text-align:center;font:500 10px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--page-label);padding:10px}
.contact .logo-block{margin-top:44px;max-width:260px}
.contact .logo-block .word{fill:var(--page-ink)}
.contact .logo-block .tag{fill:var(--page-label)}
.form{display:grid;gap:30px 30px;grid-template-columns:1fr}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field{position:relative}
.field label{display:block;font:500 11px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--page-label)}
.field label .opt{letter-spacing:.08em;text-transform:none;color:var(--page-soft)}
.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid var(--page-line);background:transparent;color:var(--page-ink);
  font:400 17px/1.5 var(--sans);padding:10px 0 12px;border-radius:0;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--page-label) 50%),linear-gradient(135deg,var(--page-label) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.field select option{color:#201D19}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--bronze)}
.send-row{display:flex;flex-wrap:wrap;gap:12px}
.send-row .btn{color:var(--page-ink);padding:0 18px;letter-spacing:.2em}
.send-row .btn-solid{color:var(--ivory)}
.form-note{font-size:.88rem;color:var(--page-soft)}
.composed[hidden]{display:none}
.composed textarea{min-height:150px;border:1px solid var(--page-line);padding:12px;margin-top:8px;font-size:15px}

/* blanks still to come from the client (draft only, none may remain at go-live) */
.todo{display:inline-block;border:1px dashed var(--bronze);color:var(--page-label);padding:0 8px;font:italic 400 1em/1.6 var(--serif);letter-spacing:0;text-transform:none}
.night .todo{border-color:var(--sand);color:var(--sand)}

/* footer */
.site-footer{background:var(--obsidian);color:var(--night-soft);padding-top:72px;padding-bottom:36px;font-size:.92rem}
.site-footer .top{display:grid;gap:36px}
@media (min-width:900px){.site-footer .top{grid-template-columns:6fr 3fr 3fr}}
.site-footer .logo{height:52px;width:auto}
.site-footer .logo .word{fill:var(--night-ink)}
.site-footer h3{font:500 11px/1.6 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--night-ink);margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;display:grid;gap:8px}
.site-footer a{text-decoration:none;color:var(--night-text)}
.site-footer a:hover{color:var(--night-ink)}
.fine{margin-top:56px;padding-top:22px;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font:500 10.5px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase}

/* section counter (desktop): which of the 7 parts you are in */
.counter{display:none}
@media (min-width:1180px){.counter{display:block;position:fixed;z-index:50;right:26px;top:50%;transform:translateY(-50%);font:500 10.5px/1 var(--sans);letter-spacing:.3em;color:var(--bronze);
  writing-mode:vertical-rl;opacity:0;transition:opacity .4s}
  .counter.show{opacity:.9}}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);background:var(--obsidian);color:var(--ivory);border:1px solid var(--night-line);padding:13px 20px;font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:calc(100% - 32px);text-align:center;z-index:300}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── gentle motion ────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .scroll-cue i{animation:none}
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}
}

/* the header logo: champagne over the dark opening, deeper bronze once the header turns ivory */
:root{--logo-s1:#E6D3B3;--logo-s2:#B8946A;--logo-s3:#86643F}
:root[data-theme="dark"]{--logo-s1:#F3E3C6;--logo-s2:#CFAE82;--logo-s3:#A07B52}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--logo-s1:#F3E3C6;--logo-s2:#CFAE82;--logo-s3:#A07B52}}
.logo .s1{stop-color:#F3E3C6}.logo .s2{stop-color:#CFAE82}.logo .s3{stop-color:#A07B52}
.is-solid .logo .s1{stop-color:var(--logo-s1)}.is-solid .logo .s2{stop-color:var(--logo-s2)}.is-solid .logo .s3{stop-color:var(--logo-s3)}
/* show the logo version that suits the theme */
.only-dark{display:none}
:root[data-theme="dark"] .only-light{display:none}:root[data-theme="dark"] .only-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .only-light{display:none}:root:not([data-theme="light"]) .only-dark{display:block}}

/* the logo in the phone menu (the swoosh-C only: his word, 20 Oct ~12:5x "The C logo with the wave symbol is the only one we will keep") */
.menu-logo{position:absolute;top:24px;left:28px;height:40px;width:auto}
/* the credit: very small and quiet, at the very end (his ask) */
.fine .credit{font-size:8.5px;letter-spacing:.32em;opacity:.34}
.fine .credit:hover{opacity:.7}

/* ── the 3D opening (scene.js): shown only when 3D runs; the static opening stays otherwise ── */
.scene3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:0;transition:opacity 1.4s var(--ease)}
.is-live > .scene3d{opacity:1}
.hero.is-live .scene3d{transition:none}          /* the opening's canvas fades with the dive, set frame by frame */
.hero-media{transform-origin:62% 55%;will-change:transform,opacity}
.hero.is-live .dust{display:none}
.scene-line{position:absolute;z-index:3;left:max(20px,calc((100vw - var(--wrap)) / 2 + 40px));top:50%;margin-top:-90px;opacity:0;pointer-events:none;max-width:560px;color:var(--night-ink)}
.scene-line .label{color:var(--sand)}
.scene-big{margin-top:16px;font-family:var(--serif);font-weight:300;font-size:clamp(2.3rem,1.2rem + 4vw,4.6rem);line-height:1.04;letter-spacing:.01em}
.scene-small{margin-top:18px;font-size:1.02rem;color:var(--night-text);max-width:28em}
/* after the opening, "Our story" slides up over the scene (his ask 19 Oct: no white gap) */
.is-3d .hero{z-index:1}
.is-3d .hero .scene3d{will-change:transform,opacity}
.is-3d .story{z-index:2;box-shadow:0 -30px 70px rgba(0,0,0,.45)}
@media (min-width:900px){.is-3d .story{padding-top:112px}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
/* phones: the scene's words sit low, so the crystal stays visible above them */
@media (max-width:700px){.scene-line{top:auto;bottom:13%;margin-top:0;right:20px}.scene-big{font-size:2.3rem}}

/* ── the minerals gallery: a held 3D scene when it runs, a plain readable list when it doesn't ── */
.gallery{position:relative;background:var(--night);color:var(--night-ink);overflow:hidden}
.gallery-copy{position:relative;z-index:3;padding-top:110px;padding-bottom:110px}
.g-items{display:grid;gap:44px;margin-top:34px}
@media (min-width:900px){.g-items{grid-template-columns:1fr 1fr}}
.g-count{display:block;font:500 11px/1 var(--sans);letter-spacing:.3em;color:var(--sand)}
.g-name{margin-top:14px;font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,1.3rem + 4.2vw,5.2rem);line-height:1;letter-spacing:.01em;color:var(--night-ink)}
.g-uses{margin-top:14px;color:var(--night-text);max-width:26em}
.g-item .more{margin-top:22px}
.gallery-shade{display:none}
.gallery.is-live{height:100vh;height:100svh}
.gallery.is-live .gallery-copy{position:absolute;inset:0;padding:0;max-width:none}
.gallery.is-live .gallery-copy > .label{position:absolute;top:118px;left:max(20px,calc((100vw - var(--wrap)) / 2 + 40px))}
.gallery.is-live .g-items{position:absolute;margin:0;left:max(20px,calc((100vw - var(--wrap)) / 2 + 40px));top:50%;width:min(440px,78vw);height:0;display:block}
.gallery.is-live .g-item{position:absolute;left:0;top:-120px;opacity:0;will-change:opacity,transform}
.gallery.is-live .gallery-shade{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,13,11,.86) 0%,rgba(15,13,11,.45) 38%,rgba(15,13,11,0) 62%)}
@media (max-width:800px){
  .gallery.is-live .g-items{top:auto;bottom:9%}
  .gallery.is-live .g-item{top:-210px}
  .gallery.is-live .gallery-shade{background:linear-gradient(0deg,rgba(15,13,11,.9) 0%,rgba(15,13,11,.5) 38%,rgba(15,13,11,0) 60%)}
}

/* ── the export voyage: a held 3D map when it runs; the plain steps when it doesn't ── */
.export-more{padding-top:0}
.export.is-live{height:100vh;height:100svh;padding:0}
.export.is-live .contours{display:none}
.export.is-live > .wrap{position:absolute;inset:0;z-index:3;pointer-events:none;max-width:none}
.export.is-live .export-head{position:absolute;top:104px;left:max(20px,calc((100vw - var(--wrap)) / 2 + 40px));max-width:420px}
.export.is-live .export-head .h2{font-size:clamp(1.9rem,1.2rem + 2vw,2.9rem)}
.export.is-live .export-head .lead{font-size:.98rem}
.export.is-live .journey{position:absolute;left:max(20px,calc((100vw - var(--wrap)) / 2 + 40px));bottom:7%;margin:0;width:min(340px,82vw)}
.export.is-live .journey .thread{display:none}
.export.is-live .journey ol{grid-template-columns:1fr;gap:10px}
.export.is-live .journey li{display:grid;grid-template-columns:20px 34px 1fr;align-items:center;gap:6px;opacity:.38;transition:opacity .45s var(--ease)}
.export.is-live .journey li.is-on{opacity:1}
.export.is-live .journey li .dot{margin:0}
.export.is-live .journey h3{font-size:1.15rem;margin:0}
.export.is-live .journey li p{display:none}
.export.is-live::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(13,12,11,.82) 0%,rgba(13,12,11,.35) 34%,rgba(13,12,11,0) 55%)}
.map-label{position:absolute;left:0;top:0;z-index:2;pointer-events:none;white-space:nowrap;font:500 11px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--sand)}
.map-label.sea{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:.06em;text-transform:none;color:rgba(211,192,163,.7)}
@media (max-width:800px){.export.is-live .export-head{top:92px;right:20px}.export.is-live .export-head .lead{display:none}
  .export.is-live::after{background:linear-gradient(0deg,rgba(13,12,11,.88) 0%,rgba(13,12,11,.3) 40%,rgba(13,12,11,0) 60%)}}
.map-label{transition:opacity .3s var(--ease)}

/* ── the mine: a held 3D descent into the pit when it runs; the plain section when it doesn't ── */
.ops.is-live{height:100vh;height:100svh;padding:0}
.ops.is-live .bg,.ops.is-live .strata{display:none}
.ops.is-live::before{background:linear-gradient(90deg,rgba(21,20,18,.8) 0%,rgba(21,20,18,.32) 36%,rgba(21,20,18,0) 58%)}
.ops.is-live > .wrap{position:absolute;inset:0;z-index:3;pointer-events:none;max-width:none}
.ops.is-live .split{display:block}
.ops.is-live .split > div:first-child{position:absolute;top:104px;left:max(20px,calc((100vw - var(--wrap)) / 2 + 40px));max-width:440px;pointer-events:auto}
.ops.is-live .split > div:first-child .h2{font-size:clamp(1.9rem,1.2rem + 2vw,3rem)}
.ops.is-live .steps-list{position:absolute;left:max(20px,calc((100vw - var(--wrap)) / 2 + 40px));bottom:7%;width:min(430px,84vw)}
.ops.is-live .steps-list li{opacity:.38;transition:opacity .45s var(--ease);padding-top:12px;padding-bottom:12px}
.ops.is-live .steps-list li.is-on{opacity:1}
@media (max-width:800px){.ops.is-live .steps-list li p{display:none}.ops.is-live .split > div:first-child{top:92px;right:20px}.ops.is-live .split > div:first-child .lead{display:none}
  .ops.is-live::before{background:linear-gradient(0deg,rgba(21,20,18,.88) 0%,rgba(21,20,18,.3) 42%,rgba(21,20,18,0) 62%)}}

/* the mine's steps: a compact list of titles while the scene runs */
.ops.is-live .steps-list li{grid-template-columns:44px 1fr;padding-top:9px;padding-bottom:9px}
.ops.is-live .steps-list li p{display:none}

/* ── the golden air on the calm pages (air.js, his ask 20 Oct: "golden dots in this white background") ── */
.air{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.has-air .story > .wrap,.has-air .minerals > .wrap,.has-air .export-more > .wrap,.has-air .resp > .wrap,.has-air .contact > .wrap{position:relative;z-index:1}
/* the mineral tiles: they lean toward the pointer (air.js) and a sweep of light crosses each photo now and then */
.minerals .tile .photo{transition:transform .5s var(--ease);transform-style:preserve-3d}
.minerals .tile .photo::after{content:"";position:absolute;inset:-10% -60%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,240,215,0) 38%,rgba(255,240,215,.22) 50%,rgba(255,240,215,0) 62%);
  transform:translateX(-70%);animation:co-sheen 7.5s var(--ease) infinite}
.minerals .tile:nth-child(2) .photo::after{animation-delay:.9s}.minerals .tile:nth-child(3) .photo::after{animation-delay:1.8s}
.minerals .tile:nth-child(4) .photo::after{animation-delay:2.7s}.minerals .tile:nth-child(5) .photo::after{animation-delay:3.6s}
.minerals .tile:nth-child(6) .photo::after{animation-delay:4.5s}.minerals .tile:nth-child(7) .photo::after{animation-delay:5.4s}
.minerals .tile:nth-child(8) .photo::after{animation-delay:6.3s}
@keyframes co-sheen{0%{transform:translateX(-70%)}35%,100%{transform:translateX(70%)}}
@media (prefers-reduced-motion:reduce){.minerals .tile .photo::after{animation:none;display:none}}

/* the golden road of dots from the departing ship down to the ship on the shipping map (ground.js) */
.sea-road{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;opacity:0;transition:opacity .35s var(--ease)}
/* the port → warehouse road over the price-terms photo (air.js) */
.band-route{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

/* our story, made alive (story.js): the liquid photo, and a slow golden shimmer through the heading */
.photo .liquid{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.photo.is-liquid{background:transparent;transition:transform .6s var(--ease);will-change:transform}
.photo.is-liquid img{visibility:hidden}
.story.is-alive .h2 .ln > span{background:linear-gradient(100deg,var(--page-ink) 0%,var(--page-ink) 42%,#E8C590 50%,var(--page-ink) 58%,var(--page-ink) 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:co-shimmer 7s var(--ease) infinite}
.story.is-alive .h2 .ln:nth-child(2) > span{animation-delay:.35s}
@keyframes co-shimmer{0%{background-position:100% 0}45%,100%{background-position:0% 0}}
/* gold light on the headings (his pick, 20 Oct: "Gold light on headings"): as each big heading arrives, one band of gold light
   passes through its letters, once (site.js adds .gold-light; a heading in lines takes it line by line). The letters keep
   their own colour before and after (currentColor); the padding lets the light reach the letters' tails */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gold-light{--gl-a:#E2B66E;--gl-b:#FFF0CF;
    background-image:linear-gradient(100deg,currentColor 0%,currentColor 41%,var(--gl-a) 46.5%,var(--gl-b) 50%,var(--gl-a) 53.5%,currentColor 59%,currentColor 100%);
    background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    padding-bottom:.16em;margin-bottom:-.16em;animation:co-gold-light 1.9s var(--gl-d,.35s) cubic-bezier(.5,0,.3,1) both;
    width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}   /* (the light spans the words, not the whole column) */
  .page-title.gold-light{padding-bottom:.26em;margin-bottom:-.26em}
  :root[data-theme="light"] .page .gold-light{--gl-a:#B8925F;--gl-b:#7A5C3A}     /* (on the ivory parts, a deeper gold) */
}
@keyframes co-gold-light{from{background-position:100% 0}to{background-position:0 0}}
/* the minerals list: the others dim while one is looked at */
.has-air .minerals .tiles:hover .tile:not(:hover) .photo{opacity:.42}
.has-air .minerals .tiles:hover .tile:not(:hover) .name,.has-air .minerals .tiles:hover .tile:not(:hover) .uses{opacity:.55}
.minerals .tile .photo,.minerals .tile .name,.minerals .tile .uses{transition:opacity .45s var(--ease),transform .5s var(--ease)}
.has-air .minerals .tile:hover .photo{box-shadow:0 26px 50px rgba(0,0,0,.45)}

/* our story: the road from the rock face to the ship, six steps (his ask, 20 Oct); the gold line and the steps light up
   as you scroll (flow.js) */
.roadmap{list-style:none;padding:0;margin:110px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:26px;position:relative}
.roadmap::before{content:"";position:absolute;left:18px;right:0;top:18px;height:1px;background:var(--page-line)}
.roadmap .bar{position:absolute;left:18px;right:0;top:18px;height:1px;background:linear-gradient(90deg,#9A754D,#E8C590);transform-origin:0 50%;transform:scaleX(0)}
.roadmap li{position:relative;padding-top:58px}
.roadmap .n{position:absolute;z-index:1;top:0;left:0;width:37px;height:37px;border-radius:50%;border:1px solid var(--page-line);background:var(--page);display:grid;place-items:center;
  font:500 11px/1 var(--sans);letter-spacing:.12em;color:var(--page-soft);transition:border-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.roadmap li.is-on .n{border-color:#C9A97C;color:#E8C590;box-shadow:0 0 0 6px rgba(201,169,124,.08),0 0 26px rgba(232,197,144,.35)}
.roadmap b{display:block;font:500 12px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--page-ink)}
.roadmap li > span:last-child{display:block;margin-top:8px;font-size:.9rem;line-height:1.55;color:var(--page-soft);max-width:15em}
/* phones and tablets: the same one line from 01 to 06 with the gold bar drawing across (his phone note, 20 Oct: "the line
   123456 ... altered to only the numbers 1234"), smaller */
@media (max-width:900px){.roadmap{gap:6px;margin-top:72px}
  .roadmap::before,.roadmap .bar{left:15px;right:calc((100% - 30px) / 6 - 15px);top:15px}
  .roadmap li{padding-top:44px}.roadmap .n{width:31px;height:31px;font-size:11px}
  .roadmap b{font-size:10px;letter-spacing:.12em;line-height:1.35}.roadmap li > span:last-child{display:none}}
@media (max-width:360px){.roadmap b{font-size:9px;letter-spacing:.05em}}

/* the header reads on any picture: a black backing that fades down (his note, 20 Oct: "The header should be black") */
.site-header:not(.is-solid){background:linear-gradient(to bottom,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 60%,rgba(0,0,0,0) 100%)}
/* a warm gold-brown tone in the background that follows the pointer (his ask, 20 Oct; air.js) */
.cursor-glow{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;overflow:hidden;mix-blend-mode:screen}
.cursor-glow > i{position:absolute;left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;will-change:transform;
  background:radial-gradient(closest-side,rgba(176,122,62,.32) 0%,rgba(120,80,40,.15) 44%,rgba(0,0,0,0) 100%)}
.story .cursor-glow,.minerals .cursor-glow{z-index:0}
:root:not([data-theme="light"]) .story .cursor-glow,:root:not([data-theme="light"]) .minerals .cursor-glow{mix-blend-mode:normal}   /* (on black, behind the words: plain looks the same, and costs less) */
/* from the black minerals list into the mine: the mine starts in black and warms into view as you scroll (ground.js) */
.ops-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:#0A0A09}
/* above Contact: the life of the material in four dots, a gold line through them and a spark of light running along it
   (his ask, 20 Oct: "That line should tell a story again … 3, 4 dots") */
.lifeline{list-style:none;padding:0;margin:-40px 0 110px;display:grid;grid-template-columns:repeat(4,1fr);position:relative;text-align:center}
.lifeline::before{content:"";position:absolute;left:12.5%;right:12.5%;top:7px;height:1px;background:var(--page-line)}
.lifeline .bar{position:absolute;left:12.5%;right:12.5%;top:7px;height:1px;background:linear-gradient(90deg,#9A754D,#E8C590);transform-origin:0 50%;transform:scaleX(0)}
.lifeline .track{position:absolute;left:12.5%;right:12.5%;top:3px;height:9px;pointer-events:none}
.lifeline .spark{position:absolute;top:0;left:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#FFE2AA;box-shadow:0 0 14px 4px rgba(232,197,144,.55);animation:co-spark 6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes co-spark{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.lifeline .dot{display:block;width:15px;height:15px;margin:0 auto;border-radius:50%;border:1px solid var(--page-line);background:var(--page);position:relative;z-index:1;
  transition:border-color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.lifeline li.is-on .dot{border-color:#C9A97C;background:#E8C590;box-shadow:0 0 0 6px rgba(201,169,124,.1),0 0 22px rgba(232,197,144,.45)}
.lifeline b{display:block;margin-top:20px;font-family:var(--serif);font-size:1.55rem;font-weight:400;line-height:1.2;color:var(--page-ink)}
.lifeline li > span:last-child{display:block;margin-top:6px;font:500 11px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--page-label)}
/* phones: the same one line of four with the gold line and its spark (like the road above; his phone round, 20 Oct), smaller */
@media (max-width:700px){.lifeline{margin-top:-20px}.lifeline b{margin-top:16px;font-size:1.12rem}
  .lifeline li > span:last-child{font-size:8.5px;letter-spacing:.1em;line-height:1.5;padding:0 3px}}
@media (prefers-reduced-motion:reduce){.lifeline .spark{animation:none;display:none}}
/* menu jumps over long distances cut through a short fade */
.jump-fade{position:fixed;inset:0;z-index:80;background:#050505;opacity:0;pointer-events:none;transition:opacity .26s var(--ease)}
.jump-fade.on{opacity:1}
/* the opening's first picture as water (liquid.js) */
.hero-media .liquid{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-media.is-liquid img{visibility:hidden}
/* liquid gold the pointer stirs, over the whole page (fluid.js) */
.liquid-ink{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:7;display:none}
.liquid-ink.on{display:block}
/* a gold ring that trails the pointer and opens over anything you can click; buttons lean toward the pointer (air.js) */
.cursor-ring{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;pointer-events:none;z-index:75;opacity:0;transition:opacity .3s;will-change:transform}
.cursor-ring::before{content:"";position:absolute;inset:0;border:1px solid rgba(232,197,144,.75);border-radius:50%;
  transition:transform .35s var(--ease),background-color .35s,border-color .35s,border-width .35s}
.cursor-ring.on{opacity:1}
.cursor-ring.is-lens{opacity:0}   /* (over our story's photo the drop of water is the pointer) */
.cursor-ring.is-link::before{transform:scale(1.93);border-width:.55px;background-color:rgba(232,197,144,.08);border-color:rgba(232,197,144,.95)}   /* (grown by scaling: nothing re-laid out) */
.has-air .btn,.has-air .more,.has-air .site-header .nav a{transition:transform .4s var(--ease),background-color .35s,color .35s,border-color .35s,box-shadow .35s}
/* the buttons fill with liquid gold from below, its surface rolling like water, while the pointer is on them; the text
   links pour a gold line along their underline */
@media (hover:hover){
  .has-air .btn{position:relative;overflow:hidden;isolation:isolate}
  .has-air .btn::before{content:"";position:absolute;z-index:-1;left:-160%;top:115%;width:420%;aspect-ratio:1;border-radius:40% 46% 42% 48%;pointer-events:none;
    background:linear-gradient(180deg,#F2D6A6 0%,#D9B886 10%,#C9A97C 30%,#A9845A 100%);transition:top 1.05s cubic-bezier(.5,.05,.3,1);animation:co-pour 4.5s linear infinite paused}
  .has-air .btn:hover::before,.has-air .btn:focus-visible::before{top:-70%;animation-play-state:running}
  .has-air .btn:hover,.has-air .btn:focus-visible{color:#0A0A09;border-color:#E8C590;background-color:transparent}
  .has-air .more{position:relative}
  .has-air .more::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,#C9A97C,#F2D6A6 60%,#C9A97C);
    transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease);pointer-events:none}
  .has-air .more:hover::after,.has-air .more:focus-visible::after{transform:scaleX(1)}
}
@keyframes co-pour{to{transform:rotate(360deg)}}
/* the tile under the pointer ripples like water (air.js + the SVG filter in the page) */
.minerals .tile.is-liquid .photo img{filter:url(#co-liquid)}
.has-air .minerals .tile .photo{will-change:transform}   /* each photo on its own layer: the lean and the light move it without redrawing the ripple */
/* contact: a gold line draws under the field you are typing in */
.field{position:relative}
.field input,.field select,.field textarea{transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:#C9A97C;box-shadow:0 1px 0 #E8C590,0 10px 24px -14px rgba(232,197,144,.55)}
.field:focus-within label{color:#E8C590}

/* the gold intro (his pick, 20 Oct): the swoosh-C drawn and filled with liquid gold, the name appearing beneath, then the
   cover lifts away on a liquid edge with a gold rim; once a visit, ~2 s (the page's head script starts and always ends it) */
.intro{display:none}
html.intro-on .intro{display:flex;position:fixed;inset:0;z-index:120;align-items:center;justify-content:center;background:var(--page);
  animation:co-intro-out .8s 1.25s cubic-bezier(.75,0,.25,1) forwards}
html.intro-skip .intro{animation-delay:0s;animation-duration:.55s}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:24px}
.intro-mark{width:min(30vw,168px);height:auto;overflow:visible;filter:drop-shadow(0 0 18px rgba(232,197,144,.22))}
.intro-word{font:400 12px/1 var(--sans);letter-spacing:.5em;text-indent:.5em;color:var(--page-label);opacity:0;animation:co-intro-word .7s .5s var(--ease) forwards}
.ic-line{stroke-dasharray:1;stroke-dashoffset:1;animation:co-intro-line .8s .05s cubic-bezier(.6,0,.3,1) forwards}
.ic-rise{transform:translateY(96px);animation:co-intro-rise .85s .2s cubic-bezier(.45,.05,.25,1) forwards}
.ic-wave{animation:co-intro-sway 1.3s linear infinite}
.ic-swoosh{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);animation:co-intro-swoosh .65s .35s cubic-bezier(.6,0,.2,1) forwards}
.intro-edge{position:absolute;left:0;top:100%;width:200%;height:12vh;fill:var(--page);animation:co-intro-edge 2.4s linear infinite}
.intro-edge .rim{fill:none;stroke:#C9A97C;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.85}
@keyframes co-intro-out{to{transform:translateY(calc(-100% - 12vh));visibility:hidden}}
@keyframes co-intro-line{to{stroke-dashoffset:0}}
@keyframes co-intro-rise{to{transform:translateY(8px)}}
@keyframes co-intro-sway{to{transform:translateX(-60px)}}
@keyframes co-intro-swoosh{to{transform:scaleX(1)}}
@keyframes co-intro-word{from{opacity:0;letter-spacing:.9em}to{opacity:1;letter-spacing:.5em}}
@keyframes co-intro-edge{to{transform:translateX(-50%)}}

/* the liquid page change (his pick, 20 Oct: "Liquid page change"): to another of the site's pages, the page's colour rises
   over the screen on the intro's liquid edge with its gold rim, and the next page opens as it lifts away (site.js §5).
   The next page's head marks the arrival, so the cover is there from its first frame; this ends it by itself if no script runs */
.page-change{position:fixed;left:0;top:0;width:100%;height:100%;z-index:2147483000;background:var(--page);pointer-events:none}
.page-change.is-leaving{pointer-events:auto}
.pc-edge{position:absolute;left:0;width:200%;height:min(12vh,11vw);fill:var(--page);overflow:visible;animation:co-intro-edge 2.4s linear infinite}   /* (not spiky on a phone) */
.pc-edge.top{bottom:100%;margin-bottom:-1px}
.pc-edge.bottom{top:100%;margin-top:-1px}
.pc-edge .rim{fill:none;stroke:#C9A97C;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.9}
.pc-edge .glow{fill:none;stroke:#E8C590;stroke-width:9;vector-effect:non-scaling-stroke;opacity:.13}
html.co-arrive::before{content:"";position:fixed;left:0;top:0;width:100%;height:100%;z-index:2147483000;background:var(--page);
  animation:co-pc-safe .45s 2.6s forwards}
@keyframes co-pc-safe{to{opacity:0;visibility:hidden}}

/* the parts meet on liquid edges (melt.js, his pick, 20 Oct: "Pages melt into each other"): a slow wave with a fine gold rim */
.has-melt{position:relative;z-index:3}
.melt{position:absolute;left:0;width:100%;height:64px;pointer-events:none;overflow:visible;z-index:4}
.melt-top{bottom:100%;margin-bottom:-1px}
.melt-bottom{top:100%;margin-top:-1px}
.melt .rim{fill:none;stroke:#C9A97C;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.5}
@supports (overflow-x:clip){.export.has-melt{overflow:visible;overflow-x:clip}}   /* (the map's part clips its sides only, so its liquid edge can rise above it) */

/* the language switch, EN | 中文 (his pick, 20 Oct): phones show only the other language */
.lang-switch{display:flex;align-items:center;gap:8px;font:500 11.5px/1 var(--sans);letter-spacing:.2em}
.lang-switch a{text-decoration:none;opacity:.62;padding:8px 2px;transition:opacity .3s}
.lang-switch a:hover,.lang-switch a[aria-current]{opacity:1}
.lang-switch a[aria-current]{border-bottom:1px solid currentColor}
.lang-switch span{opacity:.35}
@media (max-width:699px){.lang-switch a[aria-current],.lang-switch span{display:none}.lang-switch{margin-right:2px}}

/* Chinese pages: the Latin letter-spacing is too wide for Chinese characters; headings fall back to Songti (serif),
   text to PingFang / Microsoft YaHei (sans), both from the visitor's own device (nothing loaded from outside) */
:lang(zh) .label,:lang(zh) .more,:lang(zh) .btn,:lang(zh) .nav a,:lang(zh) .hero-sub,:lang(zh) .field label,:lang(zh) .tile .name,
:lang(zh) .tile .go,:lang(zh) .roadmap b,:lang(zh) .steps-list .t,:lang(zh) .papers b,:lang(zh) .resp .items b,:lang(zh) .ways .k,
:lang(zh) .site-footer h3,:lang(zh) .fine,:lang(zh) .draft-note,:lang(zh) .lifeline li > span:last-child,:lang(zh) .scroll-cue,
:lang(zh) .hero-side .words,:lang(zh) .map-label{letter-spacing:.12em}
:lang(zh) .h1{letter-spacing:.06em;line-height:1.3}
:lang(zh) .h2,:lang(zh) .g-name,:lang(zh) .scene-big{letter-spacing:.02em;line-height:1.25}
:lang(zh) body{line-height:1.85}
/* the mark on Chinese pages until a native speaker has checked them (remove at go-live: CHECKLIST.md) */
.zh-note{position:fixed;left:14px;bottom:14px;z-index:65;padding:7px 12px;border:1px dashed var(--sand);background:rgba(10,10,9,.82);
  color:var(--sand);font:500 11px/1.5 var(--sans);letter-spacing:.08em;pointer-events:none}

/* phones: room in the header for the language switch beside the theme and menu buttons (the logo a little smaller there) */
@media (max-width:440px){
  .site-header .bar{gap:12px}
  .brand .logo{height:36px}
  .head-actions{gap:8px}
  .icon-btn{width:36px;height:36px}
  .zh-note{left:10px;bottom:10px;padding:5px 9px;font-size:10px}
}

/* the "Ask us" button (his pick, 20 Oct: the rule-based chatbot; chat.js): bottom right; its panel's look loads on the first tap */
.chat-btn{position:fixed;right:20px;bottom:20px;z-index:66;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 14px;
  border:1px solid rgba(201,169,124,.6);border-radius:24px;background:rgba(10,10,9,.9);color:#E8C590;cursor:pointer;
  font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:background-color .3s,border-color .3s,opacity .3s}
.chat-btn svg{width:20px;height:20px}
.chat-btn:hover,.chat-btn.is-open{background:rgba(26,22,17,.96);border-color:#E8C590}
.chat-btn.is-loading{opacity:.6}
:lang(zh) .chat-btn{letter-spacing:.1em}
/* phones: the bar at the bottom — WeChat · WhatsApp · Enquire (site.js §7), beside the round "Ask us" button */
.dock{display:none}
@media (max-width:700px){.ops.is-live .steps-list,.export.is-live .journey{bottom:calc(7% + 58px + env(safe-area-inset-bottom,0px))}}   /* (above the bar) */
@media (max-width:700px){.dock{display:flex;position:fixed;left:12px;right:66px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:65;height:46px;
  background:rgba(10,10,9,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(201,169,124,.55);
  transform:translateY(calc(100% + 30px));opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease)}
  .dock.on{transform:none;opacity:1}
  .dock a{flex:1;display:flex;align-items:center;justify-content:center;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
    color:#F3EFE7;text-decoration:none;border-left:1px solid rgba(201,169,124,.28)}
  .dock a:first-child{border-left:0}.dock .dock-go{color:#0A0A09;background:linear-gradient(135deg,#E8C590,#C9A97C)}}
@media (max-width:560px){.chat-btn{bottom:calc(12px + env(safe-area-inset-bottom,0px));right:12px;width:46px;height:46px;padding:0;justify-content:center}.chat-btn span{display:none}}
html.intro-on .chat-btn{display:none}

/* the WeChat QR code once it is in (the build puts it in place of the dashed box) */
img.qr-img{border:0;padding:6px;background:#fff;width:132px;height:132px}

/* the minerals ring: a mineral's name is a link (his note, 20 Oct ~12:5x), and the gold ring opens over a stone you can click */
.g-name a{color:inherit;text-decoration:none;transition:color .3s}
.g-name a:hover{color:#E8C590}
html.co-pointing .cursor-ring::before{transform:scale(1.93);border-width:.55px;background-color:rgba(232,197,144,.08);border-color:rgba(232,197,144,.95)}

/* the living harbour (his pick, 20 Oct ~13:0x; harbour.js): the port photo in depth, a river of liquid gold, the warehouse */
.band .harbour{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.band.is-harbour img{visibility:hidden}
.band .harbour-ui{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.harbour-ui .h-label{position:absolute;left:0;top:0;white-space:nowrap;font:500 11px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;
  color:var(--sand);opacity:0;will-change:transform,opacity;text-shadow:0 1px 8px rgba(0,0,0,.6)}
:lang(zh) .harbour-ui .h-label{letter-spacing:.12em}
.harbour-ui .h-house{position:absolute;left:0;top:0;width:58px;height:40px;margin:-40px 0 0 -29px;color:#F2C98D;opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 0 6px rgba(242,201,141,.45))}
.harbour-ui .h-house .door{fill:#FFE2AA;stroke:none}
@media (max-width:560px){                  /* phones: a taller picture for the harbour, smaller marks */
  .export-more .band.ratio-wide{aspect-ratio:1/1;margin-left:-20px;margin-right:-20px;width:calc(100% + 40px);max-width:none}   /* edge to edge (his mobile round) */
  .harbour-ui .h-house{width:36px;height:25px;margin:-25px 0 0 -18px}
  .harbour-ui .h-label{font-size:9px;letter-spacing:.24em}
}