/* ============ Tokens ============ */
:root{
  --color-bg: #FFFFFF;
  --color-bg-alt: #D3E2F2;
  --color-ink: #0D2440;
  --color-ink-soft: #2E5E99;
  --color-muted: #4A6A94;
  --color-line: #C7D8EC;
  --color-white: #FDFCFA;
  --color-accent: #2E5E99;
  --color-accent-soft: #7BA4D0;

  --surface-page: var(--color-bg);
  --surface-card: var(--color-bg-alt);
  --surface-inverse: var(--color-ink);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-muted: var(--color-muted);
  --text-on-inverse: var(--color-white);
  --border-hairline: var(--color-line);
  --link-accent: var(--color-accent);
  --link-accent-hover: var(--color-accent-soft);
  --focus-ring: var(--color-accent);

  --font-display: 'Libre Caslon Condensed', Georgia, serif;
  --font-body: 'Brutalist Mono', ui-monospace, monospace;

  --fs-eyebrow: 12px;
  --fs-nav: 14px;
  --fs-body: 17px;
  --fs-body-lg: 20px;
  --fs-row: clamp(28px, 4vw, 44px);
  --fs-h2: clamp(32px, 5vw, 56px);
  --fs-hero: clamp(56px, 10vw, 156px);
  --fs-statement: clamp(28px, 4vw, 48px);

  --lh-tight: 0.98;
  --lh-snug: 1.15;
  --lh-body: 1.6;

  --ls-tight: -0.03em;
  --ls-normal: -0.01em;
  --ls-wide: 0.12em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-full: 999px;

  --container-max: 1400px;
  --container-pad: clamp(20px, 5vw, 64px);
  --hairline: 1px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;
}

[data-theme="dark"]{
  --color-bg: #0B1B2E;
  --color-bg-alt: #132A42;
  --color-ink: #E9EFF7;
  --color-ink-soft: #9FC0E8;
  --color-muted: #7E9BC2;
  --color-line: #233C58;
  --color-white: #0B1B2E;
  --color-accent: #7BA4D0;
  --color-accent-soft: #2E5E99;

  --surface-page: var(--color-bg);
  --surface-card: var(--color-bg-alt);
  --surface-inverse: var(--color-ink);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-muted: var(--color-muted);
  --text-on-inverse: var(--color-white);
  --border-hairline: var(--color-line);
  --link-accent: var(--color-accent);
  --link-accent-hover: var(--color-accent-soft);
  --focus-ring: var(--color-accent);
}

/* ============ Fonts ============ */
@font-face{font-family:'Brutalist Mono';src:url('../assets/fonts/BrutalistMono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Brutalist Mono';src:url('../assets/fonts/BrutalistMono-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Brutalist Mono';src:url('../assets/fonts/BrutalistMono-Oblique.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Brutalist Mono';src:url('../assets/fonts/BrutalistMono-BoldOblique.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('../assets/fonts/LibreCaslonCondensed-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('../assets/fonts/LibreCaslonCondensed-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('../assets/fonts/LibreCaslonCondensed-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('../assets/fonts/LibreCaslonCondensed-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('../assets/fonts/LibreCaslonCondensed-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('../assets/fonts/LibreCaslonCondensed-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('../assets/fonts/LibreCaslonCondensed-SemiBoldItalic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('../assets/fonts/LibreCaslonCondensed-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}

/* Libre Caslon Condensed ships a historical "st" ligature that renders as
   something closer to "ft" — reads as a typo, so switch it off wherever
   the display font is used. */
.hero h1,.category-title,.category-subtitle,.project-title,.philosophy p{
  font-variant-ligatures:none;
}

/* ============ Base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  transition:background .6s ease,color .6s ease;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad)}

/* ============ Header ============ */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  height:88px;
}
.site-header img{height:22px}
.header-right{display:flex;align-items:center;gap:var(--space-3)}

.clock{
  font-family:var(--font-body);
  font-size:11px;
  color:var(--text-muted);
  text-align:right;
  line-height:1.4;
}
.clock .hours{display:block}
.clock .time{
  display:block;
  font-variant-numeric:tabular-nums;
  font-size:13px;
  color:var(--text-secondary);
}

.theme-toggle{
  width:16px;height:16px;border-radius:50%;
  border:1px solid var(--border-hairline);
  background:linear-gradient(90deg, var(--color-ink) 50%, transparent 50%);
  padding:0;cursor:pointer;flex:none;
}

/* ============ Hero ============ */
.hero{
  padding-top:var(--space-9);padding-bottom:var(--space-9);
  text-align:center;display:flex;flex-direction:column;align-items:center;
}
.hero h1{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);
  margin:0;
}
.hero p{
  font-family:var(--font-body);margin-top:var(--space-6);font-size:13px;
  color:var(--text-secondary);max-width:420px;line-height:1.7;
}
.hero .cta{margin-top:var(--space-6)}

/* ============ Button ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:13px;letter-spacing:var(--ls-normal);
  text-decoration:none;cursor:pointer;border:none;
  transition:background var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out);
}
.btn-primary{
  background:var(--color-ink);color:var(--color-white);
  border-radius:var(--radius-full);
  padding:14px 28px;
}
.btn-primary:hover{background:var(--color-accent)}
.btn-link{
  color:var(--text-primary);
  gap:6px;
}
.btn-link::after{content:"\2192";margin-left:6px;transition:transform var(--duration-base) var(--ease-out)}
.btn-link:hover{color:var(--link-accent)}
.btn-link:hover::after{transform:translateX(3px)}

/* ============ Eyebrow ============ */
.eyebrow{
  font-family:var(--font-body);font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--text-muted);margin:0;
}

/* ============ Work section ============ */
.work-section{padding-bottom:var(--space-8)}
.work-header{padding-bottom:var(--space-3)}

/* ============ Accordion ============ */
.accordion{border-top:var(--hairline) solid var(--border-hairline)}
.category{border-bottom:var(--hairline) solid var(--border-hairline)}

.category-toggle{
  width:100%;background:none;border:none;padding:var(--space-5) 0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  cursor:pointer;text-align:left;color:var(--text-primary);
  scroll-margin-top:var(--space-5);
}
.category-toggle-left{display:flex;align-items:center;gap:var(--space-4);flex:1;min-width:0}
.category-icon{
  font-family:var(--font-body);font-size:20px;line-height:1;flex:none;
  width:24px;display:inline-block;transform:rotate(0deg);
  transition:transform var(--duration-base) var(--ease-out);
}
.category.open .category-icon{transform:rotate(135deg)}
.category-title{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:var(--fs-row);letter-spacing:var(--ls-tight);margin:0;
}
.category-preview{
  display:flex;gap:10px;align-items:center;flex:none;
  width:470px;
}
.category.open .category-preview{display:none}
.preview-thumb{
  /* Fixed total row width and fixed height (matches the 2-image row) —
     fewer images split the row into fewer/wider tiles, and object-fit:cover
     zooms the photo to fill that height instead of the tile getting taller. */
  flex:1;height:113px;border-radius:8px;box-sizing:border-box;
  background:var(--color-white);
  overflow:hidden;min-width:0;
}
.preview-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.category-body{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--duration-slow) var(--ease-out),opacity var(--duration-base) var(--ease-out);
}
.category.open .category-body{opacity:1}
.category-body-inner{padding-bottom:var(--space-6)}
.category-subtitle{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:var(--fs-body-lg);color:var(--text-secondary);
  margin:0 0 var(--space-6);
  max-width:460px;
}

/* ============ Project ============ */
.project{
  padding-bottom:100px;
  display:flex;flex-direction:column;gap:var(--space-4);
}
.project-head{
  display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
}
.project-meta{max-width:280px}
.project-title{
  font-family:var(--font-display);font-size:20px;margin:0 0 4px;
}
.project-type{font-size:12px;color:var(--text-muted);margin:0 0 2px}
.project-credits{font-size:11px;color:var(--text-muted);margin:0}
.project-desc{
  flex:1;min-width:220px;max-width:420px;
  font-size:13px;line-height:1.7;color:var(--text-secondary);
}
.project-desc .ansehen{
  display:inline-block;margin-top:var(--space-2);font-size:12px;
  color:var(--link-accent);text-decoration:underline;
}

/* ============ Carousel ============ */
.carousel{
  display:flex;align-items:flex-start;gap:16px;overflow-x:auto;scrollbar-width:none;
  cursor:grab;user-select:none;
  -ms-overflow-style:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel.dragging{cursor:grabbing}
.thumb{
  /* Fixed height, width follows the aspect ratio — landscape and portrait
     tiles line up at the same height instead of the same width. */
  flex:none;height:293px;aspect-ratio:4/3;box-sizing:border-box;
  background:var(--color-white);
  cursor:zoom-in;
}
.thumb.portrait{aspect-ratio:3/4}
.thumb img{width:100%;height:100%;object-fit:contain;display:block}

/* ============ Lightbox ============ */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,36,64,.92);
  opacity:0;pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-out);
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox-content{
  max-width:90vw;max-height:85vh;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-content img{
  max-width:90vw;max-height:85vh;display:block;
  border:2px solid var(--color-white);box-sizing:border-box;
}
.lightbox-placeholder{
  width:min(70vw, 720px);aspect-ratio:4/3;
  background:var(--color-white);border:2px solid var(--color-white);
  box-sizing:border-box;
}
.lightbox-placeholder.portrait{width:min(50vw, 520px);aspect-ratio:3/4}
.lightbox-close{
  position:absolute;top:var(--space-5);right:var(--container-pad);
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--color-white);background:transparent;color:var(--color-white);
  font-family:var(--font-body);font-size:22px;line-height:1;cursor:pointer;
}

/* ============ Philosophy ============ */
.philosophy{
  padding-top:var(--space-9);padding-bottom:var(--space-9);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-7);
  text-align:center;
}
.philosophy p{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:var(--fs-statement);letter-spacing:var(--ls-tight);line-height:var(--lh-snug);
  margin:0;max-width:760px;
}

/* ============ About ============ */
.about{
  padding-top:var(--space-8);padding-bottom:var(--space-9);
  border-top:var(--hairline) solid var(--border-hairline);
}
.about-body{
  margin-top:var(--space-5);font-size:13px;color:var(--text-secondary);
  line-height:1.8;max-width:640px;
}
.about-body em{font-style:italic;color:var(--text-primary)}

/* ============ Footer ============ */
.site-footer{
  padding-top:var(--space-6);padding-bottom:var(--space-7);
  border-top:var(--hairline) solid var(--border-hairline);
  display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;
}
.nav-link{
  font-family:var(--font-body);font-size:var(--fs-nav);color:var(--text-primary);
  text-decoration:none;position:relative;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:currentColor;transition:right var(--duration-base) var(--ease-out);
}
.nav-link:hover::after{right:0}
.copyright{margin-left:auto;font-size:12px;color:var(--text-muted)}

/* ============ Legal pages ============ */
.legal-section{max-width:640px;margin:0 auto;padding-top:var(--space-7);padding-bottom:var(--space-9)}
.legal-body{
  font-family:var(--font-body);margin-top:var(--space-5);font-size:13px;
  color:var(--text-secondary);line-height:1.8;
}
.legal-body p{margin:0 0 var(--space-4)}
.legal-body strong{color:var(--text-primary)}

/* ============ Scroll reveal ============ */
.reveal{
  opacity:0;transform:translateY(10px);
  transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out);
}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* ============ Responsive ============ */
@media (max-width:640px){
  .clock{display:none}
  .project-head{flex-direction:column}
  .thumb{height:210px}

  /* Category row: title + fixed-width preview strip no longer fit side by
     side — stack the preview onto its own full-width line instead of
     letting it push the row wider than the viewport. */
  .category-toggle{flex-wrap:wrap;row-gap:var(--space-4)}
  .category-toggle-left{flex-basis:100%}
  .category-preview{width:100%;flex-basis:100%}
  .preview-thumb{height:88px}

  .site-header img{height:18px}
  .lightbox-close{width:36px;height:36px;top:var(--space-4)}
}

@media (max-width:400px){
  .preview-thumb{height:72px}
}