/* ==========================================================================
   Applied Wood — site styles
   One stylesheet for every page. Tokens first, then layout, then components.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --paper: #f5f3ef;
  --ink: #2b1d10;
  --ink-soft: #7a7168;
  --rule: #ddd6cb;

  /* Sampled from the logo. */
  --red: #e90025;
  --accent: var(--red);

  /* Second tone: oatmeal panels behind work, and the header/footer dividers. */
  --board: #ece2d0;

  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1rem, 3vw, 2rem);
  --col-gap: clamp(1rem, 2vw, 1.5rem);
  --measure: 36rem;
  --max-width: 100rem;

  --step--1: 0.8125rem;
  --step-0: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --step-1: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --step-3: clamp(1.5rem, 0.85rem + 2.4vw, 3rem);
}

/* --- Base ----------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  text-wrap: balance;
}

p,
dl,
dd {
  margin: 0;
  text-wrap: pretty;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* Red text uses the medium weight: at regular weight the thin strokes blend
   into the paper and read lighter and pinker than the solid logo red. DM Mono
   is monospaced, so the weight change doesn't shift anything sideways. */
a:hover {
  color: var(--accent);
  font-weight: 500;
}

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

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

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Four-column grid shared by header, hero, captions and footer so their
   edges line up down the page. Collapses on phones. */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 1rem;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Divider -------------------------------------------------------------- */
/* Hairline under the header and above the footer. */

.divider {
  height: 1px;
  background: var(--rule);
}

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

.masthead {
  align-items: center;
  padding-block: clamp(1rem, 2.5vw, 1.5rem);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-weight: 500;
  text-decoration: none;
}

.logo-mark {
  width: auto;
  height: 1rem;
  flex-shrink: 0;
}

/* The nav's two links sit in the masthead grid's last two columns. */
.nav {
  display: contents;
}

.nav a {
  text-decoration: none;
}

.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* --- Landing -------------------------------------------------------------- */
/* Headline in the left two columns, portrait photo in the right two. */

.landing {
  align-items: start;
  padding-top: clamp(1.75rem, 4vw, 3rem);
  row-gap: 2.5rem;
}

.landing h1 {
  grid-column: 1 / span 2;
  font-size: var(--step-3);
  max-width: 16ch;
}

.landing .figure {
  grid-column: 3 / span 2;
}

/* --- About ---------------------------------------------------------------- */
/* Same split as the landing page: statement left, text and contact right. */

.about {
  align-items: start;
  padding-top: clamp(1.75rem, 4vw, 3rem);
  row-gap: 2.5rem;
}

.about h1 {
  grid-column: 1 / span 2;
  font-size: var(--step-3);
  max-width: 16ch;
}

.about__body {
  grid-column: 3 / span 2;
}

.prose p + p {
  margin-top: 1em;
}

/* Label / value rows, e.g. contact details. */
.info {
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: var(--measure);
}

.info > div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 1em;
  padding-block: 0.5rem;
  border-top: 1px solid var(--rule);
}

.info > div:last-child {
  border-bottom: 1px solid var(--rule);
}

.info dt {
  color: var(--ink-soft);
}

/* --- Figure --------------------------------------------------------------- */

.figure {
  margin: 0;
}

/* Backing board: the work mounted on an oatmeal panel. Image and caption are
   centred on it, capped so a portrait photo stays within one screen. */
.board {
  background: var(--board);
  padding: clamp(1.25rem, 4vw, 3rem);
}

.board > * {
  max-width: 22rem;
  margin-inline: auto;
}

/* Corner crop marks just outside the image, like a cut sheet. */
.frame {
  position: relative;
}

.frame::after {
  --m: 14px; /* mark length */
  --o: -8px; /* offset outside the image */
  content: "";
  position: absolute;
  inset: var(--o);
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / var(--m) 1px,
    linear-gradient(var(--ink), var(--ink)) top left / 1px var(--m),
    linear-gradient(var(--ink), var(--ink)) top right / var(--m) 1px,
    linear-gradient(var(--ink), var(--ink)) top right / 1px var(--m),
    linear-gradient(var(--ink), var(--ink)) bottom left / var(--m) 1px,
    linear-gradient(var(--ink), var(--ink)) bottom left / 1px var(--m),
    linear-gradient(var(--ink), var(--ink)) bottom right / var(--m) 1px,
    linear-gradient(var(--ink), var(--ink)) bottom right / 1px var(--m);
  background-repeat: no-repeat;
}

.figure img {
  width: 100%;
}

.figure figcaption {
  margin-top: 1.25rem;
}

.fig-no {
  color: var(--accent);
}

/* --- Generic section (for pages added later) ------------------------------ */

.section {
  padding-block: clamp(3rem, 9vw, 6rem);
}

.section h2 {
  font-size: var(--step-2);
}

.section > h2 + * {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.prose {
  max-width: var(--measure);
  font-size: var(--step-0);
  line-height: 1.6;
}

/* --- Placeholder (stub pages) --------------------------------------------- */

.placeholder {
  padding-block: clamp(4rem, 14vw, 11rem);
}

.placeholder h1 {
  font-size: var(--step-3);
}

.placeholder p {
  margin-top: 0.5rem;
  font-size: var(--step-3);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink-soft);
}

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

.footer {
  margin-top: clamp(4rem, 12vw, 9rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.footer .grid {
  padding-top: 1rem;
}

/* Links wrap between each other, never mid-address. */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.footer__links a {
  white-space: nowrap;
}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 40rem) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .span-3 {
    grid-column: span 2;
  }

  /* Header goes back to one line: wordmark left, links right. */
  .masthead {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  .masthead .nav {
    display: flex;
    gap: 1.25rem;
  }

  .landing h1,
  .landing .figure,
  .about h1,
  .about__body {
    grid-column: 1 / -1;
  }
}