/* Layout and components. Consumes tokens.css and type.css; defines no colour
   or type value of its own. If you need a new colour, add it to the token
   system and regenerate, do not invent one here. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lz-paper);color:var(--lz-ink);
  font-family:var(--lz-body);font-size:var(--lz-b2);line-height:var(--lz-b2-lh)}
img,svg{max-width:100%;display:block}
a{color:var(--lz-accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--lz-accent);outline-offset:2px}

.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(16px,4vw,44px)}
.measure{max-width:var(--lz-measure)}

/* type roles */
.d1{font-family:var(--lz-display);font-weight:var(--lz-display-weight);
  font-size:var(--lz-d1);line-height:var(--lz-d1-lh);letter-spacing:var(--lz-display-tracking);
  text-wrap:balance;margin:0}
.d2{font-family:var(--lz-display);font-weight:var(--lz-display-weight);
  font-size:var(--lz-d2);line-height:var(--lz-d2-lh);text-wrap:balance;margin:0}
.d3{font-family:var(--lz-display);font-weight:var(--lz-display-weight);
  font-size:var(--lz-d3);line-height:var(--lz-d3-lh);text-wrap:balance;margin:0}
.b1{font-size:var(--lz-b1);line-height:var(--lz-b1-lh);margin:0}
.b3{font-size:var(--lz-b3);line-height:var(--lz-b3-lh);color:var(--lz-muted);margin:0}

/* site chrome */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand svg,.brand img{width:30px;height:30px}
.brand b{font-weight:var(--lz-body-strong);letter-spacing:-.025em;font-size:19px}
.brand b span{font-weight:var(--lz-body-weight)}
.nav{display:flex;gap:18px;align-items:center}
.lang{display:flex;gap:7px}
.lang a[aria-current="true"]{color:var(--lz-ink);font-weight:var(--lz-body-medium)}

.hero{background:var(--lz-deep);color:var(--lz-deep-body);margin-top:8px}
.hero .inner{display:grid;grid-template-columns:1fr 280px;gap:clamp(20px,4vw,48px);
  align-items:end;padding-top:clamp(26px,4vw,40px)}
.hero .d1{color:#FFFFFF;max-width:17ch}
.hero .b1{color:var(--lz-deep-muted);max-width:42ch;margin-top:16px}
.hero img{align-self:end;width:100%;max-height:360px;object-fit:cover;object-position:center top}
@media (max-width:760px){.hero .inner{grid-template-columns:1fr}
  .hero img{max-width:230px;max-height:300px}}

section{padding-block:clamp(34px,6vw,60px);border-top:1px solid var(--lz-rule)}
footer{padding-block:28px 40px;border-top:1px solid var(--lz-ink);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---- home page components ---------------------------------------------- */
.nav a{text-decoration:none;color:var(--lz-ink);
  /* WCAG 2.2 AA 2.5.8: the hit area is 24px even though the text is 16. */
  display:inline-block;padding-block:5px}
.eyebrow{color:var(--lz-accent);display:block;margin-bottom:12px}

.hero .sub{color:var(--lz-deep-muted)}
.hero .acts{margin-top:26px}
.btn{display:inline-block;background:var(--lz-accent-tint);color:var(--lz-deep);
  text-decoration:none;font-weight:var(--lz-body-strong);font-size:var(--lz-b3);
  letter-spacing:.02em;padding:12px 19px}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px}
.strip div{border-left:2px solid var(--lz-accent);padding-left:14px}
.strip .n{font-family:var(--lz-display);font-weight:var(--lz-display-weight);
  font-size:var(--lz-d3);line-height:1.1;display:block}
.strip p{margin:6px 0 0;color:var(--lz-muted);font-size:var(--lz-b3);line-height:1.55}
.strip i{font-style:italic}

/* The portrait fills the row rather than sitting at its natural height. At 240px
   it ended 75px above the last line of the bio and read as stranded, and the
   gap grew as the text reflowed. Same pattern as .hero img: cover, anchored to
   the top so the crop takes chest, never face. The bounds stop it going squat
   or tall when the bio is edited. */
.about{display:grid;grid-template-columns:1fr 300px;gap:clamp(24px,5vw,56px);align-items:stretch}
.about img{width:100%;height:100%;min-height:360px;max-height:460px;
  object-fit:cover;object-position:center top}

/* The call to action sits opposite its own invitation rather than under it:
   stacked, the button left a wide empty half to the right of the block. */
.close{background:var(--lz-accent-wash)}
.close .inner{padding-block:clamp(34px,6vw,58px);display:grid;
  grid-template-columns:1fr auto;gap:clamp(28px,5vw,56px);align-items:center}
.close .acts{justify-self:end;text-align:right}

@media (max-width:860px){.strip{grid-template-columns:1fr 1fr}.about{grid-template-columns:1fr}
  .about img{max-width:220px;height:auto;min-height:0;max-height:none}
  .close .inner{grid-template-columns:1fr;gap:24px}
  .close .acts{justify-self:start;text-align:left}}

/* German sets ~1.4x wider than English at the same point size, so the hero
   headline gets a wider measure to avoid a five-line ragged stack. */
html[lang="de"] .hero .d1{max-width:24ch}

/* language switch: separate EN / DE so they do not read as one word */
.lang{gap:0}
.lang a{padding-inline:7px}
.lang a + a{border-left:1px solid var(--lz-rule)}

/* service cards: two columns on desktop, one on phone. Longer copy than the
   track-record strip, so it gets a wider column. */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.card{background:var(--lz-surface);padding:24px;border-top:3px solid var(--lz-accent);
  display:flex;flex-direction:column;gap:9px}
.card .k{color:var(--lz-accent)}
.card p{margin:0;color:var(--lz-muted);font-size:var(--lz-b3);line-height:1.6}
@media (max-width:760px){.cards{grid-template-columns:1fr}}

/* five nav items plus the language switch overflow a phone, so the nav wraps */
.nav{flex-wrap:wrap;row-gap:9px}
@media (max-width:520px){.nav{gap:13px;row-gap:9px;width:100%}}

/* button on the light close band, for the booking link when it exists */
.btn.dark{background:var(--lz-accent);color:var(--lz-paper)}

/* ---- writing ------------------------------------------------------------ */
section.first{border-top:0;padding-top:clamp(18px,3vw,26px)}

/* writing index: the way in sits beside the introduction, in the room the
   reading measure leaves free */
.idxhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);
  gap:clamp(28px,6vw,72px);align-items:end}
.idxnav{border-left:2px solid var(--lz-accent);padding-left:16px}
.idxnav .lz-label{display:block;color:var(--lz-muted);margin-bottom:6px}
.idxnav a{display:flex;justify-content:space-between;gap:16px;padding-block:7px;
  text-decoration:none;color:inherit;font-weight:var(--lz-body-medium);
  border-top:1px solid var(--lz-rule)}
.idxnav a:hover span:first-child{color:var(--lz-accent)}
.idxnav .c{color:var(--lz-muted);font-weight:400;font-variant-numeric:tabular-nums}
section[id]{scroll-margin-top:20px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:860px){.idxhead{grid-template-columns:1fr;align-items:start}
  .idxnav{max-width:320px}}

.rows{margin-top:22px;border-top:1px solid var(--lz-rule)}
.row{display:grid;grid-template-columns:120px 1fr auto;gap:22px;align-items:baseline;
  padding-block:17px;border-bottom:1px solid var(--lz-rule);text-decoration:none;color:inherit}
.row .date{color:var(--lz-muted)}
.row .t{font-family:var(--lz-display);font-weight:var(--lz-display-weight);
  font-size:20px;line-height:1.3;text-wrap:balance}
.row .go{color:var(--lz-accent);font-size:var(--lz-b3);font-weight:var(--lz-body-medium);white-space:nowrap}
.row:hover .t{color:var(--lz-accent)}
@media (max-width:620px){.row{grid-template-columns:1fr;gap:5px}.row .go{display:none}}

/* article page */
.arthead{padding-block:clamp(26px,5vw,44px) 0;max-width:var(--lz-measure)}
.arthead .d1{margin-top:12px}
.arthead .meta{margin-top:14px}
.prose{max-width:var(--lz-measure);padding-block:clamp(22px,4vw,32px) 0}
.prose p{font-size:var(--lz-b1);line-height:var(--lz-b1-lh);margin:0 0 20px}
.prose h2{font-family:var(--lz-display);font-weight:var(--lz-display-weight);
  font-size:var(--lz-d3);line-height:var(--lz-d3-lh);margin:38px 0 14px;text-wrap:balance}
.prose h3{font-family:var(--lz-display);font-weight:var(--lz-display-weight);
  font-size:20px;line-height:1.3;margin:30px 0 10px}
.prose em{font-style:italic}
.backlink{padding-block:30px 46px;border-top:1px solid var(--lz-rule);margin-top:34px;
  max-width:var(--lz-measure)}
.backlink a{font-weight:var(--lz-body-medium);display:inline-block;padding-block:5px}
footer a{display:inline-block;padding-block:5px}

/* WCAG 2.2 AA 2.5.8: standalone link rows get a 24px hit area. */
p.b3 > a:only-child{display:inline-block;padding-block:5px}