/* Shared reading preferences for the English and Greek editions. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/reading-fonts/ibm-plex-sans-500.latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/reading-fonts/ibm-plex-sans-500.greek.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+037E, U+0386-038A, U+038C, U+038E-03A1, U+03A3-03CE;
}
@font-face {
  font-family: "Commissioner";
  src: url("/assets/reading-fonts/commissioner-400.latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6-02CC, U+02DA, U+02DC, U+0300-0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner";
  src: url("/assets/reading-fonts/commissioner-400.greek.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: "Commissioner";
  src: url("/assets/reading-fonts/commissioner-500.latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6-02CC, U+02DA, U+02DC, U+0300-0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner";
  src: url("/assets/reading-fonts/commissioner-500.greek.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: "Commissioner";
  src: url("/assets/reading-fonts/commissioner-600.latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6-02CC, U+02DA, U+02DC, U+0300-0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner";
  src: url("/assets/reading-fonts/commissioner-600.greek.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: "Commissioner";
  src: url("/assets/reading-fonts/commissioner-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("/assets/reading-fonts/commissioner-400i.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/reading-fonts/OpenSans.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/reading-fonts/OpenSans-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/assets/reading-fonts/NotoSans.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/assets/reading-fonts/NotoSans-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("/assets/reading-fonts/opendyslexic-regular-2025.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("/assets/reading-fonts/opendyslexic-bold-2025.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "OpenDyslexic";
  src: url("/assets/reading-fonts/opendyslexic-italic-2025.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/reading-fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/reading-fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/reading-fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/reading-fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/assets/reading-fonts/OpenDyslexic-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --font-mono: var(--font-sans);
  --color-ink: #3E3E3E;
  --color-ink-soft: #4F4F4F;
  --color-accent: #0B5FBF;
  --color-accent-hover: #084A95;
  --color-focus: #0B5FBF;
  --reading-dot: #E6A93D;
  --reading-divider: #577083;
  --reading-diagram: #FFF2D9;
  --reading-exception: #E8EFF3;
  --reading-action-hover: #D99A2C;
}
:root[data-reading-theme="teal"] {
  --color-ground: #F5F7F5;
  --color-surface: #FFFFFF;
  --color-surface-2: #E8EFEC;
  --color-ink: #263238;
  --color-ink-soft: #41514E;
  --color-ink-muted: #586660;
  --color-line: #D4DDD8;
  --color-line-strong: #81948B;
  --color-accent: #176F67;
  --color-accent-hover: #0F534D;
  --color-on-accent: #FFFFFF;
  --color-accent-2: #256D5E;
  --color-signal: #A8D8CA;
  --color-band: #263238;
  --color-on-band: #F6F9F7;
  --color-on-band-muted: #D0DEDA;
  --color-band-link: #A8D8CA;
  --color-badge-bg: #E3ECE7;
  --color-badge-ink: #36564A;
  --color-blocked-bg: #E8EEEB;
  --color-blocked-ink: #41514E;
  --color-illustration: #DFEBE5;
  --color-focus: #176F67;
  --color-error: #9B1C2E;
  --reading-dot: #176F67;
  --reading-divider: #677873;
  --reading-diagram: #E0F0E8;
  --reading-exception: #E5EEEB;
  --reading-action-hover: #BDE4D8;
}
:root[data-reading-theme="blue"] {
  --color-ground: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-2: #EDF1F6;
  --color-ink: #17212B;
  --color-ink-soft: #2C3A48;
  --color-ink-muted: #56657A;
  --color-line: #D6DEE8;
  --color-line-strong: #7D8792;
  --color-accent: #0B5FBF;
  --color-accent-hover: #084A95;
  --color-on-accent: #FFFFFF;
  --color-accent-2: #2E7D32;
  --color-signal: #18BD5B;
  --color-band: #17212B;
  --color-on-band: #F6F8FB;
  --color-on-band-muted: #C8D2DD;
  --color-band-link: #188BF6;
  --color-badge-bg: #E4EFFB;
  --color-badge-ink: #084A95;
  --color-blocked-bg: #E9EDF1;
  --color-blocked-ink: #2C3A48;
  --color-illustration: #DCE6F0;
  --color-focus: #0B5FBF;
  --color-error: #9B1C2E;
  --reading-dot: #188BF6;
  --reading-divider: #B3B3B3;
  --reading-diagram: #E5F5E9;
  --reading-exception: #E7F0FC;
  --reading-action-hover: #3ACB72;
}

/* The navigation arrows are icons in every reading font. */
.breadcrumbs a::before, .connection-map li:not(:last-child)::after { content: none; }
.sequence-arrow { width: 1em; height: 1em; vertical-align: -.12em; }
.breadcrumbs__arrow, .connection-map__arrow { width: 1em; height: 1em; }
.breadcrumbs__arrow { margin-inline-end: .3em; vertical-align: -.12em; transform: rotate(180deg); }
.connection-map__arrow { position: absolute; right: -18px; top: 21px; color: var(--color-ink-muted); }
@media (max-width: 639px) {
  .connection-map li:nth-child(2) .connection-map__arrow { display: none; }
}

/* Colour also controls the emphasis between the two lines of the opening. */
:where(:root:not([data-reading-theme])) body { color: var(--color-ink-soft); }
:where(:root:not([data-reading-theme])) :where(h1,h2,h3,h4) { color: var(--color-ink); }
:where(:root:not([data-reading-theme])) :where(.front-opening,.band,#value,a) :where(h1,h2,h3,h4) { color: inherit; }
.brand__mark { background: var(--reading-dot); }
:lang(en) .front-opening h1 { font-weight: 400; }
.front-opening h1 span { font-weight: 600; }
.front-opening__base { border-color: var(--reading-divider); }
:root:not([data-reading-theme]) .front-opening .eyebrow { color: var(--color-on-band-muted); }
:root:not([data-reading-theme]) .front-actions .button {
  color: var(--color-on-band);
  background: transparent;
  border-color: #b1bdc5;
}
:root:not([data-reading-theme]) .front-actions .button:hover { background: #243e54; }
.front-opening :focus-visible { outline-color: var(--color-band-link); }
.work-diagram__node--middle { background: var(--reading-diagram); }
.work-diagram__exception, .worked-exception { background: var(--reading-exception); }
.business-links > a:first-child:hover { background: var(--reading-action-hover); color: var(--color-ink); }
:root[data-reading-theme="blue"] .masthead { border-top-color: var(--reading-dot); }
:root[data-reading-theme="blue"] .button--primary { background: #187A40; color: #fff; }
:root[data-reading-theme="blue"] .button--primary:hover { background: #125E31; }
:root[data-reading-theme="blue"] .front-actions .button { background: var(--color-signal); color: var(--color-ink); }
:root[data-reading-theme="blue"] .front-actions .button:hover { background: var(--reading-action-hover); }
:root:not([data-reading-theme]) .brand__mark { box-shadow: 0 0 0 3px var(--color-ground), 0 0 0 4px var(--color-band); }

html[data-reading-size="90"] { font-size: 90%; }
html[data-reading-size="112"] { font-size: 112.5%; }
html[data-reading-size="125"] { font-size: 125%; }
html[data-reading-size="150"] { font-size: 150%; }
html[data-reading-size="175"] { font-size: 175%; }
html[data-reading-size="200"] { font-size: 200%; }
html[data-reading-font="atkinson"] { --font-sans: "Atkinson Hyperlegible", "Noto Sans", sans-serif; }
html[data-reading-font="commissioner"] { --font-sans: "Commissioner", "IBM Plex Sans", sans-serif; }
html[data-reading-font="open"] { --font-sans: "Open Sans", "IBM Plex Sans", sans-serif; }
html[data-reading-font="noto"] { --font-sans: "Noto Sans", "IBM Plex Sans", sans-serif; }
html[data-reading-font="dyslexic"] { --font-sans: "OpenDyslexic", "IBM Plex Sans", sans-serif; }
html[data-reading-leading="175"] { --reading-line-height: 1.75; }
html[data-reading-leading="200"] { --reading-line-height: 2; }
html[data-reading-leading] :is(main,.masthead,.footer) :is(p,li,dt,dd,th,td,blockquote,label,input,select,textarea,button,a) {
  line-height: var(--reading-line-height);
}
html[data-reading-words="wide"] :is(main,.masthead,.footer),
html[data-reading-words="wide"] :is(main,.masthead,.footer) :is(p,li,h1,h2,h3,h4,dt,dd,th,td,a,button,label,select,input,textarea,summary,span,strong) {
  letter-spacing: .035em;
  word-spacing: .07em;
}
html[data-reading-words="wide"] main p + p { margin-top: 1.5em; }

.masthead__inner { position: relative; }
.masthead .locale-link:has(img) { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; }
.masthead .locale-link img { display: block; width: 24px; height: 16px; object-fit: contain; }
/* A permanently reserved desktop scrollbar would leave the tab floating on overlay-scrollbar devices. */
html:has(.reading-settings) { scrollbar-gutter: auto; }
.reading-settings[hidden] { display: none; }
.reading-launch {
  position: fixed; z-index: 40; inset-inline-end: env(safe-area-inset-right, 0px);
  inset-block-end: max(28px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  display: flex; justify-content: flex-end; align-items: center; width: 44px; height: 44px;
  padding: 0; margin: 0; border: 0; background: transparent; color: var(--color-ink); cursor: pointer;
}
.reading-launch span {
  display: grid; place-items: center; min-width: 34px; height: 32px; padding-inline: 3px;
  border: 1px solid var(--color-line-strong); border-inline-end: 0; border-radius: 5px 0 0 5px;
  background: var(--color-surface); font: 500 16px/1 var(--font-sans);
}
.reading-launch:hover span { border-color: var(--color-accent); background: var(--color-surface-2); }
.reading-launch:focus-visible { outline: none; }
.reading-launch:focus-visible span { outline: 3px solid var(--color-focus); outline-offset: 1px; }
@media screen and (max-width: 76rem) {
  body:has(.reading-settings:not([hidden])) :is(main .container, footer .container, .preview-mark) {
    padding-inline-end: max(var(--gutter), calc(48px + env(safe-area-inset-right, 0px)));
  }
}
.reading-panel {
  position: fixed; inset: 0 0 0 auto; box-sizing: border-box; container: reading-drawer / inline-size;
  width: min(24rem, calc(100% - 12px)); max-width: 100%; height: 100%; height: 100dvh; max-height: none;
  overflow: auto; overflow-wrap: anywhere; overscroll-behavior: contain; margin: 0;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 16px;
  border: 0; border-inline-start: 1px solid var(--color-line-strong);
  color: var(--color-ink); background: var(--color-surface);
}
.reading-panel::backdrop { background: rgb(12 30 42 / 28%); }
html:has(.reading-panel[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .reading-panel[open] { animation: reader-enter 150ms ease-out; }
  @keyframes reader-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
}
.reading-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-block: .45rem; }
.reading-panel__heading h2 { font: 600 1.125rem/1.3 var(--font-sans); margin: 0; }
#reading-close {
  min-height: 44px;
  min-width: 44px;
  border: 0;
  padding: .25rem;
  color: var(--color-accent);
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.reading-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: .9rem 1.2rem; }
.reading-fields label { display: block; min-width: 0; font-weight: 600; }
.reading-fields select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: .3rem;
  padding: .3rem .4rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 400;
}
#reading-close svg { display: none; }
.reading-choice { display: block; }
.reading-choice-display { display: none; }
@container reading-drawer (max-width: 18em) {
  .reading-panel__heading { align-items: flex-start; }
  .reading-panel__heading h2 { min-width: 0; }
  #reading-close { display: grid; place-items: center; flex: none; padding: 0; }
  #reading-close span { display: none; }
  #reading-close svg { display: block; }
  .reading-choice { position: relative; display: grid; margin-top: .3rem; }
  .reading-fields .reading-choice select { position: absolute; inset: 0; height: 100%; margin: 0; opacity: 0; }
  .reading-choice-display {
    display: flex; align-items: center; justify-content: space-between; gap: .4em;
    min-width: 0; min-height: 44px; padding: .3em .4em; font-weight: 400; line-height: 1.35;
    overflow-wrap: anywhere; pointer-events: none; border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control); color: var(--color-ink); background: var(--color-surface);
  }
  .reading-choice-display::after { content: ""; flex: none; width: .36em; height: .36em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.1em) rotate(45deg); }
  .reading-choice select:focus-visible + .reading-choice-display { outline: 3px solid var(--color-focus); outline-offset: 2px; }
}
.reading-check { display: flex; align-items: center; gap: .55rem; min-height: 44px; cursor: pointer; }
.reading-check input { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; accent-color: var(--color-accent); }
.reading-fields + .reading-check { margin-top: .65rem; }
.reading-save { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1.25rem; }
.reading-save button {
  min-height: 44px;
  padding: .35rem .8rem;
  color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-control);
  font: inherit;
  cursor: pointer;
}
.reading-note, .reading-notice { max-width: 75ch; font-size: .9375rem; color: var(--color-ink-soft); margin-top: .45rem; }
.reading-status:not(.reading-notice) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-reading-size] :is(.front-service-list a,.home-portfolio__entry,.masthead__actions,.article-content,.contact-layout > *, .reading-save > *) { min-width: 0; }
html[data-reading-size] :is(.badge,.status,.pill,.button,.field-row__value) { white-space: normal; overflow-wrap: anywhere; }
html:is([data-reading-font="dyslexic"],[data-reading-size="150"],[data-reading-size="175"],[data-reading-size="200"]) .nav-inline { display: none; }
html:is([data-reading-font="dyslexic"],[data-reading-size="150"],[data-reading-size="175"],[data-reading-size="200"]) .menu { display: block; }
html[data-reading-size] .work-diagram__number { font-size: .75rem; }
html[data-reading-size] .work-stages li > span { font-size: .875rem; }
@media (max-width: 40em) {
  .reading-fields { grid-template-columns: minmax(0,1fr); }
  .reading-settings select { line-height: 1.4; }
  html[data-reading-size] .masthead__inner { flex-wrap: wrap; }
  html[data-reading-size] .masthead__actions { flex-wrap: wrap; }
}
@media (max-width: 25em) {
  .masthead__inner { column-gap: 4px; }
  .masthead__actions { gap: 0; }
}
@media print {
  .reading-settings { display: none !important; }
}