/* ============================================================
   studio.INTERVAL — WEBSITE shared system
   Leitmotiv: das Maß-Prinzip · Accent: Signal orange
   (Brand System.html keeps its own styles — untouched)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

@property --t{ syntax:'<number>'; initial-value:0; inherits:true; }

:root{
  --paper:   #ECEAE3;
  --paper-2: #E4E1D8;
  --card:    #F4F2EC;
  --ink:     #16150F;
  --ink-2:   #3A3830;
  --grey:    #8B887D;
  --grey-2:  #B5B2A7;
  --line:    #C8C5BA;
  --line-2:  #D8D5CB;

  /* Signal orange accent */
  --accent:      oklch(0.66 0.16 52);
  --accent-deep: oklch(0.55 0.16 47);
  --accent-soft: oklch(0.66 0.16 52 / 0.12);

  --grotesk: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --archivo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --space:   "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --margin: clamp(20px, 4.5vw, 72px);
  --gutter: clamp(12px, 1.6vw, 24px);
  --maxw: 1680px;

  --t: 0;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--grotesk); font-size:16px; line-height:1.45; letter-spacing:-0.01em;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--margin); }
.grid12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); }
.section{ padding-block:clamp(56px,8vw,128px); }
.rule{ border:none; border-top:1px solid var(--line); margin:0; }
.rule--ink{ border-top:1px solid var(--ink); }

/* ---------- Type ---------- */
.display{ font-weight:700; font-size:clamp(44px,10.2vw,150px); line-height:0.86; letter-spacing:-0.05em; margin:0; }
.h-xl{ font-size:clamp(40px,7vw,108px); line-height:0.9; letter-spacing:-0.045em; font-weight:700; margin:0; }
.h-lg{ font-size:clamp(30px,4.4vw,64px); line-height:0.96; letter-spacing:-0.03em; font-weight:600; margin:0; }
.h-md{ font-size:clamp(22px,2.6vw,38px); line-height:1.05; letter-spacing:-0.02em; font-weight:600; margin:0; }
.h-sm{ font-size:clamp(18px,1.6vw,24px); line-height:1.1; letter-spacing:-0.015em; font-weight:600; margin:0; }
.lead{ font-size:clamp(18px,1.7vw,26px); line-height:1.32; letter-spacing:-0.015em; }
.body{ font-size:clamp(15px,1.05vw,17px); line-height:1.5; color:var(--ink-2); max-width:54ch; }

.meta{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); line-height:1.5; }
.meta--ink{ color:var(--ink); }
.meta--acc{ color:var(--accent-deep); }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* range-notation framing for section titles  →  [ Titel ] */
.range-title{ display:inline-flex; align-items:baseline; gap:0.5ch; }
.range-title::before{ content:"["; color:var(--accent); font-weight:400; }
.range-title::after{ content:"]"; color:var(--accent); font-weight:400; }

/* ---------- the measured-gap mark (symbol) ---------- */
.mark{ display:inline-flex; align-items:center; color:currentColor; }
.mark .end{ width:1px; height:1.1em; background:currentColor; }
.mark .span{ height:1px; background:currentColor; position:relative; }
.mark .span{ width:2.4em; }

/* lockup */
.lockup{ font-weight:700; letter-spacing:-0.03em; }
.lockup .lo{ font-weight:400; }
.lockup .dot{ color:var(--accent); }

/* ---------- Dimension device ---------- */
.dim{ position:relative; height:1px; background:var(--line); }
.dim::before,.dim::after{ content:""; position:absolute; top:-5px; width:1px; height:11px; background:var(--line); }
.dim::before{ left:0; } .dim::after{ right:0; }
.dim__lbl{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--paper); padding:0 8px; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--grey); white-space:nowrap; text-transform:uppercase; }
.dim--acc{ background:var(--accent); }
.dim--acc::before,.dim--acc::after{ background:var(--accent); }
.dim--acc .dim__lbl{ color:var(--accent-deep); }
.dim__lbl--card{ background:var(--card); }

/* ---------- Topbar / nav (titleblock) ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--margin);
  background:color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar a.brand{ font-size:16px; }
.topbar nav{ display:flex; gap:26px; align-items:center; }
.topbar nav a{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); transition:color .2s; }
.topbar nav a:hover,.topbar nav a[aria-current="page"]{ color:var(--ink); }
.topbar nav a[aria-current="page"]{ color:var(--accent-deep); }

/* ---------- Buttons / chips ---------- */
.btn{ font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--ink); color:var(--ink); padding:11px 18px; background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:background .25s,color .25s; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn--acc{ border-color:var(--accent-deep); color:var(--accent-deep); }
.btn--acc:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.chip{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--line); color:var(--grey); padding:5px 9px; display:inline-block; }

/* ---------- Placeholders (striped, mono caption) ---------- */
.ph{ position:relative; background:repeating-linear-gradient(135deg,var(--paper-2) 0 10px,var(--card) 10px 20px); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ph > span{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); background:var(--card); padding:3px 8px; position:relative; z-index:1; }
.ph--photo{ background:repeating-linear-gradient(135deg,#dedacd 0 10px,#e7e3d8 10px 20px); }
.ph--plan{ background:
   linear-gradient(var(--line-2) 1px,transparent 1px) 0 0/100% 22px,
   linear-gradient(90deg,var(--line-2) 1px,transparent 1px) 0 0/22px 100%,
   var(--card); }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--ink); padding-block:54px 64px; }
.foot__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); align-items:start; }
.foot__big{ grid-column:1 / 8; font-size:clamp(26px,4vw,52px); font-weight:700; letter-spacing:-0.03em; line-height:1; }
.foot__col{ grid-column:span 2; }
@media(max-width:860px){ .foot__big{ grid-column:1/-1; margin-bottom:28px; } .foot__col{ grid-column:span 6; } }
.foot__col b{ display:block; margin-bottom:10px; }
.foot__col a{ display:block; color:var(--grey); font-family:var(--mono); font-size:12px; padding:3px 0; }
.foot__col a:hover{ color:var(--ink); }

/* ---------- Reveal (declarative, JS-free) ---------- */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{ animation:revUp linear both; animation-timeline:view(); animation-range:entry 2% entry 36%; }
  }
}
@keyframes revUp{ from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} }

/* ---------- utilities ---------- */
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.spread{ display:flex; align-items:center; justify-content:space-between; }
.muted{ color:var(--grey); }

/* ---------- white-background toggle ---------- */
body.is-white{ --paper:#ffffff; --paper-2:#efede6; }
.bgtoggle{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--ink); background:color-mix(in srgb, var(--paper) 84%, transparent);
  border:1px solid var(--ink); padding:8px 13px; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .2s, color .2s;
}
.bgtoggle:hover{ background:var(--ink); color:var(--paper); }
.bgtoggle .sw{ width:12px; height:12px; border:1px solid currentColor; background:#fff; display:inline-block; }
body.is-white .bgtoggle .sw{ background:var(--ink); }
@media print{ .bgtoggle{ display:none; } }

/* ---------- accent colour picker (HSV) ---------- */
.accentpick{
  position:fixed; right:18px; bottom:58px; z-index:90;
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--ink); background:color-mix(in srgb, var(--paper) 84%, transparent);
  border:1px solid var(--ink); padding:8px 13px; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .2s, color .2s;
}
.accentpick:hover{ background:var(--ink); color:var(--paper); }
.accentpick .sw{ width:12px; height:12px; border:1px solid currentColor; background:var(--accent); display:inline-block; }
.accentpanel{
  position:fixed; right:18px; bottom:100px; z-index:92; width:248px;
  background:var(--paper); border:1px solid var(--ink); padding:16px 16px 14px;
  box-shadow:0 18px 44px rgba(0,0,0,.20);
  display:none;
}
.accentpanel.open{ display:block; }
.accentpanel__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.accentpanel__head b{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; }
.accentpanel__head .x{ cursor:pointer; font-family:var(--mono); font-size:13px; color:var(--grey); border:none; background:none; }
.aw{ position:relative; width:216px; height:216px; margin:0 auto 12px; }
.aw canvas{ display:block; width:216px; height:216px; border-radius:50%; cursor:crosshair; touch-action:none; box-shadow:inset 0 0 0 1px rgba(22,21,15,.25); }
.aw__knob{ position:absolute; width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(22,21,15,.6),0 2px 6px rgba(0,0,0,.35); transform:translate(-50%,-50%); pointer-events:none; }
.aw__val{ position:relative; height:16px; margin:0 0 12px; border:1px solid var(--ink); cursor:ew-resize; touch-action:none; }
.aw__val .knob{ position:absolute; top:50%; width:10px; height:22px; background:var(--paper); border:1px solid var(--ink); transform:translate(-50%,-50%); pointer-events:none; }
.accentpanel__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.accentpanel__hex{ font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--ink); }
.accentpanel__hex b{ color:var(--accent-deep); }
.accentpanel__presets{ display:flex; gap:7px; }
.accentpanel__presets button{ width:20px; height:20px; border:1px solid rgba(22,21,15,.35); cursor:pointer; padding:0; }
.accentpanel__reset{ width:100%; font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--ink); background:transparent; color:var(--ink); padding:7px; cursor:pointer; transition:background .2s,color .2s; }
.accentpanel__reset:hover{ background:var(--ink); color:var(--paper); }
@media print{ .accentpick,.accentpanel{ display:none !important; } }