/* =========================================================
   base.css — Design tokens, reset, page, typography
   ========================================================= */

:root {
  --color-bg:          #f0ece6;
  --color-bg-alt:      #ffffff;
  --color-fg:          #444;
  --color-fg-bold:     #555;
  --color-fg-light:    #bbb;
  --color-border:      #cccccc;
  --color-border-bg:   rgba(144, 144, 144, 0.075);
  --color-accent:      #9b2335;

  --font-body:         'Raleway', Helvetica, sans-serif;
  --font-heading:      'Montserrat', sans-serif;
  --font-fixed:        'Courier New', monospace;
  --font-weight:       300;
  --font-weight-bold:  500;
  --font-weight-heading: 700;
  --letter-spacing:    0.05em;
  --letter-spacing-alt: 0.12em;

  --radius:            8px;
  --element-height:    2.75em;
  --element-margin:    2em;

  --duration-nav:      0.5s;
  --duration-transition: 0.2s;
}

/* Reset */
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  -webkit-text-size-adjust: none;
}

mark {
  background-color: transparent;
  color: inherit;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* Page */
@media screen and (max-width: 480px) {
  html, body {
    min-width: 320px;
  }
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background: var(--color-bg);
}

body.is-preload-0 *,
body.is-preload-0 *:before,
body.is-preload-0 *:after {
  animation: none !important;
  transition: none !important;
}

/* Typography */
body, input, select, textarea {
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 14pt;
  font-weight: var(--font-weight);
  line-height: 1.75;
  letter-spacing: var(--letter-spacing);
}

@media screen and (max-width: 1680px) {
  body, input, select, textarea {
    font-size: 11pt;
  }
}

@media screen and (max-width: 360px) {
  body, input, select, textarea {
    font-size: 10pt;
  }
}

a {
  transition: color var(--duration-transition) ease,
              border-bottom-color var(--duration-transition) ease;
  text-decoration: none;
  border-bottom: solid 1px rgba(68, 68, 68, 0.25);
  color: inherit;
}

a:hover {
  color: var(--color-accent) !important;
  border-bottom-color: transparent;
}

strong, b {
  color: var(--color-fg-bold);
  font-weight: var(--font-weight-bold);
}

em, i {
  font-style: italic;
}

p {
  margin: 0 0 var(--element-margin) 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-fg-bold);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1.5;
  margin: 0 0 1em 0;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-alt);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  text-decoration: none;
}

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.7em; }

@media screen and (max-width: 736px) {
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.25em; }
}

sub {
  font-size: 0.8em;
  position: relative;
  top: 0.5em;
}

sup {
  font-size: 0.8em;
  position: relative;
  top: -0.5em;
}

blockquote {
  border-left: solid 4px var(--color-border);
  font-style: italic;
  margin: 0 0 var(--element-margin) 0;
  padding: 0.5em 0 0.5em var(--element-margin);
}

code {
  background: var(--color-border-bg);
  border-radius: var(--radius);
  border: solid 1px var(--color-border);
  font-family: var(--font-fixed);
  font-size: 0.9em;
  margin: 0 0.25em;
  padding: 0.25em 0.65em;
}

pre {
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-fixed);
  font-size: 0.9em;
  margin: 0 0 var(--element-margin) 0;
}

pre code {
  display: block;
  line-height: 1.75;
  padding: 1em 1.5em;
  overflow-x: auto;
}

hr {
  border: 0;
  border-bottom: solid 1px var(--color-border);
  margin: var(--element-margin) 0;
}

hr.major {
  margin: 3em 0;
}

.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }

::selection {
  background: rgba(155, 35, 53, 0.15);
  color: var(--color-fg-bold);
}