/* styles.css */

/* ==================================================
   Design tokens
   ================================================== */
:root {
  --bg: #ffffff;
  --text: #000000;

  --red: #de0f0f;
  --green: #47f200;

  --font-main: "Montserrat", system-ui, -apple-system, sans-serif;

  /* Desktop base sizing (the JS scales this down on smaller screens) */
  --pad: 32px;
  --fs: 96px;
  --lh: 1.05;
}

/* ==================================================
   Base reset
   ================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

/* Prevent iOS Safari from auto-inflating text sizes */
body {
  font-family: var(--font-main);
  font-weight: 900;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ==================================================
   Page layout
   ================================================== */
.page {
  min-height: 100vh;
  padding: var(--pad);
}

/* ==================================================
   The stage that gets scaled by JS
   ================================================== */
.fit-stage {
  font-size: var(--fs);
  line-height: var(--lh);

  /* Never wrap: we will scale instead */
  white-space: nowrap;

  /* Important: allow measuring overflow without clipping */
  display: inline-block;
}

/* Keep spacing consistent: use line-height only, no margins */
.line {
  margin: 0;
}

/* ==================================================
   Strike through ".studio" (soft text, crisp strike)
   ================================================== */
.studio-word {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.studio-text {
  display: inline-block;

  /* subtle softness */
  filter: blur(3px);
  text-shadow: 0 0 0.4px rgba(0, 0, 0, 0.449);

  position: relative;
  z-index: 1;
}

.studio-word::after {
  content: "";
  position: absolute;

  left: -6px;
  right: -6px;

  /* through the letters */
  top: 49%;

  /* thickness (scales with the stage) */
  height: 7px;

  background: var(--red);
  border-radius: 999px;

  /* shadow */
  filter: drop-shadow(4px 4px 4px rgba(255, 0, 0, 0.879));

  /* strike above blurred text */
  z-index: 2;
  pointer-events: none;
}

/* ==================================================
   ".works" button (stroke + translucent fill + inset shadow)
   ================================================== */
.works-word {
  position: relative;
  display: inline-block;

  padding: 6px 18px;

  color: #000000;
  text-decoration: none;

  border-radius: 999px;

  border: 6px solid var(--green);
  background: rgba(70, 242, 40, 0.535);

  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.186);

  transition: transform 120ms ease;
}

/* inner shadow layer */
.works-word::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.338),
    inset 0 -2px 3px rgba(255, 255, 255, 0.359);

  pointer-events: none;
}

.works-word:hover { transform: translate(1px, 1px); }
.works-word:active { transform: translate(2px, 2px); }

/* ==================================================
   Optional: slightly tighter padding on small screens
   (JS still does the real scaling)
   ================================================== */
@media (max-width: 520px) {
  :root { --pad: 22px; }
}
@media (max-width: 390px) {
  :root { --pad: 18px; }
}