@font-face{font-family:'Lora';src:url('fonts/lora-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/lora-italic-var.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0}
html{background:#FAF6EE}
body{font-family:'Poppins','Helvetica Neue',Arial,sans-serif;font-weight:300;
  min-height:100vh;color:#2C2826;-webkit-text-size-adjust:100%}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* the homepage's painted scenes, fronds and grain removed so prose can sit on them */
html{--day-ang:152deg}
@media (orientation:portrait){html{--day-ang:170deg}}
.ground{position:fixed;inset:0;z-index:-1;pointer-events:none}
.ground.day{background-image:
  radial-gradient(circle 85vmax at 42% 40%, rgba(58,46,36,0) 20%, rgba(58,46,36,.22) 100%),
  radial-gradient(circle 60vmax at 30% 20%, rgba(255,238,198,.22), rgba(255,238,198,0)),
  radial-gradient(circle 100vmax at 20% 10%, rgba(255,246,224,.55), rgba(255,241,214,.18) 50%, rgba(226,196,160,0)),
  linear-gradient(var(--day-ang),#f0e5cf 0%,#e6d8bd 45%,#d5c3a2 100%)}
/* The painted hero has its sun inside the frame. A flat gradient that keeps
   brightening to the bottom edge reads as a scene cropped off, which is why
   it invites a scroll that leads nowhere. So: the warm light sits inside the
   viewport, and the tone settles towards the foot instead of climbing. */
.ground.dusk{opacity:0;background-image:
  radial-gradient(circle 95vmax at 50% 38%, rgba(5,26,40,0) 30%, rgba(5,26,40,.40) 100%),
  radial-gradient(ellipse 128vmax 46vmax at 50% 84%, rgba(216,154,118,.30), rgba(158,110,126,.13) 46%, rgba(158,110,126,0) 74%),
  linear-gradient(180deg,#111A31 0%,#1E2C48 32%,#33405A 60%,#454B66 84%,#494E6A 100%)}

a{text-decoration:none}
html[data-scene="day"] body,html:not([data-scene]) body{color:#2C2826}
html[data-scene="dusk"] body{color:#FAF6EE}
html[data-scene="day"] a,html:not([data-scene]) a{color:#2B3A58}
html[data-scene="dusk"] a{color:#FFFCF6}
html[data-scene="day"] a:hover,html:not([data-scene]) a:hover{color:#5C321B}
html[data-scene="dusk"] a:hover{color:#FFFCF6}
.page h1,.page h2,.page p,.page li,.page .orn{transition:color .9s ease}
.page .tier{transition:border-color .9s ease}

/* language switcher: index.html lines 103-104 and 1427-1430 */
.langbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;
  justify-content:flex-end;align-items:center;padding:14px 22px;pointer-events:none}
.langs{pointer-events:auto;display:flex;gap:2px;background:rgba(250,246,238,.85);
  border:1px solid rgba(138,130,118,.35);border-radius:2px;padding:2px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.langs button,.langs a,.langs span{font-family:'Poppins','Helvetica Neue',Arial,sans-serif;font-weight:300;
  border:none;background:transparent;cursor:pointer;padding:6px 10px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#3E3831}
.langs a{text-decoration:none}
.langs a:hover{color:#2B3A58}
.langs a:focus-visible{outline:1px solid #2B3A58;outline-offset:2px}
.langs [aria-current="true"]{color:#FAF6EE;background:#2B3A58}
@media (pointer:coarse){.langs button,.langs a,.langs span{min-height:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center}}

main{padding:clamp(74px,9vh,104px) clamp(14px,4vw,44px) clamp(50px,8vh,90px)}
.sheet{max-width:76ch;margin:0 auto;padding:0 clamp(2px,1vw,10px)}
.page{display:none}
html:not([data-lang]) .page[data-lang="hr"],
html[data-lang="hr"] .page[data-lang="hr"],
html[data-lang="en"] .page[data-lang="en"],
html[data-lang="de"] .page[data-lang="de"],
html[data-lang="it"] .page[data-lang="it"]{display:block}

.orn{display:flex;align-items:center;gap:14px}
.orn::before,.orn::after{content:"";display:block;width:42px;height:1px;background:currentColor;opacity:.75}
.orn.mid{justify-content:center}
html[data-scene="day"] .orn,html:not([data-scene]) .orn{color:#A4633C}
html[data-scene="dusk"] .orn{color:#F4DCC6}

.masthead{text-align:center}
.masthead .orn{margin:30px 0 40px}
.masthead h1{animation:rise 1s cubic-bezier(.22,.61,.36,1) both .25s}
.masthead .orn{animation:rise 1s cubic-bezier(.22,.61,.36,1) both .45s}
h1{margin:0;font-family:'Lora',Georgia,serif;font-weight:500;
  font-size:clamp(25px,4.3vw,36px);letter-spacing:.16em;text-indent:.16em;line-height:1.22}
h2{margin:44px 0 0;font-family:'Lora',Georgia,serif;font-weight:500;font-size:19px;letter-spacing:.02em}
html[data-scene="day"] h1,html[data-scene="day"] h2,
html:not([data-scene]) h1,html:not([data-scene]) h2{color:#2B3A58}
html[data-scene="dusk"] h1,html[data-scene="dusk"] h2{color:#FFFCF6}

.doc{max-width:68ch;margin:0 auto}
.doc p{margin:14px 0 0;font-size:16px;line-height:1.9;text-wrap:pretty}
.doc p[data-note]{margin-top:34px;font-family:'Lora',Georgia,serif;font-style:italic;
  font-size:15px;line-height:1.8}
html[data-scene="day"] .doc p[data-note],html:not([data-scene]) .doc p[data-note]{color:#3E3831}
html[data-scene="dusk"] .doc p[data-note]{color:#FAF6EE}
.doc ul{margin:16px 0 0;padding:0;list-style:none}
.doc li{position:relative;margin:0 0 11px;padding-left:22px;font-size:16px;line-height:1.9;text-wrap:pretty}
.doc li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;transform:rotate(45deg)}
html[data-scene="day"] .doc li::before,html:not([data-scene]) .doc li::before{background:#A4633C}
html[data-scene="dusk"] .doc li::before{background:#F4DCC6}
.doc a{border-bottom:1px solid currentColor}
html[data-scene="day"] .doc a,html:not([data-scene]) .doc a{border-bottom-color:rgba(43,58,88,.5)}
html[data-scene="dusk"] .doc a{border-bottom-color:rgba(255,252,246,.5)}
html[data-scene="dusk"] .doc a:hover{border-bottom-color:#FFFCF6}

.foot{padding:54px 0 0;text-align:center}
.place{margin:30px 0 0;font-size:10.5px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase}
.tier{max-width:520px;margin:34px auto 0;padding-top:22px}
.siblings{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px}
.siblings a{font-size:11.5px}
.mail{margin:0;font-size:11.5px}
html[data-scene="day"] .place,html[data-scene="day"] .siblings a,html[data-scene="day"] .mail a,
html:not([data-scene]) .place,html:not([data-scene]) .siblings a,html:not([data-scene]) .mail a{color:#3E3831}
html[data-scene="dusk"] .place,html[data-scene="dusk"] .siblings a,html[data-scene="dusk"] .mail a{color:#FAF6EE}
html[data-scene="day"] .tier,html:not([data-scene]) .tier{border-top:1px solid rgba(140,79,43,.32)}
html[data-scene="dusk"] .tier{border-top:1px solid rgba(244,220,198,.4)}
html[data-scene="dusk"] .siblings a:hover,html[data-scene="dusk"] .mail a:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:560px){
  .siblings{gap:2px 18px}
  .siblings a{min-height:40px;display:flex;align-items:center;padding:0 1px}
  .mail{margin-top:6px}
  .mail a{min-height:44px;display:inline-flex;align-items:center;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}
@media print{
  *{animation:none !important}
  [data-reveal],[data-reveal]>*{opacity:1 !important;transform:none !important;transition:none !important}
  .langbar,.ground{display:none}
  html,html[data-scene] body,body{background:#fff;color:#2C2826}
  html[data-scene] h1,html[data-scene] h2{color:#2B3A58}
  html[data-scene] a,html[data-scene] a:hover{color:#2B3A58}
  html[data-scene] .orn{color:#A4633C}
  html[data-scene] .doc li::before{background:#A4633C}
  html[data-scene] .doc p[data-note],html[data-scene] .place,
  html[data-scene] .siblings a,html[data-scene] .mail a{color:#3E3831}
  html[data-scene] .doc a{border-bottom-color:rgba(43,58,88,.5)}
  html[data-scene] .tier{border-top-color:rgba(140,79,43,.32)}
  .sheet{max-width:none;padding:0}
  .doc p,.doc li{font-size:11pt;line-height:1.6}
}