/* Aarti Krishnakumar: site styles for aartikrishnakumar.com
   Colours come from her logo palette. Neutrals: Black #111111, Warm Ivory #FAF7F1.
   Each core area owns one brand colour:
     Work = Deep Navy #102433   Tales = Muted Gold #D5AF6B
     Food = Terracotta #71391F  Travel = Forest Green #153C32
     Books = Black #111111      Life = Dusty Rose #DDB7AC
   Gold and rose are too light for text, so their text and link colours are deeper shades of the same hue.
   The CMS blog pages load this file too, and add body classes such as
   "section-tales cat-food" so the same themes apply to posts. */

:root {
  /* Brand palette */
  --black: #111111;
  --ivory: #FAF7F1;
  --navy: #102433;
  --gold: #D5AF6B;
  --terracotta: #71391F;
  --forest: #153C32;
  --rose: #DDB7AC;

  /* Work */
  --paper: var(--ivory);
  --ink: var(--black);
  --work: var(--navy);
  --work-deep: #08131C;
  --muted: #4A5560;
  --line: #D9DCDF;
  --wash: #E9ECEE;

  /* Tales */
  --tales-paper: #F8F1E2;
  --tales-ink: #231B10;
  --tales-accent: #6E5221;
  --tales-muted: #5C4C35;
  --tales-line: #E6D7B5;
  --tales-soft: #EFE0BD;

  /* Defaults; sections and categories override these */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--work);
  --accent-deep: var(--work-deep);
  --soft: var(--wash);
  --rule: var(--line);
  --sub: var(--muted);
  --texture: none;
  --texture-size: auto;

  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --wrap: 1180px;
  --gut: 24px;
  --r: 3px;
}

.section-tales {
  --bg: var(--tales-paper);
  --fg: var(--tales-ink);
  --accent: var(--tales-accent);
  --accent-deep: #4E3A16;
  --soft: var(--tales-soft);
  --rule: var(--tales-line);
  --sub: var(--tales-muted);
}

/* Tales category themes */
.cat-food {
  --bg: #F7EDE7; --fg: #2A1810; --accent: var(--terracotta); --accent-deep: #4F2715; --soft: #EBD7CB; --rule: #E0C8BA; --sub: #6A4A3B;
  --texture: radial-gradient(rgba(113,57,31,.11) 1px, transparent 1.6px); --texture-size: 14px 14px;
}
.cat-travel {
  --bg: #EDF2EE; --fg: #0F2620; --accent: var(--forest); --accent-deep: #0B241D; --soft: #D5E2DA; --rule: #C4D5CB; --sub: #3F5A50;
  --texture: repeating-radial-gradient(circle at 18% 22%, transparent 0 26px, rgba(21,60,50,.08) 26px 27px), repeating-radial-gradient(circle at 82% 70%, transparent 0 34px, rgba(21,60,50,.06) 34px 35px);
}
.cat-books {
  --bg: var(--ivory); --fg: var(--black); --accent: var(--black); --accent-deep: #000000; --soft: #ECE7DE; --rule: #DDD6C9; --sub: #55504A;
  --texture: repeating-linear-gradient(0deg, transparent 0 31px, rgba(17,17,17,.07) 31px 32px);
}
.cat-life {
  --bg: #F8EFEC; --fg: #2B1D1A; --accent: #7F483D; --accent-deep: #63362D; --soft: #EED8D1; --rule: #E6CFC8; --sub: #6B524C;
  --texture: repeating-linear-gradient(45deg, rgba(221,183,172,.13) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgba(221,183,172,.13) 0 1px, transparent 1px 12px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--texture);
  background-size: var(--texture-size);
  color: var(--fg);
  font: 17px/1.6 var(--sans);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.15; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.section-tales h1, .section-tales h2, .section-tales h3 { font-family: var(--serif); font-weight: 500; letter-spacing: 0; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--fg); color: var(--bg); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Content still to come from Aarti: visible on the test site so nothing slips through */
.todo { background: #FFF3B0; color: #3A3000; box-shadow: 0 0 0 2px #FFF3B0; border-radius: 2px; }

/* ---------- Header and mega menus ---------- */
.site-header { position: relative; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 40px; width: auto; display: block; }
.mainnav { display: flex; gap: 6px; }
.mega > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r); font-weight: 600; font-size: 16px; user-select: none;
}
.mega > summary::-webkit-details-marker { display: none; }
.mega > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.mega[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.mega-work > summary { color: var(--work); }
.mega-tales > summary { color: var(--tales-accent); }
.mega-work > summary:hover, .mega-work[open] > summary { background: var(--wash); }
.mega-tales > summary:hover, .mega-tales[open] > summary { background: var(--tales-soft); }
.section-work .mega-work > summary, .section-tales .mega-tales > summary { box-shadow: inset 0 -3px 0 currentColor; }
.mega-panel { position: absolute; left: 0; right: 0; top: 100%; border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -24px rgba(16,36,51,.45); }
.mega-work .mega-panel { background: #FFFFFF; color: var(--ink); }
.mega-tales .mega-panel { background: var(--tales-paper); color: var(--tales-ink); border-bottom-color: var(--tales-line); }
.mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; padding: 32px var(--gut) 36px; max-width: var(--wrap); margin: 0 auto; }
.mega-col h2 { font: 600 13px/1.4 var(--sans); color: var(--muted); margin-bottom: 10px; letter-spacing: 0.02em; }
.mega-tales .mega-col h2 { color: var(--tales-muted); }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-col a { display: block; padding: 6px 0; text-decoration: none; font-size: 16px; }
.mega-work .mega-col a { color: var(--ink); }
.mega-tales .mega-col a { color: var(--tales-ink); }
.mega-col a:hover { text-decoration: underline; }
.mega-latest { border-radius: var(--r); padding: 18px; display: grid; gap: 8px; align-content: start; text-decoration: none; }
.mega-work .mega-latest { background: var(--wash); color: var(--ink); }
.mega-tales .mega-latest { background: var(--tales-soft); color: var(--tales-ink); }
.mega-latest small { font-size: 13px; color: inherit; opacity: .8; }
.mega-latest strong { font-size: 17px; line-height: 1.35; }
.mega-latest .mega-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-bottom: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #E4E0D8; margin-top: 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; padding-top: 32px; padding-bottom: 32px; font-size: 15px; }
.site-footer a { color: #FFFFFF; }
.site-footer .social { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; align-items: center; }
.site-footer .social a { display: block; opacity: .85; transition: opacity .15s; }
.site-footer .social a:hover, .site-footer .social a:focus-visible { opacity: 1; }
.site-footer .social img { display: block; height: 28px; width: auto; }
.site-footer .brand img { height: 34px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--r); font: 600 16px/1 var(--sans); text-decoration: none; border: 2px solid var(--accent); background: var(--accent); color: #FFFFFF; cursor: pointer; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #FFFFFF; }
.btn.quiet { background: transparent; color: var(--accent); }
.btn.quiet:hover { background: var(--soft); color: var(--accent-deep); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Home: the split ---------- */
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 73px); position: relative; }
/* The side being hovered or keyboard-focused grows; the other gives way. minmax(0, ...) lets a side shrink below its content width. */
.home-split:has(.path-work:hover), .home-split:has(.path-work:focus-visible) { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.home-split:has(.path-tales:hover), .home-split:has(.path-tales:focus-visible) { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
.path { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding: 64px clamp(24px, 5vw, 72px) 72px; text-decoration: none; position: relative; overflow: hidden; container-type: inline-size; }
.path > * { position: relative; }
.path-work, .path-work:hover { background: var(--paper); color: var(--ink); }
.path-tales, .path-tales:hover { background: var(--gold); color: var(--black); }
/* Texture that appears on the active side: graph paper for Work, a kolam dot grid for Tales */
.path::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.path-work::before { background-image: linear-gradient(rgba(16,36,51,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(16,36,51,.10) 1px, transparent 1px); background-size: 28px 28px; }
.path-tales::before { background-image: radial-gradient(rgba(17,17,17,.26) 1.7px, transparent 2.3px); background-size: 26px 26px; }
.path:hover::before, .path:focus-visible::before { opacity: 1; }
.path:focus-visible { outline-offset: -6px; }
.path-word { font-size: clamp(88px, 13vw, 200px); font-size: clamp(64px, 30cqi, 200px); line-height: .85; margin: 0; white-space: nowrap; }
.path-work .path-word { font-family: var(--sans); font-weight: 700; letter-spacing: -0.05em; color: var(--navy); }
.path-tales .path-word { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.path-lede { font-size: 20px; line-height: 1.45; max-width: 30ch; }
.path-tales .path-lede { font-family: var(--serif); font-size: 22px; }
.path-go { font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.path-latest { font-size: 15px; max-width: 34ch; }
.path-latest:empty { display: none; }
.path:hover .path-go, .path:focus-visible .path-go { text-decoration-thickness: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .home-split { transition: grid-template-columns .5s ease; }
  .path::before { transition: opacity .5s ease; }
}
@media (max-width: 760px) {
  .home-split { grid-template-columns: 1fr; min-height: 0; }
  .home-split:has(.path-work:hover), .home-split:has(.path-work:focus-visible), .home-split:has(.path-tales:hover), .home-split:has(.path-tales:focus-visible) { grid-template-columns: minmax(0, 1fr); }
  .path { min-height: 62vh; padding: 56px 24px 48px; }
  .path-tales { padding-top: 56px; min-height: 52vh; }
}

/* ---------- Page heads and sections ---------- */
.page-head { padding-top: 72px; padding-bottom: 40px; }
.page-head h1 { font-size: clamp(38px, 5.4vw, 64px); max-width: 18ch; }
.page-head .lede { font-size: 21px; line-height: 1.5; margin-top: 18px; max-width: 46ch; color: var(--sub); }
.section-tales .page-head .lede { font-family: var(--serif); }
.page-head .actions { margin-top: 28px; }
.crumb { font-size: 15px; margin-bottom: 18px; display: inline-block; }
.band { padding: 64px 0; border-top: 1px solid var(--rule); }
.band.tint { background: var(--soft); border-top: 0; }
.band h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 28px; max-width: 24ch; }
.band .intro { max-width: 60ch; color: var(--sub); margin: -12px 0 28px; }
.split-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.split-head h2 { margin-bottom: 0; }

.hero-work { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.portrait { aspect-ratio: 4 / 5; background: var(--soft); border-radius: var(--r); display: grid; place-items: center; color: var(--sub); font-size: 15px; text-align: center; padding: 20px; }
@media (max-width: 860px) { .hero-work { grid-template-columns: 1fr; } .portrait { max-width: 360px; } }

/* Services: three columns divided by a heavy top rule, not cards */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 36px; }
.trio > * { border-top: 4px solid var(--accent); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.trio h3 { font-size: 23px; }
.trio p { color: var(--sub); }

/* Selected work as rows */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { border-top: 1px solid var(--rule); }
.rows li:last-child { border-bottom: 1px solid var(--rule); }
.rows a { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 24px 0; text-decoration: none; color: var(--fg); }
.rows a:hover h3 { text-decoration: underline; }
.rows .who { color: var(--sub); font-size: 15px; }
.rows h3 { font-size: 22px; font-weight: 600; }
.rows .more { color: var(--accent); font-weight: 600; font-size: 15px; }
@media (max-width: 700px) { .rows a { grid-template-columns: 1fr; gap: 6px; } }

.quote { max-width: 44ch; margin: 0; }
.quote blockquote { margin: 0; font: 400 clamp(24px, 3vw, 32px)/1.35 var(--serif); }
.quote figcaption { margin-top: 16px; color: var(--sub); font-size: 15px; }

/* Post lists fed from the CMS feeds */
.feed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.feed li a { display: grid; gap: 8px; text-decoration: none; color: var(--fg); border-top: 2px solid var(--accent); padding-top: 14px; }
.feed time { font-size: 14px; color: var(--sub); }
.feed strong { font-size: 19px; line-height: 1.35; font-weight: 600; }
.section-tales .feed strong { font-family: var(--serif); font-weight: 500; font-size: 21px; }
.feed li a:hover strong { text-decoration: underline; }
.feed-empty { color: var(--sub); }

.cta-band { background: var(--accent); color: #FFFFFF; padding: 56px 0; }
.cta-band .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.cta-band h2 { font-size: clamp(26px, 3vw, 34px); max-width: 26ch; margin: 0; }
.cta-band .btn { background: #FFFFFF; color: var(--accent); border-color: #FFFFFF; }
.cta-band .btn:hover { background: var(--soft); border-color: var(--soft); color: var(--accent-deep); }

/* Services page */
.service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 56px; padding: 40px 0; border-top: 1px solid var(--rule); }
.service:last-child { border-bottom: 1px solid var(--rule); }
.service h2 { font-size: 30px; margin: 0; }
.service-body { display: grid; gap: 14px; }
.service-body ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.service-meta { color: var(--sub); font-size: 15px; }
@media (max-width: 760px) { .service { grid-template-columns: 1fr; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(step); font: 700 44px/1 var(--sans); color: var(--accent); }
.steps strong { font-size: 19px; }
.faq details { border-top: 1px solid var(--rule); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 19px; }
.faq details p { margin-top: 12px; color: var(--sub); max-width: 64ch; }

/* Case study */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin: 0; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 14px; color: var(--sub); }
.facts dd { margin: 4px 0 0; font-weight: 600; }
/* Case study pictures, written by the CMS after the facts. */
.cs-image { margin: 40px 0; }
.cs-image + .cs-image { margin-top: -16px; }
.cs-image img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.cs-image figcaption { font-size: 14px; color: var(--sub); margin-top: 10px; }
.figure { aspect-ratio: 16 / 7; background: var(--soft); border-radius: var(--r); display: grid; place-items: center; color: var(--sub); margin: 40px 0; text-align: center; padding: 20px; }
.prose { max-width: 680px; display: grid; gap: 20px; font: 19px/1.7 var(--serif); }
.prose h2 { font: 700 26px/1.2 var(--sans); margin-top: 16px; }
.section-tales .prose h2 { font-family: var(--serif); font-weight: 500; }
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; font-family: var(--sans); }
.numbers div { background: var(--soft); padding: 18px; border-radius: var(--r); }
.numbers strong { display: block; font-size: 30px; color: var(--accent); }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: start; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
.timeline span { color: var(--sub); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 80px; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
form.stack { display: grid; gap: 18px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--fg); background: #FFFFFF; border: 1px solid #A9AEBD; border-radius: var(--r); padding: 12px 14px; min-height: 48px; width: 100%; }
textarea { min-height: 160px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.form-note { font-size: 15px; color: var(--sub); }
.aside { background: var(--soft); border-radius: var(--r); padding: 28px; display: grid; gap: 20px; }
.aside dt { font-size: 14px; color: var(--sub); }
.aside dd { margin: 4px 0 0; font-weight: 600; }

/* ---------- Tales landing ---------- */
.tales-head { padding-top: 80px; padding-bottom: 48px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.tales-head h1 { font-size: clamp(60px, 9vw, 120px); font-style: italic; font-weight: 400; line-height: .9; }
.tales-head p { font: 22px/1.5 var(--serif); max-width: 34ch; }
@media (max-width: 760px) { .tales-head { grid-template-columns: 1fr; padding-top: 56px; } }
.shelves { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.shelf { display: grid; align-content: space-between; gap: 40px; min-height: 230px; padding: 24px; border-radius: var(--r); text-decoration: none; background-color: var(--bg); background-image: var(--texture); background-size: var(--texture-size); color: var(--fg); border: 1px solid var(--rule); }
.shelf h3 { font: italic 400 44px/1 var(--serif); color: var(--accent); }
.shelf p { font: 18px/1.45 var(--serif); }
.shelf span { font-weight: 600; color: var(--accent); font-size: 15px; }
.shelf:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }
/* Tales home only: the newest featured image for each primary category, under a tint of the category colour so ivory text stays readable. Set by site.js from /blog/tales/covers.json. */
.shelf.has-photo { --tint: rgba(17, 17, 17, .72); background-image: linear-gradient(var(--tint), var(--tint)), var(--photo); background-size: cover; background-position: center; color: #FAF7F1; border-color: transparent; }
.shelf.has-photo h3, .shelf.has-photo span { color: #FAF7F1; }
.shelf.has-photo.cat-food { --tint: rgba(113, 57, 31, .80); }
.shelf.has-photo.cat-travel { --tint: rgba(21, 60, 50, .80); }
.shelf.has-photo.cat-books { --tint: rgba(17, 17, 17, .74); }
.shelf.has-photo.cat-life { --tint: rgba(99, 54, 45, .80); }
.hello { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: center; }
.hello .photo { width: 160px; height: 160px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; text-align: center; font-size: 13px; color: var(--sub); padding: 16px; }
.hello h2 { margin-bottom: 10px; }
.hello p { font: 19px/1.6 var(--serif); max-width: 56ch; }
@media (max-width: 600px) { .hello { grid-template-columns: 1fr; } }
.subscribe { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.subscribe p { font: 19px/1.5 var(--serif); max-width: 46ch; color: var(--sub); }

/* Books shelf page */
.covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 36px 28px; }
.covers a { display: grid; gap: 8px; text-decoration: none; color: var(--fg); }
.cover { aspect-ratio: 2 / 3; background: var(--soft); box-shadow: 6px 6px 0 var(--accent); display: grid; place-items: center; text-align: center; padding: 14px; font: italic 18px/1.3 var(--serif); color: var(--accent); }
.cover:has(img) { padding: 0; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.covers strong { font: 500 19px/1.3 var(--serif); margin-top: 8px; }
.covers span { color: var(--sub); font-size: 15px; }

/* 404 */
.lost { padding-top: 120px; padding-bottom: 120px; display: grid; gap: 20px; }
.lost h1 { font-size: clamp(44px, 6vw, 72px); }

@media (max-width: 600px) {
  :root { --gut: 16px; }
  body { font-size: 16px; }
  .page-head { padding-top: 48px; padding-bottom: 28px; }
  .band { padding: 48px 0; }
  .brand img { height: 24px; }
  .mega > summary { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Spacing helpers */
.pad-end { padding-bottom: 80px; }
.gap-top { margin-top: 64px; }
.space-m { margin-top: 28px; }
.space-l { margin-top: 48px; }
.statement { font-size: 20px; line-height: 1.5; max-width: 66ch; }
.note { color: var(--sub); margin-top: 8px; }
.lost .lede { font-size: 20px; color: var(--sub); max-width: 52ch; }

/* Numbers band and industry tags on the Work home page */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.stats strong { display: block; font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.stats span { display: block; margin-top: 8px; color: var(--sub); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tags li { border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; background: #FFFFFF; }
.cta-sub { margin-top: 12px; font-size: 18px; color: #D4DAE0; max-width: 52ch; }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.pull { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-size: 26px; line-height: 1.4; font-style: italic; }

/* Post filter on CMS list pages (built by the CMS, wired up by site.js) */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.filter[hidden] { display: none; }
.filter button { font: 600 14px/1 var(--sans); padding: 9px 14px; border-radius: var(--r); border: 1px solid var(--rule); background: transparent; color: var(--fg); cursor: pointer; }
.filter button:hover { border-color: var(--accent); }
.filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper-on-accent, #FAF7F1); }
.filter button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* Tales home intro: several short paragraphs */
.tales-intro { display: grid; gap: 12px; }
.tales-intro p { font: 20px/1.5 var(--serif); max-width: 40ch; }
.hello p + p { margin-top: 12px; }

/* Tales: subscribe by email (posts to the CMS) */
.subscribe-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; max-width: 520px; flex: 1 1 360px; }
.subscribe-form input[type=email] { flex: 1 1 240px; width: auto; }
.subscribe-form .form-note { flex-basis: 100%; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Post cards on CMS list pages: image above the title, three to a row */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.cards li[hidden] { display: none; }
.cards a { display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--fg); }
.cards .card-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); background-color: var(--soft); background-image: var(--texture); background-size: var(--texture-size); }
.cards .meta { font: 600 13px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--sub); }
.cards h2 { font: 400 23px/1.25 var(--serif); margin: 0; }
.cards a:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cards a:hover .card-img { filter: brightness(.94); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); }
.pager[hidden] { display: none; }
.pager button { font: 600 15px/1 var(--sans); padding: 12px 18px; border-radius: var(--r); border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
.pager button:hover:not(:disabled) { background: var(--accent); color: #FAF7F1; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager-status { font-size: 14px; color: var(--sub); }

/* Services: four cards in a row; the chosen one opens its details below (site.js). Without the script every panel shows. */
.services-pick { padding-bottom: 72px; }
.svc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.svc-card { position: relative; display: grid; align-content: start; gap: 10px; min-height: 280px; padding: 26px 22px 22px; border: 1px solid var(--rule); border-top: 5px solid var(--accent); border-radius: var(--r); background: #FFFFFF; color: var(--fg); text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(16, 36, 51, .12); }
.svc-card .svc-icon { color: var(--accent); }
.svc-num { font: 600 13px/1 var(--sans); letter-spacing: .1em; color: var(--sub); }
.svc-card h2 { font-size: 24px; margin: 0; }
.svc-card p { font-size: 15px; line-height: 1.5; color: var(--sub); margin: 0; }
.svc-more { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 15px; color: var(--accent); }
.svc-card[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #FAF7F1; transform: translateY(-4px); box-shadow: 0 10px 24px rgba(16, 36, 51, .18); }
.svc-card[aria-selected="true"] .svc-icon, .svc-card[aria-selected="true"] .svc-more, .svc-card[aria-selected="true"] p, .svc-card[aria-selected="true"] .svc-num { color: #FAF7F1; }
.svc-card[aria-selected="true"] .svc-more { visibility: hidden; }
.svc-panels { margin-top: 28px; }
.svc-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 56px; padding: 36px; background: var(--wash); border-radius: var(--r); margin-bottom: 18px; scroll-margin-top: 100px; }
.svc-panel[hidden] { display: none; }
.svc-panel h2 { font-size: 30px; margin: 0 0 8px; }
.svc-panel h3 { font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 22px 0 8px; }
.svc-panel-side h3 { margin-top: 0; }
.svc-panel p { margin: 0 0 10px; max-width: 60ch; }
.svc-tag { font: 400 21px/1.4 var(--serif); }
.svc-panel ul { margin: 0 0 22px; padding-left: 20px; display: grid; gap: 8px; }
.svc-story { font-weight: 600; color: var(--accent); }
@media (max-width: 960px) { .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-card { min-height: 0; } .svc-panel { grid-template-columns: 1fr; padding: 26px; } }
@media (max-width: 520px) { .svc-cards { grid-template-columns: 1fr; } }
.stories { background: var(--paper); border-top: 1px solid var(--rule); }
.stories-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; }
.stories-wrap h2 { margin-bottom: 10px; }
.stories-wrap p { color: var(--sub); max-width: 52ch; }
.stories-actions { display: grid; gap: 14px; justify-items: start; }
@media (max-width: 760px) { .stories-wrap { grid-template-columns: 1fr; } }

/* How I work: three phases side by side, one colour each */
.phases { display: grid; grid-template-columns: 3fr 2fr 2fr; gap: 28px; margin-top: 36px; align-items: start; }
.phase { --ph: #1F5A96; display: grid; gap: 14px; }
.phase.ph2 { --ph: #2E7A55; }
.phase.ph3 { --ph: #6A4C93; }
.phase-head { font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ph); padding-top: 12px; border-top: 4px solid var(--ph); margin: 0; }
.phase .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; border-radius: var(--r); background: rgba(255, 255, 255, .7); }
.phase .step-icon { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--ph); }
.phase .step h3 { font: 600 18px/1.2 var(--sans); margin: 2px 0 4px; }
.phase .step h3 span { color: var(--ph); margin-right: 4px; }
.phase .step p { font-size: 15px; line-height: 1.5; color: var(--sub); margin: 0; }
@media (max-width: 960px) { .phases { grid-template-columns: 1fr; } }

/* FAQ: heading on the left, questions on the right */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 64px; align-items: start; }
.faq-head { position: sticky; top: 100px; }
.faq-head p { margin-top: 12px; color: var(--sub); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } .faq-head { position: static; } }

/* Card snippets (CMS list pages and the Tales home feed) */
.cards .excerpt { font-size: 15px; line-height: 1.55; color: var(--sub); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.svc-cards { scroll-margin-top: 100px; }

/* Her photos in the portrait and "Hi, I'm Aaroo" slots */
.portrait.has-photo, .hello .photo.has-photo { padding: 0; overflow: hidden; }
.portrait.has-photo img, .hello .photo.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Blog posts written by the CMS (body.blog-page, article.prose): one centred reading column, 760px,
   with the heading, tags, feedback form and Previous/Next lined up to it. CSS only, so no rebuild. */
.blog-page .page-head:has(+ .wrap > article.prose),
.blog-page .wrap:has(> article.prose) { max-width: calc(760px + 2 * var(--gut)); }
.blog-page article.prose { max-width: none; }
.blog-page .wrap:has(> article.prose) > .actions { flex-wrap: wrap; }
.blog-page .wrap:has(> article.prose) > .actions .btn { white-space: normal; text-align: left; line-height: 1.3; padding-top: 12px; padding-bottom: 12px; }

/* Feedback form under a post. */
.post-feedback { margin-top: 56px; padding: 28px; background: rgba(255, 255, 255, .72); border: 1px solid var(--rule); border-radius: var(--r); }
.post-feedback h2 { font: 700 24px/1.2 var(--sans); margin: 0; }
.post-feedback > p { margin: 6px 0 20px; color: var(--sub); font-size: 15px; }
.post-feedback form { display: grid; gap: 16px; }
.post-feedback label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.post-feedback button[type=submit] { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--r); font: 600 16px/1 var(--sans); border: 2px solid var(--accent); background: var(--accent); color: #FFFFFF; cursor: pointer; }
.post-feedback button[type=submit]:hover { background: var(--accent-deep); border-color: var(--accent-deep); }