/* ==========================================================
   HashHost — test11 — «رحلة النواة» / The Core's Journey
   One bold element, moved: the energy orb is not replaced from
   stage to stage — its material changes. Water, current, heat,
   coin. Everything around it stays quiet.
   The lower half of this sheet is test9's approved furniture,
   carried over unchanged: header, buttons, calculator, band,
   steps, questions, form, footer.
   ========================================================== */

/* ------------------------------------------------------------- tokens */
:root{
  --void:#000000;
  --shell:#050505;
  --warm:#F3EDE3;
  --warm-2:#A29B92;
  --amber:#F5A524;
  --edge:rgba(243,237,227,.11);
  --edge-soft:rgba(243,237,227,.06);

  /* the four stage tints — they never colour a word, only the light:
     the live dot on the rail and the halo behind the orb */
  --t1:#57C7D8;
  --t2:#9FE8FF;
  --t3:#F5A524;
  --t4:#F7931A;
  --tint:var(--t1);

  --gutter:clamp(20px,4vw,64px);
  --bar-h:66px;
  --measure:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font:"Readex Pro","Noto Sans","Noto Sans Georgian",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.i18n-boot body{ opacity:0; }

body{
  margin:0;
  background:var(--void);
  color:var(--warm);
  font-family:var(--font);
  font-weight:300;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--amber); color:#000; }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; inset-inline-start:8px; top:-100px; z-index:120;
  background:var(--amber); color:#000; padding:10px 16px; border-radius:8px;
  font-weight:500; transition:top .2s var(--ease);
}
.skip:focus{ top:8px; }

/* The grain films the photographs and stops there. It used to lie over the
   whole page, which cost the reading a little contrast and shifted the
   Bitcoin logo's own orange by a unit — the mark now reaches the screen
   pixel-exact. It lives inside the pinned frame (which isolates its blend)
   between the veil and the orb. */
#grain{
  position:absolute; inset:-1px; z-index:3; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay; background-size:200px 200px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- header */
.bar{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:50;
  height:var(--bar-h);
  display:flex; align-items:center; gap:clamp(10px,2vw,28px);
  padding-inline:var(--gutter);
  background:rgba(4,4,4,.55);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-block-end:1px solid var(--edge-soft);
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:500; letter-spacing:.01em; white-space:nowrap;
}
[lang="ar"] .brand{ letter-spacing:0; }
/* the brand mark is the orb in miniature: it carries the live stage tint */
.brand-mark{
  width:11px; height:11px; border-radius:50%;
  background:var(--tint);
  box-shadow:0 0 14px color-mix(in srgb, var(--tint) 80%, transparent),
             0 0 3px rgba(255,255,255,.85) inset;
  transition:background .5s linear, box-shadow .5s linear;
}
.bar-nav{ display:flex; gap:clamp(14px,2.2vw,32px); margin-inline-start:auto; }
.bar-nav a{
  font-size:14px; color:var(--warm-2);
  transition:color .3s var(--ease);
  padding-block:6px;
}
.bar-nav a:hover{ color:var(--warm); }
.bar-cta{ flex:0 0 auto; }

/* language switcher (markup is built by js/i18n.js) */
.lang-current{
  display:flex; align-items:center; gap:7px;
  padding:7px 11px; border:1px solid var(--edge); border-radius:999px;
  font-size:13px; color:var(--warm-2);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.lang-current:hover{ border-color:rgba(243,237,227,.26); color:var(--warm); }
.lang-flag{ font-size:14px; line-height:1; }
.lang-code{ font-size:12px; letter-spacing:.04em; }
.lang-caret{
  width:7px; height:7px; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);
  opacity:.65;
}
.lang-caret::before{ content:""; }
.lang-menu{
  position:fixed; z-index:90; margin:0; padding:6px; list-style:none;
  min-width:172px; border-radius:14px;
  background:rgba(8,8,8,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--edge);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.lang-menu.open{ opacity:1; visibility:visible; transform:none; }
.lang-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border-radius:9px; font-size:14px; color:var(--warm-2);
  text-align:start;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lang-opt:hover{ background:rgba(243,237,227,.06); color:var(--warm); }
.lang-opt.active{ color:var(--warm); }
.lang-opt.active .lang-code{ color:var(--amber); }
.lang-name{ flex:1 1 auto; }

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 22px; border-radius:999px;
  font-size:14px; font-weight:500; line-height:1.2; white-space:nowrap;
  border:1px solid transparent;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn-amber{ background:var(--amber); color:#000; }
.btn-amber:hover{ background:#FFC25A; }
.btn-amber:active{ transform:translateY(1px); }
.btn-plain{ border-color:var(--edge); color:var(--warm); }
.btn-plain:hover{ border-color:rgba(243,237,227,.34); background:rgba(243,237,227,.05); }
.bar-cta{ padding:9px 16px; font-size:13px; }

/* ------------------------------------------------------------- layout */
main{ position:relative; z-index:10; }
.wrap{
  width:100%; max-width:var(--measure); margin-inline:auto;
  padding-inline:var(--gutter);
}
.sec{
  position:relative;
  padding-block:clamp(82px,13vh,168px);
  overflow-x:clip;
}

/* --------------------------------------------------------------- type */
h1,h2,h3{ margin:0; font-weight:300; }
h2{
  font-size:clamp(26px,3.8vw,52px);
  line-height:1.15;
  letter-spacing:.012em;
  margin-block-end:clamp(22px,3.4vh,44px);
}
h3{ font-size:1rem; }
[lang="ar"] h2{ line-height:1.4; letter-spacing:0; }
p{ margin:0; }
.lead{
  margin-block-start:clamp(18px,2.6vh,28px);
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.8;
  color:var(--warm-2);
  max-width:56ch;
}
.note{
  margin-block-start:18px;
  font-size:13.5px; line-height:1.7; color:var(--warm-2);
  max-width:62ch;
}
.lbl{ font-size:13px; font-weight:500; color:var(--warm-2); }

/* numbers are read left-to-right in every language */
b[data-tk], .dev-spec, .count input, .step-n{
  direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;
}

/* ====================================================== 1 · the journey
   420vh of track, one 100svh frame held still inside it. Scroll progress
   0→1 drives every uniform on the orb and the opacity of every photograph
   behind it; nothing here jumps between states.

   Layer order inside the pinned frame:
     1 photographs · 2 reading veil · 3 grain · 4 the orb
     5 the coin's face · 6 the stage copy · 7 rail and the one-time hint  */
#journey{ position:relative; }
.jrn-track{ height:420vh; }
.jrn-pin{
  position:sticky; inset-block-start:0;
  height:100svh; min-height:560px;
  overflow:hidden; isolation:isolate;
}

/* — 1 · the photographs ------------------------------------------------ */
.jrn-bg{ position:absolute; inset:0; z-index:1; }
.jbg{
  position:absolute; inset:0;
  background-size:cover; background-position:50% 50%;
  opacity:0;
  will-change:opacity;
}
.jbg-1{ background-image:url("../images/dam.webp"); }
/* the river is a texture, not a picture: it runs along the foot of the
   dam frame so the water keeps moving under the reading */
.jbg-1b{
  background-image:url("../images/river.webp");
  background-position:50% 70%;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom, transparent 46%, #000 96%);
          mask-image:linear-gradient(to bottom, transparent 46%, #000 96%);
}
.jbg-2{ background-image:url("../images/valley.webp"); background-position:50% 42%; }
.jbg-3{ background-image:url("../images/thermal.webp"); filter:saturate(.82); }

/* — 2 · the veil ------------------------------------------------------- */
.jrn-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.30) 26%,
      rgba(0,0,0,.30) 46%, rgba(0,0,0,.86) 84%, rgba(0,0,0,.94) 100%),
    radial-gradient(120% 92% at 50% 44%, transparent 30%, rgba(0,0,0,.66) 100%);
}

/* — 3 · the orb -------------------------------------------------------- */
#scene{ position:absolute; inset:0; z-index:4; pointer-events:none; }
#scene canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#scene-stars{ z-index:0; }
#scene-orb{ z-index:1; }

/* — 4 · the coin's face ------------------------------------------------ */
/* The official Bitcoin logo, SVG, drawn at whatever the device asks for.
   It is square and untransformed — a true circle at its own #F7931A.
   It is sized just past the orb's horizontal diameter so the face IS the
   coin and the orb is the light behind it. An inscribed circle was tried
   first and read as a doubled edge: the orb is squashed, so the ring it
   left showed at the sides and vanished top and bottom. The squash now
   reads where it belongs — in the halo, which is a little wider than it
   is tall. --orb-cy / --orb-r come from js/scene.js, so the face is
   always concentric with the body. */
.jrn-mark{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  opacity:0;
}
.jrn-mark img{
  position:absolute;
  inset-inline-start:50%;
  inset-block-start:var(--orb-cy,42%);
  width:calc(var(--orb-r,140px) * 2.04);
  height:calc(var(--orb-r,140px) * 2.04);
  max-width:none;
  transform:translate(-50%,-50%);
}
[dir="rtl"] .jrn-mark img{ transform:translate(50%,-50%); }

/* — 5 · the stage copy ------------------------------------------------- */
.jrn-copy{
  position:absolute; z-index:6;
  inset-inline-start:var(--gutter);
  inset-block-end:clamp(62px,10vh,108px);
  width:min(600px,46vw);
}
.stg{
  position:absolute; inset-inline:0; inset-block-end:0;
  opacity:0;
  transition:opacity .28s linear;
}
.stg h2{
  margin:0;
  font-size:clamp(25px,3.4vw,46px);
  line-height:1.16;
  letter-spacing:.012em;
  text-wrap:balance;
}
[lang="ar"] .stg h2{ line-height:1.4; letter-spacing:0; }
/* Georgian and Cyrillic set much wider than Latin at the same size, and a
   four-line stage title started climbing into the orb — step them down */
[lang="ka"] .stg h2{ font-size:clamp(22px,2.8vw,37px); line-height:1.32; }
[lang="ru"] .stg h2{ font-size:clamp(23px,3.0vw,40px); line-height:1.22; }
.stg p{
  margin-block-start:clamp(12px,1.6vh,18px);
  font-size:clamp(15px,1.1vw,17.5px);
  line-height:1.8;
  color:var(--warm-2);
  max-width:44ch;
}
.stg-cta{ margin-block-start:clamp(18px,2.6vh,28px); }
.stg.is-off{ visibility:hidden; pointer-events:none; }

/* — 6 · rail and hint --------------------------------------------------- */
.jrn-rail{
  position:absolute; z-index:7;
  inset-inline-end:clamp(14px,2.4vw,34px);
  inset-block-start:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px;
}
.jrn-dot{
  width:26px; height:26px; padding:0;
  display:grid; place-items:center;
  border-radius:50%;
}
.jrn-dot::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:rgba(243,237,227,.30);
  transition:background .35s var(--ease), transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.jrn-dot:hover::before{ background:rgba(243,237,227,.62); }
.jrn-dot.on::before{
  background:var(--tint);
  transform:scale(1.7);
  box-shadow:0 0 12px color-mix(in srgb, var(--tint) 70%, transparent);
}
.jrn-hint{
  position:absolute; z-index:7;
  inset-inline:0; inset-block-end:clamp(18px,2.6vh,30px);
  text-align:center;
  font-size:13px; color:var(--warm-2);
  opacity:var(--hint-o,1);
  transition:opacity .4s linear;
  pointer-events:none;
}
.jrn-hint::after{
  content:""; display:block; width:1px; height:18px; margin:9px auto 0;
  background:linear-gradient(to bottom, rgba(243,237,227,.5), transparent);
}

/* --------------------------------------------------------- 2 · glass pane */
.pane{
  margin-block-start:clamp(28px,4vh,48px);
  padding:clamp(20px,3vw,38px);
  border:1px solid var(--edge);
  border-radius:22px;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(245,165,36,.07), transparent 58%),
    rgba(255,255,255,.028);
  backdrop-filter:blur(22px) saturate(1.06);
  -webkit-backdrop-filter:blur(22px) saturate(1.06);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
[dir="rtl"] .pane{
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(245,165,36,.07), transparent 58%),
    rgba(255,255,255,.028);
}
.calc-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:16px; align-items:center;
  padding-block-end:14px; border-block-end:1px solid var(--edge-soft);
}
.calc-body{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(16px,3vw,38px); align-items:start;
}
.devs{ border:0; margin:0; padding:0; min-width:0; }
.dev{ display:block; cursor:pointer; position:relative; }
.dev input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.dev-in{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) auto auto minmax(0,.9fr);
  gap:8px clamp(10px,1.8vw,26px);
  align-items:baseline;
  padding-block:15px; padding-inline:14px 8px;
  border-block-end:1px solid var(--edge-soft);
  transition:background .3s var(--ease), color .3s var(--ease);
  color:var(--warm-2);
}
.dev:last-child .dev-in{ border-block-end:0; }
.dev-in::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0;
  width:2px; background:var(--amber); opacity:0;
  transition:opacity .3s var(--ease);
}
.dev:hover .dev-in{ background:rgba(243,237,227,.035); }
.dev input:checked ~ .dev-in{ color:var(--warm); background:rgba(243,237,227,.05); }
.dev input:checked ~ .dev-in::before{ opacity:1; }
.dev input:focus-visible ~ .dev-in{ outline:2px solid var(--amber); outline-offset:-2px; }
.dev-name{ font-size:15px; font-weight:500; white-space:nowrap; }
.dev-tag{
  font-style:normal; font-size:11px; font-weight:500; color:var(--amber);
  margin-inline-start:9px; padding:2px 8px; border-radius:999px;
  border:1px solid rgba(245,165,36,.34);
}
.dev-spec{ font-size:13.5px; white-space:nowrap; }
.dev-spec b{ font-weight:500; color:inherit; }
.dev-cool{ font-size:12.5px; opacity:.72; }

.count{
  display:inline-flex; align-items:center;
  border:1px solid var(--edge); border-radius:999px; overflow:hidden;
}
.step{
  width:42px; height:42px; display:grid; place-items:center;
  font-size:19px; line-height:1; color:var(--warm-2);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.step:hover{ background:rgba(243,237,227,.07); color:var(--warm); }
.count input{
  width:54px; height:42px; text-align:center; border:0; background:none;
  font-size:16px; font-weight:500;
  border-inline:1px solid var(--edge-soft);
  -moz-appearance:textfield;
}
.count input::-webkit-outer-spin-button,
.count input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* readings — a ruled band, not cards */
.readout, .band{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-start:clamp(22px,3vh,34px);
  border-block-start:1px solid var(--edge);
}
.band{ margin-block-start:0; border-block-end:1px solid var(--edge); }
.rd{ padding:clamp(18px,2.6vh,30px) clamp(10px,2vw,26px); min-width:0; }
.rd + .rd{ border-inline-start:1px solid var(--edge-soft); }
.rd b{
  display:block; font-weight:300;
  font-size:clamp(22px,3.2vw,44px); line-height:1.15; letter-spacing:-.01em;
  color:var(--warm);
  overflow-wrap:anywhere;
}
.band .rd b{ font-size:clamp(24px,3.3vw,46px); }
.band .rd{ display:flex; flex-direction:column; }
.band .rd span{ margin-block-start:auto; padding-block-start:10px; }
.rd em{
  display:block; font-style:normal; margin-block-start:3px;
  font-size:12.5px; line-height:1.5; color:var(--warm-2); opacity:.72;
}
.rd em:empty{ display:none; }
.rd span{
  display:block; margin-block-start:8px;
  font-size:13px; line-height:1.5; color:var(--warm-2);
}
.pane-cta{ margin-block-start:22px; }

/* ------------------------------------------------ 4 · the machine is yours */
.own-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,5vw,80px); align-items:center;
}
.own-copy p{ color:var(--warm-2); max-width:52ch; }
.claim-line{
  font-size:clamp(19px,2.2vw,30px); line-height:1.4; color:var(--warm) !important;
  margin-block-end:22px; max-width:22ch;
  letter-spacing:.012em;
}
[lang="ar"] .claim-line{ line-height:1.5; letter-spacing:0; }
.own-fig{ margin:0; }
.own-fig img{
  width:100%; height:auto;
  -webkit-mask-image:radial-gradient(76% 70% at 50% 50%, #000 42%, transparent 86%);
          mask-image:radial-gradient(76% 70% at 50% 50%, #000 42%, transparent 86%);
}

/* ------------------------------------------------------- 5 · three steps */
.steps{ list-style:none; margin:0; padding:0; border-block-start:1px solid var(--edge); }
.steps li{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,3vw,44px); align-items:start;
  padding-block:clamp(22px,3.4vh,38px);
  border-block-end:1px solid var(--edge-soft);
}
.step-n{
  font-size:15px; font-weight:500; color:var(--amber);
  padding-block-start:3px; min-width:20px;
}
.steps h3{ font-size:clamp(18px,2vw,26px); font-weight:300; line-height:1.3; letter-spacing:.012em; }
[lang="ar"] .steps h3{ line-height:1.45; letter-spacing:0; }
.steps p{ margin-block-start:10px; color:var(--warm-2); font-size:15.5px; max-width:64ch; }

/* --------------------------------------------------------- 6 · questions */
.qa-list{ border-block-start:1px solid var(--edge); }
.qa{ border-block-end:1px solid var(--edge-soft); }
.qa h3{ margin:0; font-size:inherit; font-weight:inherit; }
.qa-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:20px; text-align:start;
  padding-block:clamp(18px,2.6vh,26px);
  font-size:clamp(16px,1.5vw,21px); font-weight:300; line-height:1.45;
  color:var(--warm-2);
  transition:color .3s var(--ease);
}
.qa-q:hover{ color:var(--warm); }
.qa-q[aria-expanded="true"]{ color:var(--warm); }
.qa-mk{ position:relative; flex:0 0 auto; width:14px; height:14px; }
.qa-mk::before,.qa-mk::after{
  content:""; position:absolute; inset-block-start:50%; inset-inline-start:0;
  width:14px; height:1px; background:currentColor;
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.qa-mk::after{ transform:rotate(90deg); }
.qa-q[aria-expanded="true"] .qa-mk::after{ transform:rotate(0deg); opacity:0; }
.qa-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease-out);
}
.qa-a > div{ overflow:hidden; }
.qa.open .qa-a{ grid-template-rows:1fr; }
.qa-a p{
  padding-block:0 clamp(20px,2.8vh,30px);
  padding-inline-end:clamp(0px,4vw,54px);
  color:var(--warm-2); font-size:15.5px; max-width:70ch;
}

/* ------------------------------------------------------------ 7 · form */
.quote-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,5vw,72px); align-items:start;
}
.quote-copy p{ color:var(--warm-2); max-width:46ch; }
.quote-grid .pane{ margin-block-start:0; }
.f{ margin-block-end:16px; }
.f label{
  display:block; margin-block-end:7px;
  font-size:13px; font-weight:500; color:var(--warm-2);
}
.f input,.f textarea{
  width:100%; padding:12px 14px;
  background:rgba(0,0,0,.34);
  border:1px solid var(--edge); border-radius:12px;
  font-size:15px; font-weight:300; line-height:1.6;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.f textarea{ resize:vertical; min-height:88px; }
.f input::placeholder,.f textarea::placeholder{ color:rgba(162,155,146,.62); }
.f input:hover,.f textarea:hover{ border-color:rgba(243,237,227,.22); }
.f input:focus,.f textarea:focus{
  outline:none; border-color:var(--amber); background:rgba(0,0,0,.5);
}
.botcheck{ position:absolute; opacity:0; height:0; width:0; overflow:hidden; }
#quote-form button[type="submit"]{ width:100%; margin-block-start:6px; }
#quote-form[disabled] button{ opacity:.6; }
#quote-form.sent{ display:none; }
.form-msg{ margin-block-start:14px; font-size:14.5px; line-height:1.7; }
.form-msg:empty{ display:none; }
.form-msg.ok{ color:var(--warm); }
.form-msg.bad{ color:#FFB4A0; }

/* ------------------------------------------------------------- footer */
.foot{
  position:relative; z-index:10;
  border-block-start:1px solid var(--edge-soft);
  background:var(--shell);
  padding-block:clamp(26px,4vh,38px);
}
.foot-in{
  display:flex; flex-wrap:wrap; gap:12px 26px;
  align-items:center; justify-content:space-between;
  font-size:13.5px; color:var(--warm-2);
}
.foot-in a{ transition:color .3s var(--ease); }
.foot-in a:hover{ color:var(--warm); }

/* ============================================ the journey, unpinned
   No WebGL, or motion is not wanted: the four stages stop being states
   of one body and become four plain frames in a row. The photographs
   move from the crossfading stack (which goes display:none, so its
   backgrounds are never fetched) onto the stage itself. Same elements,
   same words, same order, no JavaScript required. */
html.no-journey .jrn-track{ height:auto; }
html.no-journey .jrn-pin{ position:static; height:auto; min-height:0; overflow:visible; }
html.no-journey .jrn-bg,
html.no-journey .jrn-scrim,
html.no-journey #grain,
html.no-journey #scene,
html.no-journey .jrn-mark,
html.no-journey .jrn-rail,
html.no-journey .jrn-hint{ display:none; }
html.no-journey .jrn-copy{
  position:static; width:auto; display:block;
}
html.no-journey .stg{
  position:static; opacity:1; visibility:visible;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:min(74svh,680px);
  padding:calc(var(--bar-h) + 40px) var(--gutter) clamp(40px,7vh,76px);
  background-size:cover; background-position:50% 50%;
  border-block-end:1px solid var(--edge-soft);
}
html.no-journey .stg h2,
html.no-journey .stg p{ max-width:44ch; }
html.no-journey .stg[data-stage="4"]{ padding-block-start:calc(var(--bar-h) + min(230px,48vw)); }
html.no-journey .stg-cta{ align-self:flex-start; }
html.no-journey .stg[data-stage="1"]{
  background-image:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.34) 40%, rgba(0,0,0,.90)),
    url("../images/dam.webp");
}
html.no-journey .stg[data-stage="2"]{
  background-image:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.34) 40%, rgba(0,0,0,.90)),
    url("../images/valley.webp");
}
html.no-journey .stg[data-stage="3"]{
  background-image:linear-gradient(to bottom, rgba(0,0,0,.66), rgba(0,0,0,.42) 40%, rgba(0,0,0,.92)),
    url("../images/thermal.webp");
}
html.no-journey .stg[data-stage="4"]{
  background-image:url("../images/bitcoin-logo.svg"),
    radial-gradient(74% 62% at 50% 34%, rgba(247,147,26,.17), transparent 72%);
  background-size:min(190px,42vw) auto, cover;
  background-position:50% 26%, 50% 50%;
  background-repeat:no-repeat;
  border-block-end:0;
}

/* --------------------------------------------------------- responsive */
@media (max-width:1040px){
  .quote-grid,.own-grid{ grid-template-columns:minmax(0,1fr); }
  .own-fig{ order:-1; max-width:520px; }
}

@media (max-width:860px){
  :root{ --bar-h:62px; }
  .bar-nav{ display:none; }
  #lang-switch{ margin-inline-start:auto; }
  .jrn-copy{
    inset-inline:var(--gutter);
    width:auto;
    inset-block-end:clamp(76px,11vh,110px);
  }
  .stg p{ max-width:100%; }
  .jrn-rail{ inset-inline-end:10px; gap:10px; }
  .calc-body{ grid-template-columns:minmax(0,1fr); }
  .calc-head{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .calc-head .lbl:last-child{ display:none; }
  .count{ margin-block-start:4px; }
  .dev-in{ grid-template-columns:minmax(0,1fr) auto; padding-inline:12px 8px; }
  .dev-name{ grid-column:1 / -1; white-space:normal; }
  .dev-cool{ grid-column:1 / -1; text-align:start; opacity:.62; }
}

@media (max-width:640px){
  body{ font-size:15.5px; }
  .jrn-track{ height:380vh; }
  .readout,.band{ grid-template-columns:minmax(0,1fr); }
  .rd + .rd{ border-inline-start:0; border-block-start:1px solid var(--edge-soft); }
  .rd{ padding-inline:2px; }
  .band .rd b,.rd b{ font-size:clamp(26px,8vw,38px); }
  .steps li{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .step-n{ padding-block-start:0; }
  .bar-cta{ padding:8px 13px; font-size:12px; }
  .brand{ font-size:14px; }
  .lang-current{ padding:6px 9px; }
  .stg-cta{ width:100%; }
  .qa-a p{ padding-inline-end:0; }
  .pane{ padding:18px 16px; border-radius:18px; }
  .dev-in{ padding-inline:10px 4px; }
}

@media (max-width:380px){
  .bar{ gap:8px; }
  .lang-name{ display:none; }
}

/* ---------------------------------------------------- reduced motion
   The same unpinning as above, but reachable without JavaScript. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .jrn-track{ height:auto; }
  .jrn-pin{ position:static; height:auto; min-height:0; overflow:visible; }
  .jrn-bg,.jrn-scrim,#grain,#scene,.jrn-mark,.jrn-rail,.jrn-hint{ display:none; }
  .jrn-copy{ position:static; width:auto; display:block; }
  .stg{
    position:static; opacity:1 !important; visibility:visible !important;
    display:flex; flex-direction:column; justify-content:flex-end;
    min-height:min(74svh,680px);
    padding:calc(var(--bar-h) + 40px) var(--gutter) clamp(40px,7vh,76px);
    background-size:cover; background-position:50% 50%;
    border-block-end:1px solid var(--edge-soft);
  }
  .stg h2,.stg p{ max-width:44ch; }
  .stg[data-stage="4"]{ padding-block-start:calc(var(--bar-h) + min(230px,48vw)); }
  .stg-cta{ align-self:flex-start; }
  .stg[data-stage="1"]{
    background-image:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.34) 40%, rgba(0,0,0,.90)),
      url("../images/dam.webp");
  }
  .stg[data-stage="2"]{
    background-image:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.34) 40%, rgba(0,0,0,.90)),
      url("../images/valley.webp");
  }
  .stg[data-stage="3"]{
    background-image:linear-gradient(to bottom, rgba(0,0,0,.66), rgba(0,0,0,.42) 40%, rgba(0,0,0,.92)),
      url("../images/thermal.webp");
  }
  .stg[data-stage="4"]{
    background-image:url("../images/bitcoin-logo.svg"),
      radial-gradient(74% 62% at 50% 34%, rgba(247,147,26,.17), transparent 72%);
    background-size:min(190px,42vw) auto, cover;
    background-position:50% 26%, 50% 50%;
    background-repeat:no-repeat;
    border-block-end:0;
  }
}