/* ==========================================================================
   Design system
   --------------------------------------------------------------------------
   Loaded last, so it sets the rules the rest of the site follows:
   one content width and one left edge, six text sizes, one spacing rhythm,
   one accent, and content that sits on the page instead of inside boxes.
   Delete this file (and its <link> in index.html) to return to the old look.
   ========================================================================== */

:root{
  --container: 1120px;
  --gutter: clamp(20px, 5vw, 56px);

  --s1: 8px;  --s2: 16px; --s3: 24px;
  --s4: 40px; --s5: 64px; --s6: 104px;

  /* six sizes, used everywhere */
  --t-display:  clamp(2.5rem, 5.4vw, 4.25rem);
  --t-headline: clamp(1.625rem, 2.8vw, 2.25rem);
  --t-title:    1.25rem;
  --t-body:     1.0625rem;
  --t-caption:  .875rem;
  --t-micro:    .75rem;
}

/* headlines break into even lines, so no word is left stranded on its own */
.g-hero h1, #contactTitle, .contact-block h2, .work-heading, .r-grid > .r-card > h2, .feature-story h2{ text-wrap: balance; }
.g-hero p, .contact-block > p, .feature-deck{ text-wrap: pretty; }

/* one accent: the italic word in a headline uses the same colour as everything else */
:root[data-theme="paper"]{ --accent-2: var(--accent); }


/* --------------------------------------------------------------------------
   Container: every page starts its content on the same line
   -------------------------------------------------------------------------- */
.g-wrap{
  max-width: calc(var(--container) + var(--gutter) * 2);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: var(--s6);
}


/* --------------------------------------------------------------------------
   Header: navigation reads as words, not a row of buttons
   -------------------------------------------------------------------------- */
body:not(.view-orbit) header.top{
  padding-left: var(--gutter); padding-right: var(--gutter);
  /* a proper bar, so the page never shows through the menu as it scrolls */
  background: var(--panel-solid); border-bottom: 1px solid var(--glass-line);
}
body.solid:not(.view-orbit) nav.main{ gap: 2px; }
nav.main button{ font-size: .9375rem; color: var(--ink-dim); background: none; border-color: transparent; }
nav.main button:hover{ color: var(--ink); background: none; border-color: transparent; }
nav.main button[aria-current="page"],
nav.main button[aria-current="page"]:hover{
  background: none; border-color: transparent; color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
  text-decoration-color: var(--accent);
}
nav.main .nav-settings{ margin-left: var(--s2); }


/* --------------------------------------------------------------------------
   Type: page titles, section titles, body, captions
   -------------------------------------------------------------------------- */
.g-hero{ margin-bottom: var(--s5); max-width: 860px; }
.g-hero .kicker,
.kicker{ font-size: var(--t-micro); letter-spacing: .16em; margin-bottom: var(--s2); }
.g-hero h1{ font-size: var(--t-display); line-height: 1.04; letter-spacing: -.028em; font-weight: 600; }
.g-hero p{ font-size: var(--t-body); line-height: 1.6; max-width: 60ch; margin-top: var(--s3); color: var(--ink-dim); }

.work-heading{
  font-size: var(--t-headline); line-height: 1.15; letter-spacing: -.015em; font-weight: 600;
  margin: 0 0 var(--s3);
}


/* --------------------------------------------------------------------------
   Featured work: a large image with its story beside it, no frame around it
   -------------------------------------------------------------------------- */
.featured-work{
  border: none; background: none; border-radius: 0; overflow: visible;
  gap: var(--s5); align-items: center; margin: 0 0 var(--s6);
}
.feature-photo{ border-radius: 22px; overflow: hidden; min-height: 380px; }
.feature-story{ padding: 0; }
.feature-story .kicker{ margin-bottom: var(--s1); }
.feature-story h2{ font-size: var(--t-headline); margin: 0 0 var(--s2); }
.feature-deck{ font-size: var(--t-body); line-height: 1.6; }
.feature-meta{ font-size: var(--t-caption); margin: var(--s2) 0 0; }
.feature-story .btn-row{ margin: var(--s3) 0 var(--s2); }
.feature-contact{ font-size: var(--t-caption); }


/* --------------------------------------------------------------------------
   Search and filters
   -------------------------------------------------------------------------- */
.g-controls{ gap: var(--s2); margin-bottom: var(--s3); }
.g-count{ font-size: var(--t-caption); margin: 0 0 var(--s3); }
.chip{ font-size: var(--t-caption); }


/* --------------------------------------------------------------------------
   Work grid: pictures first, words underneath, no boxes
   -------------------------------------------------------------------------- */
.g-grid{ gap: var(--s5) var(--s3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.g-card{
  border: none; background: none; border-radius: 0; overflow: visible;
}
.g-card:hover{ transform: none; box-shadow: none; }
.g-card .g-art{ border-radius: 18px; overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.g-card:hover .g-art{ box-shadow: var(--shadow); transform: translateY(-3px); }
.g-card:hover .g-art img{ transform: none; }
.g-info{ background: none; backdrop-filter: none; padding: var(--s2) 2px 0; }
.g-title{ font-size: var(--t-title); line-height: 1.25; letter-spacing: -.01em; }
.g-sub{ font-size: var(--t-caption); margin-top: 4px; }
.g-row{ margin-top: var(--s1); }
.g-price, .g-rate{ font-size: var(--t-caption); }
.g-pill{ font-size: var(--t-micro); letter-spacing: .1em; }


/* --------------------------------------------------------------------------
   Tools: the coloured panel is the picture; no frame around the card
   -------------------------------------------------------------------------- */
.t-grid{ gap: var(--s5) var(--s3); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.t-card{ border: none; background: none; border-radius: 0; overflow: visible; }
.t-card:hover{ transform: none; box-shadow: none; }
.t-card .g-art{ border-radius: 18px; overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.t-card:hover .g-art{ box-shadow: var(--shadow); transform: translateY(-3px); }
.t-body{ background: none; padding: var(--s2) 2px 0; gap: var(--s1); }
.t-num{ font-size: var(--t-micro); }
.t-body h2{ font-size: var(--t-title); line-height: 1.25; }
.t-body p{ font-size: var(--t-caption); line-height: 1.6; }


/* --------------------------------------------------------------------------
   About: each section has its title on the left and its content on the right,
   separated by a hairline, all on the same two columns
   -------------------------------------------------------------------------- */
.r-grid{ display: block; }
.r-grid > .r-card{
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr); column-gap: var(--s5);
  border: none; border-top: 1px solid var(--glass-line); border-radius: 0;
  background: none; backdrop-filter: none;
  padding: var(--s5) 0; margin: 0;
}
.r-grid > .r-card:first-child{ border-top: none; padding-top: 0; }
.r-grid > .r-card > h2{
  grid-column: 1; grid-row: 1 / span 40; align-self: start;
  font-size: var(--t-headline); line-height: 1.15; letter-spacing: -.015em; margin: 0;
}
.r-grid > .r-card > :not(h2){ grid-column: 2; }
.r-card h3{ font-size: var(--t-micro); letter-spacing: .16em; margin: var(--s4) 0 var(--s2); }
.r-card h3:first-of-type{ margin-top: 0; }
.r-card p{ font-size: var(--t-body); line-height: 1.7; max-width: 68ch; }
.r-card p.lead{ font-size: var(--t-title); line-height: 1.5; }
.timeline li{ font-size: var(--t-caption); padding: 12px 0; }
.dl{ border-style: solid; border-color: var(--glass-line); }
.dl small{ font-size: var(--t-caption); }

/* references sit side by side inside their section, unframed */
.r-card .r-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s4) !important; }
.r-card .quote.r-card{
  grid-column: auto;  /* the old boxed layout made each quote span six columns */
  display: block; border: none; border-left: 2px solid var(--accent); border-radius: 0;
  background: none; padding: 0 0 0 var(--s3); margin: 0;
}
.quote blockquote{ font-size: var(--t-title); line-height: 1.5; }
.quote figcaption{ font-size: var(--t-caption); }


/* --------------------------------------------------------------------------
   Contact: left-aligned like every other page
   -------------------------------------------------------------------------- */
.contact-block,
#contactView .newsletter{
  text-align: left; border: none; background: none; border-radius: 0; overflow: visible;
  padding: 0; margin: 0;
}
#contactTitle,
.contact-block h2{
  font-size: var(--t-display); line-height: 1.04; letter-spacing: -.028em;
  max-width: 16ch; margin: 0 0 var(--s3);
}
#contactTitle em, .contact-block h2 em{
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.01em;
}
.contact-block > p{ font-size: var(--t-body); max-width: 60ch; margin: 0 0 var(--s4); }
.contact-block .kicker{ margin: 0 0 var(--s2); }
.contact-block > ul{ justify-content: flex-start; margin: 0 0 var(--s5); max-width: none; }
.contact-block > ul li{ font-size: var(--t-caption); }
.contact-block .btn-row{ justify-content: flex-start !important; }
.cform{ margin: 0; max-width: 680px; }

/* the short invitation at the bottom of the Work page */
#gridView .contact-block{
  border-top: 1px solid var(--glass-line); padding-top: var(--s5); margin-top: var(--s6);
}
#gridView .contact-block h2{ font-size: var(--t-headline); max-width: none; }

footer.foot{ margin-top: var(--s6); font-size: var(--t-caption); }


/* --------------------------------------------------------------------------
   The orbit follows the chosen theme. On white it becomes a soft
   gallery wall rather than flat paper, so the work still has presence.
   -------------------------------------------------------------------------- */
:root[data-theme="paper"] body.view-orbit{
  background:
    radial-gradient(1100px 760px at 50% 42%, #ffffff 0%, #f3f2f7 46%, #e7e5ee 100%);
  background-color: #eeedf3;
}
:root[data-theme="paper"] body.view-orbit .vignette{
  background: radial-gradient(ellipse at center, transparent 50%, rgba(28,22,56,.12) 100%);
}


/* --------------------------------------------------------------------------
   High contrast keeps its edges: structure there should never be implied
   -------------------------------------------------------------------------- */
:root[data-theme="contrast"] .g-card .g-art,
:root[data-theme="contrast"] .t-card .g-art,
:root[data-theme="contrast"] .feature-photo{ border: 1px solid var(--edge); }
:root[data-theme="contrast"] nav.main button[aria-current="page"]{ text-decoration-color: var(--accent); }



/* --------------------------------------------------------------------------
   Everything else snaps to the same six sizes
   -------------------------------------------------------------------------- */
.page .btn{ font-size: var(--t-body); }
.page .btn-sm{ font-size: var(--t-caption); }
.page details.fold summary{ font-size: var(--t-body); }
.page .fold-body,
.page .fold-body p{ font-size: var(--t-body); }
.page .dl span{ font-size: var(--t-body); }
.page .quote figcaption b{ font-size: var(--t-caption); }
.page .cf-field label{ font-size: var(--t-body); }
.page .cf-hint, .page .cf-note, .page .cf-privacy, .page .tl-hint{ font-size: var(--t-caption); }
footer.foot small{ font-size: var(--t-micro); }


/* --------------------------------------------------------------------------
   A title's translation, shown underneath when the title stays in its language
   -------------------------------------------------------------------------- */
.g-trans, .d-trans, .feature-trans{
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--ink-dim); line-height: 1.3;
}
.g-trans{ font-size: var(--t-body); margin-top: 2px; }
.d-trans{ font-size: var(--t-title); margin: 6px 0 0; }
.feature-trans{ font-size: var(--t-title); margin: -6px 0 var(--s2); }


/* --------------------------------------------------------------------------
   CV: the download and the short version first, then one entry per role
   -------------------------------------------------------------------------- */
.r-actions .btn-row{ margin-top: var(--s4); }
.r-actions .btn span[aria-hidden]{ font-size: 1.1em; line-height: 1; }
.cv-hint{ font-size: var(--t-caption) !important; margin-top: var(--s1) !important; }
.cv-glance{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3);
  margin: var(--s5) 0 0; padding-top: var(--s3); border-top: 1px solid var(--glass-line);
}
.cv-glance dt{ font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.cv-glance dd{ margin: 0; font-size: var(--t-body); line-height: 1.4; color: var(--ink); font-weight: 600; }

.cv-list{ list-style: none; margin: 0; padding: 0; }
.cv-list > li{
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--s3);
  padding: var(--s2) 0; border-top: 1px solid var(--glass-line);
}
.cv-list > li:first-child{ border-top: none; padding-top: 0; }
.cv-when{ font-size: var(--t-caption); color: var(--ink-dim); font-variant-numeric: tabular-nums; padding-top: 3px; white-space: nowrap; }
.cv-what p{ margin: 0; }
.r-card .cv-what .cv-role{ font-size: var(--t-body); font-weight: 600; line-height: 1.45; color: var(--ink); }
.r-card .cv-what .cv-org{ font-size: var(--t-caption); line-height: 1.5; color: var(--ink-dim); margin-top: 2px; }
.r-card .cv-what .cv-desc{ font-size: var(--t-caption); line-height: 1.6; margin-top: 6px; }
.cv-desc::first-letter{ text-transform: uppercase; }
.cv-sec details.fold{ margin-top: var(--s3); }

.cv-practice{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3);
}
.cv-practice li, .cv-awards li{
  font-size: var(--t-caption); line-height: 1.5; padding: 10px 0; border-top: 1px solid var(--glass-line);
}
.cv-awards{ list-style: none; margin: 0; padding: 0; }
.r-card p + h3, .cv-list + h3{ margin-top: var(--s4); }

@media (max-width: 860px){
  .cv-glance{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-list > li{ grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .cv-when{ padding-top: 0; }
}
@media (max-width: 520px){
  .cv-glance, .cv-practice{ grid-template-columns: minmax(0, 1fr); }
  .r-actions .btn{ width: 100%; justify-content: center; }
}

/* the printed CV: a plain document, not a picture of the web page */
@media print{
  @page{ size: A4; margin: 16mm 16mm 18mm; }
  .cv-print{ font: 10pt/1.45 var(--sans, system-ui), sans-serif; color: #000; }
  .cv-print header{ border-bottom: 1.5pt solid #000; padding-bottom: 6pt; margin-bottom: 10pt; }
  .cv-print h1{ font-size: 22pt; margin: 0; letter-spacing: -.01em; }
  .cv-print header p{ margin: 2pt 0 0; font-size: 10pt; }
  .cv-print h2{ font-size: 9pt; letter-spacing: .14em; text-transform: uppercase; margin: 12pt 0 4pt; padding-bottom: 2pt; border-bottom: .5pt solid #888; break-after: avoid; }
  .cv-print p{ margin: 0 0 4pt; }
  .cv-print ul, .cv-print ol{ margin: 0; padding: 0; list-style: none; }
  .cvp-list li{ display: grid; grid-template-columns: 22mm 1fr; gap: 4mm; padding: 2pt 0; break-inside: avoid; }
  .cvp-practice{ columns: 2; column-gap: 8mm; }
  .cv-print ul li{ padding: 1pt 0; }
}


/* --------------------------------------------------------------------------
   Orbit on a phone: the photographs get the screen. The intro and the
   instructions stay readable to screen readers, just not drawn over the cards.
   -------------------------------------------------------------------------- */
@media (max-width: 700px){
  body.view-orbit .hero{ top: calc(var(--head-h, 140px) + 6px); }
  body.view-orbit .hero .kicker,
  body.view-orbit #heroIntro,
  body.view-orbit #orbitInstructions{
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body.view-orbit .hero h1{ font-size: 1.3rem; }
  body.view-orbit .hero::before{ height: 180%; width: 80vw; }
  /* the movement switch is also in "Aa · Display & access", so on a phone it leaves the cards alone */
  body.view-orbit .orbit-controls{
    left: 12px; right: auto; bottom: 72px; padding: 0; border: none; background: none;
  }
  body.view-orbit #motionToggle{ display: none; }
}


/* --------------------------------------------------------------------------
   Fingers, not a mouse pointer: every control at least 44 px on touch screens
   -------------------------------------------------------------------------- */
@media (pointer: coarse){
  .chip{ min-height: 44px; }
  footer.foot button, footer.foot a{ min-height: 44px; display: inline-flex; align-items: center; }
  .feature-contact{ display: inline-flex; align-items: center; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 860px){
  .featured-work{ gap: var(--s3); margin-bottom: var(--s5); }
  .feature-photo{ min-height: 0; }
  .g-grid, .t-grid{ gap: var(--s4) var(--s2); }
  .r-grid > .r-card{ grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); padding: var(--s4) 0; }
  .r-card .r-grid{ grid-template-columns: minmax(0, 1fr); }
  .r-grid > .r-card > h2, .r-grid > .r-card > :not(h2){ grid-column: 1; grid-row: auto; }
  nav.main .nav-settings{ margin-left: 0; }
  #gridView .contact-block{ margin-top: var(--s5); padding-top: var(--s4); }
  footer.foot{ margin-top: var(--s5); }
}