/* Sheldon Statecraft & Strategic Partners
   Design notes live in DESIGN.md. In short: navy is the page, ivory is the
   ink, gold appears only where the logo puts it (plus links and focus). The
   one light surface on the site is the inquiry form, set like letter paper. */

:root {
  --navy: #16222F;
  --ivory: #F2EEE4;
  --ivory-quiet: #BCB8AE;   /* secondary text on navy, 8.1:1 */
  --gold: #C39A55;          /* on navy only: 6.2:1 */
  --ink-quiet: #4E5A66;     /* secondary text on ivory, 6.4:1 */
  --field-edge: #6F767C;    /* form borders on ivory, 3.9:1 */
  --error: #8E2A1E;         /* errors on ivory and white */

  /* One family, two cuts: Cormorant Garamond is the logo's face and only
     works large; EB Garamond is the reading cut of the same design lineage. */
  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --text: "EB Garamond", Garamond, "Times New Roman", serif;

  --lockup: 42.5rem;
  /* The mountain rises 22.48% of the way across the lockup. On wide screens
     the text column starts exactly below that point. */
  --foot: calc(var(--lockup) * (0.5 - 0.2248));
  --head-col: 15rem;
  --body-col: 36rem;
  --col-gap: 3.5rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(3.75rem, 7vw, 6rem);

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font: 400 1.25rem/1.6 var(--text);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

::selection { background: var(--gold); color: var(--navy); }

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, dl, dd, figure { margin: 0; }

h1, h2, .standfirst, dt {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
}

p, dd, li { text-wrap: pretty; }

a {
  color: var(--ivory);
  text-decoration-line: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 120ms ease-out, color 120ms ease-out;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  padding: 0.5rem 0.75rem;
  background: var(--ivory);
  color: var(--navy);
  font-weight: 600;
  z-index: 10;
}
.skip:focus { top: 1rem; }

/* The frame is sized from the lockup, so that at full width the heading
   column starts at the frame's left edge and the text column starts
   directly below the mountain's foot. */
.wrap {
  width: 100%;
  max-width: calc(2 * (var(--foot) + var(--head-col) + var(--col-gap)) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- header ------------------------------------------------------------ */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.5rem;
}

.lockup-link {
  display: block;
  width: clamp(13.5rem, 30vw, 17.5rem);
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  font-size: 1.0625rem;
  text-decoration-color: transparent;
  padding-block: 0.5rem;
}
.site-nav a:hover { text-decoration-color: var(--gold); }
.site-nav a[aria-current="page"] { text-decoration-color: var(--gold); }

/* On the home page the full lockup sits just below; the header carries only
   the navigation so the name isn't shown twice in one view. */
.site-header.bare .wrap { justify-content: flex-end; }

/* ---- home: the lockup ------------------------------------------------- */

.masthead {
  padding-block: clamp(2rem, 10vh, 8.5rem) clamp(3.25rem, 12vh, 9.5rem);
}
.masthead h1 {
  width: min(var(--lockup), 100%);
  margin-inline: auto;
}

/* ---- the reading grid ------------------------------------------------- */
/* Headings hang in a narrow left column; text runs in the right column.
   Everything shares one left edge: the start of the text column. */

.sheet {
  display: grid;
  grid-template-columns: var(--head-col) minmax(0, var(--body-col));
  column-gap: var(--col-gap);
}
.sheet > * { grid-column: 2; }
.sheet > h1 { grid-column: 1 / -1; }
.sheet > .section-head { grid-column: 1; }

.sheet > h1 {
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 1.05;
  margin-top: clamp(2.5rem, 7vw, 5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.standfirst {
  font-size: clamp(1.75rem, 1rem + 2.2vw, 2.375rem);
  line-height: 1.22;
  margin-bottom: 1.5rem;
}

.lede { color: var(--ivory-quiet); max-width: 32em; }
.lede + .lede { margin-top: 1rem; }

.section-head {
  font-size: clamp(1.75rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin-top: var(--section);
}
/* the heading and its text share a row and a first baseline */
.section-head,
.section-head + * { align-self: first baseline; }
.section-head + * { margin-top: var(--section); }

.section-body { max-width: 32em; }
.section-body p { color: var(--ivory-quiet); }
.section-body p + p,
.section-body p + .actions,
.section-body dl + .actions,
.section-body dl + p { margin-top: 1.5rem; }
.section-body .actions + p { margin-top: 1.25rem; }

/* definition lists: a display-cut term over a quieter description */
.terms dt {
  font-size: 1.625rem;
  line-height: 1.2;
  color: var(--ivory);
}
.terms dd {
  color: var(--ivory-quiet);
  margin-top: 0.3rem;
}
.terms dd + dt { margin-top: 1.6rem; }

.fine {
  font-size: 0.875rem;
  color: var(--ivory-quiet);
}

/* ---- buttons ----------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--ivory);
  background: var(--ivory);
  color: var(--navy);
  font: 600 1.0625rem/1.2 var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.button:hover { background: var(--gold); border-color: var(--gold); }

.actions { margin-top: 2rem; }

/* ---- the inquiry form: the one light surface --------------------------- */

.letter {
  background: var(--ivory);
  color: var(--navy);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-top: 2.25rem;
}
.letter :focus-visible { outline-color: var(--navy); }
.letter a { color: inherit; text-decoration-color: currentColor; }

.field + .field { margin-top: 1.5rem; }

.field label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.45rem;
}
.field .optional { font-weight: 400; color: var(--ink-quiet); }
.field .hint {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-quiet);
  margin: -0.2rem 0 0.5rem;
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--field-edge);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--navy);
  font: 400 1.125rem/1.4 var(--text);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316222F' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 0.75rem;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--navy);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }

/* the field only bots fill in */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.letter .button { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.letter .button:hover { background: #22354A; border-color: #22354A; }

.letter .submit-row { margin-top: 2rem; }
.letter .fine { color: var(--ink-quiet); margin: 1rem 0 0; max-width: 30em; }

.after-letter { margin-top: 1.75rem; color: var(--ivory-quiet); }

/* ---- footer ------------------------------------------------------------ */

.site-footer {
  margin-top: calc(var(--section) * 1.5);
  padding-block: 2.5rem 3rem;
  font-size: 0.9375rem;
  color: var(--ivory-quiet);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}
.site-footer .firm { color: var(--ivory); }
.site-footer p { margin: 0; }

/* ---- small screens ----------------------------------------------------- */

@media (max-width: 54rem) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .sheet > *,
  .sheet > .section-head { grid-column: 1; }
  .section-head + * { margin-top: 1.25rem; }
  .terms dt { font-size: 1.375rem; }
}

@media (max-width: 30rem) {
  body { font-size: 1.125rem; line-height: 1.58; }
  .site-header .wrap { min-height: 4.5rem; flex-wrap: wrap; row-gap: 0.5rem; padding-block: 0.9rem; }
  .lockup-link { width: 11.75rem; }
  .button { width: 100%; text-align: center; }
}

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