/* ==========================================================================
   imbik: imbik.css
   "Gece imbikhanesi" (night distillery). Loads after studio.css on /imbik/ pages:
   it swaps the tokens for the dark palette and adds the imbik-only components.

   Amber is the one highlight on a page (the status line). Links are verdigris.
   Bump ?v= on the <link> in each page when you edit this file.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  color-scheme: dark;

  --bg: #0E1513;
  --surface: #17211E;
  --surface-high: #1E2A26;
  --ink: #ECEFE8;
  --muted: #A9B5AF;                    /* 8.7:1 on bg, 7.8:1 on surface */
  --line: rgba(236, 239, 232, .12);
  --line-strong: rgba(236, 239, 232, .22);
  --link: #5FBF9F;                     /* verdigris, 8.3:1 on bg */
  --focus: #ECEFE8;
  --amber: #E2A65A;                    /* 8.7:1 on bg */
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
}

.site-header { background: var(--bg); }

.brand img { width: 4rem; height: auto; }

/* ---- Landing hero -------------------------------------------------------- */
.hero__logo {
  width: min(100%, 16.25rem);
  height: auto;
}
.tagline {
  max-width: 21em;
  margin-block-start: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.9vw, 2.875rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.status {
  margin-block-start: var(--space-5);
  color: var(--amber);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

/* ---- Features: a numbered ledger ----------------------------------------- */
.features { border-block-end: 1px solid var(--line); }
.feature {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    "num  title"
    ".    text";
  column-gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}
.feature__num {
  grid-area: num;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: .06em;
}
.feature__title {
  grid-area: title;
  font-size: var(--step-2);
  line-height: 1.2;
}
.feature__text {
  grid-area: text;
  max-width: 36rem;
  margin-block-start: var(--space-2);
  color: var(--muted);
}

/* ---- Links and the 18+ line ---------------------------------------------- */
.pagenav { padding-block: var(--space-5) 0; }
.pagenav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.pagenav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.responsible {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  max-width: 36rem;
  margin-block-start: var(--space-5);
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.5;
}
.responsible .stamp { flex: none; }

/* ---- Document pages (privacy, support) ----------------------------------- */
.doc-head { padding-block: var(--space-7) var(--space-6); }
.doc-head__title {
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.doc-meta {
  margin-block-start: var(--space-3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
}

.row__title {
  font-size: clamp(1.625rem, 1.45rem + .7vw, 1.875rem);
  line-height: 1.2;
}
.prose { max-width: 38rem; }
.prose p + p { margin-block-start: 1em; }

.contact-note {
  margin-block-start: var(--space-3);
  color: var(--muted);
}

.qa + .qa { margin-block-start: var(--space-6); }
.qa__q {
  font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.5rem);
  line-height: 1.25;
}
.qa__a { margin-block-start: var(--space-2); }

.doc-contact {
  padding-block: var(--space-6) 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 48em) {
  .doc-head { padding-block: var(--space-9) var(--space-7); }
  .feature {
    grid-template-columns: 3.5rem minmax(0, 17rem) minmax(0, 1fr);
    grid-template-areas: "num title text";
    column-gap: var(--space-6);
    padding-block: var(--space-7);
  }
  .feature__text { margin-block-start: 0; padding-block-start: .15rem; }
  .pagenav { padding-block-start: var(--space-6); }
  .doc-contact { padding-block-start: var(--space-7); }
}

/* ---- Print (privacy policy on paper) --------------------------------------- */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --ink: #000; --muted: #333;
    --line: #bbb; --line-strong: #888; --link: #000; --amber: #000;
  }
  body { -webkit-font-smoothing: auto; }
  .hero__logo { filter: invert(1); }   /* the light wordmark would vanish on white paper */
}