/* ============================================================
   SILKE-SYSTEM — the ONE canonical design system for every
   Silke Lengler page. Tokens, base reset, the label/content
   grid the whole site is built on, the reveal, the link
   grammar and the fat footer live here ONCE.

   Every token below is EXTRACTED from the shipped index.html,
   not invented: the hex values, the four type sizes, the two
   letter-spacings, the 960 measure, the 120–180 label column,
   the 40px gap, the 760 / 1440 / 1860 breakpoints. Where a
   page used to hardcode #d6402b for the twenty-fifth time,
   this file is canonical.

   Register: Kenya Hara. White is not the absence of design.
   Nothing here is loud, because nothing here needs to be.
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* colour — the whole brand is eight greys and one red */
  --ground:      #ffffff;
  --ground-warm: #f4f2ec;
  --ink:         #1a1916;   /* headlines */
  --ink-2:       #34322c;   /* headline on warm ground */
  --body:        #3c3a34;   /* running text */
  --second:      #55524a;   /* secondary text, footer body */
  --muted:       #8a867c;   /* quiet asides */
  --label:       #9b968a;   /* the uppercase label column */
  --rule:        #e6e3da;   /* section rules, row dividers */
  --hairline:    #cfcabd;   /* link underlines */
  --hairline-lt: #b8b3a8;   /* the lightest divider (lang separator) */
  --mark:        #d6402b;   /* THE red. The square. The one accent. */

  /* type — one family. 300 is for DISPLAY ONLY.
     Running text on index.html renders at 400 (measured, not assumed):
     Helvetica Neue 300 at 14px in warm grey is a hairline, and a page
     of legal prose set that way cannot be read. Display gets the
     lightness; the reader gets the weight. */
  --sans:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --w-disp:  300;   /* headlines only */
  --w-text:  400;   /* everything anyone actually has to read */
  --w-med:   500;

  /* FLUID TYPE — floors are the laptop sizes, growth tracks the viewport,
     ceilings are what the vw term yields at 2560. Same ladder as index. */
  --fs-micro: clamp(12px, 0.55vw + 4px, 18px);   /* the copyright line */
  --fs-label: clamp(12px, 0.55vw + 4px, 18px);   /* label column, footer headings */
  --fs-small: clamp(14px, 0.65vw + 5px, 22px);   /* footer body, quiet notes */
  --fs-key:   clamp(15px, 0.7vw + 5px, 23px);    /* the red row key */
  --fs-body:  clamp(16px, 0.75vw + 5px, 24px);   /* running text */
  --fs-lead:  clamp(17px, 0.8vw + 5.5px, 26px);  /* lead paragraphs */
  --fs-h1:    clamp(32px, 3.6vw, 92px);

  --lh-body: 1.75;
  --lh-lead: 1.75;

  --ls-label:  0.12em;   /* the label column */
  --ls-head:   0.1em;    /* footer headings */
  --ls-wide:   0.16em;   /* the copyright */
  --ls-lang:   0.08em;
  --ls-tight:  0.005em;  /* display type, optically corrected */

  /* layout — the measure and the label column, everywhere */
  /* NO fixed container. A 1320px box centred on a 2560px screen is a
     page designed for a 1280x720 laptop — a 720p document. index.html
     never reads that way because its hero is full-bleed; these pages
     have no hero, so the box is all there is. The rail is fluid: the
     rules run to the edge of the viewport, the way the hero image does. */
  --pad:      clamp(24px, 28vw - 160px, 700px);   /* the WHITE GUTTER — Hara: the emptiness IS the page. ~557px @2560, ~243px @1440 */
  --col:      minmax(140px, 16vw);    /* the label column, scales */
  --gap:      40px;
  --gap-lg:   clamp(48px, 5vw, 110px);
  /* LAW (Ralph, 2026-08-04): max col-widths are VERBOTEN — on containers
     AND on text. There is no "reading measure" token. Every column runs
     gutter to gutter; the gutters are --pad, nothing else. */

  /* motion — slow, and never more than opacity */
  --ease:      0.4s ease;
  --ease-slow: 1.6s ease;
}

/* ============================================================
   BASE
   ============================================================ */
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:var(--w-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  animation:pageIn var(--ease-slow) both;
}

/* the only two animations the brand owns */
@keyframes pageIn { from { opacity:0 } to { opacity:1 } }
@keyframes inkIn  { from { opacity:0 } to { opacity:1 } }

/* The reveal: sections surface as they enter, like ink taking paper.
   Guarded by @supports on purpose. `animation: … both` driven by a
   scroll timeline means that if the timeline never attaches — old
   browser, no view() support — the fill freezes the element at 0%
   and the content is invisible FOREVER. So text is visible by
   default and the reveal is opt-in enhancement, never a gate. */
.reveal, .rows{ opacity:1; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal, .rows{
      animation:inkIn linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 22%;
    }
  }
}
@media (prefers-reduced-motion: reduce){
  body{ animation:none }
  html{ scroll-behavior:auto }
}

/* the link grammar: a hairline that warms to the mark on hover */
a.quiet-link, .v a, .cols a, .bar a.back{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--hairline); padding-bottom:1px;
  transition:color var(--ease), border-color var(--ease);
}
a.quiet-link:hover, .v a:hover, .cols a:hover, .bar a.back:hover{
  color:var(--mark); border-bottom-color:var(--mark);
}

/* the mark: the red full stop — it scales with the voice it punctuates */
.mark{ width:clamp(14px, 1.1vw, 28px); height:clamp(14px, 1.1vw, 28px); background:var(--mark); display:block; margin:0 0 22px; }

/* ============================================================
   THE SHELL — used by every standalone page
   ============================================================ */
.bar{
  margin:0; padding:26px var(--pad) 0;
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
}
.bar a.back{ font-size:var(--fs-small); color:var(--second); border-bottom-color:transparent; }
.lang{ display:flex; gap:6px; align-items:center;
       font-size:var(--fs-label); letter-spacing:var(--ls-lang); }
.lang span{ cursor:pointer; color:var(--muted); transition:color 0.3s ease; }
.lang span.on{ color:var(--mark); }
.lang .sep{ color:var(--hairline-lt); cursor:default; }

.title{
  margin:0; padding:22vh var(--pad) 0;
  display:grid; grid-template-columns:var(--col) 1fr; gap:var(--gap-lg);
}
.title .label{ font-size:var(--fs-label); letter-spacing:var(--ls-label);
               color:var(--label); padding-top:13px; }
.title h1{
  font-size:var(--fs-h1); font-weight:var(--w-disp); letter-spacing:var(--ls-tight);
  line-height:1.2; color:var(--ink); margin:0 0 18px;
}
.title p{ font-size:var(--fs-lead); font-weight:var(--w-text);
          line-height:var(--lh-lead); color:var(--second); margin:0; }

/* ============================================================
   THE ROWS — the label/content grid the whole site is built on
   ============================================================ */
.rows{ margin:88px 0 0; padding:0 var(--pad); display:block; }
.rows > .body{ min-width:0; border-top:1px solid var(--rule); }

/* THE RED KEYS LIVE IN THE LEFT COLUMN — the site's rail position,
   like Der Weg on index.html. Key left in red, text right, one
   vertical across the whole site. */
.row{ padding:28px 0 30px; border-bottom:1px solid var(--rule);
      display:grid; grid-template-columns:var(--col) 1fr; gap:var(--gap-lg);
      align-items:start; }
.row > .k{
  font-size:var(--fs-key); font-weight:var(--w-text); line-height:1.5;
  color:var(--mark); margin:0; padding-top:3px; letter-spacing:var(--ls-tight);
}
.row > .v{ font-size:var(--fs-body); font-weight:var(--w-text);
           line-height:var(--lh-body); color:var(--body); }
.row > .v p{ margin:0 0 15px; }
.row > .v p:last-child{ margin-bottom:0; }
.row > .v h3{ font-size:var(--fs-body); font-weight:var(--w-med); color:var(--ink);
              margin:22px 0 8px; letter-spacing:var(--ls-tight); }
.row > .v h3:first-child{ margin-top:0; }
.row > .v ul{ margin:0 0 15px; padding:0 0 0 1.15em; }
.row > .v li{ margin:0 0 7px; }
.quiet{ color:var(--muted); font-size:var(--fs-small); }

/* TBD — what the practice still has to supply. Deliberately visible. */
.tbd{ color:var(--muted); border-bottom:1px dotted var(--mark);
      padding-bottom:1px; white-space:nowrap; }

/* ============================================================
   THE FOOTER — injected by silke-system.js, styled once here
   ============================================================ */
footer.fuss{ margin:140px 0 0; padding:0 var(--pad) 90px; }
footer.fuss .cols{
  border-top:1px solid var(--rule); padding-top:44px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:38px 32px;
  font-size:var(--fs-small); line-height:var(--lh-lead); color:var(--second);
}
footer.fuss .cols .h{ font-size:var(--fs-label); letter-spacing:var(--ls-head);
                      color:var(--label); margin-bottom:9px; }
footer.fuss .sign{ display:flex; flex-direction:column; align-items:center;
                   gap:20px; margin-top:96px; }
footer.fuss .sign .sq{ width:10px; height:10px; background:var(--mark); }
footer.fuss .sign .c{ font-size:var(--fs-micro); letter-spacing:var(--ls-wide); color:var(--label); }

/* ============================================================
   RESPONSIVE — the same three breakpoints as index.html
   ============================================================ */
/* the legal-page hero — the stone, with the page title on the white field */
.phero{ position:relative; height:clamp(380px, 56vh, 720px); overflow:hidden; background:#f4f2ec; }
.phero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.phero .bar{ position:absolute; top:0; left:0; right:0; z-index:2; }
.phero .overlay{ position:absolute; left:7vw; top:50%; transform:translateY(-50%); z-index:1; }
.phero h1{ font-size:clamp(40px, 4vw, 100px); font-weight:var(--w-disp);
           letter-spacing:var(--ls-tight); line-height:1.1; color:var(--ink); margin:0; }
.phero .plead{ font-size:var(--fs-lead); line-height:1.65; color:var(--second); margin:16px 0 0; }

/* the lead sits on the content line, under the hero */
.intro{ margin:72px 0 0; padding:0 var(--pad);
        display:grid; grid-template-columns:var(--col) 1fr; gap:var(--gap-lg); }
.intro p{ grid-column:2; font-size:var(--fs-lead); line-height:var(--lh-lead);
          color:var(--second); margin:0; }

@media (max-width:760px){
  :root{ --pad:24px; }   /* phones keep the slim gutter */
  .title, .rows, .intro{ grid-template-columns:1fr; gap:20px; }
  .title{ padding-top:14vh; }
  .intro p{ grid-column:1; }
  .row{ grid-template-columns:1fr; gap:6px; padding:16px 0; }
}