/* ============================================================
   MORA ROBOTICS — stylesheet
   Shared by index.html (English) and ko/index.html (Korean).

   DESIGN TOKENS
   Change a value here and it updates everywhere on the site.
   ============================================================ */
:root{
  --ink:      #14181A;  /* body text, near-black with a cool cast      */
  --field:    #1E3A2B;  /* pepper-leaf green — dark surfaces           */
  --paper:    #EDEAE3;  /* warm grey paper — page background           */
  --paper-2:  #E3DFD6;  /* deeper paper, for banded sections           */
  --soil:     #7A4A32;  /* furrow earth — used literally in the drawing*/
  --pepper:   #C8452C;  /* Korean red pepper — accent, used sparingly  */
  --alu:      #8E958F;  /* anodized aluminium — rules, technical labels*/

  --display: "IBM Plex Sans Condensed", "IBM Plex Sans KR", system-ui, sans-serif;
  --body:    "IBM Plex Sans", "IBM Plex Sans KR", system-ui, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
}

/* Korean sets a little larger and looser than Latin at the same size. */
html[lang="ko"]{ --body-size: 16.5px; --line: 1.78; }
html[lang="en"]{ --body-size: 17px;   --line: 1.62; }

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--body-size, 17px);
  line-height: var(--line, 1.62);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--display); font-weight:700; line-height:1.06; margin:0; letter-spacing:-0.02em; }
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3{ letter-spacing:-0.01em; line-height:1.24; }
p{ margin:0 0 1.1em; }
a{ color: inherit; }
.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--gutter); }

/* Eyebrow: the small mono label above each section heading. */
.eyebrow{
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alu);
  margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background: currentColor; opacity:.4; }

/* ============================================================
   TOP RAIL
   ============================================================ */
.rail{
  border-bottom:1px solid rgba(20,24,26,.14);
  position:sticky; top:0; z-index:50;
  background: rgba(237,234,227,.92);
  backdrop-filter: blur(8px);
}
.rail .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:62px; }
.mark{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.mark b{ font-family:var(--display); font-size:21px; letter-spacing:.02em; }
.mark span{ font-size:15px; color: var(--soil); }
.rail-right{ display:flex; align-items:center; gap:26px; }
.rail nav{ display:flex; gap:26px; font-family:var(--data); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; }
.rail nav a{ text-decoration:none; color:var(--alu); padding:4px 0; border-bottom:1px solid transparent; }
.rail nav a:hover, .rail nav a:focus-visible{ color:var(--ink); border-bottom-color:var(--pepper); }

/* Language toggle */
.lang{ font-family:var(--data); font-size:12.5px; letter-spacing:.08em; display:flex; gap:8px; align-items:center; }
.lang a{ text-decoration:none; color:var(--alu); }
.lang a:hover, .lang a:focus-visible{ color:var(--ink); }
.lang [aria-current="true"]{ color:var(--ink); border-bottom:1px solid var(--pepper); }
.lang s{ color:rgba(20,24,26,.22); text-decoration:none; }
@media (max-width: 860px){ .rail nav{ display:none; } }

/* ============================================================
   HERO — text left, true-scale section drawing right
   ============================================================ */
.hero .wrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 76px);
  align-items:center;
  padding-block: clamp(48px, 8vw, 96px);
}
.hero h1{ font-size: clamp(38px, 6.1vw, 76px); margin-bottom: 26px; }
html[lang="ko"] .hero h1{ font-size: clamp(33px, 5.2vw, 62px); }
.hero h1 em{ font-style:normal; color: var(--pepper); }
.hero .lede{ font-size: clamp(17px, 1.5vw, 19.5px); max-width: 46ch; color:#33393B; }
.slogan{
  font-family:var(--data); font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--soil); margin:0 0 22px;
}
html[lang="ko"] .slogan{ font-family:var(--body); letter-spacing:.16em; font-size:13px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.btn{
  font-family:var(--data); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; padding:13px 22px; border:1px solid var(--ink);
  transition: background .18s ease, color .18s ease;
}
html[lang="ko"] .btn{ font-family:var(--body); letter-spacing:.04em; }
.btn:hover, .btn:focus-visible{ background:var(--ink); color:var(--paper); }
.btn.ghost{ border-color: rgba(20,24,26,.28); color:#4A5052; }
.btn.ghost:hover, .btn.ghost:focus-visible{ background:transparent; border-color:var(--ink); color:var(--ink); }

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .figure{ order:2; max-width:440px; margin-inline:auto; }
}

/* ---- the section drawing (SIGNATURE ELEMENT) ---- */
.figure figcaption{
  font-family:var(--data); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--alu); margin-top:14px;
  display:flex; justify-content:space-between; gap:12px;
  border-top:1px solid rgba(20,24,26,.14); padding-top:10px;
}
.figure svg{ width:100%; height:auto; display:block; }

.dimline{ stroke: var(--alu); stroke-width:2; fill:none; }
.dimtick{ stroke: var(--alu); stroke-width:2; }
.dimtext{ font-family: var(--data); font-size:27px; fill: var(--ink); }
.dimunit{ font-family: var(--data); font-size:16px; fill: var(--alu); letter-spacing:.12em; }
.hot .dimline, .hot .dimtick{ stroke: var(--pepper); }
.hot .dimtext{ fill: var(--pepper); font-weight:500; }
.machine-shell{ fill: var(--paper); stroke: var(--ink); stroke-width:3.5; }
.machine-part{ fill: none; stroke: var(--ink); stroke-width:2.5; }
.centerline{ stroke: var(--alu); stroke-width:1.5; stroke-dasharray: 26 8 4 8; opacity:.75; }

@keyframes settle{ from{ opacity:0; transform: translateY(-26px); } to{ opacity:1; transform:none; } }
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
.anim-machine{ animation: settle .85s cubic-bezier(.2,.7,.3,1) .25s both; }
.anim-dim{ animation: fadein .5s ease 1.0s both; }
.anim-hot{ animation: fadein .5s ease 1.45s both; }

/* ============================================================
   GENERIC SECTION
   ============================================================ */
section{ padding-block: clamp(56px, 8vw, 104px); }
section h2{ font-size: clamp(28px, 3.6vw, 46px); max-width: 20ch; margin-bottom:26px; }
html[lang="ko"] section h2{ max-width: 24ch; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items:start; }
@media (max-width: 860px){ .two-col{ grid-template-columns:1fr; } }
.band{ background: var(--paper-2); }
.dark{ background: var(--field); color: var(--paper); }
.dark .eyebrow{ color: rgba(237,234,227,.55); }
.dark a{ color: var(--paper); }
.wide h2{ max-width:26ch; }
.note{ font-family:var(--data); font-size:13.5px; color:var(--alu); margin-top:18px; line-height:1.7; }
html[lang="ko"] .note{ font-family:var(--body); font-size:14.5px; }
.note em{ font-style:normal; color:var(--pepper); }
.soft{ color:rgba(237,234,227,.82); max-width:56ch; }

/* ---- measured vs assumed table ---- */
.measure{ width:100%; border-collapse:collapse; font-family:var(--data); margin-top:8px; }
.measure th, .measure td{ text-align:left; padding:16px 12px; border-bottom:1px solid rgba(20,24,26,.16); }
.measure thead th{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--alu); font-weight:400; border-bottom-width:2px; border-bottom-color:rgba(20,24,26,.3);
}
.measure td:first-child{ font-family:var(--body); }
.measure .assumed{ color:var(--alu); text-decoration:line-through; }
.measure .actual{ color:var(--pepper); font-size:19px; font-weight:500; }

/* ---- spec grid ---- */
.specs{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background: rgba(237,234,227,.22); margin-top:40px; }
.specs div{ background: var(--field); padding:24px 20px; }
.specs dt{ font-family:var(--data); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(237,234,227,.55); margin-bottom:10px; }
html[lang="ko"] .specs dt{ font-family:var(--body); letter-spacing:.06em; font-size:13px; }
.specs dd{ font-family:var(--display); font-size:clamp(26px,2.6vw,36px); font-weight:600; margin:0; letter-spacing:-.01em; }
.specs dd small{ font-family:var(--data); font-size:14px; font-weight:400; letter-spacing:.04em; opacity:.6; margin-left:4px; }
@media (max-width: 900px){ .specs{ grid-template-columns: repeat(2,1fr); } }

/* ---- numbered sequence ---- */
.steps{ counter-reset: s; display:grid; grid-template-columns: repeat(4,1fr); gap:28px; margin-top:44px; padding:0; }
.steps li{ list-style:none; border-top:2px solid var(--ink); padding-top:16px; }
.steps li::before{
  counter-increment:s; content: "0" counter(s);
  font-family:var(--data); font-size:12px; letter-spacing:.16em; color:var(--pepper);
  display:block; margin-bottom:10px;
}
.steps h3{ font-size:19px; margin-bottom:8px; }
.steps p{ font-size:15.5px; color:#40474A; margin:0; }
@media (max-width: 860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width: 540px){ .steps{ grid-template-columns:1fr; } }

/* ---- pull quote ---- */
.pull{ font-family:var(--display); font-weight:700; font-size:clamp(26px,3.4vw,44px); line-height:1.1; letter-spacing:-.02em; max-width:22ch; margin:0 0 26px; }
html[lang="ko"] .pull{ line-height:1.3; }
.pull em{ font-style:normal; color:var(--pepper); }
.kicker{ font-family:var(--data); font-size:15px; color:var(--soil); }
html[lang="ko"] .kicker{ font-family:var(--body); }

/* ---- the name / hanja ---- */
.hanja{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px; }
.hanja div{ border-top:2px solid rgba(237,234,227,.3); padding-top:20px; }
.hanja .glyph{ font-size:76px; line-height:1; font-family:serif; display:block; margin-bottom:14px; }
.hanja .rd{ font-family:var(--data); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(237,234,227,.6); display:block; margin-bottom:10px; }
html[lang="ko"] .hanja .rd{ font-family:var(--body); letter-spacing:.06em; font-size:13.5px; }
.hanja p{ font-size:16px; color:rgba(237,234,227,.86); margin:0; }
@media (max-width: 620px){ .hanja{ grid-template-columns:1fr; } }

/* ---- contact ---- */
.contact-links{ font-family:var(--data); font-size:clamp(17px,2vw,22px); line-height:2; }
.contact-links a{ text-decoration:none; border-bottom:1px solid var(--pepper); }
.contact-links a:hover, .contact-links a:focus-visible{ background:var(--pepper); color:var(--paper); border-bottom-color:transparent; }
.contact-links .place{ font-size:14px; color:var(--alu); letter-spacing:.06em; }

footer{ border-top:1px solid rgba(20,24,26,.16); padding-block:28px; font-family:var(--data); font-size:12px; letter-spacing:.06em; color:var(--alu); }
footer .wrap{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }

/* Accessibility floor */
:focus-visible{ outline:2px solid var(--pepper); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .anim-machine, .anim-dim, .anim-hot{ animation:none; opacity:1; transform:none; }
  .plan-mach rect{ animation:none; }
}

/* ============================================================
   DEMOGRAPHIC STATS — light background variant of .specs
   Pepper is reserved sitewide for "the number that drives the
   argument", so these use it deliberately.
   ============================================================ */
.stats-light{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:38px; border-top:2px solid var(--ink); }
.stats-light div{ padding:22px 26px 6px 0; }
.stats-light div + div{ border-left:1px solid rgba(20,24,26,.16); padding-left:26px; }
.stats-light dt{ font-family:var(--data); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--alu); margin-bottom:12px; line-height:1.5; }
html[lang="ko"] .stats-light dt{ font-family:var(--body); letter-spacing:.04em; font-size:13px; }
.stats-light dd{ font-family:var(--display); font-size:clamp(34px,4.4vw,58px); font-weight:700; margin:0; color:var(--pepper); letter-spacing:-.02em; line-height:1; }
.stats-light dd small{ font-family:var(--data); font-size:15px; font-weight:400; letter-spacing:.04em; color:var(--alu); margin-left:5px; }
.stats-light .src{ font-family:var(--data); font-size:11px; letter-spacing:.06em; color:var(--alu); margin-top:10px; display:block; }
@media (max-width: 720px){
  .stats-light{ grid-template-columns:1fr; }
  .stats-light div + div{ border-left:0; border-top:1px solid rgba(20,24,26,.16); padding-left:0; }
}

/* ============================================================
   PLAN VIEW — the vision figure (quieter than the hero drawing)
   ============================================================ */
.plan{ margin:44px 0 0; }
.plan svg{ width:100%; height:auto; display:block; }
.plan figcaption{
  font-family:var(--data); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(237,234,227,.5); margin-top:14px; padding-top:10px;
  border-top:1px solid rgba(237,234,227,.22);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
html[lang="ko"] .plan figcaption{ font-family:var(--body); letter-spacing:.04em; }
.plan-label{ font-family:var(--data); font-size:17px; fill:rgba(237,234,227,.62); letter-spacing:.1em; }
.plan-lead{ stroke:rgba(237,234,227,.34); stroke-width:1.5; }
.plan-path{ stroke:rgba(237,234,227,.4); stroke-width:2; stroke-dasharray:7 7; fill:none; }
.plan-ridge{ fill:#2A4C39; }
.plan-mach{ fill:var(--paper); }
.plan-worker{ fill:var(--pepper); }
.plan-depot{ fill:none; stroke:rgba(237,234,227,.45); stroke-width:2; stroke-dasharray:4 5; }

/* Five machines, each nudging up and down within its own furrow —
   a small always-on ambient loop, not tied to scroll position, so
   whenever this section comes into view the field already reads as
   active. Negative delays start each mid-cycle so they read as
   already desynced on first paint, rather than drifting apart from
   a visible dead start. Durations are irregular on purpose — a
   shared duration would still look synchronized even with offsets. */
@keyframes plan-bob{
  0%, 100%{ transform: translateY(-13px); }
  50%{ transform: translateY(13px); }
}
.plan-mach rect{ animation: plan-bob 5s ease-in-out infinite; }
.plan-mach rect:nth-child(1){ animation-duration: 4.6s; animation-delay: -0.4s; }
.plan-mach rect:nth-child(2){ animation-duration: 5.3s; animation-delay: -2.1s; }
.plan-mach rect:nth-child(3){ animation-duration: 4.2s; animation-delay: -1.2s; }
.plan-mach rect:nth-child(4){ animation-duration: 5.7s; animation-delay: -3.0s; }
.plan-mach rect:nth-child(5){ animation-duration: 4.9s; animation-delay: -0.9s; }

/* Light-background variant of the hanja cards (the name section
   sits on paper now, not on the dark field green). */
.hanja-light div{ border-top-color: var(--ink); }
.hanja-light .rd{ color: var(--soil); }
.hanja-light p{ color:#40474A; }
.hanja-light .glyph{ color: var(--field); }

/* ============================================================
   SCROLL-DRIVEN 3D MACHINE
   Progressive enhancement: with no JS or no WebGL the captions
   simply render as a static four-part list and nothing breaks.
   The .m3-live class is added by machine.js only on success.
   ============================================================ */
.m3{ position:relative; }
.m3 canvas{ display:none; }
.m3-rail{ display:none; }

/* fallback / no-JS layout: captions as a plain grid */
.m3-caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:36px; }
.m3-cap .n{ font-family:var(--data); font-size:12px; letter-spacing:.16em; color:var(--pepper); display:block; margin-bottom:10px; }
.m3-cap h3{ font-size:19px; margin-bottom:8px; color:var(--paper); }
.m3-cap p{ font-size:15.5px; color:rgba(237,234,227,.8); margin:0; max-width:34ch; }
@media (max-width:860px){ .m3-caps{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .m3-caps{ grid-template-columns:1fr; } }

/* enhanced layout: pinned canvas, captions cross-fade over it */
.m3-live{ height:420vh; margin-block:-10px 40px; }
.m3-live .m3-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.m3-live canvas{ display:block; position:absolute; inset:0; width:100%; height:100%; }

.m3-live .m3-caps{
  display:block; position:absolute; left:0; right:0; bottom:clamp(46px,8vh,88px);
  height:170px; margin:0; pointer-events:none;
}
.m3-live .m3-cap{
  position:absolute; inset:auto 0 0 0;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.m3-live .m3-cap.on{ opacity:1; transform:none; }
.m3-live .m3-cap p{ max-width:44ch; }
.m3-live .m3-cap h3{ font-size:clamp(21px,2.4vw,30px); }

.m3-live .m3-rail{
  display:block; position:absolute; left:var(--gutter); right:var(--gutter);
  bottom:clamp(24px,4vh,44px); height:1px; background:rgba(237,234,227,.22);
}
.m3-live .m3-rail span{ display:block; height:100%; width:0; background:var(--pepper); }

/* reduced motion: keep the model, drop the pinning and the scroll link */
.m3-still{ height:auto; }
.m3-still .m3-sticky{ position:static; height:72vh; }
.m3-still .m3-caps{ position:static; height:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:36px; }
.m3-still .m3-cap{ position:static; opacity:1; transform:none; }
.m3-still .m3-rail{ display:none; }

@media (max-width:760px){
  .m3-live{ height:340vh; }
  .m3-live .m3-caps{ height:210px; }
}

/* GLB loading state — shown between "canvas exists" and "first real
   frame rendered". Cleared by machine.js once the model is in. */
.m3-loading .m3-load{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--data); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(237,234,227,.55); background:var(--field); z-index:2;
}
.m3-load::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--pepper);
  margin-right:10px; animation: m3pulse 1.1s ease-in-out infinite;
}
@keyframes m3pulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }
.m3:not(.m3-loading) .m3-load{ display:none; }

/* ============================================================
   LOGO MARK
   Two colour variants of the same file, matched exactly to the
   token they sit against — assets/mark-field.svg (dark green, for
   light backgrounds) and assets/mark-paper.svg (cream, for dark
   backgrounds — not currently used on this page, kept for any
   future dark-background placement).
   ============================================================ */
.mark-icon{ display:block; flex-shrink:0; }
.foot-mark{ display:inline-flex; align-items:center; gap:9px; }
.mark-icon.small{ opacity:.85; }
.name-mark{ display:block; margin-bottom:30px; }

/* ============================================================
   SPEC / STEP / CAPACITY ICONS
   All hand-drawn line icons, no external icon set. Spec icons sit
   on dark backgrounds (cream stroke); step and capacity icons sit
   on light backgrounds (pepper-red stroke). Every icon is pure
   stroke geometry except one filled dot (the "follows you" beacon).
   ============================================================ */
.spec-icon{ width:26px; height:26px; display:block; margin-bottom:10px;
  fill:none; stroke:rgba(237,234,227,.55); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.step-icon{ width:34px; height:34px; display:block; margin-bottom:14px;
  fill:none; stroke:var(--pepper); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.step-icon .dot{ fill:var(--pepper); }

.cap-icon{ width:30px; height:30px; display:block; margin-bottom:10px;
  fill:none; stroke:var(--pepper); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.contact-icon{ width:0.72em; height:0.72em; display:inline-block; vertical-align:-0.08em; margin-right:0.22em;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.capacity-stats{ display:flex; gap:40px; margin:28px 0 30px; flex-wrap:wrap; }
.capacity-stats dd{ font-family:var(--display); font-weight:700; font-size:clamp(32px,4vw,44px); color:var(--pepper); margin:0; letter-spacing:-.02em; line-height:1; }
.capacity-stats dd small{ font-family:var(--data); font-size:16px; font-weight:400; color:var(--pepper); opacity:.75; margin-left:2px; }
.capacity-stats dt{ font-family:var(--data); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--alu); margin-top:7px; }
html[lang="ko"] .capacity-stats dt{ font-family:var(--body); letter-spacing:.03em; font-size:12.5px; }