/* ==========================================================================
   sc-aasr.gr — public stylesheet
   Hand-written. No framework, no preprocessor, no build step.
   See DESIGN.md for the reasoning behind every value in here.
   ========================================================================== */

/* --- Fonts: self-hosted, Greek + Latin subsets only ---------------------- */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/ebgaramond-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/ebgaramond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ebgaramond-greek-italic.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ebgaramond-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Palette, sampled from the emblem */
  --ink:         #1A1A1F;
  --ink-soft:    #5C5C66;
  --purple:      #5A2A5A;
  --purple-mid:  #823C82;
  --purple-wash: #EDE4ED;
  --gold:        #C8963C;
  --grey:        #B4B4B4;
  --paper:       #FFFFFF;
  --paper-alt:   #F7F7F8;
  --rule:        #E3E3E6;

  /* Families */
  --serif: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.75rem;

  /* Measure and rhythm */
  --wrap:    1080px;
  --measure: 66ch;
  --gutter:  20px;
  --band:    72px;
}

@media (min-width: 600px) {
  :root { --gutter: 24px; }
}
@media (min-width: 900px) {
  :root { --band: 96px; }
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, p, figure, figcaption { margin: 0; }

/* --- Shared layout ------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

/* Visible for keyboard users only; never a focus ring removal. */
:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 2px;
}


/* --- Header -------------------------------------------------------------- */
/* Centred, because there is no navigation yet: a left-aligned emblem with an
   empty right side would read as unfinished. Not sticky. */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--gold);
  padding-block: 28px;
  text-align: center;
}

.masthead__logo {
  display: inline-block;
  line-height: 0;
}

/* The emblem is the masthead. It carries the organisation's name around its
   own arc, so nothing is set beneath it and it can be read at this size. */
.masthead__logo img {
  height: 116px;
  width: auto;
  margin-inline: auto;
}

@media (min-width: 700px) {
  .masthead { padding-block: 36px; }
  .masthead__logo img { height: 168px; }
}

/* --- Title band ---------------------------------------------------------- */

.title-band {
  background: var(--paper);
  padding-block: 56px 0;
  text-align: center;
}

.title-band__h1 {
  max-width: 700px;
  margin-inline: auto;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

@media (min-width: 720px) {
  .title-band { padding-block: 80px 0; }
  .title-band__h1 { font-size: var(--fs-2xl); }
}

/* --- Welcome ------------------------------------------------------------- */

/* The change of background is itself the separator, so the space below the
   signature is shorter than the space above the section. */
.welcome { padding-block: var(--band) calc(var(--band) * 0.55); }

.welcome__grid { display: grid; gap: 32px; }

/* The portrait is first in source order so that it sits above the text on
   narrow screens without any reordering trickery. */
.welcome__portrait {
  max-width: 340px;
  margin-inline: auto;
}

.welcome__portrait img {
  width: 100%;
  border: 1px solid var(--rule);
}

.welcome__prose > * + * { margin-top: 1.05em; }

.welcome__lead {
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.welcome__body p { font-size: var(--fs-md); line-height: 1.7; }
.welcome__body > * + * { margin-top: 1.05em; }
.welcome__body ul, .welcome__body ol { padding-left: 1.4em; }
.welcome__body blockquote {
  margin: 0;
  padding-left: 1.2em;
  border-left: 1px solid var(--gold);
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .welcome__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
  }
  .welcome__portrait {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
  }
  .welcome__prose {
    grid-column: 1;
    grid-row: 1;
  }
}

/* --- Signature ----------------------------------------------------------- */

.signature { margin-top: 44px; text-align: center; }

.signature__rule {
  width: 48px;
  height: 1px;
  margin: 0 auto 16px;
  border: 0;
  background: var(--gold);
}

.signature__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--ink);
}

.signature__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .signature { text-align: right; }
  .signature__rule { margin-right: 0; margin-left: auto; }
}

/* --- Council photograph -------------------------------------------------- */

.council {
  background: var(--paper-alt);
  padding-block: var(--band);
}

.council__figure { margin: 0; }

.council__figure img { width: 100%; }

.council__caption {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Footer -------------------------------------------------------------- */
/* The one place purple is a large area. It works because everything above is
   white. Two lines only — this site has no contact details. */

/* The emblem is drawn for a light ground: on the deep purple its black
   lettering and the magenta star ring lose nearly all of their contrast. The
   band therefore sits on the palest purple, which keeps the colour present
   without it becoming a large flat fill. A gold hairline opens the band,
   answering the one that closes the masthead. */
.site-footer {
  background: var(--purple-wash);
  border-top: 1px solid var(--gold);
  color: var(--ink);
  padding-block: 48px;
  text-align: center;
}

.site-footer__logo {
  line-height: 0;
}

.site-footer__logo img {
  height: 88px;
  width: auto;
  margin-inline: auto;
}

.site-footer__legal {
  max-width: 470px;
  margin: 28px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(90, 42, 90, 0.18);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (min-width: 700px) {
  .site-footer { padding-block: 64px; }
  .site-footer__logo img { height: 107px; }
}

/* --- Links --------------------------------------------------------------- */

a { color: var(--purple); }

.welcome__body a,
.site-footer a {
  text-decoration: underline;
  text-decoration-color: var(--purple-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 120ms linear;
}

.welcome__body a:hover,
.site-footer a:hover { text-decoration-thickness: 2px; }

.site-footer a { color: var(--purple); text-decoration-color: var(--purple-mid); }

/* --- Error page ---------------------------------------------------------- */

.notice {
  padding-block: var(--band);
  text-align: center;
}

.notice__title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.2;
}

.notice__text { margin-top: 16px; color: var(--ink-soft); }

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}