/* Next Century Technologies · Charter
   Reference: deliverables/prototyper/g3-directions/1-charter.html, the page the owner
   picked at G3. Its rules are kept here as they were. Owner changes: the three headline
   key words have no underline, and Charter comes first in the serif stack. The rules
   under "Inner pages" only use the picked page's own sizes, colours and spacing. */

@font-face {
  font-family: "Charis";
  src: url("/fonts/Charis-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Charis";
  src: url("/fonts/Charis-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Charis";
  src: url("/fonts/Charis-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #FFFFFF;
  --ink: #1D2125;
  --ink-2: #4F575F;
  --rule: #C9CED3;
  --seal: #1E5C4C;
  --wash: #F2F5F3;
  --serif: Charter, "Charis", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--serif);
  font-kerning: normal;
}
h1, h2, h3, p, ol, ul, dl, dd, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 10;
  padding: .75rem 1rem; background: var(--ink); color: #FFFFFF;
  font: 600 1rem/1 var(--sans); text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { max-width: 74rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }

/* Header */
.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 2rem; padding-block: 1.5rem 1.25rem;
}
.wm {
  display: inline-grid; gap: .2rem;
  padding-left: .8rem; border-left: 3px solid var(--seal);
  color: var(--ink); text-decoration: none;
}
.wm-name { font: 700 1.1875rem/1 var(--serif); text-transform: uppercase; letter-spacing: .09em; }
.wm-sub { font: 400 .9375rem/1.1 var(--serif); color: var(--ink-2); letter-spacing: .02em; }
.nav { order: 3; flex-basis: 100%; font: 500 1rem/1 var(--sans); }
.nav ul { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.nav a, .lang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--seal); text-underline-offset: .35em; }
.lang { order: 2; display: flex; margin-left: auto; font: 500 1rem/1 var(--sans); }
.lang a { justify-content: center; min-width: 44px; color: var(--ink-2); }
.lang a[aria-current="true"] {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--seal);
  text-decoration-thickness: 2px; text-underline-offset: .4em;
}
@media (min-width: 52rem) {
  .nav { order: 0; flex-basis: auto; margin-left: auto; }
  .nav ul { column-gap: 1.5rem; }
  .lang { order: 0; margin-left: 0; padding-left: 1rem; border-left: 1px solid var(--rule); }
}

@media (max-width: 30rem) { .nav { font-size: .9375rem; } .nav ul { column-gap: .95rem; } }

/* Rows: a margin column for the section name, a reading column, a side column */
.hero, .row { display: grid; gap: 1.25rem 3rem; }
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--rule); }
.row { padding-block: clamp(2.75rem, 6vw, 4.5rem); border-top: 1px solid var(--rule); }
.label { font: 600 1rem/1.4 var(--sans); color: var(--ink-2); }
@media (min-width: 60rem) {
  .hero, .row { grid-template-columns: 9.5rem minmax(0, 38rem) minmax(0, 1fr); }
  .label { grid-column: 1; padding-top: .3rem; }
  .body { grid-column: 2; }
  .aside { grid-column: 3; padding-top: .3rem; }
  .hero .mission, .hero .notes { grid-column: 2 / 4; }
}

/* Mission. The key words carry no underline (owner, G3 ruling); .term stays as a hook. */
.mission {
  max-width: 25em;
  font: 400 clamp(1.75rem, 1.05rem + 2.4vw, 2.75rem)/1.27 var(--serif);
  text-wrap: balance;
}
.fn {
  margin-left: .08em; padding-inline: .1em;
  font: 700 .42em/0 var(--sans); color: var(--seal);
  text-decoration: none; vertical-align: super;
}
.notes { display: grid; gap: 1.5rem 2.5rem; margin-top: 1rem; }
@media (min-width: 48rem) { .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notes li { padding-top: .9rem; border-top: 2px solid var(--seal); font: 400 1rem/1.55 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.notes .num { display: block; margin-bottom: .3rem; font-weight: 700; color: var(--seal); }
.notes strong { color: var(--ink); font-weight: 600; }

/* Text blocks */
.lead { font-size: 1.3125rem; line-height: 1.55; text-wrap: pretty; }
.defs { display: grid; gap: 1.6rem; margin-top: 2.25rem; }
.body > .defs:first-child { margin-top: 0; }
.defs dt { font-weight: 700; }
.defs dd { margin-top: .2rem; text-wrap: pretty; }
.aside-h { font: 600 1rem/1.4 var(--sans); color: var(--ink); margin-bottom: .5rem; }
.plain { font: 400 1rem/1.5 var(--sans); }
.plain li { padding-block: .6rem; border-bottom: 1px solid var(--rule); }
.aside p { font: 400 1rem/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.nots { display: grid; gap: 1.1rem; }
.nots li { padding-left: 1.4rem; position: relative; text-wrap: pretty; }
.nots li::before { content: ""; position: absolute; left: 0; top: .78em; width: .7rem; height: 2px; background: var(--seal); }

/* Flagship */
.flag {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--rule); border-top: 3px solid var(--seal); border-radius: 2px;
}
.flag img { width: 3.5rem; height: 3.5rem; }
.flag-name { font: 700 1.5rem/1.2 var(--serif); letter-spacing: .02em; margin-bottom: .6rem; }
.flag p + p { margin-top: 1rem; }
.flag-link, .cta {
  font: 600 1rem/1 var(--sans); color: var(--seal);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  display: inline-flex; align-items: center; min-height: 44px;
}
.flag-link:hover, .cta:hover { text-decoration-thickness: 2px; }
@media (max-width: 30rem) { .flag { grid-template-columns: 1fr; } }

/* Contact */
.contact-line { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.35; }
.contact-line a { color: var(--seal); text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.contact-line + p { margin-top: .75rem; color: var(--ink-2); }

/* Footer */
.foot { margin-top: 2rem; border-top: 2px solid var(--ink); background: var(--wash); }
.foot-in { display: grid; gap: 2.5rem 3rem; padding-block: 3rem 2rem; }
@media (min-width: 60rem) { .foot-in { grid-template-columns: 9.5rem minmax(0, 38rem) minmax(0, 1fr); } }
.foot .wm { grid-column: 1 / -1; justify-self: start; }
.wm-name { white-space: nowrap; }
@media (min-width: 60rem) { .foot address { grid-column: 2; } .foot nav { grid-column: 3; } }
.ident { display: grid; gap: 1rem 2rem; font: 400 1rem/1.45 var(--sans); }
@media (min-width: 40rem) { .ident { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ident dt { font-size: .875rem; color: var(--ink-2); }
.ident dd a { color: var(--seal); overflow-wrap: anywhere; }
.ph { padding: 0 .25em; outline: 1px dashed var(--ink-2); outline-offset: 1px; color: var(--ink); }
.legal-h { font: 600 .875rem/1.4 var(--sans); color: var(--ink-2); margin-bottom: .25rem; }
.legal { font: 400 1rem/1.4 var(--sans); }
.legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: .25em; }
.copy { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid var(--rule); font: 400 .875rem/1.5 var(--sans); color: var(--ink-2); }
/* The language switch sits in the copyright row (owner direction on company details). */
.copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; }
.copy .lang { margin-left: 0; padding-left: 0; border-left: 0; }

/* Inner pages: the same rows, labels, type sizes and colours as the home page.
   .prose only adds the spacing between several blocks in one reading column. */
.prose > * + * { margin-top: 1.1rem; }
.prose > .defs { margin-top: 2.25rem; }
.prose > .defs:first-child { margin-top: 0; }
.prose > h3 { margin-top: 1.6rem; font-weight: 700; }
.prose > h3 + * { margin-top: .2rem; }
.prose a:not([class]) { color: var(--seal); text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.prose a:not([class]):hover { text-decoration-thickness: 2px; }
.prose ol.steps { padding-left: 1.4rem; list-style: decimal; }
.prose ol.steps li + li { margin-top: .5rem; }
.actions { display: flex; flex-wrap: wrap; column-gap: 1.75rem; }
.prose > .actions { margin-top: 1.25rem; }
.meta { font: 400 .875rem/1.5 var(--sans); color: var(--ink-2); }
.mark-lg { width: 7rem; height: 7rem; }