/* Unrealm — shared base: tokens, reset, paper texture, shared elements */

:root {
  --paper:      #F4EFE3;
  --paper-2:    #ECE4D3;
  --paper-edge: #E3D9C4;
  --ink:        #211D16;
  --ink-soft:   #564E40;
  --ink-faint:  #8C8474;
  --jade:       #3F6E5C;
  --jade-soft:  #5E8B79;
  --rose:       #AE837A;
  --sky:        #8DA4BB;
  --gold:       #B79A5F;
  --rule:       #D6CBB4;

  --disp:  "Cormorant Garamond", "Shippori Mincho", Georgia, serif;
  --body:  "EB Garamond", "Shippori Mincho", Georgia, serif;
  --mincho:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mono:  "Courier New", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }

/* English label / kicker */
.kicker {
  font-family: var(--body);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--jade);
}

/* gentle scroll reveal — transform-only so content stays visible (opacity:1)
   even if the animation timeline never advances (capture/throttled iframes) */
.reveal {
  transform: translateY(20px);
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: none; }
}

/* company spec list (shared shape, restyled per variation) */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td {
  text-align: left;
  vertical-align: top;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
}
.spec th {
  width: 30%;
  color: var(--ink-faint);
  font-family: var(--mincho);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.spec th .en {
  display: block;
  font-family: var(--body);
  font-style: italic;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}
.spec td { color: var(--ink); }
.spec td .en {
  display: block;
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.88rem;
  margin-top: 0.1rem;
}