:root {
  --ss-gold:  #b8922a;   
  --ss-cream: #f5ead6;   
  --ss-brown: #2a1208;   
  --ss-dark:  #1a1008;   
  --ss-text:  #d8cdb8;   
}



@font-face {
  font-family: 'Windlass';
  src: url('fonts/Windlass.woff2') format('woff2'),
       url('fonts/Windlass.ttf')   format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'PragRoman';
  src: url('fonts/PragRoman.woff2') format('woff2'),
       url('fonts/PragRoman.ttf')   format('truetype');
  font-display: swap;
}



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

body {
  background: var(--ss-dark);
  color: var(--ss-text);
  font-family: 'PragRoman', Georgia, serif;
  min-height: 100vh;
}



.ss-back {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ss-dark);
  border-bottom: 1px solid rgba(184, 146, 42, 0.3);
  padding: 0.85rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ss-back > a {
  font-family: 'Windlass', Georgia, serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.2; 
  color: var(--ss-gold);
  text-decoration: none;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: color 0.2s;
}

.ss-back > a:hover {
  color: var(--ss-cream);
}

.ss-back > a:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 3px;
  border-radius: 2px;
}



.ss-meta-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5em;
}

.ss-meta-nav a {
  font-family: 'Windlass', Georgia, serif;
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  line-height: 1.2; 
  color: var(--ss-gold);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.ss-meta-nav a:hover {
  color: var(--ss-cream);
}

.ss-meta-nav a:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.ss-meta-nav span {
  display: none; 
}



.ss-cta {
  display: inline-block;
  font-family: 'Windlass', Georgia, serif;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  background: var(--ss-gold);
  color: var(--ss-dark);
  border: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ss-cta:hover {
  background: var(--ss-cream);
  color: var(--ss-brown);
}

.ss-cta:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 3px;
  border-radius: 2px;
}



:root {
  --ss-page-bottom-padding: 3vh;   
}

@media (orientation: portrait) {
  :root {
    --ss-page-bottom-padding: 40vh;  
  }
}

@media (orientation: landscape) {
  :root {
    --ss-page-bottom-padding: 40vh;  
  }
}