/* The Song of Svain · one-page coming soon */
:root{--gold:#deba80;--gold2:#aa7441;--cream:#f7edde;--muted:#d3c5b4;--ui:'Cinzel',Georgia,serif;--body:'Cormorant Garamond',Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--cream);background:#0e151b;font-family:var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}
.skip-link{position:fixed;z-index:100;left:10px;top:-70px;padding:12px;background:#fff;color:#161616}.skip-link:focus{top:10px}
.landing{min-height:100vh;min-height:100svh;position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:visible;background:#101820 url('../images/norse-night.webp') center center/cover no-repeat}
.landing:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,10,13,.12) 0%,rgba(7,12,17,.16) 38%,rgba(5,12,19,.50) 56%,rgba(5,11,17,.66) 100%),linear-gradient(0deg,rgba(5,8,11,.76) 0%,transparent 21%,transparent 68%,rgba(4,8,11,.47) 100%)}
.landing:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 31% 51%,rgba(232,120,37,.115),transparent 34%),radial-gradient(ellipse at 65% 44%,rgba(0,0,0,.24),transparent 38%)}
.skygrain{position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.70' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");mix-blend-mode:screen;z-index:-1}
.site-header{width:min(1440px,calc(100% - 112px));margin:0 auto;padding:28px 0 8px;display:flex;align-items:start;justify-content:space-between;gap:20px}
.brand-block{display:flex;flex-direction:column;gap:4px}.brand-name{font:500 clamp(21px,2.1vw,32px)/1.05 var(--ui);color:#f3e9da;letter-spacing:.055em;text-shadow:0 2px 20px rgba(0,0,0,.38)}.brand-byline{display:flex;align-items:center;gap:13px;padding-left:1px;color:var(--gold);font:500 10px var(--ui);letter-spacing:.28em}.brand-byline i{width:50px;height:1px;background:linear-gradient(90deg,transparent,#cfa165)}.brand-byline i:last-child{transform:rotate(180deg)}
.header-status{margin-top:9px;font:600 10px var(--ui);letter-spacing:.20em;white-space:nowrap;color:#dec394}.status-star{color:#f9d694;font-size:17px;vertical-align:-1px;margin-right:8px}
.hero{position:relative;flex:1;display:grid;grid-template-columns:minmax(340px,1fr) minmax(480px,1.05fr);align-items:center;gap:0;width:min(1510px,100%);margin:auto;min-height:0}
.book-side{position:relative;min-height:min(72vh,820px);height:100%;display:flex;align-items:center;justify-content:center;perspective:1300px;--mx:0deg;--my:0deg}
.book-aura{position:absolute;width:68%;height:68%;top:12%;left:16%;filter:blur(45px);border-radius:50%;background:radial-gradient(ellipse,rgba(210,108,31,.2),rgba(227,143,64,.05) 52%,transparent 72%);animation:pulse 5.2s ease-in-out infinite alternate}
.ember-glow{position:absolute;bottom:6%;left:19%;right:17%;height:15%;background:radial-gradient(ellipse at center,rgba(241,151,61,.42),rgba(214,95,14,.15) 45%,transparent 75%);filter:blur(20px);animation:pulse 4s ease-in-out infinite alternate}
.book-float{position:relative;width:min(88%,590px);will-change:transform;animation:float 6.7s ease-in-out infinite;transform-origin:center}
.book-image{display:block;width:100%;height:auto;filter:drop-shadow(2px 10px 12px rgba(0,0,0,.50)) drop-shadow(0 0 13px rgba(244,153,64,.28));user-select:none;-webkit-user-drag:none}
.arc{position:absolute;overflow:visible;width:min(100%,680px);height:100%;top:0;left:50%;transform:translateX(-50%);pointer-events:none}
.arc ellipse,.arc path{fill:none;stroke:#eab879;stroke-width:1.5;filter:drop-shadow(0 0 5px #ffc26e);opacity:.38;stroke-dasharray:10 13;animation:trail 13s linear infinite}
.arc-behind{z-index:0;opacity:.5;transform:translateX(-50%) rotate(-5deg)}.book-float{z-index:2}.arc-front{z-index:3;opacity:.56}.arc-front path{stroke-width:1.2;stroke-dasharray:16 25;animation-duration:8s;animation-direction:reverse}
.spark-particles{position:absolute;inset:0;pointer-events:none;z-index:4}.spark-particles b{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe4a9;box-shadow:0 0 8px 2px rgba(253,192,93,.64);animation:spark 5s ease-in-out infinite}.spark-particles b:nth-child(1){left:21%;top:42%;animation-delay:.5s}.spark-particles b:nth-child(2){left:78%;top:20%;animation-delay:1.5s}.spark-particles b:nth-child(3){left:72%;top:66%;animation-delay:3s}.spark-particles b:nth-child(4){left:25%;top:78%;animation-delay:2s}.spark-particles b:nth-child(5){left:86%;top:48%;animation-delay:.9s}.spark-particles b:nth-child(6){left:16%;top:27%;animation-delay:3.7s}.spark-particles b:nth-child(7){left:54%;top:88%;animation-delay:4.2s}
.hero-content{position:relative;z-index:5;max-width:690px;padding:42px max(46px,4.5vw) 48px 10px;text-shadow:0 3px 14px rgba(0,0,0,.3)}.eyebrow{display:flex;align-items:center;gap:14px;color:#d8ac70;letter-spacing:.25em;font:500 clamp(10px,.87vw,12px) var(--ui);white-space:nowrap;margin-bottom:25px}.eyebrow .line{height:1px;background:linear-gradient(90deg,transparent,rgba(217,172,105,.7));width:42px}.eyebrow .line:last-child{transform:rotate(180deg)}
h1{font:500 clamp(48px,4.05vw,78px)/1.1 var(--ui);margin:0;letter-spacing:-.025em;color:#f0e4d3;text-transform:uppercase;text-shadow:0 3px 24px rgba(0,0,0,.78)}h1 em{font-style:normal;color:#edca93}
.rune-divider{display:flex;gap:17px;align-items:center;width:210px;margin:25px 0 15px;color:#c99754}.rune-divider span{height:1px;flex:1;background:linear-gradient(90deg,transparent,#9c683f)}.rune-divider span:last-child{transform:rotate(180deg)}.rune-divider strong{font:27px Georgia,serif;font-weight:400}
.coming-word{font:600 14px var(--ui);letter-spacing:.43em;color:#edc489;margin:0 0 14px}.description{font:500 clamp(22px,1.7vw,28px)/1.2 var(--body);margin:0 0 16px;color:#f4ecdf;max-width:570px}.second-description{font:500 clamp(20px,1.35vw,23px)/1.35 var(--body);margin:0 0 26px;color:#ddd3c6;max-width:540px}.second-description strong{font-weight:600;color:#ffdeae}
.cta-group{display:flex;flex-wrap:wrap;gap:13px}.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 17px;min-height:54px;font:600 12px var(--ui);letter-spacing:.07em;white-space:nowrap;text-shadow:none;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;border:1px solid #bf8c4e;background:rgba(8,11,14,.58);color:#f3e6d1;box-shadow:0 5px 16px rgba(0,0,0,.25)}.cta svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.cta .arrow{font:18px Georgia,serif;color:#ffd5a1}.cta-primary{background:linear-gradient(135deg,#9a4d21,#743819 65%,#542811);border-color:#d7a56b;box-shadow:inset 0 1px rgba(255,213,150,.16),0 4px 24px rgba(43,13,5,.4)}.cta:hover{transform:translateY(-3px);border-color:#f3cf8e;box-shadow:0 7px 25px rgba(216,133,58,.2)}.cta-primary:hover{background:linear-gradient(135deg,#b45e2a,#91431d 80%)}.cta-secondary:hover{background:rgba(156,104,50,.25)}.cta:focus-visible{outline:2px solid #ffdd9a;outline-offset:5px}
.small-note{font:500 9px var(--ui);letter-spacing:.18em;color:rgba(233,208,171,.78);margin:20px 0 0}.small-note span{color:#c69452;margin:0 5px}
.site-footer{width:min(1440px,calc(100% - 112px));margin:auto auto 0;display:flex;justify-content:space-between;align-items:center;padding:10px 0 23px;gap:24px;border-top:1px solid rgba(229,176,109,.18);color:rgba(232,211,185,.68);font:500 9px var(--ui);letter-spacing:.15em;text-align:center}.footer-runes{font:400 19px/1.3 "Segoe UI Historic","Noto Sans Runic","DejaVu Sans",serif;letter-spacing:.08em;color:rgba(211,156,86,.72);white-space:nowrap}
@keyframes float{0%,100%{transform:translate3d(0,0,0) rotate(-1.3deg)}50%{transform:translate3d(0,-13px,0) rotate(.2deg)}}@keyframes pulse{0%{opacity:.55;transform:scale(.97)}100%{opacity:1;transform:scale(1.06)}}@keyframes trail{to{stroke-dashoffset:-250}}@keyframes spark{0%,100%{opacity:0;transform:translateY(8px)}40%{opacity:.9}75%{opacity:.25;transform:translateY(-26px)}}
@media(max-width:1160px){.site-header,.site-footer{width:calc(100% - 70px)}.hero{grid-template-columns:minmax(310px,.90fr) minmax(430px,1.1fr)}.book-side{min-height:640px}.hero-content{padding-left:0;padding-right:30px}h1{font-size:clamp(43px,4.1vw,60px)}.cta{font-size:11px;padding:0 12px;min-height:50px}}
@media(max-width:850px){.landing{min-height:100svh;background-position:62% center}.landing:before{background:linear-gradient(180deg,rgba(4,9,13,.50),rgba(5,10,14,.28) 30%,rgba(5,11,16,.8) 56%,rgba(4,9,12,.93))}.site-header,.site-footer{width:calc(100% - 44px)}.site-header{padding-top:23px}.header-status{font-size:9px}.hero{grid-template-columns:1fr;gap:0;width:min(690px,100%)}.book-side{height:auto;min-height:0;aspect-ratio:1.3/1;max-height:460px;margin-top:8px}.book-float{width:min(67%,350px)}.arc{height:105%;width:min(95%,480px)}.ember-glow{bottom:4%}.hero-content{max-width:660px;text-align:center;padding:6px 30px 47px;margin:0 auto}.eyebrow,.rune-divider{justify-content:center;margin-left:auto;margin-right:auto}.eyebrow{margin-bottom:17px}h1{font-size:clamp(39px,6.2vw,57px)}.rune-divider{margin-top:16px;margin-bottom:12px}.description,.second-description{margin-left:auto;margin-right:auto}.coming-word{margin-bottom:10px}.cta-group{justify-content:center}.site-footer{padding-bottom:16px}}
@media(max-width:560px){.site-header{width:calc(100% - 32px);padding-top:20px;align-items:center}.brand-name{font-size:19px}.brand-byline{font-size:8px;letter-spacing:.22em}.brand-byline i{width:26px}.header-status{max-width:112px;white-space:normal;text-align:right;font-size:8px;line-height:1.6;letter-spacing:.11em}.status-star{display:inline-block;font-size:11px;margin-right:4px}.book-side{aspect-ratio:1.15/1;max-height:350px;min-height:255px;margin-top:4px}.book-float{width:min(77%,300px)}.arc{width:100%;height:110%;top:-8%}.hero-content{padding:0 24px 33px}.eyebrow{font-size:9px;letter-spacing:.15em;gap:7px}.eyebrow .line{width:27px}h1{font-size:clamp(31px,8vw,45px);line-height:1.13}.rune-divider{margin-top:14px;margin-bottom:8px;width:155px}.rune-divider strong{font-size:20px}.coming-word{font-size:12px;letter-spacing:.27em}.description{font-size:21px;line-height:1.21;margin-bottom:12px}.second-description{font-size:19px;line-height:1.25;margin-bottom:18px}.cta-group{flex-direction:column;max-width:350px;margin:0 auto;gap:10px}.cta{width:100%;min-height:48px;font-size:11px}.small-note{font-size:8px;line-height:1.7;letter-spacing:.10em;margin-top:18px}.site-footer{width:calc(100% - 32px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;row-gap:8px;padding:12px 0 16px;font-size:8px}.site-footer>span:first-child{grid-column:1;grid-row:1;justify-self:start}.site-footer>span:nth-child(2){grid-column:1/-1;grid-row:2;justify-self:center}.site-footer>span:last-child{grid-column:2;grid-row:1;justify-self:end}.footer-runes{display:inline-block;font-size:clamp(13px,3.9vw,18px);letter-spacing:0}}
@media(max-height:730px) and (min-width:851px){.site-header{padding-top:17px}.book-side{min-height:0}.book-float{width:min(75%,450px)}.hero-content{padding-top:14px;padding-bottom:15px}.eyebrow{margin-bottom:12px}.rune-divider{margin:14px 0 7px}.description{font-size:22px}.second-description{font-size:20px;margin-bottom:16px}h1{font-size:clamp(42px,3.8vw,66px)}.site-footer{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.book-float,.book-aura,.ember-glow,.arc ellipse,.arc path,.spark-particles b{animation:none!important}.cta{transition:none}}

/* Serviss Station signature. Point the two variables at the site's own footer text and accent colours. */
.site-signature {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--signature-color, currentColor);
}
.site-signature a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.site-signature a:hover,
.site-signature a:focus-visible {
  color: var(--signature-accent, currentColor);
  text-decoration-color: currentColor;
}

/* Keep the required credit below the supplied rune and copyright row. */
.site-footer{flex-wrap:wrap;--signature-color:var(--muted);--signature-accent:var(--gold)}
.site-footer .site-signature{flex-basis:100%;font-family:var(--body);font-weight:400;letter-spacing:normal}
.site-signature a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:560px){.site-footer>span:nth-child(3){grid-column:2;grid-row:1;justify-self:end}.site-footer .site-signature{grid-column:1/-1;grid-row:3}}

.book-float{display:block}
.book-float:focus-visible{outline:2px solid var(--gold);outline-offset:5px}

/* Responsive fit: retain the artwork and type; recover space from layout. */
.landing{min-height:100vh;min-height:100svh;min-height:100dvh;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.site-header,.site-footer{flex-shrink:0}
.hero{flex:1 0 auto}
@media(min-width:851px){
  .book-side{min-height:0}
  .book-float{width:min(88%,590px,calc((100dvh - 210px) * .845))}
  .arc{width:min(92%,680px);height:90%;top:5%}
}
@media(max-width:850px){
  .site-header{padding-top:12px;padding-bottom:4px;gap:12px}
  .hero{gap:0}
  .book-side{--book-space:clamp(180px,calc(100dvh - 590px),340px);height:var(--book-space);min-height:0;max-height:none;aspect-ratio:auto;margin-top:0}
  .book-float{width:min(67%,calc((var(--book-space) - 30px) * .845))}
  .arc{width:min(95%,calc(var(--book-space) * 1.1));height:94%;top:3%}
  .hero-content{padding:0 20px 12px}
  .eyebrow{margin-bottom:10px}
  .rune-divider{margin-top:8px;margin-bottom:6px}
  .coming-word{margin-bottom:8px}
  .description{margin-bottom:8px}
  .second-description{margin-bottom:12px}
  .small-note{margin-top:10px}
  .site-footer{padding-top:8px;padding-bottom:10px;gap:6px}
  .site-signature{margin-top:6px}
}
@media(max-width:560px){
  .site-header,.site-footer{width:calc(100% - 32px)}
  .hero-content{padding-left:16px;padding-right:16px}
  .book-side{--book-space:clamp(150px,calc(100dvh - 590px),290px)}
  .book-float{width:min(77%,calc((var(--book-space) - 30px) * .845))}
  .site-footer{column-gap:8px;row-gap:6px}
}
@media(min-width:851px) and (max-height:850px){
  .hero-content{padding-top:18px;padding-bottom:18px}
  .eyebrow{margin-bottom:12px}
  .rune-divider{margin-top:14px;margin-bottom:7px}
  .second-description{margin-bottom:16px}
  .site-footer{padding-bottom:12px;row-gap:8px}
  .site-signature{margin-top:8px}
}
@media(max-width:560px){
  .book-side{--book-space:clamp(150px,calc(100dvh - 600px),300px)}
  .hero-content{padding-left:12px;padding-right:12px}
  .site-footer{padding-top:6px;padding-bottom:8px;row-gap:4px}
  .site-signature{margin-top:4px}
}
/* Modest proportional scaling retains all lettering and relative type sizes.
   Keep touch targets at least 48 CSS pixels after scaling. */
@media(min-width:350px) and (max-width:410px) and (min-height:740px){
  .hero-content{zoom:.94}
  .cta{min-height:52px}
}

@media(max-width:349px), (max-width:560px) and (max-height:739px){
  .book-side{--book-space:150px}
}
@media(min-width:350px) and (max-width:369px) and (min-height:740px){
  .book-side{--book-space:clamp(150px,calc(100dvh - 635px),240px)}
}
/* At extreme zoom, reflow instead of concealing or further shrinking text. */
@media(max-width:300px){
  .site-header{flex-wrap:wrap;gap:8px}
  .brand-block{min-width:0;max-width:100%}
  .header-status{max-width:100%;text-align:left;margin-top:0}
  .cta{gap:6px;padding-left:8px;padding-right:8px;white-space:normal}
  .cta>span{min-width:0}
  .eyebrow{gap:4px;white-space:normal}
  .eyebrow .line{flex-shrink:1}
}