/* ariyaniqbal.com
   Ivory and burgundy by day, navy and gilt by night. Typography carries the ornament.
   Everything lives inside a centred 4:3 frame (3:4 on portrait screens). */

:root {
  /* Day: from the coronation. Ivory, sepia ink and burgundy. */
  --surround: #ebe2d3;   /* the margin outside the frame, a shade deeper than the page */
  --page:     #f6efe3;
  --ink:      #261d19;
  --muted:    #6f675c;
  --accent:   #800020;   /* burgundy */

  --serif: ui-serif, "Times New Roman", serif;  /* New York on Apple devices, Times New Roman elsewhere */

  --gutter: clamp(16px, 4vmin, 48px);
  color-scheme: light;
}

/* Night: from the painted ceiling. Navy, ivory text, sky-blue second voice and gilt.
   Follows the visitor's light or dark setting, which on iPhone can change at sunset. */
@media (prefers-color-scheme: dark) {
  :root {
    --surround: #000b22;
    --page:     #01153e;
    --ink:      #f6efe3;
    --muted:    #9aa2c6;
    --accent:   #d6a45c;   /* gilt */
    color-scheme: dark;
  }
}

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

html {
  font-family: var(--serif);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  hanging-punctuation: first;
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--surround);
  color: var(--ink);
  transition: background-color 600ms ease, color 600ms ease;
}

/* ---------- The frame ---------- */

.frame {
  /* the largest 4:3 rectangle that fits the viewport inside the gutters */
  width: min(calc(100vw - 2 * var(--gutter)),
             calc((100svh - 2 * var(--gutter)) * 4 / 3));
  aspect-ratio: 4 / 3;
  background: var(--page);
  transition: background-color 600ms ease;
  container-type: size;
  position: relative;

  display: grid;
  grid-template-columns: 26% 1fr;
  grid-template-rows: minmax(0, 1fr);   /* the frame never grows; long text scrolls inside it */
  padding: 7cqh 6cqw;
  column-gap: 4cqw;
}

@media (orientation: portrait) {
  .frame {
    width: min(calc(100vw - 2 * var(--gutter)),
               calc((100svh - 2 * var(--gutter)) * 3 / 4));
    aspect-ratio: 3 / 4;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 7cqw 8cqw;
    row-gap: 6cqh;
  }
}

/* ---------- Sidebar ---------- */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  view-transition-name: sidebar; /* stays perfectly still between pages */
}

.monogram {
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-caps: all-small-caps;
  color: var(--accent);
  text-decoration: none;
  align-self: start;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.nav a {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  align-self: start;
}

/* Current page: burgundy and italic, so it never relies on colour alone */
.nav a[aria-current="page"] {
  color: var(--accent);
  font-style: italic;
}

/* The menu button and the page numbers beside each link appear only on phones */
.menu-button,
.nav-folio { display: none; }

/* ---------- Phone menu: an upright frame has no room for the sidebar ---------- */

@media (orientation: portrait) {
  .sidebar {
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
    height: 1.5rem;
    z-index: 2;   /* keeps the open menu above the page content */
  }

  .sidebar .monogram { align-self: center; margin-right: auto; }
  .social { align-self: center; }

  .menu-button {
    display: block;
    padding: 0.6rem;
    margin: -0.6rem;
    border: 0;
    background: none;
    color: var(--ink);
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-button:active { color: var(--accent); opacity: 0.72; }
  .icon-close,
  .menu-open .icon-open { display: none; }
  .menu-open .icon-close { display: block; }

  /* The list of pages covers the content area, beneath the top line */
  .nav {
    position: absolute;
    z-index: 1;
    top: calc(7svw + 1.5rem + 6svh);
    right: 8svw;
    bottom: 7svw;
    left: 8svw;
    gap: 1.1rem;
    background: var(--page);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease-out, visibility 0s 180ms;
  }
  .menu-open .nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms ease-out;
  }

  .nav a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    align-self: stretch;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .nav-folio {
    display: inline;
    font-size: 1rem;
    font-style: normal;
    color: var(--muted);
  }
}

.social {
  color: var(--ink);
  align-self: start;
  line-height: 0;
  margin-left: -1px;
}

/* Each link gets a tap area of roughly 44 points without moving on screen */
.monogram,
.nav a,
.social,
.rows a {
  padding: 0.7rem;
  margin: -0.7rem;
}

/* ---------- Content ---------- */

/* Long text scrolls inside the frame and fades softly at its edges.
   The fade sits in the frame's margin, so nothing is faded until it moves. */
main {
  --fade: 4cqh;   /* the fade is a share of the frame, so it always fits inside the frame’s margin */
  view-transition-name: content;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: break-word;
  overscroll-behavior: contain;
  margin-block: calc(-1 * var(--fade));
  padding-block: var(--fade);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--fade),
                              #000 calc(100% - var(--fade)), transparent);
}

h1,
.dialogue {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.75rem, 6cqh, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;  /* tighter as it grows */
}

.rows {
  margin: 0;
  display: grid;
  gap: 1.1rem;
  max-width: 34rem;
}

.rows p { margin: 0; font-size: 1.0625rem; line-height: 1.5; }

.label {
  font-style: italic;
  color: var(--muted);
}

.note {
  color: var(--muted);
  max-width: 32rem;
}

.rows a {
  color: var(--ink);
  text-decoration: none;
}

.reply {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Page number, set like a folio in a printed book */
.folio {
  position: absolute;
  right: 6cqw;
  bottom: 5cqh;
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  view-transition-name: folio;
}

/* ---------- Response: feedback on press, instant ---------- */

a { -webkit-tap-highlight-color: transparent; }

@media (hover: hover) {
  .nav a:hover,
  .rows a:hover,
  .social:hover,
  .monogram:hover { color: var(--accent); transition: color 120ms ease-out; }
}

a:active { color: var(--accent); opacity: 0.72; transition: none; }

a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  border-radius: 1px;
}

/* ---------- Navigation: a quiet cross-fade of the content only ---------- */

@view-transition { navigation: auto; }

::view-transition-old(content),
::view-transition-new(content),
::view-transition-old(folio),
::view-transition-new(folio) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

::view-transition-group(sidebar) { animation: none; }

/* Reduce Motion: nothing moves. The page fade stays, because a fade involves no movement. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (prefers-contrast: more) {
  :root { --muted: #3d3832; --surround: #d9d0bf; }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --muted: #c9cfe6; --surround: #000611; }
}

/* Screen-reader-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}