/* Men's Room — Design Tokens (Final)
 * Strict black-and-white brand identity, matching the logo.
 * Warm cream paper grounds the page; photos provide the only color.
 */

:root {
  /* Palette — strict B/W on warm paper */
  --paper:    #F4EFE3;   /* warm cream paper, newsprint feel */
  --paper-2:  #E9E2D0;   /* shadow on paper */
  --paper-3:  #DCD3BC;   /* card surface */
  --ink:      #0A0A0A;   /* logo black */
  --ink-2:    #1C1C1C;   /* lifted */
  --mid:      #2A2A2A;   /* darker mid */
  --grey-1:   #5C5851;   /* muted body */
  --grey-2:   #968F82;   /* subdued */
  --grey-3:   #C0B8A5;   /* faint */
  --rule:     rgba(10, 10, 10, 0.18);
  --rule-strong: rgba(10, 10, 10, 0.42);
  --rule-dim: rgba(10, 10, 10, 0.08);

  /* Type */
  --ff-display: "Recoleta", "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --ff-body:    "Sentient", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --ff-sans:    "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale */
  --fs-mono:   0.74rem;
  --fs-body:   clamp(1.00rem, 0.90rem + 0.4vw, 1.15rem);
  --fs-lead:   clamp(1.18rem, 1.00rem + 0.8vw, 1.55rem);
  --fs-h3:     clamp(1.55rem, 1.20rem + 1.6vw, 2.40rem);
  --fs-h2:     clamp(2.30rem, 1.30rem + 4.5vw, 5.20rem);
  --fs-h1:     clamp(3.20rem, 1.30rem + 9.0vw, 9.50rem);

  /* Rhythm */
  --gutter:    clamp(1.25rem, 0.6rem + 3vw, 3.25rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --max:       1380px;

  /* Motion */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-reveal: 1.15s;
  --t-image:  1.4s;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-body);
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 8% 4%, rgba(10, 10, 10, 0.045), transparent 40%),
    radial-gradient(ellipse at 92% 96%, rgba(10, 10, 10, 0.05), transparent 45%);
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--ink); color: var(--paper); }

.skip {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: .6rem 1rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-1);
}

.kicker {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2px;
  background: var(--ink);
}

em, .ital {
  font-style: italic;
  font-family: var(--ff-display);
  font-weight: 400;
  color: var(--ink);
}