/* mbabdallah.com: the personal page of Mohammad Abdallah.
   The palette is taken from his book, The Balance Lost: the cover's marigold field, its deep teal lettering and
   the orange line of its scales. The page reads like a title page followed by a bibliography. */

@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Variable-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --marigold: #F4C556;   /* the cover's field */
  --ink: #142A31;        /* the cover's lettering: 9.6:1 on marigold */
  --ink-soft: #2C4850;   /* secondary text: 6.4:1 on marigold */
  --beam: #C9481F;       /* the scales' orange: drawn lines only, never text */
  --rule: rgb(20 42 49 / .22);
  --bg: var(--marigold);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --link: var(--ink);

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --name: clamp(2.25rem, 0.9rem + 7vw, 7rem);
  --h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --entry: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --body: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --small: .9375rem;

  --margin: clamp(1.25rem, .5rem + 3.5vw, 4.5rem);
  --max: 76rem;
  --gap: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Dark: the cover turned over. Teal ground, marigold headings, warm off-white text. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11242A;
    --fg: #F1EAD6;        /* 13.6:1 on the teal ground */
    --fg-soft: #C9C2AE;   /* 9.0:1 */
    --link: #F4C556;      /* 10.3:1 */
    --rule: rgb(241 234 214 / .2);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.6;
}
/* Inter's single-storey a and open digits, for the sans text only: the same feature tags mean other things in
   EB Garamond (small capitals among them). */
body, .btn, .small { font-feature-settings: "cv11", "ss01"; }
.name, .role, h1, h2, h3, .contact p:not(.small), .top .mark, .essay-lede, .essay-body .pull, .essay-sign, .essay-next a { font-feature-settings: normal; }
.essay-sign span { font-feature-settings: "cv11", "ss01"; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, dl { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
}
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 1px; }

.skip {
  position: absolute; inset-inline-start: var(--margin); top: .75rem; z-index: 2;
  padding: .6rem 1rem; background: var(--fg); color: var(--bg); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

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

/* ---------------------------------------------------------- title page */

.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.25rem; }
.top .mark { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; letter-spacing: .06em; text-decoration: none; }
.top .studio { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; text-decoration: none; }
.studio-label { font-size: var(--small); color: var(--fg-soft); }
/* The Legazione lockup, unaltered: ink on the marigold page, white in dark mode. Its clear space (one stroke,
   a tenth of its height) is kept by the gap and the padding around it. */
.studio-logo { height: 1.375rem; width: auto; }
@media (hover: hover) and (pointer: fine) {
  .top .studio:hover .studio-label { color: var(--fg); text-decoration: underline; text-underline-offset: .22em; }
}
.logo-title img { height: 1.75rem; width: auto; margin-block: .25rem; }
@media (max-width: 22rem) { .studio-label { display: none; } }

.title-page {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  align-items: end;
  padding-block: clamp(2.5rem, 1rem + 6vw, 6rem) var(--gap);
}
.name {
  font-family: var(--serif);
  font-weight: 560;
  font-size: var(--name);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.name span { display: block; }
/* The one drawn line: the beam of the cover's scales. It sets once, on arrival. */
.beam {
  display: block;
  width: min(100%, 26rem);
  height: 3px;
  margin-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background: var(--beam);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .beam { animation: beam 900ms var(--ease-out) 150ms both; }
  @keyframes beam { from { transform: scaleX(0); } }
}
@media (prefers-color-scheme: dark) { .beam { background: #E07A4E; } }
.role { font-family: var(--serif); font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); line-height: 1.3; max-width: 34rem; }
.intro { margin-top: 1.25rem; color: var(--fg-soft); max-width: 34rem; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 2rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .7rem 1.25rem;
  background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 550; font-size: var(--small);
  transition: transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}
.actions .link { font-size: var(--small); font-weight: 500; display: inline-flex; align-items: center; min-height: 2.75rem; }

.cover { justify-self: start; width: clamp(9.5rem, 6rem + 14vw, 17.5rem); margin: 0; }
.cover img { box-shadow: 0 1px 0 rgb(20 42 49 / .25), 0 18px 40px -18px rgb(20 42 49 / .55); }
.cover figcaption { margin-top: .75rem; font-size: var(--small); color: var(--fg-soft); }

@media (min-width: 52rem) {
  .title-page { grid-template-columns: minmax(0, 1fr) auto; }
  .cover { justify-self: end; }
}

/* ---------------------------------------------------------- bibliography */

.part { padding-block: var(--gap) 0; }
.part:last-of-type { padding-bottom: var(--gap); }
.part-head { display: grid; gap: .5rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--fg); }
.part-head h2 { font-family: var(--serif); font-weight: 500; font-size: var(--h2); line-height: 1.1; }
.part-head p { color: var(--fg-soft); font-size: var(--small); max-width: 40rem; }
@media (min-width: 52rem) {
  .part-head { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; column-gap: 2rem; }
  .part-head p { grid-column: 2; }
  .part-head h2 { grid-column: 1 / -1; }
}

.entries { display: grid; }
.entry {
  display: grid;
  gap: .35rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.entry .when { font-size: var(--small); color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.entry h3 { font-family: var(--serif); font-weight: 500; font-size: var(--entry); line-height: 1.2; }
.entry .what { color: var(--fg-soft); max-width: 40rem; text-wrap: pretty; }
.entry .where { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: var(--small); margin-top: .35rem; }
.entry .where a { display: inline-flex; align-items: center; min-height: 2rem; }
@media (min-width: 52rem) {
  .entry { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
  .entry > :not(.when) { grid-column: 2; }
  .entry .when { grid-row: 1; }
}

/* ---------------------------------------------------------- contact */

.contact { display: grid; gap: 1rem; padding-top: 1.75rem; max-width: 44rem; }
.contact p { font-family: var(--serif); font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); line-height: 1.35; }
.contact .small { font-family: var(--sans); font-size: var(--small); color: var(--fg-soft); }

.foot { padding-bottom: 2.5rem; font-size: var(--small); color: var(--fg-soft); }
.foot p { padding-top: 2rem; border-top: 1px solid var(--rule); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------- essays */

.essay { max-width: calc(44rem + 2 * var(--margin)); padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--gap); }
.essay-back { font-size: var(--small); }
.essay-back a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.essay-meta { margin-top: 1.5rem; font-size: var(--small); color: var(--fg-soft); }
.essay-title {
  margin-top: .75rem;
  font-family: var(--serif);
  font-weight: 520;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.essay-title em { font-style: italic; }
.essay-lede { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.45; text-wrap: pretty; }
.essay-body { margin-top: 2.5rem; font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.75; }
.essay-body > * + * { margin-top: 1.25rem; }
.essay-body h2 { margin-top: 3rem; font-family: var(--serif); font-weight: 520; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); line-height: 1.2; }
.essay-body strong { font-weight: 650; }
.essay-body ul { display: grid; gap: .75rem; }
.essay-body li { position: relative; padding-inline-start: 1.75rem; }
/* List markers are short lengths of the beam. */
.essay-body li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .82em;
  width: 1rem; height: 2px; background: var(--beam);
}
@media (prefers-color-scheme: dark) { .essay-body li::before { background: #E07A4E; } }
.essay-body .pull {
  margin-block: 2.25rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--beam);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.3;
  text-wrap: balance;
}
@media (prefers-color-scheme: dark) { .essay-body .pull { border-inline-start-color: #E07A4E; } }
.essay-sign { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 1.25rem; }
.essay-sign span { display: block; font-family: var(--sans); font-size: var(--small); color: var(--fg-soft); }

.essay-next { max-width: calc(44rem + 2 * var(--margin)); padding-bottom: var(--gap); }
.essay-next p { font-size: var(--small); color: var(--fg-soft); padding-top: 1.75rem; border-top: 2px solid var(--fg); }
.essay-next a { display: inline-block; margin-top: .5rem; font-family: var(--serif); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.25; }