/* ============================================================
   Posthof Chronik — Styles
   Design-System: schwarz/weiß, Koralle-Akzent, N27-Schrift
   ============================================================ */

/* --- Fonts --- */
@font-face {
  font-family: "N27";
  src: url("assets/fonts/N27-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "N27";
  src: url("assets/fonts/N27-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "N27";
  src: url("assets/fonts/N27-Medium.otf") format("opentype");
  font-weight: 500 700;
  font-display: swap;
}

/* --- Tokens --- */
:root {
  --black:       #000000;
  --white:       #ffffff;
  --gray-950:    #0a0a0a;
  --gray-900:    #141414;
  --gray-800:    #1f1f1f;
  --gray-500:    #6b6b6b;
  --gray-300:    #bcbcbc;
  --coral:       #fe4c54;
  --coral-press: #e23d45;

  --font: "N27", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --fast: 120ms;
  --base: 200ms;

  /* form inner padding — used to align count + list with filter bar content */
  --form-pad: clamp(14px, 3vw, 20px);
  --inner-pad: calc(var(--form-pad) + 1px);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--coral); color: var(--black); }
h1, p { margin: 0; }
button { font-family: var(--font); cursor: pointer; }

/* --- Page layout --- */
.arc-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}
.arc-column {
  width: 100%;
  max-width: 920px;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 64px) 96px;
}

/* --- Historic photo --- */
.arc-photo-wrap {
  margin: 0 0 clamp(24px, 5vw, 40px);
  position: relative;
}
.arc-photo {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.04);
}
.arc-photo-credit {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* --- Page header --- */
.arc-header {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 4vw, 32px);
  padding-bottom: clamp(20px, 4vw, 28px);
  border-bottom: 2px solid var(--white);
}
.arc-pictogram {
  width: 90px;
  height: 98px;
  flex: none;
  transform: rotate(-5deg);
  margin-top: 6px;
}
.arc-title-block { flex: 1; min-width: 0; }
.arc-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.arc-wordmark {
  font-weight: 500;
  font-size: clamp(40px, 11vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--white);
}
.arc-tag {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--coral);
  padding-bottom: 6px;
}
.arc-subline {
  margin-top: 14px;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}
.arc-dash { color: var(--coral); }
.arc-locator {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--gray-300);
  max-width: 52ch;
}

/* --- Filter bar --- */
.arc-form {
  margin-top: clamp(20px, 4vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 16px;
  background: var(--gray-900);
  padding: var(--form-pad);
  border: 1px solid var(--gray-800);
}
.arc-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.arc-field-year  { flex: 0 0 auto; }
.arc-field-search { flex: 1 1 240px; min-width: 200px; }

.arc-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray-300);
}

/* chevron: url-encoded inline SVG, gray stroke on black bg */
.arc-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 148px;
  font-family: var(--font);
  font-size: 16px;
  color: var(--white);
  background-color: var(--black);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23bcbcbc' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--white);
  border-radius: 2px;
  padding: 11px 36px 11px 13px;
  cursor: pointer;
}
.arc-select option { background: var(--black); }
.arc-select:focus { outline: 2px solid var(--coral); outline-offset: 2px; }

.arc-input {
  font-family: var(--font);
  font-size: 16px;
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--white);
  border-radius: 2px;
  padding: 11px 13px;
  width: 100%;
}
.arc-input::placeholder { color: var(--gray-500); }
.arc-input:focus { outline: 2px solid var(--coral); outline-offset: 2px; }

.arc-btn {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  background: var(--coral);
  border: none;
  border-radius: 2px;
  padding: 12px 24px;
  height: 44px;
  transition: background var(--base) var(--ease);
}
.arc-btn:hover  { background: var(--coral-press); }
.arc-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* --- Count row --- */
.arc-count-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding: 0 var(--inner-pad) 10px;
}
.arc-count-text { font-size: 14px; color: var(--gray-300); }
.arc-reset {
  font-size: 14px;
  color: var(--coral);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.arc-reset:hover { color: var(--coral-press); }

/* --- List (CSS grid, 1fr / 2fr) --- */
.arc-table { width: 100%; }

.arc-thead {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: clamp(12px, 3vw, 28px);
  background: var(--black);
  padding: 10px var(--inner-pad);
  border-bottom: 2px solid var(--white);
}
.arc-col-head {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray-300);
}

.arc-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: clamp(12px, 3vw, 28px);
  align-items: baseline;
  padding: 14px var(--inner-pad);
  border-bottom: 1px solid var(--gray-800);
  transition: background var(--fast) var(--ease);
}
.arc-row:hover { background: var(--gray-900); }

.cell-date {
  font-size: 14px;
  font-weight: 300;
  color: var(--gray-300);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.cell-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.18;
  color: var(--white);
  text-wrap: pretty;
}

/* --- Empty state --- */
.arc-empty {
  padding: 56px 0;
  text-align: center;
  animation: arc-fade var(--base) var(--ease);
}
.arc-empty-head { font-size: 20px; font-weight: 400; color: var(--white); }
.arc-empty-sub  { margin-top: 8px; font-size: 14px; color: var(--gray-500); }

@keyframes arc-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Footnote --- */
.arc-footnote {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-800);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--gray-500);
}