/* ============================================================
   BYKOVSKI — "BUERO"
   Ulm-school corporate identity for an institution of one.
   One family. One color. One grid. Nothing else.
   ============================================================ */

/* ---- Archivo, self-hosted (DSGVO). Variable file, weight axis 400-700. ---- */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces 700 — the wordmark logo only, self-hosted (DSGVO). */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/fraunces-latin-700.woff2') format('woff2');
}

:root{
  --bg:      #fbfaf7;
  --ink:     #232019;
  --gray:    #484540;
  --hair:    #e5e3dd;
  --accent:  #453c2d;
  --accent-dark: #332c20;
  --band:    #fbfaf7;
  --band-hair: rgba(255,255,255,.32);
  --band-soft: #d8d4cc;
  --rail-w: 34px;
  --label-w: 208px;
}
@supports (color: oklch(50% 0 0)){
  :root{
    --bg: oklch(98.5% .003 85);
    --ink: oklch(19% .012 80);
    --gray: oklch(33% .006 82);
    --hair: oklch(90% .004 85);
    --accent: oklch(30% .022 78);
    --accent-dark: oklch(24% .022 78);
    --band: oklch(98.5% .003 85);
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ background:var(--bg); }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  position:relative;
  font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  padding-left:var(--rail-w);
  -webkit-font-smoothing:antialiased;
  /* Short pages (blog, legal, 404): the sheet runs the full viewport and the
     footer sits at its bottom edge instead of floating mid-screen. */
  min-height:100dvh;
  display:flex; flex-direction:column;
}
main{ flex:1; display:flex; flex-direction:column; }
/* Flex + auto inline margins would shrink-to-fit — keep children full width. */
main > *{ width:100%; }
main > :last-child{ flex:1; }

a{ color:inherit; }
img{ display:block; max-width:100%; }

a, button, input, textarea{
  transition:
    color .18s cubic-bezier(.19,1,.22,1),
    background-color .18s cubic-bezier(.19,1,.22,1),
    border-color .18s cubic-bezier(.19,1,.22,1);
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Lightbox renders in the top layer on a near-black backdrop — the accent fails
   contrast there, so its focus ring must be white. */
.lightbox :focus-visible{ outline-color:#fff; }

.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.skip{
  position:absolute; left:var(--rail-w); top:-100px; z-index:50;
  background:var(--accent); color:#fff;
  padding:.5rem 1rem; text-decoration:none; font-weight:500;
}
.skip:focus-visible{ top:0; }

/* ---- The ruler rail: the grid, made visible -------------- */
.ruler{
  position:absolute; inset:0 auto 0 0;
  width:var(--rail-w);
  border-right:1px solid var(--hair);
  background:
    repeating-linear-gradient(to bottom, var(--hair) 0 1px, transparent 1px 96px) right / 16px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--hair) 0 1px, transparent 1px 24px) right / 8px 100% no-repeat;
}

/* ---- Frame: content column with visible edges ------------ */
.frame{
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 48px);
  border-inline:1px solid var(--hair);
}

/* ---- Identity mark --------------------------------------- */
.mark{
  display:inline-block; flex:none;
  width:14px; height:14px;
  background:var(--accent);
}
/* The wordmark logo: "bykovski" overprinted like misregistered print — a warm-grey
   ink plate (the real text) under a slightly darker warm-grey plate (::after, from
   data-text) offset 1.5px and multiply-blended, so the body of the word sets as a
   warm near-grey with a lighter fringe on one shoulder and a darker one on the other.
   Hover/focus snaps the plates into register. Where OKLCH is unsupported the text
   inherits ink — never invisible. isolation keeps the multiply inside the lockup. */
.wordmark{
  position:relative;
  display:inline-block;
  font-family:"Fraunces", Georgia, serif;
  font-weight:700; font-size:1.45rem;
  letter-spacing:-.01em; line-height:1;
  text-decoration:none;
  color:oklch(33% .022 78);
  isolation:isolate;
}
.wordmark::after{
  content:attr(data-text);
  content:attr(data-text) / "";
  position:absolute; left:0; top:0;
  color:oklch(25% .022 78);
  mix-blend-mode:multiply;
  transform:translate(1.5px, 1px);
  pointer-events:none;
}
.wordmark:hover::after,
.wordmark:focus-visible::after{ transform:translate(0, 0); }
@media (prefers-reduced-motion: no-preference){
  .wordmark::after{ transition:transform .18s cubic-bezier(.19,1,.22,1); }
}

/* ---- Header ---------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--hair);
  transition:border-color .18s cubic-bezier(.19,1,.22,1);
}
/* Scrolled: the rule engages — hairline hardens to ink while the header
   covers content (class from site.js). */
.site-head.is-stuck{ border-bottom-color:var(--ink); }
.site-head .frame{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px 28px; flex-wrap:wrap;
  padding-block:16px;
}
.site-head nav ul{
  position:relative;
  display:flex; flex-wrap:wrap;
  gap:4px clamp(14px, 2vw, 26px);
  list-style:none;
}
.site-head nav a{
  text-decoration:none;
  font-size:.95rem;
  padding-block:3px;
  border-bottom:2px solid transparent;
}
.site-head nav a:hover{ border-bottom-color:var(--accent); }
.site-head nav a[aria-current]{
  color:var(--accent);
  border-bottom-color:var(--accent);
  font-weight:500;
}
/* Sliding scrollspy underline (element from site.js). While it exists it
   replaces the static aria-current border and glides between nav items. */
.nav-ind{
  position:absolute; left:0; top:0;
  width:0; height:2px;
  background:var(--accent);
  opacity:0; pointer-events:none;
  transition:
    transform .32s cubic-bezier(.19,1,.22,1),
    width .32s cubic-bezier(.19,1,.22,1),
    opacity .18s cubic-bezier(.19,1,.22,1);
}
.site-head nav.has-ind a[aria-current]{ border-bottom-color:transparent; }
.head-right{ display:flex; align-items:center; gap:24px; }
.lang{ display:flex; border:1px solid var(--hair); }
.lang a{
  font:inherit; font-size:.85rem; font-weight:500;
  text-decoration:none;
  padding:4px 10px; color:var(--gray);
}
.lang a[aria-current="true"]{
  background:var(--accent); color:#fff;
}
.lang a[aria-current="false"]:hover{ color:var(--ink); }

/* ---- Section skeleton: label column + rule --------------- */
.section{
  display:grid;
  grid-template-columns:var(--label-w) minmax(0,1fr);
  border-top:1px solid var(--hair);
  scroll-margin-top:88px;
}
.section:first-child{ border-top:0; }
.section-label{
  border-right:1px solid var(--hair);
  padding:44px 24px 44px 0;
}
.section-label .tab{
  position:sticky; top:88px;
  display:flex; align-items:center; gap:10px;
}
.section-label :is(h1,h2,p){
  font-size:.95rem; font-weight:500; line-height:1.3;
}
.section-body{
  min-width:0;
  padding:44px 0 clamp(56px,8vw,88px) clamp(24px,4vw,56px);
}

/* ---- Hero ------------------------------------------------- */
.hero-meta{
  display:flex; justify-content:space-between; gap:12px 32px; flex-wrap:wrap;
  font-size:.95rem; color:var(--gray);
  margin-bottom:clamp(36px,6vw,72px);
}
h1{
  font-size:clamp(2.5rem, 1.3rem + 5vw, 4.5rem);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-0.02em;
  text-wrap:balance;
  max-width:16em;
}
h1 .quiet{ color:var(--gray); }
.hero-foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px 32px; flex-wrap:wrap;
  margin-top:clamp(40px,7vw,80px);
  padding-top:20px;
  border-top:1px solid var(--hair);
}
.hero-foot p{ font-size:.95rem; color:var(--gray); }

.btn{
  display:inline-block;
  background:var(--accent); color:var(--bg);
  font:inherit; font-size:.95rem; font-weight:500;
  padding:13px 22px;
  border:0; cursor:pointer; text-decoration:none;
}
.btn:hover{ background:var(--accent-dark); }

/* ---- About ------------------------------------------------ */
.about-grid{
  display:grid;
  grid-template-columns:minmax(220px, 320px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.plate img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--hair);
}
.plate img.crop-top{ object-position:top; }
.plate figcaption{
  display:flex; gap:10px;
  font-size:.85rem; color:var(--gray);
  padding-top:10px;
}
.fig-no{ color:var(--accent); font-weight:500; flex:none; }

.about-copy p{ max-width:58ch; }
.spec{
  margin-top:clamp(24px,3vw,40px);
  border-top:1px solid var(--hair);
}
.spec > div{
  display:grid; grid-template-columns:minmax(96px,148px) 1fr;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--hair);
  font-size:.95rem;
}
.spec dt{ color:var(--gray); }
.spec dd{ font-weight:500; }
.spec a{ text-decoration-color:var(--hair); text-underline-offset:3px; }
.spec a:hover{ color:var(--accent); text-decoration-color:var(--accent); }

/* ---- Registers (Stack + Arbeiten + Blog) ------------------ */
.register{ border-top:1px solid var(--hair); }
.register-row{
  display:grid;
  grid-template-columns:3rem minmax(9.5rem,12.5rem) minmax(0,1fr);
  gap:8px 20px;
  padding:15px 0;
  border-bottom:1px solid var(--hair);
}
.register-row:hover{ background:#f1f0ec; }
.reg-no{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  color:var(--gray); font-size:.95rem;
}
.reg-title{ font-weight:500; font-size:.95rem; }
.reg-items{ color:var(--gray); font-size:.95rem; max-width:72ch; }

.work-row{
  grid-template-columns:3rem minmax(9.5rem,12.5rem) minmax(0,1fr) 6.5rem;
}
.work-head{
  font-size:.85rem; color:var(--gray);
  padding:9px 0;
}
.work-head:hover{ background:none; }
.reg-name a{
  font-weight:500; font-size:.95rem;
  text-decoration:none;
}
.reg-name a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.reg-ref{ font-size:.95rem; color:var(--gray); }

/* Blog register: Nr · linked block (date / title / description) */
.post-row{ grid-template-columns:3rem minmax(0,1fr); }
.post-link{ display:grid; gap:3px; text-decoration:none; min-width:0; }
.post-link .reg-date{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  color:var(--gray); font-size:.85rem;
}
.post-row:hover .reg-title{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.register-empty{
  color:var(--gray); font-size:.95rem;
  padding:18px 0; border-bottom:1px solid var(--hair);
}

/* ---- Photo grid (teaser + full gallery) ------------------- */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
.photo-note{
  margin-top:clamp(24px,3vw,40px);
  color:var(--gray); font-size:.95rem;
  max-width:58ch;
}
.photo-note a{ color:var(--accent); text-underline-offset:3px; }
.gallery-btn{
  appearance:none; -webkit-appearance:none;
  display:block; width:100%; padding:0; margin:0;
  background:none; border:0; cursor:zoom-in; text-align:left;
  font:inherit; color:inherit;
}

/* ---- Lightbox (native <dialog>) --------------------------- */
.lightbox{
  border:0; padding:0; max-width:100vw; max-height:100vh;
  width:100%; height:100%;
  background:transparent; color:#fff;
}
.lightbox::backdrop{ background:rgba(10,10,10,.92); }
.lb-stage{
  position:fixed; inset:0;
  display:grid; grid-template-rows:1fr auto;
  padding:clamp(16px,4vw,48px);
  /* The dialog fills the viewport, so its ::backdrop sits hidden behind it —
     the dim has to live on the stage itself. */
  background:rgba(10,10,10,.94);
}
.lb-figure{
  min-height:0;
  display:flex; align-items:center; justify-content:center;
}
.lb-figure img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  border:1px solid var(--band-hair);
}
.lb-cap{
  display:flex; gap:10px; justify-content:center; align-items:baseline;
  padding-top:14px;
  font-size:.9rem; color:var(--band-soft);
}
.lb-cap .fig-no{ color:#fff; }
.lb-btn{
  position:fixed; z-index:2;
  background:none; border:1px solid var(--band-hair); color:#fff;
  font:inherit; font-size:1.4rem; line-height:1;
  width:48px; height:48px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lb-btn:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.lb-close{ top:clamp(16px,4vw,32px); right:clamp(16px,4vw,32px); }
.lb-prev{ left:clamp(8px,2vw,24px); top:50%; transform:translateY(-50%); }
.lb-next{ right:clamp(8px,2vw,24px); top:50%; transform:translateY(-50%); }

.identity-note{
  margin-top:20px;
  font-size:.95rem; color:var(--gray);
  max-width:58ch;
}

/* ---- Kontakt: the beige panel ------------------------------ */
.band-accent{
  background:var(--band);
  color:var(--ink);
}
.band-accent .frame{ border-color:var(--hair); }
.band-accent .section{ border-top:0; }
.band-accent .section-label{ border-right-color:var(--hair); }
.band-accent .mark{ background:var(--ink); }
.band-accent .section-label :is(h1,h2){ color:var(--ink); }

.contact-lede{
  font-size:clamp(1.3rem, 1rem + 1.6vw, 1.9rem);
  font-weight:500; line-height:1.3;
  letter-spacing:-0.01em;
  text-wrap:balance;
  max-width:24em;
  margin-bottom:clamp(32px,5vw,56px);
}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.contact-grid h3{
  font-size:.95rem; font-weight:500;
  color:var(--gray);
  margin-bottom:14px;
}
.channels{ border-top:1px solid var(--hair); }
.channels > div{
  display:grid; grid-template-columns:minmax(90px,120px) 1fr;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--hair);
  font-size:.95rem;
}
.channels dt{ color:var(--gray); }
.channels a{
  color:var(--ink); font-weight:500;
  text-decoration-color:var(--hair);
  text-underline-offset:3px;
}
.channels a:hover{ text-decoration-color:var(--ink); }

.contact-form{ display:grid; gap:18px; }
.field{ display:grid; gap:6px; }
.field label{ font-size:.95rem; font-weight:500; }
.field input, .field textarea{
  font:inherit; font-size:1rem;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--hair);
  border-radius:0;
  padding:11px 14px;
  width:100%;
}
.field textarea{ min-height:9rem; resize:vertical; }
.field input:hover, .field textarea:hover{ border-color:var(--gray); }
.field input:focus, .field textarea:focus{ border-color:var(--ink); outline:none; }
.field input:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}
.btn-invert{
  justify-self:start;
  background:var(--accent); color:var(--bg);
  font:inherit; font-size:.95rem; font-weight:500;
  padding:13px 24px;
  border:0; cursor:pointer;
}
.btn-invert:hover{ background:var(--accent-dark); }
/* Contact captcha "verifying" state: cream spinner + label on the ink submit button
   while /js/altcha.js solves the ALTCHA proof-of-work. */
.btn-invert.is-verifying{ color:var(--bg); cursor:progress; pointer-events:none; }
.btn-invert.is-verifying::before{
  content:""; display:inline-block; width:.85em; height:.85em;
  margin-right:.55em; vertical-align:-.12em;
  border:2px solid var(--bg); border-right-color:transparent; border-radius:50%;
  animation:altcha-spin .6s linear infinite;
}
@keyframes altcha-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn-invert.is-verifying::before{ animation-duration:1.4s; }
}
.form-status{
  font-size:.95rem; font-weight:500;
  border:1px solid var(--hair);
  padding:11px 14px;
}
/* Honeypot — off-screen, never shown to humans */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Prose (blog posts + legal) --------------------------- */
.prose{
  padding:44px 0 clamp(56px,8vw,88px);
  max-width:72ch;
}
.prose > * + *{ margin-top:1rem; }
.prose h1{ font-size:clamp(2rem,1.4rem + 2.4vw,3rem); font-weight:500; letter-spacing:-0.02em; margin-bottom:.5rem; }
.prose h2{ font-size:1.4rem; font-weight:500; margin-top:2.2rem; }
.prose h3{ font-size:1.1rem; font-weight:500; margin-top:1.8rem; }
.prose p, .prose li{ max-width:72ch; }
.prose a{ color:var(--accent); text-underline-offset:3px; }
.prose ul, .prose ol{ padding-left:1.4em; }
.prose li{ margin-top:.4rem; }
.prose img{ border:1px solid var(--hair); margin-block:1.5rem; }
.prose code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.9em; background:#eee; padding:.1em .35em;
}
.prose pre{
  background:var(--ink); color:var(--bg);
  padding:1rem 1.25rem; overflow-x:auto;
  border:1px solid var(--hair); margin-block:1.5rem;
}
.prose pre code{ background:none; padding:0; color:inherit; }
.prose blockquote{
  border-left:3px solid var(--accent);
  padding-left:1rem; color:var(--gray);
}
.post-meta{
  display:flex; gap:8px 16px; flex-wrap:wrap;
  font-size:.9rem; color:var(--gray);
  font-variant-numeric:tabular-nums;
  margin-bottom:1.5rem;
}
.back-link{
  display:inline-block; margin-top:2.5rem;
  font-size:.95rem; color:var(--accent);
  text-decoration:none;
}
.back-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---- Footer ------------------------------------------------ */
.site-foot{ border-top:1px solid var(--hair); }
.site-foot .frame{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px 32px; flex-wrap:wrap;
  padding-block:28px;
}
.foot-meta{
  display:flex; align-items:center; gap:8px 24px; flex-wrap:wrap;
  font-size:.9rem; color:var(--gray);
}
.foot-meta a{
  color:var(--ink);
  text-decoration-color:var(--hair);
  text-underline-offset:3px;
}
.foot-meta a:hover{ color:var(--accent); text-decoration-color:var(--accent); }

/* ---- Responsive: mid ---------------------------------------- */
@media (max-width:1099px){
  :root{ --label-w:168px; }
}

/* ---- Responsive: narrow -------------------------------------- */
@media (max-width:899px){
  body{ padding-left:0; }
  .ruler{ display:none; }
  .skip{ left:0; }

  .section{ grid-template-columns:1fr; scroll-margin-top:120px; }
  .section-label{
    border-right:0;
    border-bottom:1px solid var(--hair);
    padding:18px 0 14px;
  }
  .section-label .tab{ position:static; }
  .section-body{ padding:26px 0 56px; }

  .about-grid{ grid-template-columns:1fr; }
  .about-grid .plate{ max-width:340px; }

  .register-row{ grid-template-columns:2.6rem minmax(0,1fr); }
  /* Direct children only — the blog post-row nests .reg-items inside
     .post-link (a single-column grid), which must not be forced to column 2. */
  .register-row > .reg-items{ grid-column:2; }
  .work-row{ grid-template-columns:2.6rem minmax(0,1fr) auto; }
  .work-row .reg-items{ grid-column:2 / -1; }
  .work-row .reg-ref{ grid-column:3; grid-row:1; }
  .work-head .reg-items{ display:none; }

  .post-row{ grid-template-columns:2.6rem minmax(0,1fr); }

  .photo-grid{ grid-template-columns:1fr 1fr; }

  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .photo-grid{ grid-template-columns:1fr; }
}

/* ---- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition:none !important;
    animation:none !important;
  }
  html{ scroll-behavior:auto; }
}