/* =====================================================================
   00 · SETTINGS  —  the one file to edit for sizes and spacing per device
   =====================================================================
   Every measurement the layout uses lives here as a CSS variable.
   The block at the top is the DESKTOP default. The blocks below it
   override only what changes on that device. Delete a line in a block
   and that device falls back to the desktop value.

   DEVICE PROFILES (how the browser picks one)
     desktop        landscape, 1201px wide and up            (default block)
     wide           landscape, 1800px wide and up            (large monitors)
     tablet-land    landscape, 501px+ tall, up to 1200 wide  (iPad landscape, small laptops)
     tablet-port    portrait, 601px wide and up              (iPad portrait)
     phone-port     portrait, up to 600px wide               (iPhone portrait)
     phone-land     landscape, up to 500px tall              (iPhone landscape)
     small-phone    portrait, up to 360px wide               (adds to phone-port)

   Rotate a device and the browser switches profile on its own.

   UNITS: px, vw (1% of width), vh/svh (1% of height), clamp(min, fluid, max).
   Plain numbers without unit (trail and gravity) are read by the script.
   ===================================================================== */

:root {
  /* ---------- GLOBAL ---------- */
  --top: 64px;                                     /* height of the top bar */
  --gutter: max(clamp(16px, 3vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --frame: clamp(14px, 3vw, 48px);                 /* inset of the drawing frame on the cover */
  --pill-h: 34px;                                  /* pill height */
  --pill-px: 16px;                                 /* pill side padding */
  --pill-fs: 13px;                                 /* pill text size */
  --brand-fs: 14px;                                /* name in the top bar */
  --brand-sub: block;                              /* block = show "Industrial & accessories design", none = hide */
  --body-fs: 15px;                                 /* running text */

  /* ---------- FRONT PAGE (cover) ---------- */
  --cover-title-size: clamp(60px, 11.5vw, 184px);  /* "Design Portfolio" */
  --cover-title-x: calc(var(--frame) + 2vw);       /* title distance from left */
  --cover-title-y: calc(var(--top) + 4vh);         /* title distance from top */
  --cover-hint-fs: 13px;                           /* "Drag the pills ..." text size */
  --cover-hint-w: 36ch;                            /* hint line length */
  --cover-hint-gap: 1.75;                          /* hint distance below the title, in title heights */
  --cover-sig-w: min(60vw, 1100px);                /* signature width */
  --cover-sig-maxh: 46svh;                         /* signature max height */
  --cover-sig-right: 1.5vw;                        /* signature distance from right */
  --cover-sig-bottom: 8svh;                        /* signature distance from bottom */
  --cover-tb-w: clamp(220px, 22vw, 320px);         /* title block (Schriftfeld) width */
  --cover-tags-x: calc(var(--frame) + 12px);       /* the 3 tag pills: distance from left */
  --cover-tags-y: calc(var(--frame) + 150px);      /* the 3 tag pills: distance from bottom */
  --cover-tags-w: 60vw;                            /* the 3 tag pills wrap inside this width */
  --cover-ticks: grid;                             /* grid = show frame numbers and letters, none = hide */
  --cover-reaction: clamp(140px, 18vw, 260px);     /* smiley size after all pills are home */
  --cover-foot: 0px;                               /* extra space under the frame for the copyright line */

  /* physics and image trail (plain numbers, read by the script) */
  --gravity: 1.15;                                 /* how fast the pills fall */
  --trail-min: 150;                                /* smallest trail photo, px wide */
  --trail-max: 220;                                /* largest trail photo, px wide */
  --trail-dist: 170;                               /* pointer travel in px before the next photo drops */
  --trail-keep: 6;                                 /* photos on screen at once */

  /* ---------- SELECTED WORK (table of contents) ---------- */
  --toc-text: 1;                                   /* list and label text size, 1 = as in the portfolio */
  --toc-title: clamp(46px, 14vw, 110px);           /* title size in portrait */
  --toc-base: 96px;                                /* photo size in the portrait list (all photos get the same area; bigger number = bigger photos) */
  --toc-gap: 14px;                                 /* padding above and below each row in the portrait list */
  --toc-col: 46%;                                  /* width of the photo column in the portrait list */

  /* ---------- PROJECT VIEWER ---------- */
  --bar: 88px;                                     /* bottom bar (title block + buttons) height */
  --vr: 150px;                                     /* space on the right of the sheet (rail) */
  --rail-display: flex;                            /* flex = show the thumbnail rail, none = hide */
  --vpad: var(--frame);                            /* sheet distance from the left edge */
  --tabs-fs: var(--pill-fs);                       /* project tab text size */

  /* ---------- ABOUT / CONTACT ---------- */
  --about-title: clamp(40px, 5.4vw, 88px);
  --about-text-fs: 15px;
  --cv-fs: 12.5px;
  --contact-title: clamp(48px, 8vw, 128px);
  --contact-text-fs: 16px;
  --polaroid-w: 320px;
}

/* ===================== WIDE: large monitors ===================== */
@media (orientation: landscape) and (min-width: 1800px) {
  :root {
    --top: 76px;
    --frame: 56px;
    --pill-h: 40px; --pill-px: 20px; --pill-fs: 15px;
    --brand-fs: 16px;
    --body-fs: 17px;
    --cover-tb-w: 360px;
    --cover-sig-w: min(60vw, 1300px);
    --cover-tags-y: calc(var(--frame) + 170px);
    --trail-min: 200; --trail-max: 290; --trail-dist: 220;
    --bar: 100px; --vr: 170px;
    --about-text-fs: 17px; --cv-fs: 14px;
    --contact-text-fs: 18px; --polaroid-w: 380px;
  }
}

/* ============ TABLET LANDSCAPE: iPad landscape, small laptops ============ */
@media (orientation: landscape) and (min-height: 501px) and (max-width: 1200px) {
  :root {
    --top: 60px;
    --gutter: max(28px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --frame: 24px;
    --pill-h: 36px; --pill-px: 15px; --pill-fs: 12.5px;
    --brand-sub: none;
    --cover-title-size: clamp(60px, 11vw, 150px);
    --cover-tb-w: clamp(220px, 24vw, 300px);
    --cover-tags-y: calc(var(--frame) + 140px);
    --cover-foot: 16px;
    --trail-min: 130; --trail-max: 190; --trail-dist: 150;
    --toc-text: 1.2;
    --bar: 80px; --vr: 130px;
    --about-text-fs: 14px; --cv-fs: 12px;
    --about-title: clamp(40px, 5.6vw, 72px);
  }
}

/* ================= TABLET PORTRAIT: iPad portrait ================= */
@media (orientation: portrait) and (min-width: 601px) {
  :root {
    --top: 60px;
    --gutter: max(28px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --frame: 22px;
    --pill-h: 38px; --pill-px: 16px; --pill-fs: 13px;
    --brand-sub: none;
    --cover-title-size: 14vw;
    --cover-title-x: calc(var(--frame) + 2vw);
    --cover-title-y: calc(var(--top) + 3svh);
    --cover-hint-fs: 14px; --cover-hint-w: 46ch;
    --cover-sig-w: 100vw; --cover-sig-maxh: 34svh; --cover-sig-right: 0px; --cover-sig-bottom: 30svh;
    --cover-tb-w: 300px;
    --cover-foot: 16px;
    --cover-tags-w: calc(100vw - 2 * var(--frame) - 340px);
    --trail-min: 140; --trail-max: 200; --trail-dist: 150;
    --toc-title: clamp(70px, 12vw, 120px);
    --toc-base: 150px;
    --toc-col: 36%;
    --toc-gap: 22px;
    --bar: 96px; --vr: var(--frame);
    --rail-display: none;
    --about-title: clamp(56px, 10vw, 96px);
    --contact-title: clamp(64px, 12vw, 120px);
    --polaroid-w: 280px;
  }
}

/* ================ PHONE PORTRAIT: iPhone portrait ================ */
@media (orientation: portrait) and (max-width: 600px) {
  :root {
    --top: 56px;
    --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --frame: 12px;
    --pill-h: 32px; --pill-px: 12px; --pill-fs: 11.5px;
    --brand-fs: 12px; --brand-sub: none;
    --brand-ws: normal; --brand-max: 7.4em;          /* normal = name on two lines, nowrap = one line */
    --body-fs: 15px;
    --cover-title-size: min(14.5vw, 9.5svh);        /* the smaller of the two, so short screens keep room for the pills */
    --cover-title-x: calc(var(--frame) + 3vw);
    --cover-title-y: calc(var(--top) + 2.5svh);
    --cover-hint-fs: 12.5px; --cover-hint-w: 32ch; --cover-hint-gap: 1.8;
    --cover-sig-w: 115vw; --cover-sig-right: -8vw;
    --cover-sig-bottom: calc(var(--cover-tags-y) + 78px);   /* just above the tag pills */
    --cover-sig-maxh: max(80px, calc(100svh - var(--cover-sig-bottom) - var(--cover-title-y) - 2.1 * var(--cover-title-size) - 84px));
    --cover-tb-w: calc(100vw - 2 * var(--frame) + 2px);
    --cover-tags-x: calc(var(--frame) + 4px);
    --cover-tags-y: calc(var(--frame) + env(safe-area-inset-bottom, 0px) + var(--tb-h, 138px) + 12px); /* sits above the title block, the script measures --tb-h */
    --cover-tags-w: calc(100vw - 2 * var(--frame) - 8px);
    --cover-ticks: none;
    --cover-foot: 18px;
    --cover-reaction: 150px;
    --trail-min: 90; --trail-max: 140; --trail-dist: 110; --trail-keep: 5;
    --toc-title: clamp(46px, 15vw, 92px);
    --toc-base: 96px;
    --toc-gap: 14px;
    --bar: 112px; --vr: var(--frame);
    --rail-display: none;
    --vpad: 8px;
    --about-title: clamp(52px, 16vw, 90px);
    --about-text-fs: 15px; --cv-fs: 13px;
    --contact-title: clamp(52px, 17vw, 96px);
    --contact-text-fs: 16px;
    --polaroid-w: 200px;
  }
}

/* ============ SMALL PHONES: iPhone SE and mini, 360px wide and under ============ */
@media (orientation: portrait) and (max-width: 360px) {
  :root {
    --pill-px: 9px; --pill-fs: 10.5px; --brand-fs: 11px;
    --cover-title-size: 14vw;
    --toc-title: clamp(40px, 14vw, 70px);
  }
}

/* ================ PHONE LANDSCAPE: iPhone landscape ================ */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --top: 44px;
    --gutter: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --frame: 10px;
    --pill-h: 28px; --pill-px: 11px; --pill-fs: 11px;
    --brand-fs: 12px; --brand-sub: none;
    --body-fs: 14px;
    --cover-title-size: min(10vw, 24svh);
    --cover-title-x: calc(var(--frame) + 3vw);
    --cover-title-y: calc(var(--top) + 1svh);
    --cover-hint-fs: 11.5px; --cover-hint-w: 44ch; --cover-hint-gap: 1.85;
    --cover-sig-w: 48vw; --cover-sig-maxh: 62svh; --cover-sig-right: 1vw; --cover-sig-bottom: 4svh;
    --cover-tb-w: 250px;
    --cover-tags-x: calc(var(--frame) + 8px);
    --cover-tags-y: calc(var(--frame) + 6px);
    --cover-tags-w: calc(100vw - 2 * var(--frame) - 300px);
    --cover-ticks: none;
    --cover-foot: 14px;
    --cover-reaction: 120px;
    --gravity: 1.3;
    --trail-min: 90; --trail-max: 130; --trail-dist: 110; --trail-keep: 5;
    --toc-text: 1.5;
    --bar: 0px; --vr: 72px;
    --rail-display: none;
    --vpad: 8px;
    --about-title: clamp(40px, 12svh, 64px);
    --about-text-fs: 13.5px; --cv-fs: 12px;
    --contact-title: clamp(40px, 12svh, 72px);
    --contact-text-fs: 14px;
    --polaroid-w: 160px;
  }
}