/* Anamora, anamorastudio.com: the spaced identity
   One stylesheet, no framework. Inter is self-hosted (SIL OFL, see /fonts). */

/* Fonts ----------------------------------------------------------------- */

@font-face {
  font-family: "Anamora Inter";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback to limit layout shift while Inter loads. */
@font-face {
  font-family: "Anamora Inter Fallback";
  src: local("Arial");
  size-adjust: 107.1%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

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

:root {
  --bg: #f4f0e7;      /* warm cream */
  --ink: #111110;     /* 16.6:1 on --bg */
  --muted: #625f58;   /* secondary text, 5.6:1 on --bg */
  --rule: #c9c2b4;    /* resting underline of text links */

  --font: "Anamora Inter", "Anamora Inter Fallback", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-small: 0.9375rem;                                  /* 15px */
  --text-note: 0.875rem;                                    /* 14px, sheet and homepage */
  --text-label: 0.75rem;                                    /* 12px, tracked capitals */
  --track-label: 0.42em;

  --page-pad: clamp(1.25rem, 4.5vw, 4.5rem);  /* left and right edges */
  --edge: clamp(1.375rem, 4.2vh, 2.75rem);    /* top and bottom edges */
  --gutter: clamp(1rem, 2vw, 2rem);
  --letter-height: clamp(0.95rem, 1.65vw, 1.75rem);
}

/* Inverted pages: a product's own page, near-black with cream type. */
.inverted {
  --bg: #111110;
  --ink: #f4f0e7;     /* 16.6:1 on --bg */
  --muted: #a39e93;   /* 7.4:1 on --bg */
  --rule: #4a4741;
}

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

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-small);
  line-height: 1.5;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, p, ul, ol, dl, dd, address {
  margin: 0;
}

h1, h2 {
  font-size: inherit;
  font-weight: inherit;
}

ul, ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

a {
  color: inherit;
}

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

::selection {
  background: var(--ink);
  color: var(--bg);
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  padding: 0.625rem 0.875rem;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

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

/* Page frame: content grows, so a footer sits on the bottom edge. */
main {
  flex: 1 0 auto;
}

/* Identity header ---------------------------------------------------------
   The name as seven letters spread from edge to edge across the top of every
   page. It is the header and the way home. */

.site-header {
  padding: var(--edge) var(--page-pad) 0;
}

.identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--ink);
}

.identity-letter {
  display: block;
  height: var(--letter-height);
  width: auto;
  fill: currentColor;
}

/* Tracked capitals: the homepage links, section labels and edge notes. */
.label,
.home-nav a,
.edge-link {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.label {
  margin-bottom: 1.1em;
}

/* Links in running text: a hairline that darkens on hover. */
.sheet a {
  text-decoration-line: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.sheet a:hover {
  text-decoration-color: currentColor;
}

.home-nav a,
.edge-link {
  text-decoration: none;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
}

.home-nav a:hover,
.edge-link:hover {
  text-decoration-line: underline;
}

/* Bottom edge: the homepage links, or the way back from a product. */
.site-footer {
  padding: 0 var(--page-pad) var(--edge);
}

/* Homepage ----------------------------------------------------------------
   The spaced name at the top, Projects and Information on the bottom edge,
   and an empty field between them. Clicking either word makes its panel
   appear in the field at once (#projects or #information, matched with
   :target); the page does not reload. Clicking the name clears the field
   again. */

.panel:not(:target) {
  display: none;
}

/* Opening a panel never scrolls the page down to it. */
.panel {
  scroll-margin-top: 100vh;
}

/* The word whose panel is open stays underlined. */
.home:has(#projects:target) .home-nav a[href="#projects"],
.home:has(#information:target) .home-nav a[href="#information"] {
  text-decoration-line: underline;
}

.home-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--gutter);
}

.home-nav a {
  padding-block: 0.5rem;
  animation: letter-flicker 165ms linear both;   /* timed below */
}

/* The letters switch on --------------------------------------------------
   On the homepage the seven letters switch on in place, one at a time, out
   of reading order and at uneven intervals, over about 1.15 seconds:
   R, the first A soon after, a pause, O, the final A close behind, the M
   flickering once, N, and after a last pause the second A. Each switch is a
   40ms change of opacity. After a short pause, PROJECTS and then
   INFORMATION each flicker on once, in the same manner. Nothing moves,
   scales or changes colour, and after about 1.55 seconds everything stays
   still. Reduced motion shows it all at once. */

.home .identity-letter {
  animation: letter-on 40ms linear both;
}

.home .identity-letter:nth-of-type(6) { animation-delay: 120ms; }   /* R */
.home .identity-letter:nth-of-type(1) { animation-delay: 220ms; }   /* first A */
.home .identity-letter:nth-of-type(5) { animation-delay: 450ms; }   /* O */
.home .identity-letter:nth-of-type(7) { animation-delay: 520ms; }   /* final A */
.home .identity-letter:nth-of-type(2) { animation-delay: 880ms; }   /* N */
.home .identity-letter:nth-of-type(3) { animation-delay: 1100ms; }  /* second A */

/* The M: on at 650ms, off, on for good at about 815ms. */
.home .identity-letter:nth-of-type(4) {
  animation: letter-flicker 165ms linear 650ms both;
}

/* Then the two words, each with one flicker: PROJECTS settles at about
   1425ms, INFORMATION at about 1545ms. */
.home-nav a:first-child {
  animation-delay: 1260ms;
}

.home-nav a:last-child {
  animation-delay: 1380ms;
}

@keyframes letter-on {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes letter-flicker {
  0% { opacity: 0; }
  21% { opacity: 1; }
  42% { opacity: 1; }
  52% { opacity: 0; }
  91% { opacity: 0; }
  100% { opacity: 1; }
}

/* Information --------------------------------------------------------------
   On phones and tablets: one left-aligned flow. On larger screens a single
   composed spread, centred under the M and between the name and the two
   words: About on the left, Products, Enquiries and Company stacked on the
   right, and the copyright closing the left side level with the last line
   on the right. */

.sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: 3.5rem;
  padding: clamp(4rem, 17vh, 9rem) var(--page-pad) 4rem;
  font-size: var(--text-note);
  line-height: 1.5;
}

.sheet p + p {
  margin-top: 0.9em;
}

.sheet-about {
  max-width: 22em;
}

.sheet-side {
  max-width: 19em;
}

.sheet-side > * + * {
  margin-top: 3.5rem;
}

.sheet-note {
  font-size: var(--text-label);
  color: var(--muted);
  letter-spacing: 0.02em;
}

@media (min-width: 64em) {
  /* The open panel fills the field so the spread can sit in its middle. */
  .home main {
    display: flex;
    flex-direction: column;
  }

  .home .sheet {
    flex: 1 0 auto;
  }

  .sheet {
    grid-template-columns: minmax(0, 22em) minmax(0, 19em);
    grid-template-rows: auto auto;
    place-content: center;
    gap: 0 clamp(4rem, 9vw, 10rem);
    padding: 3rem var(--page-pad) 5rem;
  }

  /* The first line of About and the Products label share a baseline. */
  .sheet-about {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
  }

  .sheet-side {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: baseline;
  }

  .sheet-note {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }
}

/* Projects ----------------------------------------------------------------
   One quiet statement, in the same small type as Information, set as a
   single left-aligned block centred in the field (under the M). Published
   products, once there are any, are listed beneath it. */

.index {
  padding: clamp(4rem, 17vh, 9rem) var(--page-pad) 4rem;
  font-size: var(--text-note);
  line-height: 1.5;
}

.index-statement {
  max-width: 24em;
  text-wrap: pretty;
}

.project-list {
  margin-top: 3.5rem;
}

@media (min-width: 64em) {
  /* Centred in the field, a little above the middle like the
     information spread. */
  .home .index {
    flex: 1 0 auto;
  }

  .index {
    display: grid;
    grid-template-columns: minmax(0, 24em);
    place-content: center;
    padding: 3rem var(--page-pad) 5rem;
  }
}

/* A published product's row. */
.project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--gutter);
  padding-block: 0.35rem;
  text-decoration: none;
}

.project-status {
  color: var(--muted);
}

.project-row:hover .project-name,
.project-row:focus-visible .project-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* A project --------------------------------------------------------------- */

.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.75rem;
  align-content: start;
  padding: clamp(5rem, 24vh, 15rem) var(--page-pad) 4rem;
}

.project-title {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.project-summary {
  max-width: 17em;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.35;
}

.project-state {
  margin-top: 1.4em;
  color: var(--muted);
}

@media (min-width: 48em) {
  .project {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .project-title {
    grid-column: 1 / span 6;
  }

  .project-facts {
    grid-column: 7 / span 5;
    padding-top: 0.9em;
  }
}

@media (min-width: 64em) {
  .project-facts {
    grid-column: 8 / span 4;
  }
}

/* Between pages -------------------------------------------------------------
   Where the browser supports cross-document view transitions, the header
   letters hold still and the page content crossfades. Elsewhere, and with
   reduced motion, pages simply switch. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation-duration: 140ms;
}

::view-transition-new(root) {
  animation-duration: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* identity layout: start. Generated by scripts/build-pages.py */
.identity-letter:nth-of-type(1) {
  view-transition-name: letter-1;
}

.identity-letter:nth-of-type(2) {
  view-transition-name: letter-2;
}

.identity-letter:nth-of-type(3) {
  view-transition-name: letter-3;
}

.identity-letter:nth-of-type(4) {
  view-transition-name: letter-4;
}

.identity-letter:nth-of-type(5) {
  view-transition-name: letter-5;
}

.identity-letter:nth-of-type(6) {
  view-transition-name: letter-6;
}

.identity-letter:nth-of-type(7) {
  view-transition-name: letter-7;
}
/* identity layout: end */

/* Motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .home .identity-letter,
  .home-nav a {
    animation: none !important;
  }
}

/* Print ----------------------------------------------------------------- */

@media print {
  .skip-link,
  .home-nav {
    display: none;
  }

  body {
    background: none;
  }
}