/* alsdro.de umbrella — same system as design.alsdro.de / wedding.alsdro.de:
   24 px grid · type 28/16/14/12/11 · ease-out-quint · even photo veil · serif clock · roll links */
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/InterTight-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/InterTight-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Hedvig Letters Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/HedvigLettersSerif-latin.woff2') format('woff2'); }

:root { --canvas:#111; --ink:#f7f7f7; --muted:#828282; --overlay:#fff; --veil:rgba(8,8,8,.5); --gutter:24px; --ease:cubic-bezier(.22,1,.36,1); --serif:'Hedvig Letters Serif',Georgia,serif; --fw-display:550; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; background:#000; }
body { overflow:hidden; color:var(--ink); font-family:'Inter Tight',system-ui,sans-serif; font-size:14px; line-height:17px; letter-spacing:-.28px; -webkit-font-smoothing:antialiased; }
a, button { color:inherit; font:inherit; letter-spacing:inherit; background:none; border:0; cursor:pointer; text-decoration:none; }
:focus-visible { outline:1px solid var(--ink); outline-offset:-4px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.slide { position:relative; display:inline-block; vertical-align:baseline; }
.slide .clip { position:relative; display:block; overflow:hidden; height:var(--h,20px); }
.slide .ph { visibility:hidden; display:block; white-space:nowrap; }
.slide .rest, .slide .up { position:absolute; left:0; top:0; white-space:nowrap; transition:transform .3s var(--ease); }
.slide .up { transform:translateY(100%); }
.slide:hover .rest { transform:translateY(-100%); }
.slide:hover .up { transform:translateY(0); }

.top { position:fixed; top:0; left:0; right:0; z-index:10; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:var(--gutter); align-items:baseline; padding:var(--gutter); color:var(--overlay); mix-blend-mode:difference; font-size:16px; line-height:20px; letter-spacing:-.34px; }
.brand { grid-column:span 2; display:flex; align-items:baseline; gap:6px; min-width:0; }
.suffix { opacity:.5; font-size:12px; line-height:1; letter-spacing:0; white-space:nowrap; }
.tz { grid-column:span 2; display:flex; align-items:baseline; gap:6px; }
.clock { font-family:var(--serif); font-size:17px; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums; }
.links { grid-column:span 2; display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.nav { display:flex; gap:6px; }
.pill { position:relative; z-index:1; display:inline-flex; align-items:center; height:20px; padding:0 4px; color:#000; font-size:11px; line-height:11px; letter-spacing:0; text-transform:uppercase; font-weight:550; }
.pill::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--overlay); transition:inset .16s ease; }
.pill:hover::before { inset:-2px; }

/* ───── three doors ───── */
main { position:fixed; inset:0; }
.doors { display:flex; height:100%; }
.door { position:relative; flex:1 1 0; min-width:0; overflow:hidden; display:flex; align-items:flex-end; padding:var(--gutter); transition:flex-grow .8s var(--ease); background:#0b0b0b; isolation:isolate; }
.door + .door { border-left:1px solid rgba(255,255,255,.14); }
.doors:hover .door { flex-grow:.8; }
.doors .door:hover, .doors .door:focus-visible { flex-grow:1.7; }
.bg { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.bg img { width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 2.4s var(--ease), opacity .6s ease; }
.door::after { content:''; position:absolute; inset:0; z-index:-1; background:var(--veil); transition:background .6s ease; }   /* one even veil, no gradient */
.door:hover::after { background:rgba(8,8,8,.32); }
.door:hover .bg img { transform:scale(1); }
.door-design .bg img { object-position:50% 50%; }
.door-wedding .bg img { object-position:50% 30%; }
/* Solutions has no photograph: a quiet field with a 24 px grid */
.door-solutions { background:#161616; }
.door-solutions .bg i { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:24px 24px; background-position:-1px -1px; }
.door-solutions::after { background:transparent; }

.no { position:absolute; top:calc(var(--gutter) * 3); left:var(--gutter); font-family:var(--serif); font-size:17px; line-height:1; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; }
.copy { display:block; width:100%; max-width:34ch; padding-bottom:calc(var(--gutter) * 1.2); }
.copy > span { display:block; }
.host { margin-bottom:10px; font-size:12px; line-height:14px; letter-spacing:-.12px; color:rgba(255,255,255,.6); }
.name { font-size:28px; line-height:30px; letter-spacing:-1.12px; font-weight:var(--fw-display); }
.line { margin-top:10px; font-size:14px; line-height:17px; max-width:30ch; }
.meta { margin-top:14px; font-size:12px; line-height:14px; letter-spacing:-.12px; color:rgba(255,255,255,.6); }
.door .line, .door .meta { opacity:.0; transform:translateY(8px); transition:opacity .5s ease, transform .6s var(--ease); }
.door:hover .line, .door:hover .meta, .door:focus-visible .line, .door:focus-visible .meta { opacity:1; transform:none; }
.door:hover .meta { opacity:.6; }
@media (hover:none) { .door .line, .door .meta { opacity:1; transform:none; } }

.foot { position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; gap:16px; align-items:baseline; padding:var(--gutter); pointer-events:none; color:rgba(255,255,255,.55); font-size:11px; line-height:14px; letter-spacing:0; }
.foot a { pointer-events:auto; white-space:nowrap; }
.foot { --h:14px; }
.foot > :first-child { margin-right:auto; }
.foot, .door .copy { }
.copy { margin-bottom:calc(var(--gutter) * 1.4); }

/* ───── Intro overlay ───── */
.info { position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; color:var(--ink); background:rgba(17,17,17,.82); -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s; }
.info.open { opacity:1; visibility:visible; }
.info[hidden] { display:flex; }
.info-inner { position:relative; width:100%; padding:var(--gutter); padding-bottom:calc(var(--gutter) * 2.4); }
.sentence { max-width:40ch; margin-bottom:clamp(48px,12vh,140px); font-size:28px; line-height:30px; letter-spacing:-1.12px; font-weight:600; }
.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gutter); }
.facts dt { margin-bottom:8px; color:var(--muted); font-size:12px; line-height:14px; letter-spacing:-.12px; }
.facts dd a, .facts dd > span { display:block; }
.facts dd a:hover { opacity:.55; }
.facts dd .sub { display:block; color:var(--muted); font-variant-numeric:tabular-nums; }
.facts .w { display:block; margin-bottom:9px; }
.close { position:absolute; right:var(--gutter); bottom:var(--gutter); }

/* ───── phone: three stacked rows ───── */
@media (max-width:767px) {
  body { overflow:hidden; }
  .top { grid-template-columns:1fr auto; row-gap:6px; font-size:14px; }
  .brand { grid-column:1; } .suffix { display:none; } .links { gap:12px; } .tz { display:none; } .links { grid-column:2; }
  .doors { flex-direction:column; }
  .door + .door { border-left:0; border-top:1px solid rgba(255,255,255,.14); }
  .doors:hover .door, .doors .door:hover { flex-grow:1; }
  .door { padding:var(--gutter) var(--gutter) calc(var(--gutter) * 1.6); }
  .no { display:none; }
  .copy { margin-bottom:0; padding-bottom:0; }
  .door .line { opacity:1; transform:none; } .door .meta { display:none; }
  .name { font-size:22px; line-height:24px; letter-spacing:-.88px; }
  .foot { display:none; }
  .facts { grid-template-columns:1fr 1fr; row-gap:28px; }
  .sentence { font-size:22px; line-height:24px; letter-spacing:-.88px; }
}
@media (prefers-reduced-motion:reduce) { .door, .bg img, .slide .rest, .slide .up, .info, .door .line, .door .meta { transition:none; } }