/* tsumarga.com — shared design system
   Type rules: Instrument Sans = everything; Instrument Serif italic = place names only;
   Instrument Serif upright = Sumarga's own quotes; Martian Mono = real data (dates, times, coordinates, numbers).
   Colour: deep navy ink, bone text, one gold signal (metallic foil gradient + brushed texture), ice blue for the map. */

@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/assets/fonts/martian-mono.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Devanagari";src:url(/assets/fonts/noto-sans-devanagari.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}

:root{
  color-scheme:dark;
  --ink-0:#080b12;
  --ink-1:#0d121c;
  --ink-2:#141b28;
  --bone:#ede9e1;
  --bone-2:#ede9e1b3;
  --bone-3:#ede9e185;
  --bone-4:#ede9e133;
  --line:#ede9e11a;
  --line-strong:#ede9e136;
  --signal:#d4ae5a;
  --signal-hover:#e6c477;
  --signal-soft:#d4ae5a24;
  --on-signal:#080b12;
  --ice:#9db4d9;
  --foil:linear-gradient(115deg,#8c6a24 0%,#c99d45 18%,#f4df9c 34%,#d2a84f 48%,#9a7429 62%,#e8cd84 80%,#b48a38 100%);
  --brush:repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,#0000000a 0 1px,transparent 1px 4px);

  --sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --deva:"Noto Sans Devanagari",var(--sans);

  --fs-display:clamp(46px,6.4vw,104px);
  --fs-h2:clamp(30px,3.6vw,52px);
  --fs-h3:20px;
  --fs-body:17px;
  --fs-small:14px;
  --fs-mono:11px;

  --margin:clamp(20px,4vw,56px);
  --max:1240px;
  --ease:cubic-bezier(.2,0,0,1);
}
:lang(ja){
  --sans:"Instrument Sans","Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --serif:"Instrument Serif","Shippori Mincho","Hiragino Mincho ProN",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink-0);color:var(--bone);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(ja) body,body:lang(ja){line-height:1.85;font-size:16px}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--signal);color:var(--on-signal)}
:focus-visible{outline:1.5px solid var(--signal);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--margin)}
.skip{position:absolute;left:-999px;top:12px;background:var(--bone);color:var(--ink-0);padding:8px 14px;z-index:99}
.skip:focus{left:12px}

/* the two type rules, used everywhere */
.place{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
:lang(ja) .place{font-style:normal}
.data{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--bone-3)}
.deva{font-family:var(--deva)}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ink-0) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.bar .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{font-family:var(--serif);font-size:26px;line-height:1;text-decoration:none;letter-spacing:-.01em}
.logo i{color:var(--signal);font-style:normal}
.bar nav{margin-left:auto}
.bar ul{display:flex;gap:24px;list-style:none;font-size:var(--fs-small)}
.bar ul a{text-decoration:none;color:var(--bone-2);transition:color .12s}
.bar ul a:hover{color:var(--bone)}
.lang{display:flex;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;border:1px solid var(--line-strong)}
.lang a,.lang b{padding:6px 10px;text-decoration:none;font-weight:400}
.lang b{background:var(--bone);color:var(--ink-0)}
.lang a{color:var(--bone-2)}
.lang a:hover{color:var(--bone)}

/* ---------- hero (the instrument) ---------- */
.hero{position:relative;min-height:calc(100svh - 64px);display:flex;flex-direction:column;padding:0 var(--margin)}
.hero .frame{position:absolute;inset:0 16px 16px;border:1px solid var(--line);pointer-events:none}
.hero .frame::before,.hero .frame::after{content:"";position:absolute;width:9px;height:9px;border-color:var(--signal);border-style:solid}
.hero .frame::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.hero .frame::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.hero-grid{flex:1;max-width:calc(var(--max) - 2*var(--margin));width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(40px,7vh,88px) 0 24px}
.greet{display:flex;align-items:baseline;gap:14px;min-height:30px;margin-bottom:22px}
.greet b{font-weight:500;font-size:20px;color:var(--signal)}
.greet b:lang(ne),.greet b:lang(hi){font-family:var(--deva)}
.greet .data{color:var(--bone-3)}
.hero h1{font-size:var(--fs-display);font-weight:500;line-height:.98;letter-spacing:-.035em;max-width:9.5em}
.hero h1 .place{font-size:1.06em;letter-spacing:-.01em}
:lang(ja) .hero h1{font-size:clamp(30px,4.1vw,60px);line-height:1.3;letter-spacing:.01em;font-weight:500}
.nb{white-space:nowrap}
.lead{max-width:34em;color:var(--bone-2);margin-top:28px;font-size:17px}
.say{margin-top:34px}
.say p{margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;background:transparent;border:1px solid var(--line-strong);color:var(--bone-2);font:400 14px/1 var(--sans);padding:10px 14px;cursor:pointer;transition:border-color .12s,color .12s}
.chip:lang(ne),.chip:lang(hi){font-family:var(--deva)}
.chip:hover{color:var(--bone);border-color:var(--bone-3)}
.chip[aria-pressed="true"]{border-color:var(--signal);color:var(--bone);background:var(--signal-soft)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;font-size:15px;font-weight:500;text-decoration:none;border:1px solid var(--line-strong);color:var(--bone);transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--bone-3)}
.btn.solid{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.btn.solid:hover{background:var(--signal-hover);border-color:var(--signal-hover)}

/* map */
.map{position:relative;aspect-ratio:920/640;width:100%;background:url(/assets/route-dots.svg) center/100% 100% no-repeat}
.map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map .route{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-dasharray:640;stroke-dashoffset:0}
.map .trip{fill:none;stroke:var(--bone-3);stroke-width:1.2;stroke-dasharray:3 6}
.map .pin{fill:var(--ink-0);stroke:var(--signal);stroke-width:2}
.map .pin.dim{stroke:var(--bone-3)}
.map .now{fill:var(--signal)}
.map .ring{fill:none;stroke:var(--signal);stroke-width:1.2;transform-box:fill-box;transform-origin:center}
.map text{fill:var(--bone)}
.map .t-place{font-family:var(--serif);font-style:italic;font-size:34px}
.map :lang(ja) .t-place,.map .t-place:lang(ja){font-style:normal;font-size:28px}
html:lang(ja) .map .t-place{font-style:normal;font-size:28px}
.map .t-data{font-family:var(--mono);font-size:15px;letter-spacing:.06em;fill:var(--bone-3)}
.js .map .route{animation:draw 1.8s var(--ease) .3s both}
.js .map .ring{animation:ping 2.8s var(--ease) 2.1s infinite both}
.js .map .late{animation:fade .6s ease 1.9s both}
@keyframes draw{from{stroke-dashoffset:640}to{stroke-dashoffset:0}}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* corner readouts */
.readouts{max-width:calc(var(--max) - 2*var(--margin));width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 0 36px}
.readout{display:grid;gap:4px}
.readout.r{text-align:right}
.readout .data b{color:var(--bone);font-weight:400}
.readout .data em{font-style:normal;color:var(--signal)}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,10vw,136px) 0;border-top:1px solid var(--line)}
.sec-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,4vw,64px)}
.sec-label{font-size:var(--fs-small);color:var(--bone-3);padding-top:10px}
.sec h2 .place{letter-spacing:-.01em;font-size:1.06em}
.sec h2{font-size:var(--fs-h2);font-weight:500;line-height:1.08;letter-spacing:-.025em;max-width:18em}
:lang(ja) .sec h2 .place{letter-spacing:-.01em;font-size:1.06em}
.sec h2{font-size:clamp(26px,3vw,42px);line-height:1.35;letter-spacing:0}
.prose{display:grid;gap:20px;margin-top:40px;max-width:40em}
.prose p:first-child{color:var(--bone);font-size:19px;line-height:1.55}
.prose p{color:var(--bone-2);max-width:36em}
.voice{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.25;color:var(--bone);letter-spacing:-.005em}
:lang(ja) .voice{font-size:clamp(22px,2.2vw,30px);line-height:1.6}
.voice.small{font-size:clamp(22px,2vw,28px)}

/* journey: a real sequence, so it's numbered */
.legs{list-style:none;margin-top:56px;border-top:1px solid var(--line)}
.leg{display:grid;grid-template-columns:56px minmax(0,190px) minmax(0,1fr);gap:8px 32px;padding:28px 0;border-bottom:1px solid var(--line)}
.leg .n{color:var(--signal)}
.leg .when{display:grid;gap:2px;align-content:start}
.leg .when .place{font-size:22px;line-height:1.1;color:var(--bone)}
.leg h3{font-size:var(--fs-h3);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.leg p{color:var(--bone-2);margin-top:6px;max-width:40em}
.leg.next .n,.leg.next h3{color:var(--bone-3)}
.leg.next{border-bottom-style:dashed}

/* experience ledger */
.ledger{margin-top:56px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1.1fr) minmax(0,1.4fr);gap:8px 32px;padding:26px 0;border-bottom:1px solid var(--line)}
.row h3{font-size:var(--fs-h3);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.row .org{color:var(--bone-3);font-size:var(--fs-small);margin-top:4px}
.row .org .place{font-size:17px;color:var(--bone-2)}
.row p{color:var(--bone-2)}
.row .data{padding-top:6px}

/* focus */
.questions{list-style:none;margin-top:48px}
.questions li{font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.02em;line-height:1.25;padding:24px 0;border-top:1px solid var(--line);max-width:24em}
.questions li:last-child{border-bottom:1px solid var(--line)}
:lang(ja) .questions li{font-size:clamp(19px,2vw,26px);line-height:1.5;letter-spacing:0}

/* closing + contact */
.closing .voice{max-width:22em}
.contact-mail{display:inline-block;margin-top:40px;font-size:clamp(28px,4.6vw,68px);font-weight:500;letter-spacing:-.035em;line-height:1.05;text-decoration:none;border-bottom:2px solid var(--line-strong);padding-bottom:6px;transition:border-color .12s,color .12s;word-break:break-word}
.contact-mail:hover{border-color:var(--signal)}
.contact .actions{margin-top:36px}

/* footer */
.foot{border-top:1px solid var(--line);padding:28px 0 40px}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot a{color:var(--bone-3);text-underline-offset:4px}
.foot a:hover{color:var(--bone)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .bar ul{display:none}
  .hero-grid{grid-template-columns:1fr;padding-top:40px}
  .map{max-width:640px}
  .readouts{flex-direction:column;align-items:flex-start;padding-bottom:32px}
  .readout.r{text-align:left}
  .sec-grid{grid-template-columns:1fr}
  .sec-label{padding-top:0}
}
@media (max-width:640px){
  .hero .frame{inset:0 8px 8px}
  .leg{grid-template-columns:40px minmax(0,1fr)}
  .leg > div:last-child{grid-column:2}
  .row{grid-template-columns:1fr}
  .row .data{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .map .route,.js .map .ring,.js .map .late{animation:none}
}

/* ---------- gold foil ---------- */
.foil,.greet b,.readout .data em,.leg .n,.logo i,.hero h1 .gold{background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.btn.solid{background:var(--brush),var(--foil);background-size:auto,180% 100%;background-position:0 0,0% 0;border-color:#c99d45;color:var(--on-signal);transition:background-position .6s var(--ease),border-color .12s}
.btn.solid:hover{background:var(--brush),var(--foil);background-size:auto,180% 100%;background-position:0 0,100% 0;border-color:#e8cd84}
.hero .frame::before,.hero .frame::after{border-color:#d2a84f}
.map .route{stroke:url(#goldline);stroke-width:2.6}
.map .pin{stroke:url(#goldline)}
.chip[aria-pressed="true"]{border-color:#c99d45}

/* ---------- polish: top bar extras ---------- */
.bar{position:sticky}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--foil);transform:scaleX(0);transform-origin:0 50%}
.mini{display:flex;gap:14px;opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.mini.show{opacity:1;transform:none}
.mini b{color:var(--bone);font-weight:400}

/* ---------- polish: opening sequence (plays once) ---------- */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .ln > span{display:inline-block}
.js .hero h1 .ln > span{animation:lineup .9s var(--ease) both}
.js .hero h1 .ln:nth-child(2) > span{animation-delay:.12s}
.js .hero h1 .ln:nth-child(3) > span{animation-delay:.24s}
.js .hero .greet,.js .hero .lead,.js .hero .say,.js .hero .actions{animation:fade .8s ease .55s both}
.js .readouts{animation:fade .8s ease 1.2s both}
@keyframes lineup{from{transform:translateY(105%)}to{transform:none}}

/* ---------- polish: numbers strip ---------- */
.stats{border-top:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.stat{padding:30px 20px 30px 0;border-right:1px solid var(--line)}
.stat + .stat{padding-left:24px}
.stat:last-child{border-right:0}
.stat b{display:block;font-weight:500;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;line-height:1.1}
.stat .data{display:block;margin-top:8px}

/* ---------- polish: read more ---------- */
.more{margin-top:28px;max-width:40em}
.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;color:var(--signal);font-size:15px;padding:8px 0;min-height:44px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";font-family:var(--mono);font-size:14px;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line-strong);transition:transform .2s var(--ease)}
.more[open] summary::before{content:"−"}
.more .prose{margin-top:14px}
.more .prose p:first-child{color:var(--bone-2);font-size:var(--fs-body)}

/* ---------- polish: journey with sticky map ---------- */
.jgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(24px,4vw,56px);margin-top:48px;align-items:start}
.jgrid .legs{margin-top:0}
.leg{transition:opacity .35s var(--ease)}
.js .jgrid .leg{opacity:.38}
.js .jgrid .leg.active{opacity:1}
.jgrid .leg{grid-template-columns:44px minmax(0,1fr);padding:34px 0}
.jgrid .leg .when{grid-column:2}
.jgrid .leg > div:last-child{grid-column:2}
.jgrid .leg p{margin-top:4px}
.jmap-wrap{position:sticky;top:max(96px,calc(50vh - 240px))}
.jmap{position:relative;aspect-ratio:680/560;width:100%;border:1px solid var(--line);background:var(--ink-1)}
.jmap svg{position:absolute;inset:0;width:100%;height:100%}
.jmap .seg{fill:none;stroke:url(#goldline2);stroke-width:3;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.1s var(--ease)}
.jmap .seg.dash{stroke-dasharray:4 9;stroke-dashoffset:0;opacity:0;transition:opacity .6s ease}
.jmap .seg.drawn{stroke-dashoffset:0}
.jmap .seg.dash.drawn{opacity:1}
.jmap .stop{fill:var(--ink-0);stroke:var(--bone-4);stroke-width:2;transition:stroke .4s}
.jmap .stop.lit{stroke:#d2a84f}
.jmap .traveller{transition:transform 1.1s var(--ease)}
.jmap .traveller circle:first-child{fill:#f4df9c}
.jmap .traveller .halo{fill:none;stroke:#d2a84f;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 2.6s var(--ease) infinite}
.jcap{position:absolute;left:18px;bottom:14px;display:grid;gap:2px}
.jcap .place{font-size:30px;line-height:1}
@media (prefers-reduced-motion:reduce){.jmap .seg,.jmap .traveller,.leg{transition:none}.jmap .traveller .halo{animation:none}}

/* ---------- polish: experience opens on click ---------- */
.xp{border-bottom:1px solid var(--line)}
.xp summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr) auto;gap:8px 32px;align-items:baseline;padding:24px 0}
.xp summary::-webkit-details-marker{display:none}
.xp summary h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.xp summary .org{color:var(--bone-3);font-size:var(--fs-small)}
.xp summary .org .place{font-size:17px;color:var(--bone-2)}
.xp summary i{font-style:normal;font-family:var(--mono);font-size:14px;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line-strong);transition:transform .25s var(--ease),border-color .12s}
.xp summary:hover i{border-color:#d2a84f}
.xp[open] summary i{transform:rotate(45deg);border-color:#d2a84f}
.xp .body{padding:0 0 26px calc(min(120px,20%) + 32px);color:var(--bone-2);max-width:48em}
.js .xp[open] .body{animation:fade .4s ease both}

/* ---------- polish: email button ---------- */
.reveal-mail{appearance:none;cursor:pointer;background:transparent;border:0;border-bottom:2px solid var(--line-strong);color:var(--bone);font:500 clamp(24px,3.4vw,48px)/1.1 var(--sans);letter-spacing:-.03em;padding:0 0 8px;margin-top:40px;display:inline-flex;align-items:center;gap:16px;transition:border-color .12s}
.reveal-mail:hover{border-color:#d2a84f}
.reveal-mail .data{font-size:11px}

@media (max-width:980px){
  .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat,.stat + .stat{padding:22px 16px 22px 0;border-right:0;border-bottom:1px solid var(--line)}
  .stat:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
  .mini{display:none}
  .jgrid{grid-template-columns:1fr}
  .jmap-wrap{top:64px;z-index:5;background:var(--ink-0);padding:8px 0;order:-1}

  .jcap .place{font-size:24px}
  .jgrid .leg{padding:24px 0}
  .xp summary{grid-template-columns:1fr auto}
  .xp summary .data{grid-column:1/-1}
  .xp .body{padding-left:0}
}

/* contact: quieter sizes */
.contact h2{font-size:clamp(26px,2.6vw,36px)}
.reveal-mail{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;padding-bottom:6px;margin-top:28px}
.contact-mail{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;margin-top:28px;padding-bottom:6px;border-bottom-width:1px}
.contact .actions{margin-top:28px}

/* ---------- logo: ring + rising gold sun ---------- */
.mark{display:block;flex:none;overflow:visible}
.mark .ring{fill:none;stroke:currentColor;stroke-width:6}
.mark .sun{fill:url(#sunG)}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo .mark{width:28px;height:28px;color:var(--bone)}
.logo span{transform:translateY(-1px)}
/* opening: the ring draws, then the sun rises into place */
.js .logo .ring{stroke-dasharray:214;stroke-dashoffset:214;animation:ringdraw 1.2s var(--ease) .15s forwards}
.js .logo .sun{opacity:0;transform:translateY(16px);animation:sunrise .9s var(--ease) 1s forwards}
@keyframes ringdraw{to{stroke-dashoffset:0}}
@keyframes sunrise{to{opacity:1;transform:none}}
.logo:hover .sun{filter:brightness(1.15)}

/* hero map: Fukuoka 'now' marker is the logo */
.map .now-mark circle:first-child{transform-box:fill-box}

/* closing: big watermark, sun rises as you scroll in */
.closing{position:relative;overflow:hidden}
.horizon{position:absolute;right:max(var(--margin),calc(50% - 620px));top:50%;width:min(36vw,420px);height:auto;transform:translateY(-50%);pointer-events:none;color:var(--bone)}
.horizon .ring{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.14}
.horizon .sun{fill:url(#sunG);opacity:.85}
.closing .wrap{position:relative}

/* footer */
.foot-mark{display:inline-flex;align-items:center;gap:10px}
.foot-mark .mark{width:18px;height:18px;color:var(--bone-3)}
.foot-mark .ring{stroke-width:7}

@media (max-width:980px){
  .horizon{right:-60px;width:260px;top:auto;bottom:-40px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js .logo .ring,.js .logo .sun{animation:none;stroke-dasharray:none;opacity:1;transform:none}
}
.closing .voice{max-width:14em;position:relative;z-index:1}
.horizon{width:min(26vw,330px)}
.horizon .sun{opacity:.7}
@media (max-width:980px){.horizon{width:220px;right:-50px;bottom:-60px}.horizon .ring{opacity:.1}.horizon .sun{opacity:.45}}