/* The front page of siteshowroom.nl — proposal A ("poster"), approved 26-09-2026.
   The same structure as the login screen of hosting.althi.digital: heading on the left, card on the right. Panel,
   gate and showroom are supposed to have one face; hence the same tokens, the same fonts and
   the same proportions as theme althidigital-studio 1.4.2.
   Anton in the heading only, everything else Futura PT. */
@font-face { font-family: "Futura PT"; font-weight: 400; font-display: swap; src: url("/_pwd/fonts/futura-book.woff2") format("woff2"); }
@font-face { font-family: "Futura PT"; font-weight: 600; font-display: swap; src: url("/_pwd/fonts/futura-demi.woff2") format("woff2"); }
@font-face { font-family: "Anton";    font-weight: 400; font-display: swap; src: url("/_pwd/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
/* Czech has ě š č ř ž ů; those are in the latin-ext file. */
@font-face { font-family: "Anton"; font-weight: 400; font-display: swap; src: url("/_pwd/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --inkt: #1F1D1A; --rood: #C00000; --rood-donker: #9A0000; --papier: #FAF7F1;
  --zand: #E4DDCF; --grijs: #6B6459; --grijs-licht: #8A8276; --display-grijs: #9B9488;
  --rand: 72px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--papier); color: var(--inkt);
       font: 400 15px/1.5 "Futura PT", "Helvetica Neue", Arial, sans-serif;
       -webkit-font-smoothing: antialiased;
       display: flex; flex-direction: column; }

/* --- header and footer bar --------------------------------------------------------------------- */
.balk { display: flex; justify-content: space-between; align-items: center;
        padding: 26px var(--rand); gap: 24px; }
.merk img { height: 34px; width: auto; display: block; }
.voetbalk { padding: 22px var(--rand); }
.voetbalk .voet { margin: 0; }
.voet { font-size: 12px; letter-spacing: .08em; color: var(--grijs-licht); line-height: 1.7; }
/* The name of the studio is written the way the wordmark writes it, with the same colours:
   Althi in ink, Digital and .studio in red (Thierry, 26-09-2026). */
.woordmerk { text-decoration: none; font-weight: 600; letter-spacing: .02em; }
.woordmerk__inkt { color: var(--inkt); }
.woordmerk__rood { color: var(--rood); }
.woordmerk:hover .woordmerk__inkt, .woordmerk:hover .woordmerk__rood { color: var(--rood-donker); }

/* The language choice: the chosen language is at the front. That is not decoration — whoever reads a row starts on the left,
   and the language you already speak belongs there (Thierry, 26-09-2026). */
.taal { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .1em; }
.taal button { border: 0; background: none; padding: 4px 2px; font: inherit; letter-spacing: inherit;
               color: var(--grijs); cursor: pointer; }
.taal button:hover { color: var(--inkt); }
.taal button[aria-current="true"] { color: var(--inkt); font-weight: 600; }
.taal .streep { color: var(--zand); }

/* --- sheet ------------------------------------------------------------------------------------- */
.blad { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: center;
        gap: 88px; padding: 24px var(--rand) 40px; position: relative; overflow: hidden; }

/* The seed from the petri dish of althidigital.studio. It drifts across the empty part of the
   sheet; it catches no mouse clicks and sits under the card, so it is never in the way. */
.zaadje { position: absolute; left: 0; top: 0; width: 190px; height: auto; max-width: none;
          display: block; pointer-events: none; will-change: transform; z-index: 0; }
.kop, .kaart { position: relative; z-index: 1; }
/* On a phone everything is stacked and there is no empty area left to drift in: the
   dish then ended up on top of the heading. There we leave it out — an ornament must never
   go over the text (measured 26-09-2026). */
@media (max-width: 860px) { .zaadje { display: none; } }
.kop .eyebrow { margin: 0; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--grijs); }
.kop h1 { font: 400 clamp(38px, 5.4vw, 82px)/1.04 "Anton", Impact, sans-serif; text-transform: uppercase;
          letter-spacing: .005em; margin: 22px 0 0; }
/* Czech: the háček above Š, Ž and Ě sticks out far above the cap height and collides at a
   line spacing of .94 with the line above it. Set more generously for that language only; English and
   Dutch keep the tight setting (measured 26-09-2026). */
:lang(cs) .kop h1 { line-height: 1.3; }
.kop .grijs { color: var(--display-grijs); }
.kop .punt { color: var(--rood); }
.kop .onder { margin: 34px 0 0; max-width: 32em; color: var(--grijs); font-size: 16px; }

/* --- process ribbon ------------------------------------------------------------------------ */
.proces { margin-top: 44px; max-width: 560px; }
.proces__lint { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
                position: relative; height: 10px; }
.proces__lint::before { content: ''; position: absolute; left: 3px; right: 3px; top: 50%;
                        height: 1px; background: #C9C2B4; }
.proces__stip { width: 7px; height: 7px; background: var(--display-grijs); position: relative;
                z-index: 1; justify-self: start; }
.proces__stip--nu { background: var(--rood); width: 9px; height: 9px; }
.proces__namen { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px;
                 font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
                 color: var(--grijs-licht); }
.proces__namen i { font-style: normal; }
.proces__namen b { font-weight: 400; }
.proces__namen .nu { color: var(--inkt); }
.proces__namen .nu b { font-weight: 600; }
.proces__hier { margin-top: 14px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
                color: var(--rood); }

/* --- card -------------------------------------------------------------------------------------- */
.kaart { background: #fff; box-shadow: 0 2px 10px rgba(31,29,26,.10); }
/* Identical to the login screen of hosting.althi.digital (theme 1.4.2): 60 px high and shifted by
   16/14 px, so that the *wordmark* is in the middle of the card and "studio" hangs below it. */
.kaart__kop { padding: 18px 36px; border-bottom: 1px solid var(--zand); text-align: center; }
.kaart__kop img { height: 60px; width: auto; max-width: 100%; transform: translate(16px, 14px); }
.kaart__binnen { padding: 26px 34px 28px; }
.veld + .veld { margin-top: 20px; }
label { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
        color: var(--grijs); margin-bottom: 8px; }
input { width: 100%; padding: 12px 14px; border: 1px solid #9A9A9A; border-radius: 0; background: #fff;
        font: inherit; color: var(--inkt); }
input::placeholder { color: var(--grijs-licht); }
input:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 3px rgba(192,0,0,.35); }

.knop { width: 100%; margin-top: 24px; border: 1px solid var(--inkt); border-radius: 0;
        background: var(--inkt); color: #fff; padding: 13px 26px; font: inherit; letter-spacing: .04em;
        cursor: pointer; }
.knop:hover { background: var(--rood); border-color: var(--rood); }
.knop[disabled] { opacity: .6; cursor: default; }
.hint { margin: 14px 0 0; font-size: 13px; color: var(--grijs); }
.fout { margin: 0 0 16px; padding: 10px 12px; background: #F6E7E7; border-left: 3px solid var(--rood);
        color: var(--inkt); }

/* --- narrower than a desktop ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --rand: 40px; }
  .blad { gap: 48px; grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 860px) {
  :root { --rand: 24px; }
  .blad { grid-template-columns: 1fr; gap: 34px; padding-bottom: 32px; align-content: center; }
  .kop h1 { font-size: clamp(34px, 9vw, 54px); }
  .kop .onder { margin-top: 22px; font-size: 15px; max-width: none; }
  .kaart { max-width: 420px; width: 100%; }
  .proces { margin-top: 30px; max-width: none; }
  .proces__namen { font-size: 10px; letter-spacing: .12em; }
  .proces__hier { font-size: 11px; letter-spacing: .12em; }
}
@media (max-width: 460px) {
  .balk { padding: 18px var(--rand); }
  .merk img { height: 28px; }
  .kaart__binnen { padding: 22px 22px 24px; }
  .kaart__kop { padding: 16px 22px; }
  .taal { gap: 6px; font-size: 12px; }
  /* Too narrow for four names side by side: then only the numbers, and the line tells the rest. */
  .proces__namen b { display: none; }
  .proces__namen { font-size: 11px; letter-spacing: .18em; }
}
/* A low screen in landscape: do not centre vertically, otherwise the button falls off-screen. */
@media (max-height: 560px) and (orientation: landscape) {
  .blad { align-items: start; }
}

/* Centred on tablet and desktop: the content keeps at most 1120 px (the same measure as the login screen of
   hosting.althi.digital) and the rest of the width is split evenly left and right. Header and footer follow
   the same edges, so logo and language choice line up with heading and card. */
:root { --breed: 1120px; --zij: max(var(--rand), calc((100% - var(--breed)) / 2)); }
.balk, .voetbalk, .blad { padding-left: var(--zij); padding-right: var(--zij); }
@media (max-width: 860px) {
  .blad { justify-items: center; }
  .kop { width: 100%; max-width: 560px; }
}