@import url('fonts.css');

:root {
  --paper:       #efeae0;
  --sheet:       #fffdf8;
  --ink:         #1b1813;
  --mid:         #5c554a;
  --faint:       #9c9283;
  --rule:        #e4ddcf;
  --accent:      #b04e2c;

  --sans: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --page-w: 210mm;
  --gap: 28px;
  --shell-w: var(--page-w);
}

body.layout-side { --shell-w: calc(2 * var(--page-w) + var(--gap)); }

body.theme-mocha {
  --paper: #181825;
  --sheet: #1e1e2e;
  --ink:   #cdd6f4;
  --mid:   #a6adc8;
  --faint: #6c7086;
  --rule:  #313244;
  --accent:#fab387;
}

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

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  padding: 48px 20px 96px;
  -webkit-font-smoothing: antialiased;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--shell-w);
  margin: 0 auto 12px;
}

.toolbar-group { display: flex; align-items: center; gap: 18px; }

.back-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s, color 0.3s;
}
.back-link:hover { color: var(--ink); background-size: 100% 1px; }

.download {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--sheet);
  text-decoration: none;
  padding: 10px 20px;
  transition: background 0.25s, transform 0.25s;
}
.download:hover { background: var(--accent); transform: translateY(-1px); }

/* Layout switch */
.layout-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--shell-w);
  margin: 0 auto 20px;
}

.layout-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.layout-option {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 6px 12px;
  transition: color 0.25s, border-color 0.25s;
}
.layout-option:hover { color: var(--ink); border-color: var(--accent); }
.layout-option[aria-current="true"] {
  color: var(--sheet);
  background: var(--ink);
  border-color: var(--ink);
}

/* Sheets */
.sheets {
  display: flex;
  gap: var(--gap);
  justify-content: center;
  align-items: flex-start;
  max-width: var(--shell-w);
  margin: 0 auto;
}

.sheets.stacked { flex-direction: column; align-items: center; }
.sheets.side    { flex-direction: row; flex-wrap: wrap; }

.sheet {
  background: var(--sheet);
  box-shadow: 0 1px 2px rgba(30,22,12,0.05), 0 24px 60px -24px rgba(30,22,12,0.25);
  line-height: 0;
}

.sheet img { width: 100%; height: auto; display: block; }

.page-number {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
  line-height: 1.6;
  padding-top: 8px;
}

.sheet-wrap { display: flex; flex-direction: column; }
.sheets.stacked .sheet-wrap { width: 100%; }
.sheets.side    .sheet-wrap { width: calc(50% - (var(--gap) / 2)); }
.sheet-wrap .sheet { width: 100%; }

.notice {
  max-width: var(--shell-w);
  margin: 0 auto 20px;
  font-size: 12px;
  color: var(--mid);
  line-height: 1.5;
}

@media (max-width: 900px) {
  body.layout-side { --shell-w: var(--page-w); }
  .sheets.side { flex-direction: column; align-items: center; }
  .sheets.side .sheet-wrap { width: 100%; }
}

@media print {
  .toolbar, .layout-switch, .page-number, .notice { display: none; }
  body { padding: 0; background: none; }
  .sheets { gap: 0; }
  .sheet { box-shadow: none; }
}