/* alsdro.de portfolio — system taken over from wedding.alsdro.de:
   24 px grid · type steps 28 / 16 / 14 / 12 / 11 · ease-out-quint · even photo overlay · clock in serif · roll links · wipe between pages */

@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;
  --photo-overlay: rgba(8, 8, 8, .5);   /* one even veil over photo and film, no gradient bands */
  --gutter: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --serif: 'Hedvig Letters Serif', Georgia, serif;
  --fw-display: 550;                    /* names and titles; try ?w=400 / 600 */
  --case: none;                         /* try ?case=uppercase */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #000; }
body {
  min-height: 100%;
  background: var(--canvas); color: var(--ink);
  font-family: var(--font, 'Inter Tight'), system-ui, sans-serif;
  font-weight: 400; font-size: 14px; line-height: 17px; letter-spacing: -.28px;
  -webkit-font-smoothing: antialiased;
}
body.home { height: 100%; overflow: hidden; background: #000; }
html:has(body.home), html:has(body.home) body { height: 100%; }
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; }

/* ───── roll link: the text slides up and its twin slides in ───── */
.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); }

/* ───── header: brand left, clock centre, links right (blend keeps it readable on any picture) ───── */
.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;
}
.work .top { position: absolute; }
.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; }

/* ───── home: stacked pictures, even veil ───── */
#stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.shade { position: fixed; inset: 0; z-index: 1; background: var(--photo-overlay); pointer-events: none; }
.hero {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .7s ease;
  pointer-events: none; will-change: opacity;
}
.hero.on { opacity: 1; }
.hero .tile {
  display: block; width: auto; height: auto;
  max-width: min(var(--w, 710px), 46vw); max-height: 72vh; object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}
/* title picture/film: sized from the height, 140 % of the screen height (rule), full width, centred */
.cover {
  position: absolute; left: 0; width: 100%;
  height: calc(var(--zoom, 1.4) * 100%); top: calc((1 - var(--zoom, 1.4)) / 2 * 100%);
  object-fit: cover; object-position: var(--focus, 50% 50%); background: #000;
}
.cover[hidden] { display: none; }
.hero[data-mode="cover"], .hero[data-mode="placeholder"] { display: block; }
.hero:not([data-mode="tile"]) .tile, .hero:not([data-mode="cover"]) .cover { display: none; }
.hero .cover, .hero .tile { transform: scale(1.035); transition: transform 2.4s var(--ease); }
.hero.on .cover, .hero.on .tile { transform: scale(1); }
.hero .cover { translate: 0 var(--py, 0); }
video.cover { opacity: 0; transition: opacity .8s ease, transform 2.4s var(--ease); }
video.cover.playing { opacity: 1; }

.pending { position: fixed; right: calc(var(--gutter) * 3); top: 42%; z-index: 2; font-size: 12px; line-height: 14px; letter-spacing: -.12px; color: rgba(255, 255, 255, .55); }
.pending[hidden] { display: none; }

/* ───── home titles: one vertical column of cards (as on the wedding page), the active card bright, the column glides ───── */
.home main { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.titles { position: absolute; left: 0; top: 0; width: max(20vw, 244px); will-change: transform; }
.card { display: block; min-height: 133px; padding: var(--gutter); color: var(--overlay); opacity: .4; pointer-events: auto; }
.card .t, .card .d { display: block; font-size: 14px; line-height: 17px; letter-spacing: -.28px; font-weight: var(--fw-display); }
.card .t { text-transform: var(--case, none); }
.card .m { display: block; margin-top: 6px; font-size: 12px; line-height: 14px; letter-spacing: -.12px; }
.card .m span { display: block; }
.card .d { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* list (phone, or ?layout=list) */
.index { display: none; position: absolute; left: var(--gutter); top: 0; list-style: none; pointer-events: none; will-change: transform; }
.index.bottom { top: auto; bottom: calc(var(--gutter) * 1.6 + env(safe-area-inset-bottom, 0px)); will-change: auto; }
.index a {
  display: inline-block; pointer-events: auto; color: rgba(255, 255, 255, .5);
  font-size: 16px; line-height: 1.5; letter-spacing: -.34px; font-weight: var(--fw-display); text-transform: var(--case, none);
  transition: color .4s ease;
}
.index a.active, .index a:focus-visible { color: var(--overlay); }
.tag { margin-left: .6em; font-size: 11px; line-height: 1; letter-spacing: 0; font-weight: 550; text-transform: uppercase; color: var(--muted); }
.index .tag { opacity: 0; transition: opacity .4s ease; }
.index a.active .tag { opacity: 1; }
.mode-cards .index, .mode-list .titles { display: none; }
.mode-list .index { display: block; }

.count { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 4; font-size: 12px; line-height: 14px; letter-spacing: -.12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mode-cards .count { display: none; }

/* ───── 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; white-space: pre-line; }
.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 { font-size: 14px; line-height: 17px; letter-spacing: -.28px; }
.facts dd a { 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; }
.facts .w .sub { display: block; }
.close { position: absolute; right: var(--gutter); bottom: var(--gutter); }
.noscript { position: fixed; bottom: var(--gutter); left: var(--gutter); z-index: 5; color: var(--muted); }

/* ───── work page ───── */
.first { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: var(--gutter); }
.bleed { position: absolute; inset: 0; z-index: 0; overflow: hidden; display: none; }
.bleed .cover { translate: 0 var(--sy, 0px); will-change: translate; }
body.has-bleed .bleed { display: block; }
.first .shade { position: absolute; z-index: 1; display: none; }
body.has-bleed .first .shade { display: block; }
.tile {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: auto; height: auto; max-width: min(var(--w, 710px), 46vw); max-height: 50vh; object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}
body.has-bleed .tile { display: none; }
.title { position: relative; z-index: 2; font-size: 28px; line-height: 30px; letter-spacing: -1.12px; font-weight: 600; text-transform: var(--case, none); }
.title .tag { margin-left: .5em; font-size: 12px; letter-spacing: -.12px; color: rgba(255, 255, 255, .6); text-transform: none; font-weight: 400; vertical-align: baseline; }

.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; row-gap: 16px; padding: var(--gutter); }
.credits .fields, .more .fields { padding: 0; }
.field .lab { color: var(--muted); }
.field .val { color: var(--ink); }
.field .val span { display: block; }
.field .val a:hover { opacity: .55; }

.lede { padding: 56px var(--gutter) 80px; }
.lede[hidden], .work-list[hidden] { display: none; }
.work-list { padding: 0 var(--gutter) 80px; }
.work-list ol { list-style: none; max-width: 36em; counter-reset: w; }
.work-list li { counter-increment: w; display: grid; grid-template-columns: 32px 1fr; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 16px; line-height: 20px; letter-spacing: -.34px; }
.work-list li::before { content: '0' counter(w); font-family: var(--serif); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lede p { max-width: 36em; font-size: 20px; line-height: 26px; letter-spacing: -.4px; font-weight: 450; color: var(--ink); }
.first .pending { position: absolute; right: var(--gutter); top: 50%; z-index: 2; }
.seq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 var(--gutter); }
.seq[hidden] { display: none; }
.fig { margin: 0; }
.fig.full { grid-column: 1 / -1; }
.fig img { display: block; width: 100%; height: auto; max-width: calc(var(--w) * 1.2px); margin-inline: auto; }
.fig.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

.credits, .more { padding: 80px var(--gutter) 0; }
.label { margin-bottom: 8px; color: var(--muted); font-size: 14px; line-height: 17px; font-weight: 400; letter-spacing: -.28px; }
.more ul { list-style: none; }
.more a { --h: 30px; font-size: 28px; line-height: 30px; letter-spacing: -1.12px; font-weight: 600; color: var(--ink); }
.more .slide .clip { height: 30px; }
.more .tag { display: none; }
.foot { display: flex; justify-content: space-between; align-items: baseline; padding: 80px var(--gutter) var(--gutter); color: var(--muted); font-size: 12px; line-height: 14px; letter-spacing: -.12px; }

/* appear on scroll: 24 px rise, .7 s ease-out-quint */
.appear, .fig { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.appear.show, .fig.show { opacity: 1; transform: none; }

/* wipe between pages: the new page slides up over the old one */
@view-transition { navigation: auto; }
@keyframes wipe-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: wipe-up .9s var(--ease) both; }

/* ───── small screens ───── */
@media (max-width: 720px) {
  .top { display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px; font-size: 14px; letter-spacing: -.28px; }
  .tz { display: none; }
  .links { justify-content: flex-start; gap: 12px; }
  .slide .clip { height: 17px; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seq { grid-template-columns: 1fr; }
  .fig.half { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .sentence { font-size: 22px; line-height: 24px; letter-spacing: -.88px; }
  .hero .tile { max-width: 66vw; max-height: 34vh; }
  .pending { top: 24%; right: auto; left: var(--gutter); }
}

@media (prefers-reduced-motion: reduce) {
  .hero, .info, .card, .appear, .fig, .slide .rest, .slide .up, .hero .cover, .hero .tile { transition: none; }
  ::view-transition-new(root) { animation: none; }
}

.info .legal { position: absolute; left: var(--gutter); bottom: var(--gutter); display: flex; gap: 16px; color: var(--muted); font-size: 12px; line-height: 14px; letter-spacing: -.12px; }
.info .legal a:hover { color: var(--ink); }
.foot { gap: 16px; }