/* ==========================================================================
   Norlanta — stylesheet
   Palette sampled directly from the supplied logo artwork.
   Visual language: Nordic administrative precision. Trade runs on documents,
   references and registers, so the type system treats reference data as a
   first-class element rather than fine print.
   ========================================================================== */

:root{
  --ink:       #0B2756;   /* logo navy */
  --ink-deep:  #071B3C;
  --gold:      #C8903A;   /* logo gold */
  --gold-soft: #E8CFA4;
  --paper:     #F6F7F9;
  --white:     #FFFFFF;
  --steel:     #5B6579;
  --rule:      #DCE1E8;
  --portrait-bg: #E9ECF0;  /* matches the unified portrait backdrop */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1120px;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--ink); text-decoration:none; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

/* ---------- Type ---------------------------------------------------------- */

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.15; margin:0; letter-spacing:-0.015em; }

h1{ font-size:clamp(2.3rem, 5.4vw, 4rem); }
h2{ font-size:clamp(1.65rem, 3.2vw, 2.4rem); }
h3{ font-size:clamp(1.15rem, 1.9vw, 1.4rem); letter-spacing:-0.01em; }

p{ margin:0 0 1.1em; max-width:68ch; }
.lede{ font-size:clamp(1.1rem,1.6vw,1.28rem); line-height:1.6; color:var(--steel); max-width:60ch; }

/* Reference eyebrow — the recurring documentary device */
.ref{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  margin:0 0 1.1rem;
  display:block;
}
.ref--steel{ color:var(--steel); }

/* ---------- Header -------------------------------------------------------- */

.site-head{
  border-bottom:1px solid var(--rule);
  background:var(--white);
  position:sticky; top:0; z-index:50;
}
.site-head__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:76px;
}
.brand img{ height:30px; width:auto; }

.nav{ display:flex; gap:1.85rem; align-items:center; }
.nav a{
  font-size:0.83rem; letter-spacing:0.07em; text-transform:uppercase;
  font-weight:500; color:var(--steel); padding:0.35rem 0; position:relative;
}
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--gold);
}

.nav-toggle{
  display:none; background:none; border:1px solid var(--rule);
  border-radius:2px; padding:0.5rem 0.7rem; cursor:pointer;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink);
}

/* ---------- Hero ---------------------------------------------------------- */

.hero{
  padding:clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--rule);
}
.hero h1{ max-width:16ch; margin-bottom:1.5rem; }
.hero .lede{ margin-bottom:2.2rem; }

.corridor{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--steel);
  display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem;
  margin:0 0 1.6rem;
}
.corridor span{ white-space:nowrap; }
.corridor .arrow{ color:var(--gold); }

/* ---------- Sections ------------------------------------------------------ */

.sec{ padding:clamp(3.2rem,7vw,5.5rem) 0; }
.sec--paper{ background:var(--paper); }
.sec--line{ border-bottom:1px solid var(--rule); }
.sec__head{ margin-bottom:2.6rem; }
.sec__head h2{ margin-bottom:0.85rem; }

/* ---------- Field rows: label / value, register styling ------------------- */

.fields{ border-top:1px solid var(--rule); margin:0; }
.field{
  display:grid; grid-template-columns:minmax(150px,220px) 1fr;
  gap:1.5rem; padding:1.35rem 0; border-bottom:1px solid var(--rule);
  align-items:start;
}
.field dt{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--steel); font-weight:500;
  padding-top:0.28rem;
}
.field dd{ margin:0; }
.field dd p:last-child{ margin-bottom:0; }
.field dd strong{ font-weight:600; }

/* ---------- Cards --------------------------------------------------------- */

.grid{ display:grid; gap:1.5rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--white); border:1px solid var(--rule);
  padding:1.9rem 1.7rem; border-radius:2px;
}
.card h3{ margin-bottom:0.7rem; }
.card p{ margin-bottom:0; color:var(--steel); font-size:0.97rem; }
.card .ref{ margin-bottom:0.9rem; }

/* ---------- Signature: register extract ----------------------------------- */

.extract{
  border:1px solid var(--ink);
  border-top:4px solid var(--gold);
  background:var(--white);
  padding:clamp(1.6rem,3vw,2.4rem);
  border-radius:2px;
  max-width:660px;
}
.extract__title{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink); font-weight:600;
  margin:0 0 1.4rem; padding-bottom:0.9rem; border-bottom:1px solid var(--rule);
}
.extract dl{ margin:0; display:grid; gap:0.85rem; }
.extract .row{ display:grid; grid-template-columns:minmax(120px,170px) 1fr; gap:1rem; }
.extract dt{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--steel);
}
.extract dd{ margin:0; font-family:var(--mono); font-size:0.86rem; color:var(--ink); }
.extract__note{
  margin:1.5rem 0 0; padding-top:1.1rem; border-top:1px solid var(--rule);
  font-size:0.9rem; color:var(--steel);
}
.extract__note a{ color:var(--ink); border-bottom:1px solid var(--gold); }

.pending{ color:var(--gold); }

/* ---------- Team ---------------------------------------------------------- */

.people{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; }
.person__img{
  aspect-ratio:4/5; background:var(--portrait-bg); border:1px solid var(--rule);
  overflow:hidden; margin-bottom:1.3rem; border-radius:2px;
}
.person__img img{ width:100%; height:100%; object-fit:cover; }
.person__ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:0.7rem; background:var(--portrait-bg);
}
.person__ph span{
  font-family:var(--serif); font-size:2.6rem; color:var(--gold); line-height:1;
}
.person__ph em{
  font-family:var(--mono); font-size:0.63rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--steel); font-style:normal;
}
.person h3{ margin-bottom:0.25rem; }
.person__role{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1rem;
}
.person p{ font-size:0.95rem; color:var(--steel); }

/* ---------- Notes list ---------------------------------------------------- */

.notes{ border-top:1px solid var(--rule); }
.note{
  display:grid; grid-template-columns:minmax(130px,180px) 1fr;
  gap:1.5rem; padding:1.9rem 0; border-bottom:1px solid var(--rule);
}
.note__meta{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--steel); padding-top:0.3rem;
}
.note h3{ margin-bottom:0.55rem; }
.note p{ color:var(--steel); font-size:0.97rem; margin-bottom:0; }
.note--draft h3{ color:var(--steel); }
.tag{
  display:inline-block; font-family:var(--mono); font-size:0.62rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-soft); padding:0.12rem 0.5rem;
  border-radius:2px; margin-left:0.6rem; vertical-align:middle;
}

/* ---------- Article body -------------------------------------------------- */

.prose{ max-width:70ch; }
.prose h2{ margin:2.6rem 0 1rem; }
.prose h3{ margin:2rem 0 0.7rem; }
.prose ul{ padding-left:1.2rem; margin:0 0 1.2em; max-width:68ch; }
.prose li{ margin-bottom:0.45rem; }
.prose a{ border-bottom:1px solid var(--gold); }
.callout{
  border-left:3px solid var(--gold); background:var(--paper);
  padding:1.3rem 1.5rem; margin:1.8rem 0; border-radius:0 2px 2px 0;
}
.callout p:last-child{ margin-bottom:0; }

/* ---------- Buttons ------------------------------------------------------- */

.btn{
  display:inline-block; font-family:var(--sans); font-size:0.85rem;
  letter-spacing:0.05em; text-transform:uppercase; font-weight:500;
  padding:0.85rem 1.7rem; border-radius:2px; transition:background .18s, color .18s;
}
.btn--solid{ background:var(--ink); color:var(--white); }
.btn--solid:hover{ background:var(--ink-deep); }
.btn--line{ border:1px solid var(--ink); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--white); }
.btn + .btn{ margin-left:0.85rem; }
@media (max-width:520px){
  .btn{ display:block; text-align:center; }
  .btn + .btn{ margin-left:0; margin-top:0.8rem; }
}

/* ---------- Footer -------------------------------------------------------- */

.site-foot{
  background:var(--ink); color:var(--white);
  padding:clamp(3rem,6vw,4.5rem) 0 2.2rem; margin-top:0;
}
.site-foot a{ color:var(--white); }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem; }
.site-foot h4{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--gold-soft); font-weight:500; margin:0 0 1.1rem;
}
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin-bottom:0.6rem; font-size:0.92rem; }
.site-foot li a:hover{ border-bottom:1px solid var(--gold); }
.foot__legal{
  border-top:1px solid rgba(255,255,255,.16); padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:0.6rem 2rem; justify-content:space-between;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em; color:rgba(255,255,255,.72);
}
.foot__legal a{ border-bottom:1px solid rgba(255,255,255,.3); }
.foot__mark{ max-width:34ch; font-size:0.92rem; color:rgba(255,255,255,.8); font-family:var(--sans); letter-spacing:0; }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width:900px){
  .grid--3{ grid-template-columns:1fr 1fr; }
  .people{ grid-template-columns:1fr 1fr; }
  .foot__top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  .nav{
    display:none; position:absolute; top:76px; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--rule);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:0.5rem var(--gut) 1.2rem;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:0.75rem 0; width:100%; border-bottom:1px solid var(--rule); }
  .nav a[aria-current="page"]::after{ display:none; }
  .nav-toggle{ display:block; }

  .grid--3,.grid--2{ grid-template-columns:1fr; }
  .people{ grid-template-columns:1fr; gap:2.8rem; }
  .field,.note,.extract .row{ grid-template-columns:1fr; gap:0.5rem; }
  .field dt{ padding-top:0; }
  .foot__top{ grid-template-columns:1fr; gap:2rem; }
  .foot__legal{ flex-direction:column; gap:0.7rem; }
}

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