/* ===============================================================
   layout.css — single stylesheet bundle
   =============================================================== */

/* --- tokens --------------------------------------------------- */
:root {
  --c-accent:      #2563eb;
  --c-accent-dk:   #1d4ed8;
  --c-flag:        #f59e0b;
  --c-flag-dk:     #d97706;

  --c-base:        #1e293b;
  --c-base-2:      #475569;
  --c-base-3:      #94a3b8;
  --c-edge:        #e2e8f0;
  --c-sheet:       #ffffff;
  --c-sheet-2:     #f8fafc;
  --c-sheet-3:     #f1f5f9;

  --ff-text: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-disp: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap-w:  1140px;
  --r-1:     8px;
  --r-2:     12px;
  --sh-1:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-2:    0 4px 12px rgba(0,0,0,.08);
  --sh-3:    0 10px 30px rgba(0,0,0,.1);

  --bar-h:   64px;

  --mo-ease: cubic-bezier(.4,0,.2,1);
  --mo-time: .25s;
}

/* --- reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ff-text);
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-base);
  background: var(--c-sheet);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--c-accent); text-decoration: none; transition: color var(--mo-time) var(--mo-ease); }
a:hover { color: var(--c-accent-dk); }

/* the only real heading on the page is the article H1 */
h1 {
  font-family: var(--ff-disp);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-base);
  font-size: 1.75rem;
}

p  { margin-bottom: 1rem; color: var(--c-base-2); }

.a11y-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- faux heading scale (span-based) -------------------------- */
.tt-xl { font-size: 1.75rem;  font-weight: 700; line-height: 1.3; color: var(--c-base); display: block; }
.tt-lg { font-size: 1.625rem; font-weight: 700; line-height: 1.3; color: var(--c-base); display: block; }
.tt-md { font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: var(--c-base); display: block; }
.tt-sm { font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--c-base); display: block; }

/* --- wrap + grid (CSS Grid based) ----------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap-w);
  margin: 0 auto;
  padding: 0 15px;
}

.cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.cols--tight { gap: 20px; }
.cols--wide  { gap: 40px; }

@media (min-width: 576px) {
  .cols--duo  { grid-template-columns: 1fr 1fr; }
  .cols--trio { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 992px) {
  .cols--quad { grid-template-columns: repeat(4, 1fr); }
}

.flow        { display: flex; }
.flow-mid    { align-items: center; }
.flow-center { justify-content: center; }
.flow-split  { justify-content: space-between; }
.tx-center   { text-align: center; }
.tx-light    { color: #fff; }
.m0   { margin: 0 !important; }
.mb30 { margin-bottom: 30px; }
.mt50 { margin-top: 50px; }
.mt55 { margin-top: 55px; }
.up3  { margin-top: -3px; }
.up10 { margin-top: -10px; }
.mr20 { margin-right: 20px; }
.f15  { font-size: 15px; }
.ib   { display: inline-block; }
.pb100{ padding-bottom: 100px; }
.bg-soft { background: var(--c-sheet-2); }

/* --- progress strip ------------------------------------------- */
.gauge {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--c-accent), var(--c-flag));
  z-index: 10000;
  transition: width 50ms linear;
}

/* --- header bar ----------------------------------------------- */
.hbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  background: var(--c-sheet);
  border-bottom: 1px solid var(--c-edge);
  z-index: 9000;
  display: flex;
  align-items: center;
  transition: transform var(--mo-time) var(--mo-ease), box-shadow var(--mo-time) var(--mo-ease);
}
.hbar.is-gone  { transform: translateY(-100%); }
.hbar.is-stuck { box-shadow: var(--sh-1); }

.hbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img { height: 30px; width: auto; }
.logo svg { display: block; }

.hbar__nav {
  display: none;
  align-items: center;
}
@media (min-width: 992px) {
  .hbar__nav { display: flex; }
}

.nav {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.nav--right { margin-left: auto; }

.nav__cell { position: relative; }

.nav__a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-base-2);
  border-radius: var(--r-1);
  transition: color var(--mo-time) var(--mo-ease), background var(--mo-time) var(--mo-ease);
}
.nav__a:hover {
  color: var(--c-accent);
  background: var(--c-sheet-3);
}
.nav__a svg { width: 20px; height: 20px; }

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px; height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-base);
  border-radius: 2px;
  transition: var(--mo-time) var(--mo-ease);
}
@media (min-width: 992px) {
  .burger { display: none; }
}

/* --- slide-over menu ------------------------------------------ */
.curtain {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.curtain.is-on { display: flex; }
.curtain .burger span { background: #fff; }
.curtain .burger { position: absolute; top: 20px; right: 20px; }
.curtain .nav { flex-direction: column; gap: 20px; }
.curtain .nav a { color: #fff; font-size: 1.1rem; }
.curtain .nav a:hover { color: var(--c-flag); }

/* --- crumb ---------------------------------------------------- */
.crumb {
  padding: calc(var(--bar-h) + 20px) 0 16px;
  font-size: .85rem;
  color: var(--c-base-3);
}
.crumb a { color: var(--c-base-3); }
.crumb a:hover { color: var(--c-accent); }
.crumb__div { margin: 0 8px; }

/* --- card base ------------------------------------------------ */
.card {
  background: var(--c-sheet);
  border-radius: var(--r-2);
}
.card--ring {
  box-shadow: var(--sh-1);
  border: 1px solid var(--c-edge);
}
.slab {
  padding-top: 30px;
}
.card__pad {
  padding: 20px 24px;
}
.hr {
  height: 1px;
  background: var(--c-edge);
  margin: 0;
}

/* --- article (kept at top, full priority) --------------------- */
.post {
  overflow: hidden;
}
.post__zone {
  padding: 24px 28px;
}
@media (max-width: 767px) {
  .post__zone { padding: 18px 16px; }
}
.post__h1 {
  font-size: 1.75rem;
  margin-bottom: 14px;
}

.post-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .82rem;
  color: var(--c-base-3);
}
.post-info span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.post-info svg { opacity: .6; }

.post-copy {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--c-base-2);
}
.post-copy h2, .post-copy h3, .post-copy h4 {
  font-family: var(--ff-disp);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-base);
}
.post-copy h2 { font-size: 1.5rem;  margin: 2rem 0 1rem; }
.post-copy h3 { font-size: 1.3rem;  margin: 1.75rem 0 .75rem; }
.post-copy h4 { font-size: 1.1rem;  margin: 1.5rem 0 .6rem; }
.post-copy p  { margin-bottom: 1.15rem; }
.post-copy img { border-radius: var(--r-1); margin: 1.5rem 0; }
.post-copy ul,
.post-copy ol { margin: 0 0 1.2rem 1.5rem; }
.post-copy li { margin-bottom: .4rem; }
.post-copy a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.post-copy a:hover { color: var(--c-accent-dk); }

.qbox,
.post-copy blockquote {
  border-left: 4px solid var(--c-accent);
  padding: 16px 24px;
  margin: 1.5rem 0;
  background: var(--c-sheet-3);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-style: italic;
  color: var(--c-base-2);
}

/* --- contents map --------------------------------------------- */
.cmap-wrap {
  border-top: 1px solid var(--c-edge);
}
.cmap {
  background: var(--c-sheet-3);
  border-radius: var(--r-1);
  padding: 16px 20px;
}
.cmap__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.cmap__lbl {
  font-weight: 700;
  font-size: .95rem;
}
.cmap__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--c-accent);
  line-height: 1;
}
.cmap__btn svg { width: 16px; height: 16px; display: block; transition: transform var(--mo-time) var(--mo-ease); }
.cmap__btn.is-shut svg { transform: rotate(-90deg); }
.cmap__body ol {
  list-style: decimal;
  margin: 0;
  padding-left: 1.2rem;
}
.cmap__body li { margin-bottom: 6px; }
.cmap__body a {
  font-size: .88rem;
  color: var(--c-base-2);
  transition: color var(--mo-time) var(--mo-ease);
}
.cmap__body a:hover { color: var(--c-accent); }

/* --- share ---------------------------------------------------- */
.spread {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.spread__row {
  display: flex;
  gap: 8px;
}
.spread__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-edge);
  background: var(--c-sheet);
  color: var(--c-base-2);
  transition: all var(--mo-time) var(--mo-ease);
  cursor: pointer;
}
.spread__dot:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: rgba(37,99,235,.06);
}
.spread__dot--a:hover { color: #1d9bf0; border-color: #1d9bf0; }
.spread__dot--b:hover { color: #1877f2; border-color: #1877f2; }
.spread__dot--c:hover { color: #0a66c2; border-color: #0a66c2; }

/* --- related -------------------------------------------------- */
.akin {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
@media (min-width: 576px) {
  .akin { grid-template-columns: 1fr 1fr 1fr; }
}
.akin__cell {
  display: block;
  padding: 16px;
  background: var(--c-sheet-3);
  border-radius: var(--r-1);
  transition: background var(--mo-time) var(--mo-ease), transform var(--mo-time) var(--mo-ease);
}
.akin__cell:hover {
  background: var(--c-sheet);
  box-shadow: var(--sh-1);
  transform: translateY(-2px);
}
.akin__t {
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-base);
}

/* --- comment / contact heads ---------------------------------- */
.block-head {
  display: block;
  padding: 24px 28px 0;
}

/* --- forms ---------------------------------------------------- */
.inp {
  width: 100%;
  padding: 10px 14px;
  font-size: .9rem;
  font-family: var(--ff-text);
  color: var(--c-base);
  background: var(--c-sheet);
  border: 1px solid var(--c-edge);
  border-radius: var(--r-1);
  outline: none;
  transition: border-color var(--mo-time) var(--mo-ease), box-shadow var(--mo-time) var(--mo-ease);
}
.inp:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
textarea.inp { resize: vertical; }

.inp--seam {
  border-radius: var(--r-1) 0 0 var(--r-1);
  border-right: none;
}
.inp--flat {
  background: var(--c-sheet-3);
  border-color: transparent;
}
.inp--flat:focus {
  background: var(--c-sheet);
  border-color: var(--c-accent);
}
.inp--invert {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.inp--invert::placeholder { color: rgba(255,255,255,.5); }
.inp--invert:focus { border-color: rgba(255,255,255,.5); }

.combo {
  display: flex;
}
.combo .inp { flex: 1; }
.combo .bt {
  border-radius: 0 var(--r-1) var(--r-1) 0;
  flex-shrink: 0;
}

.row-gap { margin-bottom: 16px; }

/* --- buttons -------------------------------------------------- */
.bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  font-family: var(--ff-text);
  font-size: .88rem;
  font-weight: 600;
  border: none;
  border-radius: var(--r-1);
  cursor: pointer;
  color: #fff;
  background: var(--c-accent);
  transition: background var(--mo-time) var(--mo-ease), transform var(--mo-time) var(--mo-ease);
}
.bt:hover {
  background: var(--c-accent-dk);
  color: #fff;
  transform: translateY(-1px);
}
.bt--lg { padding: 12px 28px; font-size: .9rem; }
.bt--sm { padding: 8px 18px;  font-size: .84rem; }

.bt--ic  { padding: 12px 16px; }
.bt--ic .gi { width: 16px; height: 16px; }

.bt--fill { display: flex; width: 100%; }

.bt--line {
  background: transparent;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
}
.bt--line:hover {
  background: var(--c-accent);
  color: #fff;
}

.bt--mute {
  background: var(--c-sheet-3);
  color: var(--c-base-2);
}
.bt--mute:hover {
  background: var(--c-edge);
  color: var(--c-base);
}

.bt--pop  { background: var(--c-accent); }
.bt--ext  { background: #82b541; }
.bt--ext:hover { background: #6fa033; }

.or-line {
  position: relative;
  text-align: center;
  color: rgba(255,255,255,.5);
  font-size: .8rem;
}
.or-line::before,
.or-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: rgba(255,255,255,.15);
}
.or-line::before { left: 0; }
.or-line::after  { right: 0; }

/* --- side cells (below content) ------------------------------- */
.rail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 576px) {
  .rail-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.unit {
  background: var(--c-sheet);
  border-radius: var(--r-2);
}
.unit__pad {
  padding: 22px;
}
.unit__lbl {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-base);
  margin-bottom: 10px;
}
.unit__note {
  font-size: .85rem;
  color: var(--c-base-3);
  margin-bottom: 14px;
}

.toplist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toplist li {
  padding: 10px 0;
  border-bottom: 1px solid var(--c-edge);
}
.toplist li:last-child { border-bottom: none; }
.toplist a {
  font-size: .88rem;
  color: var(--c-base-2);
}
.toplist a:hover { color: var(--c-accent); }

/* --- footer --------------------------------------------------- */
.fbar {
  background: var(--c-base);
  color: rgba(255,255,255,.7);
  padding: 50px 0 40px;
}
.fbar a { color: rgba(255,255,255,.6); }
.fbar a:hover { color: #fff; }

.fcol { margin-bottom: 10px; }
.flogo img { height: 30px; width: auto; filter: brightness(10); margin-bottom: 14px; }
.flogo svg { margin-bottom: 14px; }
.fnote { font-size: .85rem; }

.fttl {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.flist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.flist li { margin-bottom: 10px; }
.flist a { font-size: .88rem; }

.soc {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin-top: 14px;
}
.soc a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  transition: all var(--mo-time) var(--mo-ease);
}
.soc a:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.soc svg { width: 16px; height: 16px; }

/* --- up control ----------------------------------------------- */
.topper {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--c-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--mo-time) var(--mo-ease);
  z-index: 8000;
}
.topper.is-up {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.topper:hover {
  background: var(--c-accent-dk);
  transform: translateY(-2px);
}

/* --- consent -------------------------------------------------- */
.cookie {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--c-base);
  color: rgba(255,255,255,.85);
  padding: 16px 0;
  z-index: 9500;
  display: none;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.cookie.is-up { display: block; }
.cookie .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cookie p {
  margin: 0;
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  flex: 1;
}
.cookie a { color: var(--c-flag); text-decoration: underline; }

/* --- overlays (auth/contact, markup at bottom, via #) --------- */
.sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.85);
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.sheet.is-live { display: flex; }

.sheet--dark .sheet__card,
.sheet--plain .card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 40px 32px;
  border-radius: var(--r-2);
  background: #1e293b;
  margin: auto;
}
.sheet--plain .card {
  background: var(--c-sheet);
  color: var(--c-base);
}

.sheet__x {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.6);
  transition: color var(--mo-time) var(--mo-ease);
}
.sheet__x:hover { color: #fff; }
.sheet__x svg { width: 18px; height: 18px; }

/* --- print ---------------------------------------------------- */
@media print {
  .hbar, .curtain, .gauge,
  .topper, .cookie, .sheet,
  .spread, .rail-grid, .fbar { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .wrap { max-width: 100%; }
}