/* ------------------------------------------------------------------
   NAMA NU — sovereign monochrome framework
   Obsidian #000 · Titanium #F2F3F5 · Slate #85898F
   Shared by the corporate frontage (en/sv/id) and the access gate.
   ------------------------------------------------------------------ */

:root {
  --obsidian:    #000000;
  --titanium:    #F2F3F5;
  --slate:       #85898F;
  --slate-deep:  #5A5E64;
  --hairline:    rgba(242, 243, 245, 0.14);
  --hairline-lo: rgba(242, 243, 245, 0.07);

  --stack: "Inter", "Helvetica Neue", Helvetica, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --gutter: clamp(1.5rem, 5.5vw, 6.5rem);
  --rule:   1px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--obsidian);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--obsidian);
  color: var(--titanium);
  font-family: var(--stack);
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Single-screen frame, pinned to the viewport.
   `minmax(0, 1fr)` on the middle row is what keeps the promise: the masthead and
   the corporate register are sized first and always drawn, and the statement takes
   whatever is left instead of growing and pushing the register off the bottom.
   The statement's own type is height-aware (see .declaration) so it fits that
   remainder rather than overflowing it. */
.frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  padding: clamp(1.5rem, 3.2vh, 2.75rem) var(--gutter);
  gap: clamp(2rem, 5vh, 4rem);
}

/* ---------------------------------------------------------------- */
/* Masthead                                                          */
/* ---------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: clamp(1.25rem, 2.4vh, 2rem);
  border-bottom: var(--rule) solid var(--hairline);
}

.wordmark {
  margin: 0;
  font-size: clamp(0.9rem, 1.05vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--titanium);
  text-decoration: none;
  white-space: nowrap;
}

.controls {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}

/* Language register */
.langs {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: clamp(0.5625rem, 0.68vw, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.langs a {
  color: var(--slate-deep);
  text-decoration: none;
  transition: color 180ms linear;
}

.langs a:hover,
.langs a:focus-visible { color: var(--titanium); }
.langs [aria-current="true"] { color: var(--slate); }
.langs i {
  font-style: normal;
  color: var(--hairline);
  user-select: none;
}

/* Session chip — SECURE LOGIN / SECURE LOGOUT */
.session {
  display: inline-block;
  padding: 0.72em 1.35em;
  border: var(--rule) solid var(--hairline);
  background: transparent;
  color: var(--slate);
  font-family: inherit;
  font-size: clamp(0.5625rem, 0.68vw, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms linear, border-color 180ms linear;
}

.session:hover,
.session:focus-visible {
  color: var(--titanium);
  border-color: var(--titanium);
}

/* ---------------------------------------------------------------- */
/* Principal statement                                               */
/* ---------------------------------------------------------------- */

.statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(0.5rem, 3vh, 3rem) 0;
}

/* Each line is its own block, so the statement breaks where it is written to
   break — no max-width, because a measure limit re-wraps those two lines into
   four and doubles the height of the block.
   The size answers to BOTH axes: 5.2vw keeps the longer line on one row at
   ordinary desktop widths, 9vh keeps the whole composition inside a short
   window. Whichever is tighter wins. */
.declaration {
  margin: 0;
  font-size: clamp(2.125rem, min(5.2vw, 9vh), 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.declaration span { display: block; }
.declaration span + span { color: var(--slate); }

.doctrine {
  margin: clamp(1.75rem, 4.4vh, 3.25rem) 0 0;
  max-width: 64ch;
  color: var(--slate);
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.72;
  letter-spacing: -0.005em;
}

.access { margin-top: clamp(2.25rem, 5.5vh, 4rem); }

.portal {
  display: inline-block;
  padding: 1.15em 2.6em;
  border: var(--rule) solid var(--titanium);
  background: transparent;
  color: var(--titanium);
  font-family: inherit;
  font-size: clamp(0.625rem, 0.78vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms linear, color 200ms linear;
}

.portal:hover,
.portal:focus-visible {
  background: var(--titanium);
  color: var(--obsidian);
}

/* ---------------------------------------------------------------- */
/* Access gate                                                       */
/* ---------------------------------------------------------------- */

.gate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  /* Safety valve. The rhythm below is tuned to fit an ordinary window, but a
     stacked masthead or a large default font size can still overrun; scrolling
     the credential column beats overlapping the register. */
  overflow-y: auto;
  padding: clamp(0.5rem, 2.5vh, 2rem) 0;
}

.gate-inner { width: min(30rem, 100%); }

.gate-title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.gate-note {
  margin: 1.15rem 0 0;
  color: var(--slate);
  font-size: clamp(0.8125rem, 0.92vw, 0.9375rem);
  line-height: 1.68;
}

/* Segmented mode control */
.modes {
  display: flex;
  margin: clamp(1.25rem, 3vh, 2.25rem) 0 0;
  border: var(--rule) solid var(--hairline);
}

.mode {
  flex: 1;
  padding: 1em 0.75em;
  border: 0;
  background: transparent;
  color: var(--slate-deep);
  font-family: inherit;
  font-size: clamp(0.5625rem, 0.68vw, 0.6875rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 180ms linear, color 180ms linear;
}

.mode + .mode { border-left: var(--rule) solid var(--hairline); }
.mode:hover { color: var(--titanium); }
.mode[aria-selected="true"] {
  background: var(--titanium);
  color: var(--obsidian);
}

/* Fields */
.field { margin-top: clamp(1.1rem, 2.6vh, 1.75rem); }

.field label {
  display: block;
  margin-bottom: 0.85em;
  color: var(--slate-deep);
  font-size: clamp(0.5625rem, 0.66vw, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.field input {
  display: block;
  width: 100%;
  padding: 0 0 0.75em;
  border: 0;
  border-bottom: var(--rule) solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--titanium);
  font-family: inherit;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: border-color 180ms linear;
}

.field input::placeholder { color: var(--slate-deep); }
.field input:focus {
  outline: none;
  border-bottom-color: var(--titanium);
}

/* Chrome paints autofilled fields a pale yellow; hold the obsidian. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--titanium);
  -webkit-box-shadow: 0 0 0 100px var(--obsidian) inset;
  caret-color: var(--titanium);
}

.submit {
  display: block;
  width: 100%;
  margin-top: clamp(1.5rem, 3.4vh, 2.25rem);
  padding: 1.25em 2em;
  border: var(--rule) solid var(--titanium);
  background: transparent;
  color: var(--titanium);
  font-family: inherit;
  font-size: clamp(0.625rem, 0.78vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms linear, color 200ms linear, opacity 200ms linear;
}

.submit:hover:not(:disabled),
.submit:focus-visible:not(:disabled) {
  background: var(--titanium);
  color: var(--obsidian);
}

.submit:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Status line. Monochrome: severity is carried by weight, not colour. */
.notice {
  margin: 1.5rem 0 0;
  min-height: 1.4em;
  color: var(--slate);
  font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.notice[data-tone="alert"] {
  color: var(--titanium);
  font-weight: 500;
}

.notice:empty { margin-top: 0; }

/* ---------------------------------------------------------------- */
/* Corporate register                                                */
/* ---------------------------------------------------------------- */

/* Two ranks, not three peers. The principal leads in titanium; the Indonesian
   operating companies sit right under a shared jurisdiction rank, their roles in
   an aligned second column so no entity line ever breaks across two rows.
   Hierarchy is carried by weight and value alone — there is no accent colour to
   spend on it. */
.register {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4.5rem);
  align-items: start;
  padding-top: clamp(1.25rem, 2.4vh, 2rem);
  border-top: var(--rule) solid var(--hairline);
}

.rank {
  margin: 0 0 0.65rem;
  color: var(--titanium);
  font-size: clamp(0.6875rem, 0.82vw, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The operating tier announces itself one step quieter than the principal. */
.operations .rank { color: var(--slate); }

.principal-role {
  margin: 0;
  color: var(--slate);
  font-size: clamp(0.625rem, 0.74vw, 0.75rem);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.principal-reg {
  margin: 0.3rem 0 0;
  color: var(--slate-deep);
  font-size: clamp(0.625rem, 0.74vw, 0.75rem);
  letter-spacing: 0.1em;
}

.operations { justify-self: end; }

.entities {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 0.5rem clamp(1rem, 2.5vw, 2.5rem);
  margin: 0;
}

.entities dt,
.entities dd {
  font-size: clamp(0.625rem, 0.74vw, 0.75rem);
  letter-spacing: 0.1em;
  line-height: 1.5;
  white-space: nowrap;
}

.entities dt { color: var(--slate); font-weight: 500; }
.entities dd { margin: 0; color: var(--slate-deep); }

/* ---------------------------------------------------------------- */
/* Focus / motion / adaptive                                         */
/* ---------------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
  outline: var(--rule) solid var(--titanium);
  outline-offset: 4px;
}

::selection {
  background: var(--titanium);
  color: var(--obsidian);
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Compact and short viewports: release the single-screen lock rather
   than clip the register. */
@media (max-width: 640px), (max-height: 660px) {
  /* Below this the composition genuinely cannot hold a single screen, so
     release the pin: scrolling to the register beats cropping it. */
  .frame {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    gap: 2.25rem;
  }
  .register {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .operations { justify-self: start; }
  .entities {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .entities dt,
  .entities dd {
    white-space: normal;
    letter-spacing: 0.06em;
  }
  .entities dt { margin-top: 0.55rem; }
  .entities dt:first-of-type { margin-top: 0; }
}

@media (max-width: 460px) {
  .masthead {
    flex-wrap: wrap;
    gap: 1rem 0.75rem;
  }
  .controls { gap: 1rem; }
  .session { padding: 0.7em 1em; letter-spacing: 0.16em; }
}

@media print {
  html, body { background: #fff; color: #000; }
  .session, .portal, .submit { border-color: #000; color: #000; }
  .controls, .modes, form { display: none; }
}