/* Layout: a dark table with cream cards laid on it. Projects are tarot-style
   cards with an inked deco frame; every other image is a cream-matted print.
   Lettering is art-nouveau display over a bookish serif; red is the only accent. */
:root {
  --night: #141112;      /* page */
  --disc: #201B1A;       /* inside the hero circle, matched to the colour drawing */
  --glow: #251E1D;       /* soft light at the top of the page */
  --bone: #E3D5BC;       /* text on dark, card stock */
  --bone-hi: #EDE2CB;    /* lit part of a card */
  --bone-lo: #CDBB9A;    /* worn edge of a card */
  --sepia: #CBB998;      /* empty picture area on a card */
  --umber: #5E5142;      /* quiet text on card stock */
  --ink: #1A1516;        /* linework and text on card stock */
  --dust: #A09482;       /* quiet text on dark */
  --seam: #3B3431;       /* hairlines on dark */
  --blood: #B5332C;      /* accent: ornaments and large lettering */
  --ember: #E0604F;      /* accent for small text on dark */
  --edge: rgba(26, 21, 22, .4);
  --stain: rgba(120, 84, 40, .3);
  --shadow: rgba(0, 0, 0, .65);

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --text: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --label: "Josefin Sans", "Century Gothic", "Gill Sans", sans-serif;

  /* Settings that travel with the display face. The type options tool in
     main.js (TYPE) changes these together; the values here are the default. */
  --dw: 600;         /* weight */
  --dt: .05em;       /* letter-spacing of large headings */
  --dc: uppercase;   /* case of large headings */
  --ds: 1.06;        /* size multiplier for large headings */
  --wt: .14em;       /* letter-spacing of the name in the header */
  --pt: .08em;       /* letter-spacing of card name tags */
  --fit: 84;         /* how wide the face runs, for fitting card name tags */
  --ts: 1.2rem;      /* reading text size */

  --raised: #1B1718; /* dark cards */

  --gutter: clamp(16px, 3.2vw, 48px);
  --gap: clamp(16px, 2vw, 32px);
  --section: clamp(5rem, 10vw, 9.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .84 0 0 0 0 .74 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .13 0 0 0 0 .05 0 0 0 .15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: dark;
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  background: var(--night);
}
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background:
    var(--grain-light),
    radial-gradient(90rem 44rem at 50% -8rem, var(--glow), transparent 70%) no-repeat,
    var(--night);
  color: var(--bone);
  font: 400 var(--ts)/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--night);
}

img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--blood); color: var(--bone); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.wrap {
  max-width: 1680px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
/* small spaced capitals: labels, metadata, navigation */
.mono {
  font: 500 .78rem/1.5 var(--label);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums; /* numbers at full capital height */
}
.grey { color: var(--dust); }

.u {
  text-decoration: none;
  padding-bottom: .12em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .4s var(--ease), color .3s ease;
}
.u:hover, .u:focus-visible { background-size: 100% 1px; }

.skip {
  position: absolute;
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  top: -4rem;
  z-index: 40;
  padding: .6rem .9rem;
  background: var(--bone);
  color: var(--ink);
  font: 500 .78rem var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + .5rem); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 1.3rem;
  border: 1px solid var(--bone);
  outline: 1px solid var(--seam);
  outline-offset: 3px;
  font: 500 .78rem/1 var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
a.btn:hover, button.btn:hover { background: var(--bone); color: var(--ink); }
.btn.is-pending { border-style: dashed; border-color: var(--dust); color: var(--dust); }

/* four-point star, used as the one recurring ornament */
.label::before, .plate__ph::after {
  content: "";
  display: inline-block;
  width: .7rem;
  height: .7rem;
  background: var(--blood);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.label { color: var(--dust); }
.label::before { margin-right: .7rem; vertical-align: -.05em; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.header.is-stuck { background: var(--night); border-bottom-color: var(--seam); }
/* three columns so the links sit on the page's centre line, above the circle */
.header__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
}
.wordmark { justify-self: start; }
.nav { grid-column: 2; }
.header__tools { grid-column: 3; justify-self: end; }
.wordmark {
  font: var(--dw) calc(1.2rem * var(--ds))/1 var(--display);
  letter-spacing: var(--wt);
  text-transform: var(--dc);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark em { font-style: normal; color: var(--ember); }
.nav ul { display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.nav a:hover { color: var(--ember); }
.header__tools { display: flex; align-items: center; gap: 1.25rem; }
.menu-btn { display: none; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  overflow-y: auto;
  background: var(--night);
  padding-top: calc(env(safe-area-inset-top, 0px) + 6rem);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.menu__links a {
  display: block;
  padding-block: .25em;
  font: var(--dw) clamp(2.25rem, 11vw, 3.75rem)/1.1 var(--display);
  letter-spacing: var(--dt);
  text-transform: var(--dc);
  text-decoration: none;
}
.menu__foot { color: var(--dust); }

/* ---------- Hero ---------- */
.hero { overflow: hidden; overflow: clip; }
.hero__in { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5.5rem); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Phase one: four pieces of text sit in the corners around the character.
   Phase two (.hero.is-open, set when the character is pressed): they come in
   beside it, the character grows and takes its colour, and the ring of text
   expands to the corners of the hero. main.js animates the move. */
.hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: var(--gap);
  row-gap: 2.5rem;
}
.hero__piece { max-width: 22rem; transition: transform 1.1s var(--ease); }
.hero__piece .grey { color: var(--dust); }
.hero__piece--tl { grid-area: 1 / 1; justify-self: start; align-self: start; }
.hero__piece--tr { grid-area: 1 / 3; justify-self: end; align-self: start; }
.hero__piece--bl { grid-area: 2 / 1; justify-self: start; align-self: end; }
.hero__piece--br { grid-area: 2 / 3; justify-self: end; align-self: end; }
.hero.is-open .hero__piece--tl, .hero.is-open .hero__piece--bl { justify-self: end; }
.hero.is-open .hero__piece--tr, .hero.is-open .hero__piece--br { justify-self: start; }
.hero.is-open .hero__piece--tl, .hero.is-open .hero__piece--tr { align-self: end; }
.hero.is-open .hero__piece--bl, .hero.is-open .hero__piece--br { align-self: start; }
/* the two pieces on the left take one width, so their text starts on the same line */
.hero.is-open .hero__piece--tl, .hero.is-open .hero__piece--bl { width: min(100%, 19rem); }

.hero__figure {
  grid-area: 1 / 2 / span 2 / auto;
  align-self: center;
  position: relative;
  width: clamp(17rem, min(46vw, 66vh), 38rem);
  max-width: 100%;
  aspect-ratio: 1;
}
.ring-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform 1.3s var(--ease), opacity .8s ease;
}
.hero.is-open .ring-wrap { transform: scale(var(--ring-scale, 2.6)); }
.ring__ticks, .ring__line { transition: opacity .6s ease; }
.hero.is-open .ring__ticks, .hero.is-open .ring__line { opacity: 0; }
.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ring text { font: var(--dw) 40px var(--display); fill: var(--bone); letter-spacing: .02em; }
.ring--seal { animation-direction: reverse; }
.ring .it { fill: var(--ember); }
.ring__ticks { fill: none; stroke: var(--dust); stroke-width: 7; stroke-dasharray: 1 8.17; }
.ring__line { fill: none; stroke: var(--seam); stroke-width: 1.5; }
.hero__disc {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 1.1s var(--ease);
}
.hero.is-open .hero__disc { transform: scale(1.2); }
/* the character: one-colour drawing first, full colour once pressed */
#character {
  position: relative;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--disc);
  box-shadow: 0 1.8rem 3rem -1.6rem var(--shadow);
}
#character img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.persona__b {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .9s ease, transform 1.1s var(--ease);
}
.hero.is-open .persona__b { opacity: 1; transform: none; }
.hero__hint {
  position: absolute;
  right: 13%;
  bottom: 13%;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--blood);
  color: var(--bone);
  font-size: .62rem;
  letter-spacing: .1em;
  pointer-events: none;
}
.hero__status { display: grid; gap: .35rem; justify-items: start; }
.hero__status .grey { color: var(--dust); }
.dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .6rem;
  background: var(--ember);
  transform: rotate(45deg);
  vertical-align: .08em;
}
.hero__cue { margin-top: 1.25rem; }
.hero__intro {
  max-width: 25ch;
  font: italic 400 clamp(1.2rem, 1.55vw, 1.55rem)/1.35 var(--text);
}

/* ---------- Sections ---------- */
.sec { position: relative; padding-block: var(--section); }
/* deco divider: a hairline broken by a red diamond */
.sec--line::before, .footer::before {
  content: "";
  position: absolute;
  top: -5px;
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  height: 10px;
  background:
    linear-gradient(var(--seam), var(--seam)) 0 50% / calc(50% - 16px) 1px no-repeat,
    linear-gradient(var(--seam), var(--seam)) 100% 50% / calc(50% - 16px) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23B5332C'/%3E%3C/svg%3E") 50% 50% / 10px 10px no-repeat;
}
.h-display {
  font: var(--dw) calc(clamp(2.1rem, 5vw, 4.5rem) * var(--ds))/1.02 var(--display);
  letter-spacing: var(--dt);
  text-transform: var(--dc);
  text-wrap: balance;
}
.h-display sup {
  margin-left: .6em;
  font: 500 .78rem/1 var(--label);
  letter-spacing: .14em;
  color: var(--ember);
  vertical-align: top;
  position: relative;
  top: .7em;
}

/* ---------- Plates: a cream-matted print, or a labelled blank ---------- */
.plate {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  border: clamp(.5rem, 1.1vw, .9rem) solid var(--bone);
  border-radius: .5rem;
  background: var(--sepia);
  color: var(--ink);
  box-shadow: 0 1.5rem 2.5rem -1.5rem var(--shadow);
  container-type: inline-size;
}
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--ink);
  pointer-events: none;
}
.plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease, transform 1.4s var(--ease);
}
.plate.is-loaded img { opacity: 1; }
.plate.is-loaded .plate__ph { visibility: hidden; }
.plate__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--grain-dark);
  color: var(--umber);
}
.plate__ph::after { position: absolute; top: clamp(12px, 6cqw, 28px); left: 50%; margin-left: -.35rem; }
.plate__note {
  position: absolute;
  left: clamp(14px, 6cqw, 30px);
  right: clamp(14px, 6cqw, 30px);
  bottom: clamp(12px, 5cqw, 26px);
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1rem;
  font-size: .72rem;
}
.plate__note b { font-weight: 500; color: var(--ink); }
.plate__note span { text-transform: none; letter-spacing: .02em; overflow-wrap: anywhere; }
@container (max-width: 230px) {
  .plate__note span { display: none; }
}

figcaption { margin-top: .8rem; color: var(--dust); }

/* ---------- Selected work: tarot cards ---------- */
.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.work__note { max-width: 36ch; color: var(--dust); }
.work__grid {
  display: grid;
  /* one even row of four, upright and level; two per row on phones */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 3vw, 3rem);
  row-gap: clamp(2.5rem, 4.5vw, 4rem);
  align-items: start;
}
.card { display: block; text-decoration: none; }

/* The card. Proportions follow the frame drawing in main.js (250 x 400). */
.tarot {
  position: relative;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  border-radius: 6% / 3.75%;
  background:
    var(--grain-dark),
    radial-gradient(120% 85% at 28% 8%, var(--bone-hi), var(--bone) 55%, var(--bone-lo));
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--edge),
    inset 0 0 2.5rem var(--stain),
    0 1.6rem 2.6rem -1.4rem var(--shadow);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
  container-type: inline-size;
}
.card:hover .tarot, .card:focus-visible .tarot {
  transform: translateY(-.8rem) rotate(0deg);
  box-shadow:
    inset 0 0 0 1px var(--edge),
    inset 0 0 2.5rem var(--stain),
    0 2.6rem 3rem -1.4rem var(--shadow);
}
.card:hover .plate img { transform: scale(1.05); }

/* The cover fills the card from the inner border down to the title plaque.
   Its two top corners are scooped out so the sunbursts sit over the picture
   on clean card stock, whatever colour the picture is. The same outline is
   drawn in the frame in main.js. */
.tarot__window { position: absolute; left: 9.6%; top: 6%; width: 80.8%; height: 73.5%; }
.tarot .plate {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 202 294' preserveAspectRatio='none'%3E%3Cpath d='M0 294V49.77A55 55 0 0 0 49.77 0H152.23A55 55 0 0 0 202 49.77V294Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 202 294' preserveAspectRatio='none'%3E%3Cpath d='M0 294V49.77A55 55 0 0 0 49.77 0H152.23A55 55 0 0 0 202 49.77V294Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tarot .plate::after { display: none; }
/* The sunbursts and the number take a little off the top of the picture, so
   the cover is anchored to the top and drawn slightly taller. That lowers
   the middle of the artwork to the visual middle of what is left showing. */
.tarot .plate img { inset: 0; height: 100%; }
.tarot .plate__ph::after { top: 34%; }
.tarot .plate__note {
  left: 12%;
  right: 12%;
  bottom: 10%;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tarot__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  pointer-events: none;
}
.tarot__frame .is-stock { fill: var(--bone-hi); }
.tarot__frame .is-red { fill: var(--blood); stroke: none; }
.tarot__no {
  position: absolute;
  left: 41.2%;
  top: 4.75%;
  width: 17.6%;
  height: 6%;
  display: grid;
  place-items: center;
  font: var(--dw) 3.9cqw/1 var(--display);
  letter-spacing: .06em;
}
.tarot__title {
  position: absolute;
  left: 19%;
  right: 19%;
  top: 82.5%;
  height: 11%;
  display: grid;
  place-items: center;
  text-align: center;
  font: var(--dw) min(7.2cqw, calc(var(--fit) * 1cqw / var(--len, 10)))/1.08 var(--display);
  letter-spacing: var(--pt);
  text-transform: var(--dc);
}
.tarot__title.is-two { font-size: min(5.2cqw, calc(var(--fit) * 1cqw / var(--len, 10))); }

/* under each card: what kind of work it is, with the disciplines appearing on hover */
.card__meta { display: grid; gap: .35rem; margin-top: 1.2rem; text-align: center; }
.card__kind { order: -1; color: var(--ember); }
.card__cat {
  color: var(--dust);
  font-size: .68rem;
  opacity: 0;
  transform: translateY(-.3rem);
  transition: opacity .4s ease, transform .5s var(--ease);
}
.card:hover .card__cat, .card:focus-visible .card__cat { opacity: 1; transform: none; }
@media (hover: none) { .card__cat { display: none; } }

/* ---------- Section heading (below the hero) ---------- */
.sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.sec__note { max-width: 38ch; color: var(--dust); }
.star {
  display: block;
  background: var(--blood);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* ---------- About: the portrait as one more card from the deck ---------- */
/* the note in the heading row starts on the same line as the text below it */
.sec__head--split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
}
.sec__head--split .h-display { grid-column: 1 / span 5; }
.sec__head--split .sec__note { grid-column: 6 / -1; max-width: none; padding-bottom: .55em; }

/* The card and the text share one row: the card starts where the text
   starts and ends where it ends. */
.about { row-gap: 3rem; align-items: stretch; }
.about__card { grid-column: 1 / span 4; }
.about__main { grid-column: 6 / span 7; display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-content: space-between; }

/* The portrait: a plain 4:5 photo. No frame, no crop shape, no text.
   Until the photo exists it is a quiet dark panel with a label. */
.plate--clean {
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: .35rem;
  background: var(--raised);
  color: var(--dust);
  box-shadow: none;
  outline: 1px solid var(--seam);
  outline-offset: -1px;
}
.plate--clean.is-loaded { outline: 0; }
.plate--clean::after, .plate--clean .plate__ph::after { display: none; }
.plate--clean .plate__ph { background: none; color: var(--dust); }
.plate--clean .plate__note b { color: var(--bone); }
.about__lead {
  font: var(--dw) clamp(1.6rem, 3vw, 2.85rem)/1.2 var(--display);
  letter-spacing: .01em;
  text-wrap: balance;
}
.about__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.about__body p { max-width: 46ch; }
.tools { display: grid; gap: .9rem; }
.tools div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: .75rem;
  border-top: 1px solid var(--seam);
  padding-top: .8rem;
}
.tools dt { color: var(--dust); }

/* ---------- What I do: six dark cards, the reverse of the project cards ---------- */
.arcana { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.arcanum {
  position: relative;
  display: grid;
  gap: .9rem;
  align-content: start;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border: 1.5px solid var(--dust);
  border-radius: .9rem;
  background: var(--grain-light), var(--raised);
  transition: transform .6s var(--ease), border-color .4s ease;
}
.arcanum::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--seam);
  border-radius: .6rem;
  pointer-events: none;
}
.arcanum:hover { transform: translateY(-.4rem); border-color: var(--bone); }
.arcanum__icon {
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: .6rem;
  fill: none;
  stroke: var(--bone);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.arcanum__icon .is-red { fill: var(--blood); stroke: none; }
.arcanum__t { font: var(--dw) clamp(1.3rem, 1.9vw, 1.7rem)/1.15 var(--display); letter-spacing: .01em; }
.arcanum__d { color: var(--dust); }

/* ---------- Experience: a timeline, with the résumé as a cream ticket ---------- */
.exp-grid { row-gap: 3rem; align-items: start; }
.exp-side { grid-column: 1 / span 4; display: grid; gap: clamp(2rem, 4vw, 3rem); justify-items: start; }
.exp-main { grid-column: 6 / span 7; }
.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .7rem;
  bottom: 2.5rem;
  width: 1px;
  background: var(--seam);
}
.exp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem 1.5rem;
  align-items: baseline;
  padding: 0 0 clamp(1.9rem, 3.2vw, 2.75rem) 2.5rem;
}
.exp::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55rem;
  width: .65rem;
  height: .65rem;
  background: var(--blood);
  transform: rotate(45deg);
}
.exp__org { font: var(--dw) clamp(1.35rem, 2vw, 1.85rem)/1.15 var(--display); letter-spacing: .01em; }
.exp__when { color: var(--dust); text-align: right; }
.exp__role { grid-column: 1 / -1; }
.exp__role span { display: block; color: var(--dust); }

.ticket {
  position: relative;
  display: grid;
  gap: .9rem;
  justify-items: start;
  width: 100%;
  max-width: 24rem;
  padding: 1.9rem 1.8rem 2rem;
  border-radius: .8rem;
  background:
    var(--grain-dark),
    radial-gradient(120% 85% at 28% 8%, var(--bone-hi), var(--bone) 55%, var(--bone-lo));
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--edge),
    inset 0 0 2rem var(--stain),
    0 1.4rem 2.4rem -1.4rem var(--shadow);
  transform: rotate(-1.2deg);
}
.ticket::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px solid var(--ink);
  border-radius: .45rem;
  pointer-events: none;
}
.ticket__t {
  font: var(--dw) calc(clamp(1.5rem, 2.4vw, 2.1rem) * var(--ds))/1.1 var(--display);
  letter-spacing: var(--dt);
  text-transform: var(--dc);
}
.ticket__d { color: var(--umber); font-size: 1.02rem; line-height: 1.5; }
.ticket .btn { border-color: var(--ink); outline-color: transparent; }
.ticket a.btn:hover { background: var(--ink); color: var(--bone); }
.ticket .btn.is-pending { border-color: var(--umber); color: var(--umber); }

/* ---------- Contact: closes on a second turning ring ---------- */
.contact__in { position: relative; }
.seal {
  position: absolute;
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  top: 0;
  width: clamp(9rem, 15vw, 13.5rem);
  aspect-ratio: 1;
}
.seal .ring text { fill: var(--bone); }
.seal__core {
  position: absolute;
  inset: 31%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blood);
}
.seal__core .star { width: 46%; height: 46%; background: var(--bone); }
.contact__title {
  max-width: calc(100% - 16rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font: var(--dw) calc(clamp(2.4rem, 7.2vw, 7rem) * var(--ds))/1.02 var(--display);
  letter-spacing: var(--dt);
  text-transform: var(--dc);
  text-wrap: balance;
}
.contact__title em { font-style: normal; color: var(--blood); }
.contact__grid { margin-top: clamp(3rem, 7vw, 6rem); row-gap: 3rem; align-items: end; }
.contact__mail { grid-column: 1 / span 8; display: grid; gap: 1rem; justify-items: start; }
.contact__email {
  font: var(--dw) clamp(1.4rem, 3.8vw, 3.25rem)/1.15 var(--display);
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.contact__email a { text-decoration: none; background-size: 100% 1px; }
.contact__email a:hover { color: var(--ember); }
.contact__links { grid-column: 10 / span 3; display: grid; gap: .65rem; }
.contact__links a:hover { color: var(--ember); }
.pending {
  font: 400 .8em var(--label);
  letter-spacing: .04em;
  color: var(--dust);
  border-bottom: 1px dashed var(--dust);
}
.is-pending { color: var(--dust); }

/* ---------- Footer ---------- */
.footer { position: relative; }
.footer__in {
  display: grid;
  justify-items: center;
  gap: 1.6rem;
  padding-block: clamp(3rem, 6vw, 5rem) 2.5rem;
  text-align: center;
  color: var(--dust);
}
.footer__mark {
  font: var(--dw) calc(clamp(2rem, 6vw, 4.5rem) * var(--ds))/1 var(--display);
  letter-spacing: var(--dt);
  text-transform: var(--dc);
  color: var(--bone);
}
.footer__mark em { font-style: normal; color: var(--ember); }
/* round icon links above the name; a dashed ring means the link is still to add */
.footer__icons { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.footer__icons a, .footer__icons span {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--bone);
  border-radius: 50%;
  color: var(--bone);
  transition: background-color .3s ease, color .3s ease, transform .5s var(--ease);
}
.footer__icons svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer__icons .is-solid { fill: currentColor; stroke: none; }
.footer__icons a:hover { background: var(--bone); color: var(--ink); transform: translateY(-.2rem); }
.footer__icons span { border-style: dashed; border-color: var(--dust); color: var(--dust); }
.footer__fine { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.5rem; }
.footer .pending { font-size: 1em; border: 0; }

/* ---------- Type options: a review tool, not part of the finished site ---------- */
.typebar {
  position: fixed;
  z-index: 45;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem;
  border: 1px solid var(--dust);
  border-radius: 999px;
  background: var(--night);
  color: var(--bone);
  font: 500 .68rem/1.2 "Josefin Sans", "Century Gothic", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 .8rem 1.6rem -.5rem var(--shadow);
}
.typebar button {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--seam);
  border-radius: 50%;
  font-size: .9rem;
  line-height: 1;
}
.typebar button:hover { background: var(--bone); color: var(--ink); }
.typebar__name { min-width: 12.5rem; padding-inline: .3rem; text-align: center; }
.typebar__name b { display: block; font-weight: 600; color: var(--ember); }

/* ---------- Case study ---------- */
.cs-head { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 5rem); }
.cs-slug {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--dust);
  margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
}
.cs-slug a { color: var(--bone); }
.cs-title {
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
  font: var(--dw) calc(clamp(2.5rem, 8vw, 8rem) * var(--ds))/1 var(--display);
  letter-spacing: var(--dt);
  text-transform: var(--dc);
  text-wrap: balance;
}
.line {
  display: block;
  overflow: hidden;
  padding-block: .07em .16em;
  margin-block: -.07em -.16em;
}
.line > span { display: block; }
.cs-intro { row-gap: 2.5rem; }
.cs-lead { grid-column: 1 / span 7; font: 400 clamp(1.35rem, 2.1vw, 1.95rem)/1.38 var(--text); }
.cs-meta { grid-column: 9 / span 4; display: grid; gap: .8rem; align-content: start; }
.cs-meta div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: .75rem;
  border-top: 1px solid var(--seam);
  padding-top: .8rem;
}
.cs-meta dt { color: var(--dust); }
.cs-meta .tbc { color: var(--dust); border-bottom: 1px dashed var(--dust); }

.cs-body {
  display: grid;
  row-gap: clamp(3.5rem, 9vw, 8rem);
  padding-block: clamp(3.5rem, 9vw, 8rem);
}
.blk {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 1rem;
}
.blk__h { grid-column: 1 / span 3; color: var(--dust); }
.blk__b { grid-column: 5 / span 7; min-width: 0; }
.prose p { max-width: 60ch; }
.prose p + p { margin-top: 1em; }
.scope li {
  padding-block: .6rem;
  border-top: 1px solid var(--seam);
  font: var(--dw) clamp(1.2rem, 1.8vw, 1.6rem)/1.2 var(--display);
  letter-spacing: .01em;
}
.scope li:last-child { border-bottom: 1px solid var(--seam); }
.note {
  display: grid;
  gap: .5rem;
  max-width: 62ch;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--dust);
  color: var(--dust);
}
.note .mono { color: var(--ember); }

.blk > figure { min-width: 0; }
.is-full { grid-column: 1 / -1; }
.is-wide { grid-column: 2 / span 10; }
.is-left { grid-column: 1 / span 8; }
.is-right { grid-column: 5 / span 8; }
.is-center { grid-column: 4 / span 6; }
.row {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--gap);
  align-items: start;
}
.row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row.is-stagger > :nth-child(even) { margin-top: clamp(2rem, 9vw, 8rem); }
/* a short row kept at one-third width per item and centred */
.row.is-center { grid-template-columns: repeat(auto-fit, calc((100% - 2 * var(--gap)) / 3)); justify-content: center; }

.cs-next { position: relative; padding-block: clamp(3rem, 8vw, 7rem); }
.cs-next a { display: grid; gap: 1rem; text-decoration: none; }
.cs-next .mono { color: var(--dust); }
.cs-next__title {
  font: var(--dw) calc(clamp(2.25rem, 7vw, 6.5rem) * var(--ds))/1.02 var(--display);
  letter-spacing: var(--dt);
  text-transform: var(--dc);
  transition: color .3s ease;
}
.cs-next a:hover .cs-next__title { color: var(--ember); }
.cs-next__title i {
  display: inline-block;
  font-style: normal;
  transition: transform .6s var(--ease);
}
.cs-next a:hover .cs-next__title i { transform: translateX(.2em); }

/* ---------- Colour theme: "moss" ----------
   Greens taken from the LinkedIn banner. Switched on by theme: "moss" in
   content.js; set theme: "" there to go back to the original red and cream. */
html.theme-moss {
  --night: #0F150C;
  --disc: #172010;
  --glow: #1D2A12;
  --bone: #E4EDD6;
  --bone-hi: #EEF4E3;
  --bone-lo: #C6D3B1;
  --sepia: #BFCBA9;
  --umber: #4F5B3F;
  --ink: #10160C;
  --dust: #9DA88E;
  --seam: #2A3421;
  --blood: #7FA644;
  --ember: #A5C47B;
  --edge: rgba(16, 22, 12, .4);
  --stain: rgba(70, 95, 40, .3);
  --raised: #141B0F;
}

/* ---------- Case study extras: rights line, link rows, video, carousel ---------- */
.cs-rights {
  margin-top: 1.4rem;
  max-width: 62ch;
  padding-top: 1rem;
  border-top: 1px solid var(--seam);
  color: var(--dust);
  font-size: .68rem;
  line-height: 1.7;
  letter-spacing: .1em;
}
.blk__links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.2rem; }
.plate video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease;
}
.plate.is-loaded video { opacity: 1; }

.swap { min-width: 0; }
.swap__stack { display: grid; }
.swap__frame { grid-area: 1 / 1; opacity: 0; transition: opacity .9s ease; }
.swap__frame.is-on { opacity: 1; position: relative; z-index: 1; }
.swap__cap { transition: opacity .35s ease; }
.swap__cap.is-out { opacity: 0; }

.carousel { min-width: 0; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.carousel__slide { scroll-snap-align: start; min-width: 0; }
/* wide banners: one slide at a time */
.carousel.is-single .carousel__track { grid-auto-columns: 100%; }
.carousel__bar { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.carousel__btn {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--seam);
  border-radius: 50%;
  color: var(--bone);
  transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}
.carousel__btn:hover:not(:disabled) { background: var(--bone); color: var(--ink); }
.carousel__btn:disabled { opacity: .3; cursor: default; }
.carousel__count { color: var(--dust); min-width: 3.5rem; text-align: center; }
.carousel figcaption { margin-top: .6rem; }
@media (max-width: 760px) {
  /* one slide and a peek of the next, so it reads as swipeable */
  .carousel__track { grid-auto-columns: 84%; }
  .carousel.is-single .carousel__track { grid-auto-columns: 92%; }
}

/* ---------- Image viewer (case studies) ----------
   Opens a case-study image over the page: fitted to the screen first, then
   at its real size ("Full size") so small text can be read. */
html.viewer-open { overflow: hidden; }
.cs .plate.is-loaded { cursor: zoom-in; }
.viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(13, 11, 12, .97);
}
.viewer[hidden] { display: none; }
.viewer__pan {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(.75rem, 2.5vw, 2rem);
}
.viewer__img { max-width: 100%; max-height: 100%; }
.viewer.can-zoom .viewer__img { cursor: zoom-in; }
.viewer.is-zoomed .viewer__pan { display: block; }
.viewer.is-zoomed .viewer__img {
  display: block;
  max-width: none;
  max-height: none;
  margin-inline: auto;
  cursor: zoom-out;
}
.viewer__bar {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--seam);
  background: var(--night);
}

/* ---------- Cursor label ---------- */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
}
.cursor__disc {
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  margin: 14px 0 0 14px;
  border-radius: 50%;
  background: var(--blood);
  color: var(--bone);
  font-size: .7rem;
  transform: scale(0);
  transform-origin: 0 0;
  transition: transform .35s var(--ease);
}
.cursor.is-on .cursor__disc { transform: scale(1); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: .25s; }
  ::view-transition-new(root) { animation-duration: .45s; }

  .line > span { animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .hero__piece { animation: settle .9s var(--ease) .45s backwards; }
  .cs-slug, .cs-intro { animation: settle .9s var(--ease) .55s both; }
  .hero__disc { animation: grow 1.2s var(--ease) backwards; }
  .hero:not(.is-open) .hero__hint { animation: beat 2.4s ease-in-out 1.5s infinite; }
  .ring { animation: spin 90s linear infinite; }
  .dot { animation: pulse 2.6s ease-in-out infinite; }

  .js .reveal { transition: transform 1s var(--ease); }
  .js .reveal:not(.in) { transform: translateY(2.25rem); }
  .js .reveal:not(.in) .plate img { transform: scale(1.07); }
}
@keyframes rise { from { transform: translateY(112%); } to { transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes beat { 50% { transform: scale(1.12); } }
@keyframes grow { from { transform: scale(.9); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .nav { display: none; }
  .menu-btn { display: inline-block; }

  /* stacked: two short lines, the character, then the intro and status.
     Pressing the character nudges the text towards it. */
  .hero__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 1.75rem; }
  .hero__piece, .hero__figure { grid-area: auto; }
  .hero__piece--tl { order: -3; }
  .hero__piece--tr { order: -2; justify-self: start; margin-top: -1.2rem; }
  .hero__figure { order: -1; justify-self: center; width: min(100%, 30rem); }
  .hero__piece--br { justify-self: start; max-width: 34ch; font-size: 1.3rem; }
  .hero__piece--bl { order: 1; }
  .hero.is-open .hero__piece { justify-self: start; align-self: auto; }
  .hero.is-open .hero__piece--tl, .hero.is-open .hero__piece--tr { transform: translateY(1rem); }
  .hero.is-open .hero__piece--br, .hero.is-open .hero__piece--bl { transform: translateY(-1.25rem); }
  .hero.is-open .ring-wrap { opacity: .2; }

  .hero.is-open .hero__piece--tl, .hero.is-open .hero__piece--bl { width: auto; }

  .sec__head--split .sec__note { grid-column: 7 / -1; }
  .about__card { grid-column: 1 / span 5; }
  .about__main { grid-column: 7 / span 6; }
  .about__body { grid-template-columns: minmax(0, 1fr); }

  .arcana { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .exp-side, .exp-main { grid-column: 1 / -1; }

  .contact__mail, .contact__links { grid-column: 1 / -1; }
  .contact__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cs-lead, .cs-meta { grid-column: 1 / -1; }
  .blk__h, .blk__b { grid-column: 1 / -1; }
  .is-wide { grid-column: 1 / -1; }
  .is-left { grid-column: 1 / span 10; }
  .is-right { grid-column: 3 / span 10; }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  /* two cards side by side on phones */
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 2rem; }
  /* nothing tilted on phones */
  .ticket { transform: none; }
  .card__meta { margin-top: .9rem; }
  .card__cat, .card__kind { font-size: .62rem; letter-spacing: .1em; }
  .plate { border-width: .4rem; }

  .card__cat { display: none; }

  /* Hero on phones: one centred column, like the face of a card.
     Only "Portfolio 2026" sits above the character. */
  .hero__stage { justify-items: center; row-gap: 1.6rem; text-align: center; }
  .hero__piece { max-width: none; }
  .hero__piece--tl {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    justify-self: stretch;
  }
  .hero__piece--tl::before, .hero__piece--tl::after { content: ""; flex: 1; height: 1px; background: var(--seam); }
  .hero__piece--tl br, .hero__piece--tl .grey { display: none; }
  .hero__piece--tr { display: none; }
  .hero__figure { width: min(100%, 26rem); }
  .hero__piece--br { justify-self: center; max-width: 30ch; font-size: 1.25rem; }
  .hero__piece--bl { justify-self: center; justify-items: center; gap: .5rem; font-size: .7rem; letter-spacing: .12em; }
  .hero__cue { margin-top: .9rem; padding: .9rem 1.3rem; border: 1px solid var(--bone); background-image: none; }
  .hero.is-open .hero__piece { justify-self: center; }
  .hero.is-open .hero__piece--tl { justify-self: stretch; }
  .hero.is-open .ring-wrap { opacity: .1; }

  /* the red badge on the character already says Press / Close, so the label
     that follows a mouse pointer is switched off at this size */
  .cursor { display: none; }

  /* About on phones: the note sits under the heading, the photo fills the width */
  .sec__head--split { row-gap: 1rem; }
  .sec__head--split .h-display, .sec__head--split .sec__note { grid-column: 1 / -1; }
  .sec__head--split .sec__note { padding-bottom: 0; }
  .about__card, .about__main { grid-column: 1 / -1; }

  /* the six dark cards stay two by two */
  .arcana { gap: 12px; }
  .arcanum { gap: .55rem; padding: 1.25rem 1.05rem 1.35rem; }
  .arcanum__icon { width: 2.5rem; height: 2.5rem; margin-bottom: .2rem; }
  .arcanum__t { font-size: 1.12rem; }
  .arcanum__d { font-size: .92rem; line-height: 1.45; }

  .exp { grid-template-columns: minmax(0, 1fr); padding-left: 1.9rem; }
  .exp__when { text-align: left; order: 3; }
  .exp__role { grid-column: 1; }

  .seal { position: relative; right: auto; width: 7.5rem; margin-top: 1.5rem; }
  .contact__title { max-width: none; }

  .typebar__name { min-width: 10.5rem; }

  .is-left, .is-right, .is-center { grid-column: 1 / -1; }
  .row--3, .row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row--3 > :last-child { grid-column: 1 / -1; }
  .row.is-stagger > :nth-child(even) { margin-top: 2.5rem; }
  .cs-slug { flex-wrap: wrap; }
}