/*
 * Legal Disclaimer for Web licence
 *
 * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains.
 * Our package includes WOFF and WOFF2 font formats.
 *
 * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
 *
 * It is strictly prohibited to rename the font and to download or use these fonts in any other media.
 *
 * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
 *
 * thestudiolo.com (monthly pageviews: <50K)
 */

/* ----------------------------- */
/* Lineto Webfont Faces (DO NOT RENAME) */
/* ----------------------------- */

/* complete */
@font-face{
  font-family: "RuderPlakatLLVarWeb";
  src: url("../fonts/RuderPlakatLLVarWeb.woff2") format("woff2");
  font-display: swap;
}

/* subset */
@font-face{
  font-family: "RuderPlakatLLVarSub";
  src: url("../fonts/RuderPlakatLLVarSub.woff2") format("woff2");
  font-display: swap;
}

/* ----------------------------------------------------- */
/* The Studiolo Press — Core Theme */
/* Goal: slightly more breathable + readable */
/* ----------------------------------------------------- */

:root{
  /* Core */
  --ink-black: #1f1c19;
  --parchment-white: #f4f1e8;

  /* Accents */
  --martian-vermilion: #dd5735;

  /* UI / type */
  --maxw: 1120px;
  --pad: 20px;

  /* Softer rules + slightly higher contrast for readability */
  --rule-night: rgba(244, 241, 232, 0.16);
  --rule-day: rgba(31, 28, 25, 0.16);

  /* Muted text tuned for legibility (less washed out than before) */
  --muted-night: rgba(244, 241, 232, 0.80);
  --muted-day: rgba(31, 28, 25, 0.78);

  /* Body color (full) */
  --body-night: rgba(244, 241, 232, 0.92);
  --body-day: rgba(31, 28, 25, 0.92);

  /* Type sizing */
  --body-size: 15px;          /* was 14px */
  --body-leading: 1.78;       /* was 1.65 */
  --measure: 72ch;            /* a touch tighter than 74ch for easier reading */
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background: var(--ink-black);
  color: var(--parchment-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-inverse{
  background: var(--parchment-white);
  color: var(--ink-black);
}

a{
  color: inherit;
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px var(--pad) 64px;
}

/* ----------------------------- */
/* Header */
/* ----------------------------- */

.header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-night);
}
body.is-inverse .header{ border-bottom-color: var(--rule-day); }

.brand{
  display:flex;
  align-items:flex-start;
  gap: 16px;
  min-width: 260px;
}
.brand img{
  width: 220px;
  height: auto;
  display:block;
}

.addr{
  text-align:right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-night);
}
body.is-inverse .addr{ color: var(--muted-day); }

/* ----------------------------- */
/* Tabs + Inverse */
/* ----------------------------- */

.topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 12px;
}

.tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style:none;
}

.tablink{
  display:inline-block;
  padding: 8px 12px;
  border: 1px solid var(--rule-night);
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.01em;
  opacity: 0.94;
}
body.is-inverse .tablink{ border-color: var(--rule-day); }

.tablink[aria-current="page"]{
  opacity: 1;
  border-color: var(--martian-vermilion);
}

.inverse{
  user-select:none;
  display:flex;
  align-items:center;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--muted-night);
}
body.is-inverse .inverse{ color: var(--muted-day); }

.inverse input{ transform: translateY(1px); }

/* ----------------------------- */
/* Main content */
/* ----------------------------- */

.main{
  padding-top: 18px;
}

/* ----------------------------------------------------- */
/* Ruder Plakat headers — more breathable + readable
   - keep kerning on
   - soften tracking (less negative than before)
   - slightly taller line-height
   - add mild word spacing
   - add a little bottom margin for separation
----------------------------------------------------- */

.h1{
  font-family: "RuderPlakatLLVarWeb", "RuderPlakatLLVarSub", system-ui, sans-serif;
  font-weight: 400;

  /* Kerning + ligatures */
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1;

  /* Breathing room */
  letter-spacing: -0.006em;     /* was too tight; this is easier to read */
  word-spacing: 0.02em;         /* subtle: helps “What We Do” feel clearer */

  font-size: clamp(44px, 6vw, 86px);
  line-height: 0.98;            /* was 0.92; taller = more legible */
  margin: 0 0 12px;
}

/* Tighten just a hair on very large screens if desired */
@media (min-width: 1200px){
  .h1{ letter-spacing: -0.008em; }
}

/* Loosen slightly on small screens so it doesn’t clump */
@media (max-width: 600px){
  .h1{
    letter-spacing: -0.002em;
    line-height: 1.02;
  }
}

.h2{
  font-family: "Old Standard TT", "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;              /* slightly larger */
  line-height: 1.42;            /* more breathable */
  margin: 0 0 22px;
  color: var(--muted-night);
}
body.is-inverse .h2{ color: var(--muted-day); }

.body{
  font-family: "IBM Plex Sans Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  max-width: var(--measure);
  color: var(--body-night);
}
body.is-inverse .body{ color: var(--body-day); }

.body p{
  margin: 0 0 14px;             /* clearer paragraph rhythm */
}

.body a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* content “panel” */
.panel{
  border-top: 1px solid var(--rule-night);
  padding-top: 20px;
}
body.is-inverse .panel{ border-top-color: var(--rule-day); }

/* ----------------------------- */
/* Footer */
/* ----------------------------- */

.footer{
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-night);
  color: var(--muted-night);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}
body.is-inverse .footer{
  border-top-color: var(--rule-day);
  color: var(--muted-day);
}

/* ----------------------------- */
/* Optional: if you ever want a tighter variant for poster moments */
/* ----------------------------- */
.tight{
  letter-spacing: -0.015em;
}