/* flock.holdings — the house system.
   specula's discipline in green, set in a book face. Two colours and their
   mixes; zero radius; no shadows; inversion is the only emphasis; motion is
   80ms of colour and nothing else. */

:root {
  --pine: #0b5132;
  --paper: #f4f7f2;
  --ink: #232329;

  /* derived: mixes of the above, never new colours */
  --ink-muted: #666769;
  --rule: #ced1ce;
  --well: #ebede9;
  --paper-muted: #aec5b8;
  --rule-pine: #4c7f68;
  --well-pine: #226245;

  /* retained, demoted: hovered links, small active states */
  --meadow: #2f7d4f;

  --serif: "Literata", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 66ch;
  --gutter: 24px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0;
  /* The allowlist: anything wanting to translate, scale or stagger has
     nothing to transition. */
  transition-property: color, background-color, border-color, fill, stroke, opacity;
  transition-duration: 80ms;
  transition-timing-function: linear;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

strong {
  font-weight: 600; /* pinned: fallback serifs would otherwise render 700 */
}

body {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* ---- bracket corner marks, once, at the page shell ---- */

html::before,
html::after,
body::before,
body::after {
  content: "";
  position: fixed;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 10;
}

html::before  { top: 10px; left: 10px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
html::after   { top: 10px; right: 10px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
body::before  { bottom: 10px; left: 10px; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
body::after   { bottom: 10px; right: 10px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }

/* ---- type ---- */

a {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--meadow);
}

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 1px;
}

h1,
h2,
h3 {
  font-weight: 400; /* never above 400 for display; opsz does the work */
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h1 { font-size: clamp(38px, 6vw, 64px); margin-bottom: 28px; }
h2 { font-size: clamp(26px, 3.6vw, 34px); margin: 0 0 18px; }
h3 { font-size: 21px; margin-bottom: 10px; letter-spacing: 0; }

p {
  max-width: var(--measure);
  margin-bottom: 18px;
}

p:last-child {
  margin-bottom: 0;
}

em {
  font-style: italic;
}

.standfirst {
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.muted {
  color: var(--ink-muted);
}

/* mono is punctuation, not furniture */
.m {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "// ";
}

.num {
  font-variant-numeric: tabular-nums;
}

/* ---- shell ---- */

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container.wide {
  max-width: 1080px;
}

header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 36px 0 0;
}

.brand {
  font-size: 19px;
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.brand:hover {
  color: var(--pine);
}

nav.site {
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

nav.site a {
  color: var(--ink-muted);
  text-decoration: none;
}

nav.site a::before {
  content: "//";
  margin-right: 5px;
  color: var(--rule);
}

nav.site a:hover,
nav.site a[aria-current="page"] {
  color: var(--pine);
}

nav.site a[aria-current="page"]::before {
  color: var(--pine);
}

section {
  padding: 96px 0 0;
}

section:last-of-type {
  padding-bottom: 96px;
}

/* ---- rules & structure ---- */

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 64px 0;
}

.quote {
  border-left: 3px solid var(--pine);
  padding: 4px 0 4px 22px;
  margin: 32px 0;
  max-width: var(--measure);
}

.quote p {
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
}

.quote .m {
  color: var(--ink-muted);
  margin-top: 8px;
  display: block;
}

/* inversion is the only emphasis */
.invert {
  background: var(--pine);
  color: var(--paper);
}

.invert h1,
.invert h2,
.invert h3 {
  color: var(--paper);
}

.invert p {
  color: var(--paper);
}

.invert .muted,
.invert .standfirst {
  color: var(--paper-muted);
}

.invert a {
  color: var(--paper);
}

.invert a:hover {
  color: var(--paper-muted);
}

.invert .eyebrow {
  color: var(--paper-muted);
}

.invert hr {
  border-top-color: var(--rule-pine);
}

.invert :focus-visible {
  outline-color: var(--paper);
}

/* ---- imagery ---- */

figure {
  margin: 40px 0;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}

figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  margin-top: 12px;
}

.plate {
  border: 1px solid var(--rule);
}

/* ---- article ---- */

article {
  padding: 72px 0 96px;
}

article .titleblock {
  margin-bottom: 56px;
}

article .titleblock .meta {
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

article h1 {
  font-size: clamp(34px, 5vw, 54px);
}

article h2 {
  margin-top: 56px;
}

article ul,
article ol {
  max-width: var(--measure);
  margin: 0 0 18px 22px;
}

article li {
  margin-bottom: 8px;
}

code {
  font-family: var(--mono);
  font-size: 0.85em;
  letter-spacing: 0;
  text-transform: none;
  background: var(--well);
  padding: 1px 5px;
}

pre {
  background: var(--well);
  border: 1px solid var(--rule);
  padding: 18px 20px;
  overflow-x: auto;
  margin: 28px 0;
  max-width: 100%;
}

pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  display: block;
}

.footnotes {
  border-top: 1px solid var(--rule);
  margin-top: 64px;
  padding-top: 20px;
  font-size: 15px;
  color: var(--ink-muted);
}

.footnotes li {
  margin-bottom: 10px;
}

sup a {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
}

/* ---- tables ---- */

table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
  margin: 28px 0;
}

th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--ink);
}

td {
  padding: 9px 16px 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15.5px;
}

/* ---- research index ---- */

.aside {
  margin-top: 28px;
  font-style: italic;
}

.entry {
  display: block;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  max-width: none;
}

.entry:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.entry:hover h3 {
  color: var(--pine);
}

.entry .m {
  color: var(--ink-muted);
  display: block;
  margin-bottom: 6px;
}

.entry p {
  color: var(--ink-muted);
  font-size: 16px;
  margin: 6px 0 0;
}

/* ---- forms ---- */

form {
  display: grid;
  gap: 22px;
  max-width: var(--measure);
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.field {
  display: grid;
  gap: 7px;
  align-content: start;
}

.field > label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

input,
select,
textarea {
  font-family: var(--serif);
  font-size: 16.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  width: 100%;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--ink-muted);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--pine);
  outline-offset: 1px;
  border-color: var(--pine);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23666769' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.6;
}

/* Browsers decorate invalid fields with a red glow of their own; that is
   the one path red could enter this site, so it is closed explicitly. */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  box-shadow: none;
  outline: none;
}

input:-moz-ui-invalid,
select:-moz-ui-invalid,
textarea:-moz-ui-invalid {
  box-shadow: none;
}

/* error state: a 3px pine rule and the message. no red exists here. */
.field.invalid {
  border-left: 3px solid var(--pine);
  padding-left: 14px;
}

.error-msg {
  display: none;
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}

.field.invalid .error-msg {
  display: block;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.counter {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 400;
  color: var(--paper);
  background: var(--pine);
  border: 1px solid var(--pine);
  padding: 11px 28px;
  cursor: pointer;
  justify-self: start;
}

button:hover {
  background: var(--well-pine);
}

button:disabled {
  background: var(--ink-muted);
  border-color: var(--ink-muted);
  cursor: default;
}

.banner {
  display: none;
  border-left: 3px solid var(--pine);
  background: var(--well);
  padding: 12px 16px;
  font-size: 15px;
  margin-bottom: 22px;
  max-width: var(--measure);
}

.success {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pine);
  padding: 26px 28px;
  max-width: var(--measure);
}

.form-note {
  font-size: 14px;
  color: var(--ink-muted);
  font-style: italic;
}

/* ---- the pasture ---- */

.pasture {
  position: relative;
  height: 52px;
  border-bottom: 1px solid var(--ink);
  margin: 72px 0 24px;
}

.sheep {
  position: absolute;
  bottom: 0;
  width: 26px;
  height: 19px;
  color: var(--ink);
}

.sheep.lamb {
  width: 17px;
  height: 12.5px;
}

.sheep.flip {
  transform: scaleX(-1);
}

.sheep-amble {
  animation: graze 80s ease-in-out infinite alternate;
}

@keyframes graze {
  from { transform: translateX(0); }
  to { transform: translateX(150px); }
}

@media (prefers-reduced-motion: reduce) {
  .sheep-amble {
    animation: none;
  }
}

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

footer.site {
  padding: 0 0 56px;
}

footer.site .links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

footer.site .links a {
  color: var(--ink-muted);
  text-decoration: none;
}

footer.site .links a:hover {
  color: var(--pine);
}

footer.site .fine {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-bottom: 6px;
}

/* ---- responsive ---- */

@media (max-width: 620px) {
  nav.site {
    gap: 12px;
  }

  header.site {
    flex-direction: column;
    gap: 14px;
  }

  .frow {
    grid-template-columns: 1fr;
  }

  section {
    padding-top: 72px;
  }
}