/* ==========================================================================
   ulrichschwark.com — core stylesheet
   Palette: quarried stone + graphite + petrol, one champagne signal.
   Type:    Bodoni Moda (display moments only) / Karla (everything else)
   ========================================================================== */

:root{
  --stone:      #EDEBE6;   /* page ground — warm quarried limestone */
  --stone-deep: #DFDCD4;   /* recessed panels, table stripes */
  --graphite:   #14191C;   /* primary text */
  --graphite-60:#5A6167;   /* secondary text */
  --petrol:     #1F3A4D;   /* brand field — deep architectural blue */
  --petrol-lift:#2B4C63;
  --champagne:  #C2A464;   /* single signal colour. Rules and marks only. */
  --line:       #C9C5BB;

  --wrap: 1180px;
  --rail: 232px;

  --f-display: "Bodoni Moda", "Didot", Georgia, serif;
  --f-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* type scale — 1.25 minor third off 1rem */
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.5rem;
  --t-xl: 2rem;
  --t-2xl: 2.75rem;
  --t-3xl: clamp(2.6rem, 6.2vw, 4.9rem);

  --sp: 1.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--stone);
  color:var(--graphite);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--petrol);color:#fff;padding:.7rem 1.1rem;text-decoration:none}

/* ---------- shell: persistent left rail on desktop ---------------------- */
.shell{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}

.masthead{
  border-bottom:1px solid var(--line);
  background:var(--stone);
  position:sticky;top:0;z-index:60;
}
.masthead-in{
  max-width:var(--wrap);margin:0 auto;padding:1rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.wordmark{font-family:var(--f-display);font-size:1.32rem;letter-spacing:.005em;text-decoration:none;line-height:1.1}
.wordmark span{display:block;font-family:var(--f-body);font-size:.66rem;letter-spacing:.19em;color:var(--graphite-60);margin-top:.18rem;font-weight:600}

.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{
  text-decoration:none;font-size:var(--t-sm);font-weight:500;
  padding-bottom:.28rem;border-bottom:1.5px solid transparent;
}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--champagne)}
.nav a[aria-current="page"]{border-bottom-color:var(--petrol);font-weight:700}

.nav-toggle{display:none;background:none;border:1px solid var(--line);padding:.5rem .8rem;font:inherit;font-size:var(--t-sm);cursor:pointer;border-radius:2px}

@media (max-width:880px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--stone);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 1.5rem 1.2rem;
  }
  .nav.open{display:flex}
  .nav a{padding:.7rem 0;width:100%;border-bottom:1px solid var(--line)}
}

.lang-switch{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--stone);flex:none}
.lang-switch a,.lang-switch span{font-size:.78rem;font-weight:700;letter-spacing:.07em;line-height:1;padding:.42rem .78rem;border-radius:999px;text-decoration:none;color:var(--graphite-60)}
.lang-switch a:hover,.lang-switch a:focus-visible{color:var(--graphite)}
.lang-switch .active{background:var(--graphite);color:#fff}
@media (max-width:880px){
  .lang-switch{order:2;margin-left:auto}
  .nav-toggle{order:3}
  .masthead-in{gap:.8rem}
}

/* ---------- hero ------------------------------------------------------- */
.hero{padding:4.6rem 0 3.2rem;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:4rem;align-items:start}
.hero h1{
  font-family:var(--f-display);
  font-size:var(--t-3xl);
  line-height:1.02;
  font-weight:500;
  margin:0 0 1.3rem;
  letter-spacing:-.012em;
}
.hero-role{
  font-size:var(--t-md);color:var(--graphite-60);margin:0 0 1.6rem;
  max-width:46ch;line-height:1.5;
}
.hero-answer{
  font-size:var(--t-base);max-width:62ch;margin:0 0 2rem;
  padding-left:1.2rem;border-left:2px solid var(--champagne);
}
.portrait{
  border:1px solid var(--line);
  background:var(--stone-deep);
  padding:.55rem;
}
.portrait img{width:100%;filter:saturate(.93)}
.portrait figcaption{font-size:var(--t-xs);color:var(--graphite-60);padding:.6rem .2rem 0;line-height:1.45}

.hero-facts{display:flex;flex-wrap:wrap;gap:0;margin-top:2.2rem;margin-bottom:0;border-top:1px solid var(--line)}
.hero-facts div{padding:1rem 1.6rem 1rem 0;margin-right:1.6rem;border-right:1px solid var(--line)}
.hero-facts div:last-child{border-right:0}
.hero-facts dt{font-size:var(--t-xs);color:var(--graphite-60);letter-spacing:.06em}
.hero-facts dd{margin:.15rem 0 0;font-weight:700;font-size:var(--t-sm)}

@media (max-width:820px){
  .hero{padding:3rem 0 2.5rem}
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .portrait{max-width:230px}
}

/* ---------- generic sections ------------------------------------------- */
.section{padding:4.2rem 0;border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:0}
.section-head{max-width:62ch;margin-bottom:2.4rem}
h2{font-family:var(--f-display);font-weight:500;font-size:var(--t-2xl);line-height:1.12;margin:0 0 .9rem;letter-spacing:-.008em}
h3{font-size:var(--t-md);font-weight:700;margin:0 0 .5rem;line-height:1.3}
h4{font-size:var(--t-base);font-weight:700;margin:0 0 .4rem}
p{max-width:70ch}
.lede{font-size:var(--t-md);color:var(--graphite-60);max-width:60ch}

/* ---------- venture blocks --------------------------------------------- */
.venture{
  display:grid;grid-template-columns:var(--rail) 1fr;gap:2.4rem;
  padding:2.4rem 0;border-top:1px solid var(--line);
}
.venture:first-of-type{border-top:0;padding-top:0}
.venture-meta dt{font-size:var(--t-xs);color:var(--graphite-60);margin-top:.85rem}
.venture-meta dt:first-child{margin-top:0}
.venture-meta dd{margin:.1rem 0 0;font-size:var(--t-sm);font-weight:600}
.venture h3{font-family:var(--f-display);font-weight:500;font-size:var(--t-xl);letter-spacing:-.005em}
@media (max-width:820px){.venture{grid-template-columns:1fr;gap:1.2rem}}

/* ---------- capability list -------------------------------------------- */
.caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 2.6rem}
.caps li{padding:1.15rem 0;border-top:1px solid var(--line)}
.caps li strong{display:block;font-size:var(--t-base)}
.caps li span{font-size:var(--t-sm);color:var(--graphite-60)}

/* ---------- timeline (a real sequence, so numbering is earned) ---------- */
.track{list-style:none;margin:0;padding:0;counter-reset:step}
.track li{
  display:grid;grid-template-columns:6.8rem 1fr;gap:3rem;
  padding:1.5rem 0;border-top:1px solid var(--line);
}
.track li b{font-family:var(--f-display);font-size:var(--t-md);font-weight:500;color:var(--petrol)}
@media (max-width:640px){.track li{grid-template-columns:1fr;gap:.35rem}}

/* ---------- insights / cards ------------------------------------------- */
.posts{list-style:none;margin:0;padding:0}
.posts li{border-top:1px solid var(--line);padding:1.6rem 0}
.posts li:last-child{border-bottom:1px solid var(--line)}
.posts a{text-decoration:none}
.posts a h3{font-family:var(--f-display);font-weight:500;font-size:var(--t-lg);letter-spacing:-.005em}
.posts a:hover h3,.posts a:focus-visible h3{color:var(--petrol);text-decoration:underline;text-underline-offset:4px}
.post-meta{font-size:var(--t-xs);color:var(--graphite-60);margin:0 0 .4rem}
.posts p{font-size:var(--t-sm);color:var(--graphite-60);margin:.35rem 0 0;max-width:74ch}
.topic{
  display:inline-block;font-size:var(--t-xs);font-weight:700;
  color:var(--petrol);border:1px solid var(--line);
  padding:.12rem .5rem;border-radius:2px;background:var(--stone-deep);
}

/* ---------- article ---------------------------------------------------- */
.article{padding:3.4rem 0 4rem}
.article-head{max-width:66ch;margin:0 auto 2.6rem;padding-bottom:1.8rem;border-bottom:1px solid var(--line)}
.article-head h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,4.6vw,3.05rem);line-height:1.08;margin:.7rem 0 1rem;letter-spacing:-.01em}
.article-body{max-width:66ch;margin-left:auto;margin-right:auto;font-size:1.09rem;line-height:1.72}
.article-body h2{font-family:var(--f-body);font-size:var(--t-lg);font-weight:700;margin:2.6rem 0 .7rem;letter-spacing:0}
.article-body h3{font-size:var(--t-base);margin:1.9rem 0 .4rem}
.article-body ul,.article-body ol{padding-left:1.15rem}
.article-body li{margin-bottom:.55rem}
.article-body blockquote{
  margin:2rem 0;padding:.2rem 0 .2rem 1.4rem;
  border-left:2px solid var(--champagne);font-size:var(--t-md);color:var(--graphite-60);
}
.article-body a{color:var(--petrol);text-underline-offset:3px}

.article-fig{margin:2rem 0}
.article-fig img{width:100%;height:auto;border-radius:2px}
.article-fig figcaption{margin-top:.6rem;font-size:var(--t-sm);color:var(--graphite-60);line-height:1.5}

.faq{max-width:66ch;margin:3rem auto 0;border-top:1px solid var(--line);padding-top:1.6rem}
.faq details{border-bottom:1px solid var(--line);padding:.95rem 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--champagne);font-weight:700;margin-right:.6rem}
.faq details[open] summary::before{content:"–"}
.faq p{margin:.6rem 0 0;font-size:var(--t-sm);color:var(--graphite-60)}

.prevnext{max-width:66ch;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:3rem;padding-top:1.4rem;font-size:var(--t-sm)}

/* ---------- contact ---------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:2.4rem}}
.detail{border-top:1px solid var(--line);padding:1.15rem 0}
.detail dt{font-size:var(--t-xs);color:var(--graphite-60);letter-spacing:.06em}
.detail dd{margin:.2rem 0 0;font-size:var(--t-md)}
.detail a{color:var(--petrol);text-underline-offset:3px}

.field{margin-bottom:1.15rem}
.field label{display:block;font-size:var(--t-sm);font-weight:700;margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:var(--t-sm);padding:.72rem .8rem;
  border:1px solid var(--line);background:#fff;border-radius:2px;color:var(--graphite);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--petrol)}
.hp{position:absolute;left:-9999px}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-sm);color:var(--graphite-60)}
.consent input{width:auto;margin-top:.28rem}

.btn{
  display:inline-block;background:var(--petrol);color:#fff;border:1px solid var(--petrol);
  font:inherit;font-weight:700;font-size:var(--t-sm);padding:.8rem 1.7rem;
  border-radius:2px;cursor:pointer;text-decoration:none;
}
.btn:hover,.btn:focus-visible{background:var(--petrol-lift);border-color:var(--petrol-lift)}
.btn-ghost{background:transparent;color:var(--petrol)}
.btn-ghost:hover{background:var(--petrol);color:#fff}
.form-note{font-size:var(--t-xs);color:var(--graphite-60);margin-top:.9rem}
.form-status{margin-top:1rem;font-size:var(--t-sm);font-weight:700}

.map{border:1px solid var(--line);width:100%;height:320px;filter:grayscale(.35) contrast(1.03)}

/* ---------- callout / verification notice ------------------------------ */
.note{display:none}
.note p{margin:0;max-width:74ch}

/* ---------- footer ----------------------------------------------------- */
.footer{background:var(--petrol);color:#D9E2E8;padding:3.4rem 0 2rem;margin-top:0}
.footer a{color:#fff;text-underline-offset:3px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.6rem}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr;gap:1.8rem}}
.footer h4{color:#fff;font-size:var(--t-xs);letter-spacing:.11em;margin-bottom:.9rem}
.footer ul{list-style:none;margin:0;padding:0;font-size:var(--t-sm)}
.footer li{margin-bottom:.5rem}
.footer p{font-size:var(--t-sm);max-width:44ch}
.footer-base{
  border-top:1px solid rgba(255,255,255,.18);margin-top:2.4rem;padding-top:1.2rem;
  font-size:var(--t-xs);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}

/* ---------- one orchestrated entrance, hero only ----------------------- */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero-role,.hero-answer,.hero-facts,.portrait{
    opacity:0;transform:translateY(10px);
    animation:rise .62s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .hero-role{animation-delay:.09s}
  .hero-answer{animation-delay:.18s}
  .hero-facts{animation-delay:.27s}
  .portrait{animation-delay:.12s}
  @keyframes rise{to{opacity:1;transform:none}}
}

@media print{
  .masthead,.footer,.nav-toggle{display:none}
  body{background:#fff}
}