/* ==========================================================================
   Ken Chow, architectural portfolio, over Flatsome 3.20
   A drawing sheet: warm grey-white paper, black ink, hairlines, and one
   accent, the ochre of the gold tower in his thesis, used the way a
   draughtsperson uses a highlighter (the arrow in the logo, the small
   markers beside labels, project numbers, the active menu item). The work
   is shown large and uncropped wherever it is a drawing. Archivo, a
   grotesque that can be set wide, for everything you read; IBM Plex Mono
   for the small print a title block would carry: labels, dates, figure
   numbers, captions.

   Sections: tokens · fonts · base · buttons · header · mobile menu ·
   layout · heroes · title block · project cards · figures and galleries ·
   lightbox · components · CV · call to action · footer · effects ·
   small screens · reduced motion · print

   Contrast (checked, WCAG AA): text #33353A on paper 11:1; muted #5C5F66
   5.7:1 on paper, 5.2:1 on the band; ochre-deep text #7A560E 5.9:1 on paper,
   5.4:1 on the band; ink on the ochre button 6.9:1; dark-text #DAD8D1 on ink
   12.8:1; ochre-light #E0B44A on ink 9.4:1. Plain ochre (#C9971C) is for
   shapes and button fills only, never for text on paper (2.4:1).
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --kc-paper: #F3F2EE;
  --kc-band: #E9E7E1;
  --kc-card: #FFFFFF;
  --kc-ink: #141518;
  --kc-text: #33353A;
  --kc-muted: #5C5F66;
  --kc-hairline: #D4D1C9;
  --kc-grid: rgba(20, 21, 24, 0.05);
  --kc-ochre: #C9971C;          /* shapes and fills only */
  --kc-ochre-deep: #7A560E;     /* ochre text on paper */
  --kc-ochre-light: #E0B44A;    /* ochre on ink */
  --kc-dark: #141518;
  --kc-dark-2: #0E0F11;
  --kc-dark-text: #DAD8D1;
  --kc-dark-muted: #A3A39C;
  --kc-dark-line: rgba(218, 216, 209, 0.16);
  --kc-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kc-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --kc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
}

/* ---------- base ---------- */
html { background: var(--kc-paper); scroll-padding-top: 88px; }
body {
  background: var(--kc-paper);
  color: var(--kc-text);
  font-family: var(--kc-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  counter-reset: kc-fig;
}
#wrapper, #main, .page-wrapper { background: transparent !important; }
body, p, td, li, dd { color: var(--kc-text); }
p { margin-bottom: 1.1em; }

h1, h2, h3, h4, h5, h6, .heading-font {
  font-family: var(--kc-sans);
  font-weight: 620;
  color: var(--kc-ink);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-transform: none;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); font-stretch: 112%; margin-bottom: 0.4em; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); font-stretch: 108%; margin-bottom: 0.5em; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.3rem); font-weight: 600; margin-bottom: 0.45em; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; }
/* the second half of a heading drops to a light weight: one heading, two voices */
h1 em, h2 em, h3 em { font-style: normal; font-weight: 300; color: var(--kc-muted); }
.dark h1 em, .dark h2 em, .dark h3 em { color: var(--kc-dark-muted); }
strong, b { font-weight: 620; color: var(--kc-ink); }

a { color: var(--kc-ink); }
a:hover { color: var(--kc-ochre-deep); }
/* links inside running text are underlined, not just coloured */
.col-inner p a:not(.button), .col-inner li a:not(.button), .col-inner dd a {
  text-decoration: underline;
  text-decoration-color: rgba(20, 21, 24, 0.35);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.col-inner p a:not(.button):hover, .col-inner li a:not(.button):hover, .col-inner dd a:hover { text-decoration-color: var(--kc-ochre); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--kc-ochre-deep); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--kc-ochre-light); }
.dark .col-inner p a:not(.button), .dark .col-inner li a:not(.button) { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.dark .col-inner p a:not(.button):hover, .dark .col-inner li a:not(.button):hover { color: var(--kc-ochre-light); text-decoration-color: var(--kc-ochre-light); }

ul { margin-left: 1.2em; }
li { margin-bottom: 0.4em; }
hr { border-color: var(--kc-hairline); }
::selection { background: var(--kc-ochre); color: var(--kc-ink); }

/* ---------- buttons ---------- */
.button, .button span { font-family: var(--kc-sans); text-transform: none; letter-spacing: 0; }
/* flex-centred, so the label sits in the middle whatever Flatsome's line-height says */
.button, .button.is-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  vertical-align: middle;
  font-weight: 600;
  font-size: 0.98rem;
  border-radius: 0;
  padding: 0.65em 1.5em;
  min-height: 3em;
  line-height: 1.2;
  margin-right: 0.6em;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.button svg { width: 1.15em; height: 1.15em; flex: none; }
.button.primary:not(.is-outline) { background-color: var(--kc-ink); border-color: var(--kc-ink); color: #fff; }
.button.primary:not(.is-outline):hover { background-color: var(--kc-ochre); border-color: var(--kc-ochre); color: var(--kc-ink); }
.button.secondary:not(.is-outline) { background-color: var(--kc-ochre); border-color: var(--kc-ochre); color: var(--kc-ink); }
.button.secondary:not(.is-outline):hover { background-color: #fff; border-color: #fff; color: var(--kc-ink); }
.button.is-outline { color: var(--kc-ink); border: 1.5px solid var(--kc-ink); background: transparent; }
.button.is-outline:hover { color: #fff; border-color: var(--kc-ink); background: var(--kc-ink); }
.dark .button.is-outline, .button.white.is-outline { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.dark .button.is-outline:hover, .button.white.is-outline:hover { color: var(--kc-ink); background: #fff; border-color: #fff; }
.dark .button.primary:not(.is-outline) { background-color: #fff; border-color: #fff; color: var(--kc-ink); }
.dark .button.primary:not(.is-outline):hover { background-color: var(--kc-ochre); border-color: var(--kc-ochre); }

/* ---------- header ---------- */
.header-main, .header-bg-color { background-color: rgba(243, 242, 238, 0.96) !important; }
.header-main { border-bottom: 1px solid var(--kc-hairline); }
.header-bg-image, .header-bg-color { opacity: 1; }
.header-wrapper.stuck { box-shadow: 0 1px 0 var(--kc-hairline); }

.kc-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--kc-ink) !important;
  text-decoration: none !important;
}
.kc-mark { width: 38px; height: 38px; flex: none; overflow: visible; }
.kc-mark-ring { fill: var(--kc-paper); stroke: currentColor; stroke-width: 1.8; }
.kc-mark-cut { stroke: currentColor; stroke-width: 1.8; }
.kc-mark-arrow { fill: var(--kc-ochre); transform-origin: 17px 20px; transition: transform 0.6s var(--kc-ease); }
.kc-logo:hover .kc-mark-arrow { transform: rotate(-90deg); }
.kc-word {
  display: flex;
  flex-direction: column;
  font-family: var(--kc-sans);
  font-weight: 700;
  font-stretch: 120%;
  font-size: 1.12rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kc-word-sub {
  margin-top: 0.42em;
  font-family: var(--kc-mono);
  font-stretch: 100%;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--kc-muted);
}
#logo { width: auto !important; }
#logo .kc-logo, .kc-footer .kc-logo { display: inline-flex; }

.header-nav-main .nav > li > a {
  font-family: var(--kc-sans);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kc-text);
}
.header-nav-main .nav > li > a:hover,
.header-nav-main .nav > li.active > a,
.header-nav-main .nav > li.current-menu-item > a,
.header-nav-main .nav > li.current-menu-ancestor > a,
.header-nav-main .nav > li.current-page-ancestor > a { color: var(--kc-ink); }
.header-nav-main .nav > li.current-menu-item > a,
.header-nav-main .nav > li.current-menu-ancestor > a,
.header-nav-main .nav > li.current-page-ancestor > a { box-shadow: inset 0 -2px 0 var(--kc-ochre); }
.header-button .button { min-height: 2.6em; font-size: 0.93rem; padding: 0.45em 1.2em; margin: 0; }

/* ---------- mobile menu ---------- */
.off-canvas .mfp-content, .off-canvas-left .mfp-content, .off-canvas-right .mfp-content {
  background: var(--kc-paper) !important;
  border-left: 1px solid var(--kc-hairline);
}
.off-canvas .nav-vertical li a, .mobile-sidebar .nav > li > a {
  font-family: var(--kc-sans);
  font-weight: 600;
  font-stretch: 110%;
  font-size: 1.2rem;
  text-transform: none;
  color: var(--kc-ink) !important;
}
.off-canvas .nav-vertical li.current-menu-item > a, .off-canvas .nav-vertical li.current-page-ancestor > a { box-shadow: inset 3px 0 0 var(--kc-ochre); padding-left: 0.8em; }
.off-canvas .nav-sidebar.nav-vertical > li + li { border-top-color: var(--kc-hairline); }
.off-canvas .button { margin: 1rem 0 0; }
.off-canvas .nav-vertical li a.button.primary { color: #fff !important; }   /* the menu's link colour would otherwise win */
.mfp-bg.off-canvas-active { background: var(--kc-dark); opacity: 0.55; }
.icon-menu { color: var(--kc-ink); }

/* ---------- layout ---------- */
.section { background-color: transparent; }
.kc-band { background-color: var(--kc-band) !important; }
.kc-dark { background-color: var(--kc-dark) !important; }
.kc-dark p, .kc-dark li { color: var(--kc-dark-text); }
.kc-dark h2, .kc-dark h3 { color: #fff; }

/* the small label above a heading: mono capitals behind an ochre arrow (the logo's) */
.kc-label, .kc-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--kc-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-ink);
  margin: 0 0 1.1rem;
}
.kc-label::before, .kc-eyebrow::before {
  content: "";
  width: 0.62em;
  height: 0.75em;
  flex: none;
  align-self: flex-start;   /* stays beside the first line when the label wraps */
  margin-top: 0.36em;
  background: var(--kc-ochre);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.text-center .kc-label, .text-center .kc-eyebrow { justify-content: center; }
.dark .kc-label, .dark .kc-eyebrow { color: #fff; }
.dark .kc-label::before, .dark .kc-eyebrow::before { background: var(--kc-ochre-light); }

.kc-lede {
  font-size: clamp(1.1rem, 1.5vw, 1.27rem);
  line-height: 1.6;
  color: var(--kc-muted);
  max-width: 40rem;
  margin-bottom: 1.8rem;
}
.dark .kc-lede { color: rgba(255, 255, 255, 0.88); }
.kc-intro { max-width: 44rem; color: var(--kc-muted); }
.kc-prose { max-width: 46rem; }
.kc-prose h2 { margin-top: 0.2rem; }
.kc-small { font-size: 0.92rem; color: var(--kc-muted); }
.dark .kc-small { color: var(--kc-dark-muted); }

/* a heading row above a grid: title left, link right */
.kc-head-row > .col-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 2rem; }
.kc-head-row h2 { margin-bottom: 0; }
.kc-head-row .kc-go, .kc-go-pair { margin-bottom: 0.4rem; }
.kc-go-pair { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }

/* a link that leads somewhere: "More about me ->" */
a.kc-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  text-decoration: none !important;
  color: var(--kc-ink);
  border-bottom: 1.5px solid var(--kc-ochre);
  padding-bottom: 0.1em;
  line-height: 1.4;
}
a.kc-go::after { content: "\2192"; display: inline-block; transition: transform 0.2s; }
a.kc-go:hover { color: var(--kc-ink); border-bottom-color: var(--kc-ink); }
a.kc-go:hover::after { transform: translateX(3px); }
.dark a.kc-go { color: #fff; border-bottom-color: var(--kc-ochre-light); }

/* ---------- heroes ---------- */
/* home: the render full width, the name over its lower edge */
.kc-hero { display: flex; align-items: flex-end; min-height: min(92vh, 980px); }
.kc-hero > .section-content { width: 100%; padding: 0 0 clamp(48px, 7vh, 88px); }
.kc-hero .section-bg-overlay {
  background: linear-gradient(0deg, rgba(14, 15, 17, 0.86) 0%, rgba(14, 15, 17, 0.55) 34%, rgba(14, 15, 17, 0.08) 70%, rgba(14, 15, 17, 0.18) 100%) !important;
}
.kc-hero .col { padding-bottom: 0; }
.kc-name {
  font-size: clamp(3.2rem, 10vw, 8.6rem);
  font-weight: 720;
  font-stretch: 125%;
  letter-spacing: -0.01em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.3em;
}
.kc-hero .kc-lede { max-width: 38rem; color: rgba(255, 255, 255, 0.9); }
.kc-hero .button { margin-top: 0.2rem; }
.kc-hero-cap {
  position: absolute;
  right: 20px;
  bottom: 14px;
  margin: 0;
  font-family: var(--kc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* inner pages: a sheet of drafting paper behind the title */
.kc-page-hero {
  background-color: var(--kc-paper);
  background-image:
    linear-gradient(var(--kc-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--kc-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  border-bottom: 1px solid var(--kc-hairline);
}
.kc-page-hero h1 { max-width: 18ch; }

/* breadcrumbs */
.kc-crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 1.3rem; padding: 0; font-family: var(--kc-mono); font-size: 0.74rem; letter-spacing: 0.04em; }
.kc-crumbs li { margin: 0 !important; color: var(--kc-muted); }   /* Flatsome indents list items */
.kc-crumbs li + li::before { content: "/"; margin: 0 0.6em; color: var(--kc-hairline); }
.kc-crumbs a { color: var(--kc-muted); text-decoration: none !important; }
.kc-crumbs a:hover { color: var(--kc-ink); }

/* a project's cover: the render alone, before any words */
.kc-cover { border-bottom: 1px solid var(--kc-hairline); background-color: var(--kc-band); }
.kc-cover--sheet { background-color: #fff !important; }
.kc-cover--sheet .section-bg img { object-fit: contain !important; }

/* ---------- title block ---------- */
/* label / value pairs ruled like the title block of a drawing sheet */
/* Flatsome sets every dl small, faded and in capitals; this one is none of those */
dl.kc-meta { margin: 0 0 1.4rem; border-top: 2px solid var(--kc-ink); font-size: inherit; opacity: 1; text-transform: none; }
.kc-meta dt, .kc-meta dd { display: block; }
.kc-meta > div {
  display: grid;
  grid-template-columns: 8.2rem 1fr;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--kc-hairline);
}
.kc-meta dt {
  font-family: var(--kc-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-muted);
  padding-top: 0.28em;
}
.kc-meta dd { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--kc-ink); }
.kc-meta--wide > div { grid-template-columns: minmax(8.2rem, 15rem) 1fr; }
.kc-titleblock .kc-meta { margin-top: 0.6rem; margin-bottom: 0; }

/* ---------- project cards ([kc_projects]) ---------- */
.kc-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
.kc-projects--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 32px; }
.kc-project { position: relative; }
.kc-project-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--kc-band);
  box-shadow: 0 0 0 1px var(--kc-hairline);
}
.kc-project-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--kc-ease); }
.kc-project:hover .kc-project-img img { transform: scale(1.04); }
.kc-project-num {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 1rem 0 0.35rem;
  font-family: var(--kc-mono);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--kc-ochre-deep);
}
.kc-project-num::after { content: ""; flex: 1; border-top: 1px solid var(--kc-hairline); }
.kc-project-title { margin: 0 0 0.3rem; font-size: clamp(1.2rem, 1.7vw, 1.4rem); font-stretch: 106%; }
.kc-projects--2 .kc-project-title { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.kc-project-title a { color: var(--kc-ink); text-decoration: none !important; background: linear-gradient(var(--kc-ochre), var(--kc-ochre)) 0 100% / 0 2px no-repeat; transition: background-size 0.35s var(--kc-ease); }
.kc-project-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card is the link */
.kc-project:hover .kc-project-title a { background-size: 100% 2px; }
.kc-project-line { margin: 0; font-size: 0.93rem; color: var(--kc-muted); }

/* ---------- figures and galleries ---------- */
/* Flatsome image elements: the caption sits under the image as a figure
   caption, numbered down the page like the figures in a report */
.img .img-inner { background: transparent; }
.img .caption {
  position: static;
  transform: none;
  background: none;
  color: var(--kc-muted);
  font-family: var(--kc-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding: 0.7rem 0 0;
  max-height: none !important;
  overflow: visible;
}
.dark .img .caption { color: var(--kc-dark-muted); }
.img .caption::before, .kc-gallery .box-text p::before {
  counter-increment: kc-fig;
  content: "Fig. " counter(kc-fig, decimal-leading-zero);
  margin-right: 0.9em;
  color: var(--kc-ochre-deep);
  font-weight: 500;
}
.dark .img .caption::before, .dark .kc-gallery .box-text p::before { color: var(--kc-ochre-light); }
.img a.image-lightbox, .kc-gallery a { cursor: zoom-in; }
.img .img-inner img, .kc-gallery .box-image img { box-shadow: 0 0 0 1px var(--kc-hairline); }
.dark .img .img-inner img, .dark .kc-gallery .box-image img { box-shadow: none; }
.col-inner > .img { margin-bottom: 0.4rem; }

.kc-gallery .gallery-col { padding-bottom: 28px; }
.kc-gallery .box { background: transparent; }
.kc-gallery .box-image { background: #fff; overflow: hidden; }
.kc-gallery .box-image img { display: block; width: 100%; transition: transform 0.9s var(--kc-ease); }
.kc-gallery a:hover .box-image img { transform: scale(1.025); }
.kc-gallery .box-text { padding: 0.7rem 0 0 !important; }
.kc-gallery .box-text p {
  margin: 0;
  font-family: var(--kc-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--kc-muted);
}
.kc-gallery .overlay { display: none; }

/* a framed image (the thesis collage, the portrait) */
.kc-frame .img-inner { box-shadow: 0 0 0 1px var(--kc-hairline), 18px 18px 0 -1px var(--kc-band); }
.kc-band .kc-frame .img-inner { box-shadow: 0 0 0 1px var(--kc-hairline), 18px 18px 0 -1px var(--kc-paper); }

/* drawing sheets fanned out like a set on a desk (home page) */
.kc-sheets > .col-inner { display: grid; padding: 3% 9% 9% 3%; }
.kc-sheets .img { grid-area: 1 / 1; margin: 0 !important; transition: transform 0.7s var(--kc-ease); }
.kc-sheets .img-inner { background: #fff; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, 0.9); }
.kc-sheets .img:nth-of-type(1) { transform: rotate(-4deg) translate(-3%, 3%); }
.kc-sheets .img:nth-of-type(2) { transform: rotate(2deg) translate(4%, -2%); }
.kc-sheets .img:nth-of-type(3) { transform: rotate(-0.6deg) translate(9%, 8%); }
.kc-sheets:hover .img:nth-of-type(1) { transform: rotate(-7deg) translate(-8%, 1%); }
.kc-sheets:hover .img:nth-of-type(2) { transform: rotate(3.5deg) translate(6%, -5%); }
.kc-sheets:hover .img:nth-of-type(3) { transform: rotate(0deg) translate(12%, 10%); }

/* ---------- lightbox (Flatsome's Magnific Popup) ---------- */
.mfp-bg { background: var(--kc-dark-2); opacity: 0.95 !important; }
.mfp-title { font-family: var(--kc-mono); font-size: 0.78rem; color: var(--kc-dark-text); }
.mfp-counter { font-family: var(--kc-mono); font-size: 0.74rem; color: var(--kc-dark-muted); }
.mfp-img { background: #fff; padding: 0 !important; }
.mfp-figure::after { box-shadow: none; }

/* ---------- components ---------- */

/* three stages, numbered like drawing stages */
.kc-stages { counter-reset: kc-stage; }
.kc-stage > .col-inner { height: 100%; padding: 1.4rem 1.6rem 0 0; border-top: 2px solid var(--kc-ink); }
.kc-stage > .col-inner::before {
  counter-increment: kc-stage;
  content: "Stage " counter(kc-stage, decimal-leading-zero);
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--kc-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-ochre-deep);
}
.kc-stage p { color: var(--kc-muted); }

/* previous / next project */
.kc-pager { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; border-top: 2px solid var(--kc-ink); }
.kc-pager a { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.3rem 0 0.4rem; text-decoration: none !important; color: var(--kc-ink); }
.kc-pager-next { align-items: flex-end; text-align: right; border-left: 1px solid var(--kc-hairline); padding-left: 1.5rem !important; }
.kc-pager-prev { padding-right: 1.5rem !important; }
.kc-pager-label { font-family: var(--kc-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kc-muted); }
.kc-pager-prev .kc-pager-label::before { content: "\2190  "; }
.kc-pager-next .kc-pager-label::after { content: "  \2192"; }
.kc-pager-title { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 600; font-stretch: 106%; line-height: 1.25; }
.kc-pager-num { font-family: var(--kc-mono); font-size: 0.8em; font-weight: 500; color: var(--kc-ochre-deep); margin-right: 0.3em; }
.kc-pager a:hover .kc-pager-title { color: var(--kc-ochre-deep); }
.dark .kc-pager { border-top-color: #fff; }
.dark .kc-pager a { color: #fff; }
.dark .kc-pager-label { color: var(--kc-dark-muted); }
.dark .kc-pager-num, .dark .kc-pager a:hover .kc-pager-title { color: var(--kc-ochre-light); }
.dark .kc-pager-next { border-left-color: var(--kc-dark-line); }

/* contact details */
.kc-contact > .col-inner { height: 100%; padding: 1.3rem 0 0.4rem; border-top: 2px solid var(--kc-ink); }
.kc-contact .kc-i { width: 1.4rem; height: 1.4rem; color: var(--kc-ochre-deep); }
.kc-contact h2 { font-family: var(--kc-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kc-muted); margin: 0.7rem 0 0.3rem; font-stretch: 100%; }
.kc-contact p { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; color: var(--kc-ink); margin: 0; overflow-wrap: anywhere; }
.kc-contact p a { color: var(--kc-ink); text-decoration: none !important; }
.kc-contact p a:hover { color: var(--kc-ochre-deep); }

.kc-portrait-col { max-width: 30rem; }

/* not yet known: must be filled in before launch */
.kc-fill {
  display: inline-block;
  padding: 0 0.55em;
  border: 1px dashed rgba(122, 86, 14, 0.7);
  background: rgba(201, 151, 28, 0.16);
  color: var(--kc-ochre-deep) !important;
  font-family: var(--kc-mono);
  font-size: 0.8em;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8;
}
.dark .kc-fill { background: #F4E7C4; }

/* ---------- CV ---------- */
.kc-cv-contact { font-family: var(--kc-mono); font-size: 0.86rem; margin: -0.8rem 0 0; }
.kc-cv-contact a { color: var(--kc-ink); }
.kc-cv-contact span[aria-hidden] { margin: 0 0.6em; color: var(--kc-hairline); }
.kc-cv-actions > .col-inner { display: flex; justify-content: flex-end; }
/* the section names stand on their side beside a rule, as on his paper CV */
.kc-cv-part { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1.6rem; padding: 2.2rem 0 0.8rem; }
.kc-cv-part + .kc-cv-part { border-top: 1px solid var(--kc-hairline); }
.kc-cv-h {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: end;
  align-self: start;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.kc-cv-body { border-left: 1.5px solid var(--kc-ink); padding-left: 2rem; max-width: 56rem; }
.kc-cv-item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.5rem; padding-bottom: 1.8rem; }
.kc-cv-when { margin: 0; padding-top: 0.2rem; font-family: var(--kc-mono); font-size: 0.84rem; font-weight: 500; color: var(--kc-ink); }
.kc-cv-item h3 { margin: 0 0 0.45rem; font-size: 1.18rem; }
.kc-cv-item h3 span { display: block; margin-top: 0.15rem; font-size: 0.98rem; font-weight: 400; letter-spacing: 0; color: var(--kc-muted); }
.kc-cv-item p { margin-bottom: 0.6rem; }
.kc-cv-item ul, .kc-cv-body > p { margin: 0; }
.kc-cv-item ul { list-style: none; }
.kc-cv-item li { position: relative; padding-left: 1.1em; margin: 0 0 0.3em !important; font-size: 0.97rem; }
.kc-cv-item li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.42em; height: 0.5em; background: var(--kc-ochre); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.kc-cv-body > .kc-meta { margin: 0; border-top: 0; }
.kc-cv-body > .kc-meta > div:first-child { padding-top: 0; }

/* ---------- call to action (the "cta" block) ---------- */
.kc-cta { background-color: var(--kc-band) !important; border-top: 2px solid var(--kc-ink); }
.kc-cta h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); max-width: 18ch; margin-bottom: 0.4em; }
.kc-cta p { color: var(--kc-muted); max-width: 34rem; margin-bottom: 0; }
.kc-cta-actions > .col-inner { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
.kc-cta-actions .button { margin: 0; }

/* ---------- footer ---------- */
.kc-footer { background: var(--kc-dark) !important; }
.kc-footer p, .kc-footer li { font-size: 0.96rem; color: var(--kc-dark-text); }
.kc-footer .kc-foot-h {
  font-family: var(--kc-mono);
  font-size: 0.72rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kc-ochre-light);
  margin-bottom: 1rem;
}
.kc-footer ul { list-style: none; margin: 0; padding: 0; }
.kc-footer li { margin: 0 0 0.55em !important; }
.kc-footer a { color: #fff; text-decoration: none !important; }
.kc-footer a:hover { color: var(--kc-ochre-light); }
.kc-footer .kc-logo { margin-bottom: 1.2rem; color: #fff !important; }
.kc-footer .kc-mark-ring { fill: var(--kc-dark); }
.kc-footer .kc-word-sub { color: var(--kc-dark-muted); }
.kc-footer .kc-fill { color: var(--kc-ochre-deep) !important; }
.kc-social { display: flex; gap: 0.6rem; margin: 1.2rem 0 0; }
.kc-social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--kc-dark-line); color: #fff; }
.kc-social a:hover { background: var(--kc-ochre-light); border-color: var(--kc-ochre-light); color: var(--kc-ink); }
.kc-social svg { width: 1.2rem; height: 1.2rem; }
.absolute-footer, .absolute-footer.dark, .absolute-footer.light {
  background: var(--kc-dark-2) !important;
  border-top: 1px solid var(--kc-dark-line);
  color: var(--kc-dark-muted);
  font-family: var(--kc-mono);
  font-size: 0.74rem;
  padding: 1.1rem 0;
}
/* Flatsome floats the two halves, which leaves them on different baselines */
.absolute-footer .container { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.4rem 2rem; }
.absolute-footer .footer-primary, .absolute-footer .footer-secondary { float: none; padding: 0; margin: 0; }
.absolute-footer .container::before, .absolute-footer .container::after { display: none; }   /* clearfix pseudo-elements would count as flex items */
.absolute-footer a { color: var(--kc-dark-text); }
.absolute-footer a:hover { color: #fff; }
.back-to-top { background: var(--kc-card) !important; border-color: var(--kc-ink) !important; color: var(--kc-ink) !important; border-radius: 0 !important; }

/* ---------- effects (see assets/js/kc.js) ---------- */
/* Only elements the script has tagged are ever hidden or clipped, so
   without JavaScript everything shows. */
html.kc-js .kc-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.8s var(--kc-ease); }
html.kc-js .kc-reveal.is-in { opacity: 1; transform: none; }
/* images are uncovered from the bottom up, the way a sheet comes off the plotter */
html.kc-js .kc-wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--kc-ease); }
html.kc-js .kc-wipe.is-in { clip-path: inset(0 0 0 0); }

/* ---------- small screens (Flatsome: medium <= 849px, small <= 549px) ---------- */
@media (max-width: 849px) {
  html { scroll-padding-top: 76px; }
  .kc-hero { min-height: min(86vh, 820px); }
  .kc-projects, .kc-projects--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .kc-stage > .col-inner { padding-right: 0; }
  .kc-cta-actions > .col-inner { justify-content: flex-start; padding-top: 1.2rem; }
  .kc-cv-actions > .col-inner { justify-content: flex-start; }
  .kc-footer .col { padding-bottom: 12px; }
  .kc-sheets > .col-inner { padding: 6% 12% 12% 4%; margin-top: 1.5rem; }
}
@media (max-width: 549px) {
  body { font-size: 1rem; }
  .kc-hero .button, .kc-page-hero .button { display: flex; width: 100%; margin-right: 0; }
  .kc-hero-cap { left: 15px; right: auto; bottom: 10px; font-size: 0.66rem; }
  .kc-hero > .section-content { padding-bottom: 52px; }
  .kc-word { font-size: 0.98rem; }
  .kc-word-sub { font-size: 0.56rem; letter-spacing: 0.1em; }
  .kc-mark { width: 32px; height: 32px; }
  .kc-projects, .kc-projects--2 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .kc-meta > div, .kc-meta--wide > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .kc-pager { grid-template-columns: 1fr; }
  .kc-pager-next { align-items: flex-start; text-align: left; border-left: 0; border-top: 1px solid var(--kc-hairline); padding-left: 0 !important; }
  .kc-cv-part { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .kc-cv-h { writing-mode: horizontal-tb; transform: none; justify-self: start; }
  .kc-cv-body { padding-left: 1.1rem; }
  .kc-cv-item { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .kc-frame .img-inner { box-shadow: 0 0 0 1px var(--kc-hairline), 10px 10px 0 -1px var(--kc-band); }
  .absolute-footer .footer-secondary { float: none; margin-bottom: 0.4rem; }
  .kc-footer .col { padding-bottom: 28px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.kc-js .kc-reveal { opacity: 1; transform: none; }
  html.kc-js .kc-wipe { clip-path: none; }
}

/* ---------- print (the CV prints to A4; any page prints cleanly) ---------- */
@media print {
  @page { size: A4; margin: 15mm 16mm 16mm; }
  html:root, body { background: #fff !important; font-size: 9.5pt; line-height: 1.45; }   /* :root outranks Flatsome's own html{...!important} */
  /* Flatsome's flex sections and rows size themselves to their content, past
     the page edge, and keep the CV off page one: plain blocks in print */
  .section, .row, .col, .col-inner, .section-content { display: block !important; width: auto !important; max-width: none !important; flex: none !important; }
  .section { padding: 0 !important; min-height: 0 !important; }
  .col, .col-inner { padding-left: 0 !important; padding-right: 0 !important; }
  #header, .header-wrapper, #footer, .footer-wrapper, .section.kc-cta, .kc-crumbs, .kc-print, .col.kc-cv-actions,
  .back-to-top, .absolute-footer, #wpadminbar, .kc-pager, #main-menu { display: none !important; }
  html, body, #wrapper, #main { height: auto !important; min-height: 0 !important; }
  body > :not(#wrapper), #wrapper > :not(#main) { display: none !important; }   /* menus, popups and scripts: nothing to print */
  .kc-page-hero { background: none !important; border: 0; margin-bottom: 6mm; }
  h1 { font-size: 24pt; margin-bottom: 1mm; }
  .kc-lede { font-size: 11pt; margin-bottom: 2mm; color: #333; }
  a { color: #000 !important; text-decoration: none !important; }
  /* the side labels stay on their side, but out of the flow, so a section
     can break across pages */
  .kc-cv-part { display: block; position: relative; padding: 4mm 0 1mm 14mm; min-height: 32mm; }   /* room for the longest side label */
  .kc-cv-h { position: absolute; left: 0; top: 4mm; }
  /* set horizontally and turned with a transform: a vertical writing-mode
     box here adds a blank page at the end of the PDF */
  .kc-cv-h { writing-mode: horizontal-tb; width: 30mm; line-height: 1; text-align: right; transform-origin: 0 0; transform: rotate(-90deg) translateX(-100%); }
  .kc-cv-body { padding-left: 6mm; max-width: none; }
  .kc-cv-item { break-inside: avoid; padding-bottom: 3.5mm; grid-template-columns: 24mm minmax(0, 1fr); }
  .kc-cv-item h3 { font-size: 11pt; }
  .kc-reveal, .kc-wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}