/* sarahknotz.com — styles matched to the Squarespace site's measured values */
:root {
  --bg: #0d1b1b;          /* page background */
  --text: #688f73;        /* body copy, h3, buttons */
  --nav: #619870;         /* header title + nav */
  --h1: #26cf75;          /* h1 and links */
  --h2: #61e596;          /* h2 */
  --bar: #10291f;         /* sticky header bar: the page background pushed toward green */
  --rule: rgba(104, 143, 115, 0.35);
  --sans: "Source Sans 3", "Source Sans Pro", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --btn: var(--sans);
  --gutter: 4vw;
  --gap: 22px;
  --max: 1600px;
  --h1-size: 35px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.8;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--h1); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--h2); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; background: var(--bg); padding: 8px 12px; z-index: 10; }

/* Header */
.site-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-title {
  color: var(--nav);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
}
.site-nav { display: flex; gap: 28px; }
.site-nav a {
  color: var(--nav);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
}
.site-nav a:hover, .site-title:hover { color: var(--h2); }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--nav); margin: 4px 0; }

/* All Projects and project pages: sticky green bar */
:is(.projects, .project) .site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  max-width: none;
  margin-bottom: 36px;
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  background: var(--bar);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
:is(.projects, .project) :is(.site-title, .site-nav a) { color: var(--h2); }
:is(.projects, .project) :is(.site-title, .site-nav a):hover { color: #fff; }
:is(.projects, .project) .burger span { background: var(--h2); }

/* Main column */
main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
}
.layout { display: flex; flex-direction: column; gap: var(--gap); }

/* 12-column rows, nested rows split their parent's span */
.row { display: flex; gap: var(--gap); align-items: flex-start; }
.col { flex: var(--span) 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }

.spacer { height: 24px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 12px 0; width: 100%; }

figure { margin: 0; }
figcaption { margin-top: 10px; }
/* the Click toolkit icons (the four cards alone, transparent around them) sit smaller in the text column */
.project figure:has(> img[src*="click/"][src$="-icons.png"]) { max-width: 64%; }
/* Phones: a column whose text has a label moves above its images (see the phone rules), but only its opening label paragraph
   belongs there. Anything after that in the column (a second paragraph, an Outcome, a photo) moves below the images, and an
   unlabelled opening paragraph stays just below them, as elsewhere. CBRE's Process column (its photo and paragraph lead
   into the word cloud) and Click's directions (their own icon rule) keep their order. */
@media (max-width: 767px) {
  .project .layout > .row > .col:has(> .text h3):has(> :nth-child(2)):not(:has(img[src*="cbre-inspiration"])):not(:has(img[src*="click/"])) { display: contents; }
  .project .layout > .row > .col:has(> .text h3):has(> :nth-child(2)):not(:has(img[src*="cbre-inspiration"])):not(:has(img[src*="click/"])) > .text:first-child:has(h3) { order: -1; }
  .project .layout > .row > .col:has(> .text h3):has(> :nth-child(2)):not(:has(img[src*="cbre-inspiration"])):not(:has(img[src*="click/"])) > :not(:first-child) { order: 1; margin-top: 24px; }
}

/* Click: each direction's toolkit icons appear twice, beside its screens and beside its Go/No Go game; wide screens show the
   first, phones the second, so on a phone they come after both carousels */
.project .layout > .row:has([id$="g-root"]) figure:has(> img[src*="click/"][src$="-icons.png"]) { display: none; }
@media (max-width: 767px) {
  .project .layout > .row:has([id$="g-root"]) figure:has(> img[src*="click/"][src$="-icons.png"]) { display: block; margin-top: 18px; }
  .project .layout > .row:not(:has([id$="g-root"])) figure:has(> img[src*="click/"][src$="-icons.png"]):not(:has(img[src*="ds-icons"])) { display: none; }
}
/* transparent images with dark text (guideline sheets) get a light panel behind them */
.project figure img[src*="click/ds-"][src$=".png"] { background: #f4f2ef; border-radius: 10px; padding: 4%; box-sizing: border-box; }
.project p.role { margin-top: 1.2em; padding-top: 0.8em; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.5; color: var(--text); }   /* "My role" line at the end of each Challenge */
.project p.role b { color: var(--h2); font-weight: 600; }
.project figcaption { color: var(--h2); font-weight: 300; }   /* the bright green of the site name in the header bar, at the light weight (Oct 2026) */
figcaption p { margin: 0; }

/* Client logo beside a project title: one title line tall, so the row below starts level */
.logo img { height: 34px; width: auto; max-width: 100%; object-fit: contain; object-position: left; }
.row:has(> .col > .logo) { align-items: center; }

/* Type */
.text > :first-child { margin-top: 0; }
.text > :last-child { margin-bottom: 0; }
h1 {
  color: var(--h1);
  font-weight: 300;
  font-size: var(--h1-size);
  line-height: 1.28;
  letter-spacing: 0.04em;
  margin: 0 0 0.6em;
}
h2 {
  color: var(--h2);
  font-weight: 300;
  font-size: 21.7px;
  line-height: 1.36;
  letter-spacing: 0.04em;
  margin: 0 0 0.8em;
}
h3 {
  color: var(--text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.39;
  letter-spacing: 0.04em;
  margin: 0 0 0.8em;
  text-transform: uppercase;
}
h3 a { color: var(--h1); text-transform: none; }
/* Section label (not a link) */
h3.label { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--text); }
.project h1 { font-weight: 400; font-size: 27px; letter-spacing: 0.02em; }   /* project titles a touch tighter than the home page's (0.04em), Oct 2026 */
.project h3 {
  width: fit-content;
  padding: 3px 8px;
  font-weight: 600;
  font-size: 12px;
  color: var(--bg);
  background: var(--h2);
}
p { margin: 0 0 1em; }
/* Opening paragraph of a section, used on the CBRE page: larger and lighter than body copy */
.project p.lead { font-size: 18px; font-weight: 300; line-height: 1.55; letter-spacing: 0.01em; }
strong { font-weight: 600; }
/* A prompt to the reader, e.g. "Interact with the presentation on the left": brighter than body copy, with an arrow */
/* How to use a live graphic, in the text column beside it on wide screens; phones show their own line inside the graphic instead */
p.howto { color: var(--h2); font-weight: 600; letter-spacing: 0.02em; }
.project .text:has(> p.howto:only-child) { border-top: 0; padding-top: 0; }
p.cue { color: var(--h2); font-weight: 600; letter-spacing: 0.02em; }
p.cue::before { content: "\2190\00a0\00a0"; }
p.cue .narrow { display: none; }
dl { margin: 0 0 1em; padding-left: 14px; border-left: 1px solid var(--rule); }
dt { color: var(--h2); font-weight: 600; letter-spacing: 0.02em; }
dd { margin: 0 0 0.8em; }
dd:last-child { margin-bottom: 0; }
blockquote { margin: 0; padding: 0; }
.pull p { color: var(--h2); font-weight: 300; font-size: 21.7px; line-height: 1.36; letter-spacing: 0.04em; margin: 0 0 0.6em; }
.pull footer { color: var(--text); }
pre { margin: 0; font-family: inherit; white-space: pre-wrap; }
pre code { font-family: inherit; font-weight: 600; }

/* Buttons */
.btn-wrap { display: flex; }
.btn {
  font-family: var(--btn);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
  padding: 6px 22px;
  background: var(--bg);
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: color .2s, border-color .2s, background-color .2s;
}
.btn:hover { color: var(--bg); background: var(--h2); border-color: var(--h2); }
/* Primary: filled green, turns to a green outline on hover */
.btn-primary { color: var(--bg); background: var(--h1); border-color: var(--h1); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--h1); background: transparent; border-color: var(--h1); }

/* Home */
.home h1 { text-align: center; }
.home figure img { border-radius: 2px; }   /* the case study images, matching the All Projects tiles */
.home .row:has(.code) .col:nth-child(2) > .text p { text-align: center; }  /* the intro line under the headline only; case study blurbs are left-aligned */

/* Project pages: a paragraph beside a taller stack of images stays in view while those images scroll past */
.project .layout > .row > .col:has(> .text):not(:has(figure, .video)) { position: sticky; top: 130px; }

/* Project pages: a rule above each text block marks the start of a new thought */
.project .text:not(:has(h1, h3, .pull, .lead, .cont, .cue:only-child)) { border-top: 2px solid var(--h2); padding-top: 12px; }  /* a block that opens with a lead paragraph continues its section, so no rule; nor does one marked .cont, or one that is only a cue */

/* Video */
.video { position: relative; padding-bottom: 62.5%; height: 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* All Projects filters: pill buttons above the grid; the chosen one is filled. site.js hides the tiles that do not match */
.filters { display: flex; flex-wrap: nowrap; gap: 0.5em; margin: 0 0 10px; font-size: var(--chip, 13px); }
/* the row is always one line spanning the full width: the pills stretch, and site.js shrinks their type (and so their padding,
   set in em) down to 10px; if it still does not fit, the row folds behind the "Filter: …" button as a dropdown */
.filters .chip { flex: 1 0 auto; text-align: center; font-size: 1em; padding: 0.33em 0.9em; white-space: nowrap; }
.filterbox { position: relative; }
.filters-toggle { display: none; }
.filterbox.folded .filters-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; padding: 5px 13px; }
.filters-toggle span { color: var(--h2); }
.filters-toggle svg { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.filters-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.filterbox.folded .filters { display: none; }
.filterbox.folded .filters.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; z-index: 30; left: 0; top: calc(100% - 4px); width: max-content; min-width: 200px; padding: 10px; gap: 6px; font-size: 13px; background: var(--bar); border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
/* in the dropdown (2px corners) the choices are a plain list, not pills: the current one is bright green with a short bar to its left */
.filterbox.folded .filters.open { gap: 0; padding: 6px; }
.filterbox.folded .filters.open .chip { text-align: left; border: 0; border-radius: 0; background: none; color: var(--text); font-weight: 400; padding: 7px 16px 7px 14px; position: relative; }
.filterbox.folded .filters.open .chip:hover, .filterbox.folded .filters.open .chip:focus-visible { background: rgba(97, 229, 150, .1); color: var(--h2); }
.filterbox.folded .filters.open .chip:is([aria-pressed="true"], [aria-current="true"]) { background: none; color: var(--h2); font-weight: 600; }
.filterbox.folded .filters.open .chip:is([aria-pressed="true"], [aria-current="true"])::before { content: ""; position: absolute; left: 4px; top: 50%; width: 2px; height: 14px; margin-top: -7px; background: var(--h2); }
.chip { padding: 4px 11px; border: 1px solid var(--text); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; }
.settled .chip { transition: background .2s, color .2s, border-color .2s; }   /* no fade while a page opens */
.chip:hover { border-color: var(--h2); color: var(--h2); }
a.chip { display: inline-block; text-decoration: none; }
.filterbox:has(.filters-page) { margin: 0 0 28px; }   /* the filter row at the top of each project page */
.filters-page { margin: 0; }
.filterbox.folded:has(.filters-page) { margin-bottom: 14px; }
.pager-mini { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--text); }   /* the small Previous / Next under the filter row */
.pager-mini a, .pager-mini span[aria-hidden] { display: grid; place-content: center; width: 24px; height: 24px; border: 1px solid var(--text); border-radius: 50%; color: var(--text); text-decoration: none; font-size: 16px; line-height: 1; padding-bottom: 2px; box-sizing: border-box; transition: border-color .2s, color .2s; }
.pager-mini a:hover, .pager-mini a:focus-visible { border-color: var(--h2); color: var(--h2); }
.pager-mini span[aria-hidden] { opacity: .3; }
.pager-mini .pm-count { text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em; text-align: center; white-space: nowrap; }   /* styled like the PREVIOUS / NEXT labels at the bottom */
/* folded: the button and the small Previous / Next share one line, button left, pager right */
.filterbox.folded:has(.pager-mini) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filterbox.folded:has(.pager-mini) .filters-toggle, .filterbox.folded .pager-mini { margin: 0; }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--h1); border-color: var(--h1); color: var(--bg); }
.filter-count { min-height: 1.5em; margin: 0 0 22px; color: var(--text); font-size: 13px; }
.tile[hidden] { display: none; }
/* All Projects grid */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* two across below desktop, down to 400px */
@media (max-width: 399px) { .grid { grid-template-columns: minmax(0, 1fr); } }   /* one across on the narrowest phones */
.tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: var(--bg); text-decoration: none; container-type: inline-size; }
/* Slight zoom crops the pale 1-2px lines some screenshots carry on their edges */
.tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: opacity .3s; }
.tile-title {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: start; gap: 4cqw;   /* title and tags share one left edge */
  padding: 16px; text-align: left;
  background: rgba(97, 229, 150, 0.82); opacity: 0; transition: opacity .3s;
}
.tile-title > span {
  color: #fff;
  font-size: 30px; font-size: 8cqw; font-weight: 600; line-height: 1.75; letter-spacing: 0.01em;
  text-wrap: balance;
}
/* The highlight hugs the words on each line, with the line-height leaving a gap between lines */
.tile-title > span > span {
  padding: 0.06em 0.3em; background: #18834a;  /* 4.8:1 with white */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tile:hover .tile-title, .tile:focus-visible .tile-title { opacity: 1; }
/* the project's categories under its title, as small dark-green tags */
.tile-tags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.2cqw; }
.tile-tags i { --pill: clamp(9px, 2.9cqw, 11px); padding: 0.6cqw calc(2cqw + 0.4em); line-height: calc(1.8 * var(--pill)); border-radius: 999px; background: var(--bg); color: #b4d1bc; font-style: normal; font-size: calc(0.8 * var(--pill));   /* pale green text on the page colour, no outline */   /* smaller type in the same size of pill: the line height and padding still follow --pill */ font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; }
@media (max-width: 767px) { .tile-title { padding: 12px; } .tile-title > span { font-size: 9.5cqw; line-height: 1.6; } .tile-tags { display: none; } }   /* phones: no tags on the tiles (the filter row above still sorts them), so the titles can be larger */

/* Previous / Next */
.pager { display: flex; justify-content: space-between; gap: 24px; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--rule); }
.pager a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-decoration: none; color: var(--text); }
/* the same small round arrows as the pager under the filters, beside the Previous / Next labels */
.pager a::before, .pager a::after { display: grid; place-content: center; width: 24px; height: 24px; border: 1px solid var(--text); border-radius: 50%; font-size: 16px; line-height: 1; padding-bottom: 2px; box-sizing: border-box; grid-row: 1; align-self: center; margin: -4px 0; transition: border-color .2s, color .2s; }   /* centred on the Previous / Next line; the negative margin keeps that line from growing */
.pager a.prev::before { content: "\2039"; }
.pager a.next { grid-template-columns: 1fr auto; }
.pager a.next::after { content: "\203a"; grid-column: 2; grid-row: 1; }
.pager a.next .dir, .pager a.next .name { grid-column: 1; }
.pager a.prev .dir, .pager a.prev .name { grid-column: 2; }
.pager a:hover::before, .pager a:hover::after, .pager a:focus-visible::before, .pager a:focus-visible::after { border-color: var(--h2); color: var(--h2); }
.pager .next { margin-left: auto; text-align: right; }
.pager .dir { text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em; }
.pager .name { color: var(--h2); font-size: 18px; font-weight: 300; }

@media (max-width: 767px) {
  :root { --gutter: 6vw; }
  .site-header { padding: 28px var(--gutter); flex-wrap: wrap; }
  .burger { display: block; }
  .site-nav { display: none; width: 100%; flex-direction: column; gap: 14px; padding-top: 12px; }
  .site-nav.open { display: flex; }
  /* image captions are smaller on phones */
  .project figcaption { margin-top: 7px; font-size: 12px; line-height: 1.45; }
  p.howto, .project .text:has(> p.howto:only-child) { display: none; }
  /* no green rule above text blocks on phones, on any project page (Sarah's choice, Oct 2026) */
  .project .layout .row .col .text { border-top: 0; padding-top: 0; }   /* (enough selectors to outrank the rule-drawing one) */
  /* On the home (About) page the header has no bar, so an open menu would sit on the page background: give it the All Projects
     bar colour and link colours while it is open */
  .site-header:has(.site-nav.open) { max-width: none; background: var(--bar); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
  .site-header:has(.site-nav.open) :is(.site-title, .site-nav a) { color: var(--h2); }
  .site-header:has(.site-nav.open) .burger span { background: var(--h2); }
  .row { flex-direction: column; }
  .col { flex: none; width: 100%; }
  .project .layout > .row > .col, .project .layout > .row > .col:has(> .text):not(:has(figure, .video)) { position: static; }   /* (the second selector outranks the desktop sticky rule) */
  p.cue::before { content: "\2191\00a0\00a0"; }
  p.cue .wide { display: none; }
  p.cue .narrow { display: inline; }
  .col:not(:has(> :not(.spacer))) { display: none; }
  :root { --h1-size: 28px; }
  .project h1 { font-size: 20px; }
  h2, .pull p { font-size: 19px; }
  /* A labelled section's text (Challenge, Process ...) comes before its images on phones, so each section opens with its
     label; a cue in that text then points down at the graphic below it */
  .project .layout > .row > .col:has(> .text h3) { order: -1; }
  .project .layout > .row > .col:has(> .text h3) p.cue::before { content: "\2193\00a0\00a0"; }
  /* Previous and Next stack, each across the full width */
  .pager { flex-direction: column; gap: 22px; }
  .pager .next { margin-left: auto; text-align: right; }   /* stacked: Next sits on the right, its arrow at the edge, mirroring Previous */
  /* A very tall image (a whole web page) is shown cropped to its top on phones, fading out, with a note; a tap opens all of it
     (site.js adds .tall-crop) */
  .tall-crop { position: relative; display: block; max-height: 118vw; overflow: hidden; }
  .tall-crop img { display: block; }
  .tall-crop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(rgba(16, 26, 25, 0), var(--bg) 88%); pointer-events: none; }
  .tall-crop .tall-note { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 1; text-align: center; color: var(--h2); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; }
}

/* Touch screens have no hover: show the label all the time over a lighter tint so the thumbnail stays visible */
@media (hover: none) {
  .tile-title { opacity: 1; background: rgba(97, 229, 150, 0.4); }
}

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

/* Images marked "zoom" open larger in an overlay */
img.zoom { cursor: zoom-in; }
img.zoom:focus-visible { outline: 2px solid var(--h2); outline-offset: 3px; }
.zoom-layer { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 3vmin; background: #0a1413; cursor: zoom-out; animation: zoom-in .2s ease-out; }
.zoom-layer img { max-width: 100%; max-height: calc(100vh - 6vmin); width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
/* a tall image opens at the screen's width and scrolls, rather than shrinking to fit */
.zoom-layer.zoom-tall { display: block; overflow: auto; padding: 60px 0 0; }
.zoom-layer.zoom-tall img { display: block; width: 100%; max-width: 900px; max-height: none; margin: 0 auto; }
.zoom-layer.zoom-tall .zoom-close { position: fixed; background: #0a1413; }
.zoom-close { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border: 1px solid var(--text); border-radius: 50%; background: none; color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }
.zoom-close:hover { border-color: var(--h2); color: var(--h2); }
@keyframes zoom-in { from { opacity: 0; } }