/* === 15-gazette/styles.css ===
 * Official government gazette — government (functional-accessible)
 * Zero decoration, maximum accessibility, print-ready
 */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { text-decoration-skip-ink: auto; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* --- Fluid Scales --- */
:root {
  --step--2: clamp(0.69rem, 0.66rem + 0.18vw, 0.80rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.25vw, 1.00rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.33vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.45vw, 1.41rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.63vw, 1.76rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.88vw, 2.20rem);

  --space-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.46rem + 0.22vw, 0.63rem);
  --space-xs:  clamp(0.75rem, 0.69rem + 0.33vw, 0.94rem);
  --space-s:   clamp(1.00rem, 0.93rem + 0.33vw, 1.13rem);
  --space-m:   clamp(1.50rem, 1.39rem + 0.54vw, 1.69rem);
  --space-l:   clamp(2.00rem, 1.85rem + 0.76vw, 2.25rem);
  --space-xl:  clamp(3.00rem, 2.78rem + 1.09vw, 3.38rem);
  --space-2xl: clamp(4.00rem, 3.70rem + 1.52vw, 4.50rem);
}

/* --- Government Domain Tokens --- */
:root {
  --color-bg: oklch(1.0 0 0);
  --color-bg-alt: oklch(0.97 0.003 240);
  --color-text: oklch(0.15 0.01 260);
  --color-text-dim: oklch(0.40 0.01 260);
  --color-heading: oklch(0.10 0.01 260);
  --color-accent: oklch(0.47 0.18 250);
  --color-border: oklch(0.75 0.005 260);

  --font-heading: 'Noto Sans', 'Arial', sans-serif;
  --font-body: 'Noto Sans', 'Arial', sans-serif;
  --font-mono: 'Noto Sans Mono', 'Consolas', monospace;
}

/* --- Page --- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}

/* --- Document Container --- */
.document {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-l);
}

/* --- Official Header --- */
.doc-header {
  border-bottom: 4px solid var(--color-heading);
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-l);
}

.doc-authority {
  font-size: var(--step--2);
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-xs);
}

.doc-title {
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.2;
}

.doc-subtitle {
  font-size: var(--step-0);
  color: var(--color-text-dim);
  margin-top: var(--space-2xs);
}

.doc-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3xs) var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-text-dim);
  margin-top: var(--space-m);
  border: 1px solid var(--color-border);
  padding: var(--space-xs);
}

.doc-meta dt {
  font-weight: 700;
  color: var(--color-text);
}

/* --- Table of Contents --- */
.toc {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: var(--space-m);
  margin-bottom: var(--space-xl);
}

.toc-title {
  font-weight: 700;
  font-size: var(--step-0);
  margin-bottom: var(--space-xs);
  color: var(--color-heading);
}

.toc-list {
  list-style: none;
  padding: 0;
  counter-reset: toc;
}

.toc-list li {
  counter-increment: toc;
  padding: var(--space-3xs) 0;
  border-bottom: 1px dotted var(--color-border);
}

.toc-list li::before {
  content: "\00A7" counter(toc) " ";
  font-family: var(--font-mono);
  color: var(--color-accent);
  font-weight: 700;
}

.toc-list a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* --- Sections --- */
.schedule {
  margin-bottom: var(--space-xl);
  counter-increment: schedule;
}

.schedule-title {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--color-heading);
  border-bottom: 2px solid var(--color-heading);
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-m);
}

/* --- Numbered List (Projects) --- */
.numbered-list {
  list-style: none;
  padding: 0;
  counter-reset: item;
}

.numbered-list li {
  counter-increment: item;
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-xs);
}

.numbered-list li::before {
  content: counter(item) ".";
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-accent);
}

.item-name {
  font-weight: 700;
  color: var(--color-heading);
}

.item-desc {
  color: var(--color-text);
  margin-top: var(--space-3xs);
}

.item-tech {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-text-dim);
  margin-top: var(--space-3xs);
}

/* --- Dated Entries (Experience) --- */
.dated-list {
  list-style: none;
  padding: 0;
}

.dated-entry {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-m);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--color-border);
}

.dated-entry dt {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-text-dim);
}

.dated-entry dd {
  margin: 0;
}

.entry-title {
  font-weight: 700;
  color: var(--color-heading);
}

.entry-detail {
  margin-top: var(--space-3xs);
  color: var(--color-text);
}

/* --- Skills Declaration --- */
.declaration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-m);
}

.declaration-block {
  border: 1px solid var(--color-border);
  padding: var(--space-s);
}

.declaration-category {
  font-weight: 700;
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3xs);
  margin-bottom: var(--space-xs);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.declaration-items {
  font-size: var(--step--1);
  line-height: 1.8;
  color: var(--color-text);
}

/* --- Footer --- */
.doc-footer {
  border-top: 4px solid var(--color-heading);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
}

.footer-ref {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-text-dim);
  margin-bottom: var(--space-m);
}

.footer-contact {
  font-size: var(--step--1);
}

.footer-contact a {
  color: var(--color-accent);
}

.footer-contact p {
  margin-bottom: var(--space-2xs);
}

/* --- Print Styles --- */
@page {
  margin: 2cm;
}

@media print {
  body { font-size: 11pt; }
  .document { max-width: none; padding: 0; }
  a { color: var(--color-text); text-decoration: underline; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .document { padding: var(--space-s); }
  .numbered-list li { grid-template-columns: 30px 1fr; }
  .dated-entry { grid-template-columns: 1fr; gap: var(--space-3xs); }
  .declaration-grid { grid-template-columns: 1fr; }
  .doc-meta { grid-template-columns: 1fr; }
}

/* --- Forced Colors (High Contrast) --- */
@media (forced-colors: active) {
  .doc-header { border-bottom-color: CanvasText; }
  .schedule-title { border-bottom-color: CanvasText; }
  .doc-footer { border-top-color: CanvasText; }
}