/* ==========================================================
   Essie Bode: the personals page
   Pink newsprint, aubergine ink, one violet spot colour.
   ========================================================== */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Paper and ink (the pastel family, set as newsprint) */
  --paper: #ffd6e0;          /* pastel pink: the sheet */
  --paper-light: #ffe7ee;    /* ad fill */
  --lavender: #e6e6fa;       /* alternate ad fill */
  --peach: #ffe5d9;
  --ink: #25132f;            /* aubergine body ink */
  --ink-soft: #4b2f5c;       /* secondary text, tinted from the ink */
  --violet: #7a3fd0;         /* the one spot colour */
  --violet-light: #b388ff;
  --rose: #ff8fa3;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Libre Franklin", system-ui, sans-serif;

  --rule: 1.5px solid var(--ink);
  --gutter: clamp(1rem, 2.2vw, 2rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
  scrollbar-color: var(--ink) var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Newsprint grain: fixed so the page reads as one sheet */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .35 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--violet); color: var(--paper); }

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

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }

:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 3px;
}

ul { list-style: none; padding: 0; }

em { font-style: italic; }

.wrap {
  width: min(100% - 2 * var(--gutter), 1440px);
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Content arrives from the CMS; fade the sheet in once it has */
body.is-loading main,
body.is-loading .masthead,
body.is-loading .colophon { opacity: 0; }
main, .masthead, .colophon { transition: opacity 0.5s var(--ease-out); }

/* ---------- Masthead ---------- */

.masthead { padding-top: clamp(1rem, 2.5vw, 2rem); }

.masthead__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 6px double var(--ink);
}

.masthead__edition {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: var(--rule);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masthead__name {
  font-family: var(--display);
  font-weight: 850;
  font-size: clamp(3.25rem, 8vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-decoration: none;
}

.masthead__name { display: inline-flex; align-items: flex-start; gap: 0.6rem; }
.masthead__tag {
  font-size: 0.24em;
  line-height: 1;
  letter-spacing: 0.06em;
  background: var(--violet);
  color: #fff;
  padding: 0.3em 0.45em 0.32em;
  transform: rotate(-4deg) translateY(0.25em);
}

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.5rem;
  padding-bottom: 0.2rem;
}

.masthead__nav a {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.25rem;
}

.masthead__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.masthead__nav a:hover::after,
.masthead__nav a[aria-current="true"]::after { transform: scaleX(1); }
.masthead__nav a:hover { color: var(--violet); }

/* ---------- Front page: a wall of ads in ruled columns ---------- */

.front {
  display: grid;
  grid-template-columns: 1fr 1.1fr 0.85fr;
  align-items: start;
  padding-block: 1.25rem 0;
}

.front__col {
  padding-inline: var(--gutter);
  border-left: var(--rule);
  align-self: stretch;
}
.front__col:first-child { padding-left: 0; border-left: 0; }
.front__col:last-child { padding-right: 0; }

.ad--hero { padding: 0.9rem; }
.ad--hero .portrait__frame { border-width: 1.5px; }

.hook {
  margin: 1rem 0 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 4.4vw, 4.4rem);
  line-height: 0.86;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--violet);
}

.hook__sub {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  font-style: italic;
  font-weight: 500;
}

/* Portrait: the ink layer lifts to show the colour print underneath */
.portrait { position: relative; }

.portrait__frame {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  overflow: hidden;
  aspect-ratio: 1000 / 1116;
}

.portrait__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.portrait__ink {
  filter: url(#ink-tritone) contrast(1.05);
  transition: opacity 0.7s var(--ease-out);
}
.portrait:hover .portrait__ink { opacity: 0; }

/* ---------- Ads: the shared box ---------- */

.ad {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  padding: 1rem 1.1rem 1.1rem;
}

.front__col--reply .ad + .ad, .front__col--reply .newsletter + .ad { margin-top: 1rem; }

.ad__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.ad__label {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.ad__label i { font-size: 1rem; color: var(--violet); vertical-align: -0.1em; margin-right: 0.3rem; }

.ad__fact { font-weight: 700; line-height: 1.3; }
.ad__meta { font-size: 0.875rem; color: var(--ink-soft); }
.ad__body { font-size: 0.9375rem; line-height: 1.45; }

.ad--small { background: transparent; border-width: 1.5px; padding: 0.7rem 0.9rem; }

/* The pen: a hand-drawn ring that circles an ad */
.pen {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.pen path {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-dashoffset: var(--pen-length, 2000);
  transition: stroke-dashoffset 0.75s var(--ease-out);
}
.is-circled > .pen path,
.ad:hover > .pen path,
.listing:hover > .pen path,
.listing:focus-visible > .pen path,
.ad:focus-within > .pen path { stroke-dashoffset: 0; }

/* Reversed bar head, the personals column header */
.bar {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  background: var(--ink);
  color: var(--paper);
  padding: 0.35rem 0.6rem 0.4rem;
  margin-bottom: 1rem;
}

.bar__cat {
  margin-left: 0.55em;
  font-size: 0.62em;
  letter-spacing: 0.06em;
  color: var(--violet-light);
  white-space: nowrap;
}
.bar__cat:empty { display: none; }

/* Personals furniture: run-in openers and ad footers */
.runin {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4em;
  line-height: 0.95;
  text-transform: uppercase;
  margin-right: 0.15em;
}

.ad__copy { font-size: 0.97rem; line-height: 1.5; }

.ad__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--ink);
}
.ad__foot .stamp { margin-top: 0; }

.ad__sign { font-size: 0.8125rem; font-weight: 700; }


/* ---------- Newsletter (reply box) ---------- */

.ad--reply { background: var(--lavender); }

.newsletter__row {
  display: flex;
  margin-top: 0.85rem;
  border: 2px solid var(--ink);
  background: #fff;
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.7rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  caret-color: var(--violet);
}
.newsletter__input::placeholder { color: #7d6a87; }
.newsletter__input:focus { outline: none; }
.newsletter__row:focus-within { outline: 2.5px solid var(--violet); outline-offset: 2px; }

.newsletter__button {
  border: 0;
  border-left: 2px solid var(--ink);
  background: var(--violet);
  color: #fff;
  padding: 0 1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s;
}
.newsletter__button:hover { background: var(--ink); }
.newsletter__button:disabled { background: var(--ink-soft); cursor: progress; }

.newsletter__status {
  min-height: 1.4em;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.newsletter[data-state="error"] .newsletter__status { color: #a1173a; }
.newsletter[data-state="done"] .newsletter__row { display: none; }
.newsletter[data-state="done"] .newsletter__status {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--violet);
}

.newsletter__trap { position: absolute; left: -9999px; }

/* ---------- Social ---------- */

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1.5px solid var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.social a:hover { background: var(--ink); color: var(--paper); }
.social i { font-size: 1.05rem; flex: none; }

/* ---------- Sections ---------- */

.section { padding-top: clamp(3.5rem, 7vw, 6rem); }

.section__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 0.3rem 0.6rem 0.4rem;
  margin-bottom: 1.5rem;
}

/* Manuscripts: stacked ads in the front-page column */
.manuscripts { display: grid; gap: 1rem; }
.manuscript:nth-child(even) { background: var(--peach); }
.stamp {
  align-self: flex-start;
  margin-top: 1.25rem;
  padding: 0.2rem 0.6rem 0.25rem;
  border: 2px solid var(--violet);
  color: var(--violet);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.stamp--solid { background: var(--violet); color: #fff; }

/* About: a long-form ad set in newspaper columns */
.bio {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 3fr;
  gap: 0 var(--gutter);
}

.bio__head {
  padding-right: var(--gutter);
  border-right: var(--rule);
}

.bio__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.bio__pronouns {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
}

.bio__body {
  columns: 2 22rem;
  column-gap: calc(var(--gutter) * 1.5);
  column-rule: var(--rule);
  font-size: 1.125rem;
  line-height: 1.6;
}
.bio__body p + p { margin-top: 1em; }
.bio__body p:first-child::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 800;
  font-size: 4.6em;
  line-height: 0.78;
  padding: 0.06em 0.08em 0 0;
  color: var(--violet);
}
.bio__body em {
  font-weight: 650;
  background: linear-gradient(transparent 58%, var(--rose) 58%, var(--rose) 90%, transparent 90%);
}

/* Writing: classified listings, one ruled row per piece */
.listings { border-top: var(--rule); }

.listing {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 11rem 1.25rem;
  gap: 0.5rem var(--gutter);
  align-items: baseline;
  padding: 1.1rem 0 1.2rem;
  border-bottom: var(--rule);
  text-decoration: none;
  transition: background-color 0.25s;
}
.listing:hover { background: var(--paper-light); }

.listing__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}


.listing__venue { font-weight: 500; font-size: 1.0625rem; }
.listing__type {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-left: 0.4rem;
  white-space: nowrap;
}
.listing__desc { margin-top: 0.3rem; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft); max-width: 60ch; }
.listing .stamp { margin: 0; justify-self: start; font-size: 0.95rem; }

.listing__go {
  width: 1.1rem; height: 1.1rem;
  align-self: center;
  transition: transform 0.3s var(--ease-out);
}
.listing:hover .listing__go { transform: translate(3px, -3px); }

/* Current reads: small-type column listings */
.reads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0;
}
.reads li {
  padding: 0 var(--gutter) 0.25rem;
  border-left: var(--rule);
}
.reads li:first-child { border-left: 0; padding-left: 0; }

.reads__category {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.375rem;
  text-transform: uppercase;
  color: var(--violet);
}
.reads__title { font-weight: 700; font-size: 1.125rem; line-height: 1.3; margin-top: 0.25rem; }
.reads__author { font-style: italic; color: var(--ink-soft); }

/* ---------- Colophon ---------- */

.colophon { margin-top: clamp(4rem, 8vw, 7rem); padding-bottom: 2rem; }

.colophon__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem var(--gutter);
  padding-top: 1.25rem;
  border-top: 6px double var(--ink);
}

.colophon__name {
  font-family: var(--display);
  font-weight: 850;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  line-height: 0.8;
  text-transform: uppercase;
}

.colophon__tagline {
  margin-top: 1rem;
  font-size: 1.25rem;
  font-style: italic;
  max-width: 30ch;
}

.colophon__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

.colophon__heading {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
  border-bottom: var(--rule);
}

.colophon__links li + li { margin-top: 0.3rem; }
.colophon__links a { text-decoration: none; font-weight: 500; }
.colophon__links a:hover { text-decoration: underline; color: var(--violet); }

.colophon__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: var(--rule);
  font-size: 0.8125rem;
}
.social--inline { margin-top: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .front { grid-template-columns: 1fr 1fr; }
  .front__col--reply {
    grid-column: 1 / -1;
    border-left: 0;
    padding: 1.5rem 0 0;
    margin-top: 1.5rem;
    border-top: var(--rule);
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1rem;
    align-items: start;
  }
  .front__col--reply > * { margin: 0 !important; }
  .front__col--reply .social { grid-column: 1 / -1; }
  .colophon__inner { grid-template-columns: 1fr 1fr; }
  .colophon__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .masthead__inner { grid-template-columns: 1fr; }
  .masthead__nav { justify-content: flex-start; gap: 0.25rem 1rem; margin-top: 0.75rem; }
  .front { grid-template-columns: 1fr; }
  .front__col { border-left: 0; padding-inline: 0; }
  .front__col + .front__col { margin-top: 2rem; }
  .front__col--reply { order: 2; }
  .front__col--manuscripts { order: 3; }
  .portrait__frame { aspect-ratio: 1 / 1; }
  .front__col--reply { grid-template-columns: 1fr; }
  .bio { grid-template-columns: 1fr; }
  .bio__head { border-right: 0; border-bottom: var(--rule); padding: 0 0 0.9rem; margin-bottom: 1.1rem; }
  .reads { gap: 1.25rem; }
  .listing { grid-template-columns: 1fr 1.25rem; }
  .listing__title, .listing__info, .listing .stamp { grid-column: 1; }
  .listing__go { grid-column: 2; grid-row: 1; }
  .listing__type { display: block; margin: 0.15rem 0 0; }
  .reads li { border-left: 0; padding: 0 0 1rem; border-bottom: var(--rule); }
  .colophon__inner { grid-template-columns: 1fr; }
  .colophon__links { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}