@font-face { font-family:"Whyte Inktrap"; src:url("fonts/WhyteInktrap-Light.otf")   format("opentype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Whyte Inktrap"; src:url("fonts/WhyteInktrap-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Whyte Inktrap"; src:url("fonts/WhyteInktrap-Medium.otf")  format("opentype"); font-weight:500; font-display:swap; }

:root {
  --brand:#fe5000;

  --pad-grid:    2.54vmin;    /* 10 white border inside the grid card */
  --gap-tile:    2.54vmin;    /* 10 */
  --tile-radius: 5.09vmin;    /* 20 */
  --media-radius:1.27vmin;    /*  5 */
  --tile-text-pad: 2.54vmin;  /* 10 */

  --detail-img:   2.54vmin;   /* 10 image inset */
  --detail-text:  5.09vmin;   /* 20 text inset */
  --detail-gap:   5.09vmin;   /* 20 gaps */

  --mail-size:26px;
  --tile-size:11px;
  --meta-size:3.3vmin;
  --body-size:3.4vmin;

  --c-purple:#c3a0e0; --c-green:#1e8a33; --c-red:#ed1c24;
  --c-yellow:#fdc300; --c-blue:#00a2dd; --c-magenta:#e6007e;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; background:var(--brand); }   /* both, not just body — iOS Safari's dynamic toolbar/safe-area can expose html's own box */
body {
  font-family:"Whyte Inktrap", -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- CARD layer: the single white shape that morphs across every screen ---------- */
.card-layer { position:fixed; inset:0; z-index:1; pointer-events:none; }
.card-layer svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#cardPath { fill:#fff; }

/* ---------- SCROLL: content scrolls here (full screen, no clip → scrollable everywhere) ---------- */
.scroll {
  position:fixed; inset:0; z-index:2;
  background:transparent;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;
}
.scroll::-webkit-scrollbar { width:0; height:0; }
.slide {
  height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center;
}

/* hide the scrollbar on every nested scrollable (detail card, impressum, desktop body column)
   while keeping the scrolling itself fully functional */
.detail, .legal, .detail .body {
  scrollbar-width:none;       /* Firefox */
  -ms-overflow-style:none;    /* old Edge/IE */
}
.detail::-webkit-scrollbar, .legal::-webkit-scrollbar, .detail .body::-webkit-scrollbar {
  width:0; height:0;
}

/* ---------- MAIL: fixed & centered, fades in place (does not scroll) ---------- */
.mail-layer {
  position:fixed; inset:0; z-index:3; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- FRAME: orange mask with a card-shaped hole = the window.
   Lies above the content; pointer-events:none so the whole screen stays scrollable.
   Real CSS background-color (not an SVG fill) clipped to the hole — see index.html. */
.frame-layer {
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:var(--brand);
  clip-path:url(#frameHoleClip); -webkit-clip-path:url(#frameHoleClip);
}
.mail {
  white-space:nowrap; line-height:1; opacity:0;
  font-weight:500; letter-spacing:-0.01em; color:var(--brand);
  text-decoration:none; font-size:var(--mail-size);
}

/* ---------- PROJECTS grid (bento) — sized to the grid card by JS ---------- */
.projects {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(4, 1fr);
  gap:var(--gap-tile);
  padding:var(--pad-grid);              /* 10px white border inside the card */
  grid-template-areas:"t1 t2" "t3 t2" "t4 t4" "t5 t6";
}
.t1{grid-area:t1;} .t2{grid-area:t2;} .t3{grid-area:t3;}
.t4{grid-area:t4;} .t5{grid-area:t5;} .t6{grid-area:t6;}

.tile {
  position:relative; overflow:hidden; border-radius:var(--tile-radius);
  background:#eee; border:none; padding:0; margin:0; cursor:pointer;
  width:100%; height:100%; font-family:inherit;
}
.tile .front, .tile .back { position:absolute; inset:0; transition:opacity 2s ease; }
.tile.flipped .front, .tile.flipped .back { transition:opacity 0.4s ease; }
.tile .front { width:100%; height:100%; object-fit:cover; opacity:1; }
.tile video.front, .detail .media video { transform: scale(1.05); }
.tile .back { opacity:0; display:flex; padding:var(--tile-text-pad); color:#fff; }
.tile.flipped .front { opacity:0; }
.tile.flipped .back  { opacity:1; }
.back.dark { color:#000; }
.back--tl { justify-content:flex-start; align-items:flex-start; text-align:left; }
.back--bl { justify-content:flex-start; align-items:flex-end;   text-align:left; }
.back--tr { justify-content:flex-end;   align-items:flex-start; text-align:right; }
.back .info {
  display:flex; flex-direction:column; font-weight:300; font-size:var(--tile-size);
  line-height:1.2; letter-spacing:-0.01em; white-space:nowrap;
}

/* ---------- DETAIL views — sized to the detail card by JS ---------- */
.detail {
  display:flex; flex-direction:column;
  padding: var(--detail-img) var(--detail-img) var(--detail-text);
  gap: var(--detail-gap);
  color:#111;
  /* the whole card (image + text) scrolls as one block when content is taller than
     the card — not just the text in a little sub-box. Native scroll chaining means
     this doesn't fight the page's snap-scroll: it consumes the gesture on its own
     until you hit the top/bottom, then a further scroll continues to the next section. */
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.detail .meta, .detail .body { margin-inline: calc(var(--detail-text) - var(--detail-img)); }
.detail .media {
  flex:1 1 auto; min-height:33vh;   /* mobile: never shrink below 1/3 of the viewport; grows to fill when the body is short */
  border-radius:var(--media-radius); overflow:hidden; background:#eee;
}
.detail .media img, .detail .media video { width:100%; height:100%; object-fit:cover; display:block; }
.detail .meta {
  display:flex; justify-content:space-between; align-items:flex-start; gap:4vmin;
  font-weight:300; font-size:var(--meta-size); line-height:1.2; letter-spacing:-0.01em;
  flex:0 0 auto;
  text-wrap:pretty;
}
.detail .meta .right { display:flex; flex-direction:column; text-align:right; }
.detail .body {
  flex:0 0 auto;   /* natural height — no longer shrunk into its own scroll box */
  display:flex; flex-direction:column; gap:1em;
  font-weight:300; font-size:var(--body-size); line-height:1.35;
  text-wrap:pretty;   /* avoids single-word orphan lines at paragraph ends */
}
.detail .body:empty { display:none; }

@media (orientation:landscape) {
  .projects {
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:1fr 1fr;
    grid-template-areas:"t1 t2 t4 t4" "t3 t2 t5 t6";
  }
  .detail {
    display:grid;
    grid-template-columns:2fr 1fr;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"media headline" "media facts" "media body";
    gap:2.2vmin;
    padding: var(--detail-img);
    --meta-size:1.9vmin;
    --body-size:1.9vmin;
    overflow-y:hidden;   /* desktop: image stays pinned, only .body scrolls (below) */
  }
  .detail .media { grid-area:media; min-height:0; }   /* reset the mobile 1/3 floor — desktop image sizes from the grid */
  .detail .meta  { display:contents; }
  .detail .meta .left  { grid-area:headline; text-align:left; }
  .detail .meta .right { grid-area:facts; align-self:center; text-align:left; }
  .detail .body { grid-area:body; margin-inline:0; min-height:0; overflow-y:auto; }
}

/* ---------- LEGAL / Impressum — sized to the (small) legal card by JS ----------
   Scrolls as one block (heading + all sections together), same as .detail. */
.legal {
  display:flex; flex-direction:column; padding:6vmin; color:#000;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.legal-content { display:flex; flex-direction:column; gap:1.6em; }
.legal h1 { font-weight:500; font-size:4.4vmin; letter-spacing:-0.01em; line-height:1; }
.legal h2 { font-weight:400; font-size:2.6vmin; letter-spacing:-0.01em; line-height:1.1; margin-bottom:0.35em; }
.legal p, .legal address { font-weight:300; font-style:normal; font-size:2.6vmin; line-height:1.2; text-wrap:pretty; }
.legal a { color:inherit; }
.legal section { display:flex; flex-direction:column; }

/* ---------- scroll hint (idle cycle, JS-driven) ---------- */
.scroll-hint {
  position:fixed; left:0; right:0; z-index:6;
  bottom:6.5vmin; text-align:center;
  font-weight:300; font-size:3vmin; letter-spacing:0.01em;
  color:rgba(255,255,255,0.65); pointer-events:none;
  opacity:0; transition:opacity 0.6s ease;
}

@media (prefers-reduced-motion:reduce) {
  .tile .front, .tile .back { transition:none; }
}