/* ==========================================================================
   SITCO - Seoul Inspection & Testing Co. Ltd.
   style.css - design tokens, reset, typography, layout primitives

   Design thesis: radiography. This company reads what is invisible inside
   metal. Their own hero photograph is a film darkroom lit by a red safelight,
   and their logo red is that same red (#E30613, sampled from logositco.png).
   So the site alternates two surfaces: DARKROOM (where film is exposed) and
   LIGHTBOX (where film is read). The red is used the way a safelight is used
   - sparingly, and only where it has to be seen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand - pixel-sampled from the logo, not approximated */
  --safelight:        #E30613;
  --safelight-deep:   #A80410;
  --safelight-lit:    #FF5F68;   /* red text on darkroom surfaces (6.4:1) */
  --safelight-wash:   rgba(227, 6, 19, 0.10);

  /* Darkroom surfaces - cool near-black, like the glossy walls in sitco3.jpg */
  --darkroom:         #0D1014;
  --darkroom-raised:  #151A20;
  --darkroom-panel:   #1C232B;
  --darkroom-line:    rgba(255, 255, 255, 0.10);
  --darkroom-line-2:  rgba(255, 255, 255, 0.055);

  /* Lightbox surfaces - the faint blue-white of a film illuminator */
  --lightbox:         #F3F5F8;
  --lightbox-raised:  #FFFFFF;
  --film:             #E2E7EC;
  --film-edge:        #CDD5DD;

  /* Ink */
  --ink:             #10141A;
  --ink-muted:       #414B56;
  --steel:           #5F6A75;
  --on-dark:         #EAEEF2;
  --on-dark-muted:   #949FAB;

  /* Aliases required by the brief */
  --primary-color:   var(--safelight);
  --secondary-color: var(--darkroom);
  --accent-color:    var(--safelight);
  --dark-color:      var(--darkroom);
  --light-color:     var(--lightbox);
  --text-color:      var(--ink);
  --border-color:    var(--film-edge);

  /* Type */
  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.03rem);
  --step-1:  clamp(1.12rem, 1.06rem + 0.28vw, 1.28rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.62vw, 1.72rem);
  --step-3:  clamp(1.65rem, 1.40rem + 1.20vw, 2.40rem);
  --step-4:  clamp(2.05rem, 1.55rem + 2.40vw, 3.60rem);

  /* Space - 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 5.5rem;   --s-10: 7.5rem;

  /* Structure */
  --shell:       1220px;
  --shell-tight: 900px;
  --gutter:      clamp(1.25rem, 4vw, 3rem);
  --radius:      3px;
  --radius-lg:   4px;

  --shadow-sm: 0 1px 2px rgba(16, 20, 26, 0.06), 0 1px 1px rgba(16, 20, 26, 0.04);
  --shadow-md: 0 2px 4px rgba(16, 20, 26, 0.05), 0 8px 24px -12px rgba(16, 20, 26, 0.18);
  --shadow-lg: 0 4px 8px rgba(16, 20, 26, 0.05), 0 24px 56px -20px rgba(16, 20, 26, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.28s;

  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

body {
  margin: 0;
  background: var(--lightbox);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

a { color: var(--safelight-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--safelight); }

:focus-visible {
  outline: 2px solid var(--safelight);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-darkroom :focus-visible { outline-color: #FF5B66; }

::selection { background: var(--safelight); color: #fff; }

/* --------------------------------------------------------------------------
   3. Typography roles
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-size: var(--step-4);
  text-wrap: balance;
}

.h-section {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
}

.h-block {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Eyebrow / technical label. NDT methods are genuinely two-letter codes,
   so mono is the honest way to set them - not a stylistic flourish. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  display: block;
}
.eyebrow--red { color: var(--safelight); }
.on-darkroom .eyebrow { color: var(--on-dark-muted); }

.lede {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-muted);
}

.prose p { margin-bottom: var(--s-5); max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--ink); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--tight { max-width: var(--shell-tight); }

.band { padding-block: clamp(3.5rem, 7vw, 7.5rem); position: relative; }
.band--snug { padding-block: clamp(2.5rem, 5vw, 4rem); }

.band--lightbox { background: var(--lightbox); color: var(--ink); }
.band--paper    { background: var(--lightbox-raised); color: var(--ink); }
.band--darkroom { background: var(--darkroom); color: var(--on-dark); }

.on-darkroom { color: var(--on-dark); }
.on-darkroom .h-section, .on-darkroom .h-block { color: var(--on-dark); }
.on-darkroom .lede, .on-darkroom p { color: var(--on-dark-muted); }
.on-darkroom strong { color: var(--on-dark); }
.on-darkroom a { color: #FF7079; }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  transform: translateY(-160%);
  z-index: 200;
  background: var(--safelight); color: #fff;
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   5. The density wedge - the site's one signature device.

   Every radiograph is shot with a step wedge beside it so the reader can
   calibrate density. This is that wedge: eleven hard-edged steps running from
   lightbox white down to darkroom black, with the safelight red set at the
   step where the film stops being readable. It is the only ornament on the
   site, and it marks every joint between a dark band and a light one.
   -------------------------------------------------------------------------- */
.wedge {
  display: flex;
  height: 6px;
  width: 100%;
  overflow: hidden;
}
.wedge span { flex: 1 1 0; display: block; }
.wedge span:nth-child(1)  { background: #FFFFFF; }
.wedge span:nth-child(2)  { background: #E4E9ED; }
.wedge span:nth-child(3)  { background: #C6CFD7; }
.wedge span:nth-child(4)  { background: #A8B4BF; }
.wedge span:nth-child(5)  { background: #8A99A6; }
.wedge span:nth-child(6)  { background: #E30613; }
.wedge span:nth-child(7)  { background: #566572; }
.wedge span:nth-child(8)  { background: #3E4B57; }
.wedge span:nth-child(9)  { background: #2A343D; }
.wedge span:nth-child(10) { background: #1A2128; }
.wedge span:nth-child(11) { background: #0D1014; }

.wedge--tall { height: 10px; }
.wedge--flip span:nth-child(1)  { background: #0D1014; }
.wedge--flip span:nth-child(2)  { background: #1A2128; }
.wedge--flip span:nth-child(3)  { background: #2A343D; }
.wedge--flip span:nth-child(4)  { background: #3E4B57; }
.wedge--flip span:nth-child(5)  { background: #566572; }
.wedge--flip span:nth-child(6)  { background: #E30613; }
.wedge--flip span:nth-child(7)  { background: #8A99A6; }
.wedge--flip span:nth-child(8)  { background: #A8B4BF; }
.wedge--flip span:nth-child(9)  { background: #C6CFD7; }
.wedge--flip span:nth-child(10) { background: #E4E9ED; }
.wedge--flip span:nth-child(11) { background: #FFFFFF; }

/* --------------------------------------------------------------------------
   6. Motion
   -------------------------------------------------------------------------- */
/* Gated on `.js` so that if JavaScript never runs, every section is simply
   visible rather than stuck at opacity 0. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}