/* ==========================================================================
   Readability layer – loaded last, after cordoba-responsive.css.
   Keeps the existing look (Abel, light grey, wide letter-spacing, uppercase
   labels) but makes the text larger and easier to read on every screen.
   Sizes use clamp(min, preferred, max) so they scale smoothly with the screen.
   NOTE: html is set to 62.5% in cordoba-basic.css, so rem is NOT used here.
   ========================================================================== */

:root{
  --rd-body: clamp(16px, 14.5px + 0.35vw, 20px);      /* paragraphs, lists      */
  --rd-small: clamp(14px, 12.5px + 0.30vw, 17px);     /* captions, labels       */
  --rd-ui: clamp(15px, 13.5px + 0.35vw, 19px);        /* menus, links, contact  */
  --rd-title-s: clamp(24px, 20px + 1vw, 34px);        /* section headings       */
  --rd-grey: #6b6b6b;                                  /* was #a3a3a3 – too faint */
}

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body{
  font-size: var(--rd-body);
  line-height: 1.7;
}

/* main reading text: statement, interviews, exhibitions, awards, contact */
.text,
.text p,
.text li{
  font-size: var(--rd-body);
  line-height: 1.75;
}
.text,
.text p{ color: var(--rd-grey); }
.stream .text,
.stream .text p{ color: #000; }           /* project descriptions were already black */
.text p{ margin-bottom: 0.9em; }
.text.large{ font-size: clamp(20px, 16px + 1vw, 28px); }

/* the content panel on the inner pages must scroll rather than clip longer text */
section.page .content .text,
section.page .content{ overflow-wrap: break-word; }
section.page .content.no-scroll{ overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* contact details (E: P: A:) */
section.page .content .info .link a{
  font-size: var(--rd-ui);
  letter-spacing: 0.18em;
  line-height: 1.6;
}
section.page .content .info .link a span{ color: #9a9a9a; }
section.page .content .info .link{ margin-bottom: 0.45em; }

/* header: tagline under the name, Menu label */
.logo .title,
.logo h6.title{
  font-size: var(--rd-ui);
  line-height: 1.5;
}
.menu > span,
.header .menu span{ font-size: var(--rd-ui); }

/* home page "PROJECTS" prompt and any small caps prompts */
section.home .discover a{ font-size: var(--rd-ui); }
section.home .text{ font-size: var(--rd-ui); }
nav.navigation .social li{ font-size: var(--rd-ui); }

/* projects page: album list down the left */
section.work .tools .albums li{
  font-size: var(--rd-ui);
  line-height: 1.7;
}

/* headings that used a fixed small size */
.title-small{
  font-size: var(--rd-title-s) !important;
  line-height: 1.2 !important;
}
.title-very-small{
  font-size: var(--rd-small) !important;
  line-height: 1.3 !important;
}

/* "more / older / newer / all" links, image counters and lightbox captions */
a.more, a.older, a.newer, a.all{ font-size: var(--rd-small); }
.mfp-counter{ font-size: var(--rd-small); line-height: 1.5; }
.mfp-figure small, .mfp-title{ font-size: var(--rd-small); line-height: 1.5; }

/* form fields, if any are added later (16px also stops iOS zooming on focus) */
input[type="text"], input[type="email"], input[type="password"], textarea, select,
label, .button, button, input[type="submit"]{ font-size: 16px; }

/* very small phones: keep letter-spacing from forcing awkward wraps */
@media (max-width: 480px){
  section.page .content .info .link a{ letter-spacing: 0.1em; }
}