/* Ziilo — CocioDark design. Taken over from www/styles.css (the original landing page); the descriptor and the
   statement are page content now (.z-front .z-content h2 / p), the divider between them is drawn by the h2. */
:root{color-scheme:dark;--background:#100e0c;--gold:#e3c198;--muted:#b8b0a7;--footer-text:#bcb5ad}
*{box-sizing:border-box}
html{min-height:100%;background:var(--background)}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--background) url('images/background.webp') center center/cover no-repeat;color:var(--gold);font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}

/* ----- Forside: the identity in the middle of the screen ------------------------------------------------------- */
.z-front{flex:1;display:grid;place-items:center;padding:80px 24px 70px;min-height:calc(100svh - 112px)}
.z-identity{text-align:center;width:100%;max-width:850px;animation:z-appear 1.3s ease-out both}
.z-front .z-monogram{display:block;width:clamp(112px,11vw,164px);height:auto;margin:0 auto 55px;filter:drop-shadow(0 5px 18px #0005)}
.z-title{margin:0;line-height:1}
.z-front .z-wordmark{display:block;width:clamp(240px,27vw,390px);height:auto;margin:0 auto}
/* The descriptor: the page's heading. */
.z-front .z-content h2{margin:39px 0 0;color:var(--gold);text-transform:uppercase;font-weight:350;font-size:clamp(12px,1.38vw,20px);line-height:1.8;letter-spacing:.36em;padding-left:.36em}
/* The divider, under the descriptor (moved back by half the padding, so it sits in the middle like the text). */
.z-front .z-content h2::after{content:"";display:block;width:66px;height:1px;margin:53px auto 52px;background:linear-gradient(90deg,#a77743,#edc88f,#a77743);transform:translateX(-.18em)}
/* The statement: the page's text. */
.z-front .z-content p{margin:0;color:var(--muted);font-size:clamp(15px,1.32vw,19px);font-weight:300;line-height:1.85;letter-spacing:.24em;padding-left:.24em}
.z-front .z-content p + p{margin-top:1em}
.z-front .z-content a{color:inherit;text-underline-offset:5px}

/* ----- Side: a readable text page (privacy policy) ------------------------------------------------------------- */
.z-header{padding:48px 20px 0;text-align:center}
.z-home{display:inline-flex;flex-direction:column;align-items:center;gap:18px;text-decoration:none;border-radius:2px}
.z-home:focus-visible{outline:1px solid var(--gold);outline-offset:8px}
.z-header .z-monogram{width:64px;height:auto;filter:drop-shadow(0 4px 12px #0005)}
.z-header .z-wordmark{width:132px;height:auto}
.z-page{flex:1;width:100%;max-width:760px;margin:0 auto;padding:48px 24px 80px}
.z-page .z-content{color:var(--muted);font-size:16px;font-weight:300;line-height:1.75;letter-spacing:.01em}
.z-page .z-content h1{margin:0 0 1.2em;color:var(--gold);text-align:center;text-transform:uppercase;font-weight:350;font-size:clamp(18px,2vw,24px);line-height:1.5;letter-spacing:.3em;padding-left:.3em}
.z-page .z-content h2{margin:2.2em 0 .5em;color:var(--gold);text-transform:uppercase;font-weight:400;font-size:14px;line-height:1.6;letter-spacing:.18em}
.z-page .z-content h3{margin:1.6em 0 .4em;color:var(--gold);font-weight:400;font-size:16px}
.z-page .z-content p,.z-page .z-content ul,.z-page .z-content ol{margin:0 0 1em}
.z-page .z-content li{margin:0 0 .35em}
.z-page .z-content strong{color:#d8cfc5;font-weight:500}
.z-page .z-content a{color:var(--gold);text-decoration:underline;text-decoration-color:#e3c19866;text-underline-offset:4px;transition:text-decoration-color .2s}
.z-page .z-content a:hover{text-decoration-color:currentColor}
.z-page .z-content a:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* ----- The company line at the bottom ------------------------------------------------------------------------- */
.z-footer{min-height:112px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:28px 20px;border-top:1px solid #b4916147;background:#0908074d;color:var(--footer-text);font-size:12px;letter-spacing:.12em;line-height:1.8}
.z-footer a{color:inherit;text-decoration:none;text-underline-offset:5px;transition:color .2s}
.z-footer a:hover{color:#f3d2a6;text-decoration:underline}
.z-footer a:focus-visible{outline:1px solid var(--gold);outline-offset:7px;border-radius:1px}
.z-bullet{font-size:9px;color:#bba082}
/* Discreet: small, dimmer, on its own line under the company details. */
.z-footer .z-privacy{flex-basis:100%;margin-top:-10px;text-align:center;font-size:10.5px;letter-spacing:.14em;color:#8f877e}

@keyframes z-appear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:600px){
  body{background-position:49% center}
  .z-front{padding:64px 20px 58px;min-height:calc(100svh - 100px)}
  .z-front .z-monogram{margin-bottom:39px}
  .z-front .z-content h2{max-width:340px;margin:29px auto 0;letter-spacing:.22em;padding-left:.22em;font-size:12px}
  .z-front .z-content h2::after{margin:37px auto 35px;width:48px;transform:translateX(-.11em)}
  .z-front .z-content p{letter-spacing:.13em;padding-left:.24em;font-size:15px}
  .z-header{padding-top:36px}
  .z-page{padding:36px 20px 64px}
  .z-footer{min-height:100px;gap:9px;font-size:12px;letter-spacing:.035em;padding:24px 16px}
  .z-footer .z-privacy{margin-top:-7px;letter-spacing:.06em}
}
@media(max-width:359px){
  .z-footer{column-gap:7px}
  .z-footer .z-bullet-email{display:none}
  .z-footer .z-email{flex-basis:100%;text-align:center}
  .z-front .z-content h2{font-size:12px;letter-spacing:.13em}
}
@media(prefers-reduced-motion:reduce){
  .z-identity{animation:none}
  .z-footer a,.z-page .z-content a{transition:none}
}