/* Bryan Barash, personal site. Plain CSS, no build step, no JS, no external
   requests. The whole site must render offline from this directory. */

:root {
  /* Warm paper, deep slate ink, one oxblood seal. The seal is structural, not
     decorative: it marks links, the current page, and the rule under each h1. */
  --paper: #f8f6f2;
  --paper-2: #efeae1;
  --ink: #1b2430;
  --muted: #5a6472;
  --rule: #ddd7cc;
  --seal: #8a2733;

  /* One column width for the header, the prose and the footer, so every left
     edge on the page lines up. The portrait is the only thing that breaks it,
     which is what makes the break read as deliberate. */
  --page: 49rem;

  /* Iowan ships on Apple, Sitka and Constantia on Windows. All are sturdy
     low-contrast text faces. Georgia is last, as a floor, not a choice. */
  --serif: "Iowan Old Style", "Sitka Text", "Hoefler Text", Charter, Constantia,
    "Palatino Linotype", Palatino, Georgia, serif;
  --label: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12171f;
    --paper-2: #1a212b;
    --ink: #e9e6e0;
    --muted: #9aa4b2;
    --rule: #2c3543;
    --seal: #e59a94;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  font-kerning: normal;
}

/* --- Shared shell ------------------------------------------------------- */

.header-inner,
.footer-inner,
main {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

header {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.15rem;
}

.brand {
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}

nav a:hover {
  color: var(--ink);
}

nav a[aria-current="page"] {
  color: var(--seal);
  border-bottom-color: var(--seal);
}

main {
  padding-block: 3.25rem 4.5rem;
}

footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}

.footer-inner {
  padding-block: 1.6rem;
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-inner p {
  margin: 0;
}

/* --- Type --------------------------------------------------------------- */

h1 {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 1.4rem;
}

/* The seal rule under the name. Short, so it reads as a mark rather than a
   divider, which is what keeps this off the hairline-broadsheet look. */
h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 1.1rem;
  background: var(--seal);
}

h2 {
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 2.9rem 0 0.85rem;
}

h3 {
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  margin: 2rem 0 0.5rem;
  color: var(--muted);
}

/* No per-paragraph max-width. The column already sets the measure, and capping
   each paragraph would leave the floated portrait stranded in the margin with
   a gap instead of being wrapped by the text. */
p {
  margin: 0 0 1.25rem;
}

a {
  color: var(--seal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --- The portrait ------------------------------------------------------- */

/* Desktop: the photo hangs into the right margin and the opening paragraphs
   set around it, so it sits inside the composition rather than on top of it.
   The source is a bright backlit shot with a lot of blown-out window behind
   him, so the two outer edges dissolve into the paper instead of stopping at
   a hard rectangle. No blend mode: multiply against a light ground erased him.
   His face is at the left of the frame, so the fade runs away from it. */
.portrait {
  float: right;
  width: 16.5rem;
  margin: 0.4rem 0 1rem 2.25rem;
}

/* The portrait only hangs out past the column once the viewport is wide enough
   to absorb it. Applying the negative margin unconditionally pushed the page
   into horizontal scroll at every width between the column and the breakpoint. */
@media (min-width: 70rem) {
  .portrait {
    margin-right: -6rem;
  }
}

.headshot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Square source into a portrait box is height-constrained, so only the x
     value does anything here. */
  object-position: 50% 50%;
  /* One diagonal mask fades the image itself toward the outer corner, so it
     dissolves into whatever the ground is and needs no dark-mode variant. Two
     stacked overlay gradients left a visible seam where they crossed. */
  -webkit-mask-image: linear-gradient(118deg, #000 55%, transparent 97%);
  mask-image: linear-gradient(118deg, #000 55%, transparent 97%);
}

/* /about/ leads with its own heading, so it takes a byline-scale avatar rather
   than repeating the home portrait two clicks later. */
.page-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.page-head h1 {
  margin: 0;
}

.page-head h1::after {
  margin-top: 0.85rem;
}

.headshot-sm {
  width: 62px;
  max-width: 62px;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--rule);
}

/* --- Narrow ------------------------------------------------------------- */

@media (max-width: 46rem) {
  body {
    font-size: 1.0625rem;
  }

  main {
    padding-block: 0 3.5rem;
  }

  /* The float would leave a stranded column at this width, so the portrait
     becomes a different object: full bleed under the header, dissolving down
     into the paper, with the name set immediately beneath it. */
  .doc--paras .portrait {
    float: none;
    width: auto;
    margin: 0 -1.5rem 1.5rem;
  }

  .doc--paras .headshot {
    aspect-ratio: 3 / 2;
    object-position: 50% 28%;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }

  .doc--sections,
  .doc {
    padding-top: 3rem;
  }

  .doc--paras {
    padding-top: 0;
  }

  h2 {
    margin-top: 2.4rem;
  }
}

@media (max-width: 26rem) {
  .header-inner {
    padding-block: 0.9rem;
  }

  .page-head {
    gap: 0.8rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: text-decoration-thickness 0.12s ease;
  }
}