/* Sydney Lewis Levin - blues and blacks, organic shapes */

:root {
  --ink: #dce9f5;
  --ink-2: rgb(220 233 245 / 0.72);
  --ink-3: rgb(220 233 245 / 0.5);
  --hairline: rgb(220 233 245 / 0.12);
  --page: #070f1c;
  --card: #0d1a2c;
  --accent: #3a7ca5;
  --accent-soft: #6fb1d6;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.sea {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(420px 300px at 88% -4%, rgb(58 124 165 / 0.30), transparent 72%),
    radial-gradient(340px 420px at -8% 26%, rgb(58 124 165 / 0.20), transparent 72%),
    radial-gradient(520px 380px at 108% 72%, rgb(111 177 214 / 0.14), transparent 72%),
    radial-gradient(300px 260px at 30% 108%, rgb(58 124 165 / 0.12), transparent 70%);
}
.sea > * { position: relative; z-index: 1; }

.bgphoto {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center 25%;
  -webkit-mask-image: linear-gradient(to bottom, black 52%, transparent 94%);
  mask-image: linear-gradient(to bottom, black 52%, transparent 94%);
}
.bgphoto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(7 15 28 / 0.48), rgb(7 15 28 / 0.66));
}

.wrap { max-width: 680px; margin: 0 auto; padding: 40px 20px 64px; }

header h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
header .fact { margin: 0 0 14px; color: var(--ink-2); font-size: 13px; }
header .intro { margin: 0 0 22px; color: var(--ink); font-size: 14px; }

.file-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; border-bottom: 1px solid var(--hairline); margin-bottom: 28px; }
.file-nav a { padding: 10px 0; color: var(--ink); text-decoration: none; position: relative; }
.file-nav a:hover { color: var(--ink); }
.file-nav a[aria-current="page"] { color: var(--ink); }
.file-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: 5px; height: 7px;
  background: rgb(58 124 165 / 0.55); border-radius: 62% 38% 55% 45% / 100% 100% 90% 90%;
  transform: rotate(-1deg); z-index: -1;
}
@media (max-width: 600px) { .file-nav a { display: inline-flex; align-items: center; min-height: 44px; } }

main section { margin-bottom: 40px; }
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500; font-size: 24px;
  margin: 0 0 18px; padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
h3 { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
h3 .sub { font-weight: 400; font-size: 13px; color: var(--ink-3); }
p { margin: 0 0 18px; color: var(--ink); }
header, main, .file-nav { text-shadow: 0 1px 10px rgb(4 10 18 / 0.55); }
a { color: var(--ink); }
.caption { font-size: 13px; color: var(--ink-2); margin-top: 10px; }

.rows { border-top: 1px solid var(--hairline); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.row-name { color: var(--ink); text-decoration: none; font-weight: 500; }
.row-name:hover { text-decoration: underline; }
.row-detail { color: var(--ink-2); font-size: 13px; text-align: right; }

.poem { font: inherit; font-size: 14px; line-height: 24px; letter-spacing: -0.01em; color: var(--ink); white-space: pre-wrap; word-break: break-word; margin: 0 0 24px; }
.poem-block { margin-bottom: 8px; }

.clip {
  position: relative; background: var(--card); padding: 22px 22px 6px; margin: 0 2px 34px;
  border: 1px solid rgb(111 177 214 / 0.25);
  box-shadow: 0 16px 36px rgb(1 5 10 / 0.6);
}
.shape-0 { border-radius: 34px 64px 30px 58px / 56px 30px 62px 34px; transform: rotate(-1.1deg); }
.shape-1 { border-radius: 60px 30px 64px 28px / 30px 58px 32px 62px; transform: rotate(0.9deg); }
.shape-2 { border-radius: 42px 70px 46px 24px / 24px 46px 70px 42px; transform: rotate(-0.7deg); margin-left: 10px; }
.shape-3 { border-radius: 66px 26px 58px 34px / 34px 58px 26px 66px; transform: rotate(1.3deg); margin-right: 10px; }
.clip-num {
  position: absolute; top: -15px; left: 16px; z-index: 1;
  background: var(--accent); color: #f2f8fc; font-size: 12px; line-height: 1;
  padding: 8px 10px; letter-spacing: 0.12em;
  border-radius: 55% 45% 60% 40% / 48% 58% 42% 52%;
  transform: rotate(-7deg);
  box-shadow: 0 8px 18px rgb(1 5 10 / 0.5);
}
.clip .facts { margin-top: 14px; }

.facts { margin: 6px 0 18px; }
.fact-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 13px; }
.fact-row span:first-child { color: var(--ink-3); }
.fact-row span:last-child { color: var(--ink); text-align: right; }

.clip-flat { position: relative; padding: 4px 0 4px 22px; margin-bottom: 30px; }
.clip-flat::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 6px;
  background: linear-gradient(var(--accent-soft), var(--accent));
  border-radius: 62% 38% 55% 45% / 30% 55% 45% 70%;
}

.organic-frame figure { margin: 0 0 8px; transform: rotate(-1.2deg); }
.organic-frame img {
  display: block; width: 100%; height: auto;
  border-radius: 26px 58px 30px 52px / 46px 30px 54px 28px;
  border: 1px solid rgb(111 177 214 / 0.3);
  box-shadow: 0 16px 40px rgb(1 5 10 / 0.55);
}
.organic-frame figcaption { font-size: 13px; color: var(--ink-3); margin-top: 12px; transform: rotate(1.2deg); }

.strip { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 12px; }
.strip img {
  height: 260px; width: auto; flex: 0 0 auto;
  border-radius: 24px 50px 26px 48px / 44px 26px 48px 24px;
}
@media (max-width: 600px) { .strip img { height: 200px; } }

.btn {
  display: inline-block; padding: 12px 20px;
  border: 1px solid rgb(220 233 245 / 0.28); border-radius: 999px;
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.btn:hover { background: rgb(220 233 245 / 0.07); }

.wave { display: block; width: 100%; height: 26px; color: var(--accent); opacity: 0.55; margin: 26px 0 30px; }

footer { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--hairline); }
footer p { color: var(--ink-3); font-size: 14px; margin: 0; }
footer a { color: var(--ink-2); }

.selected-poem { margin: 24px 0 40px; padding: 22px; background: rgb(5 13 26 / .76); border: 1px solid rgb(159 183 207 / .22); border-radius: 12px; min-width: 0; }
.selected-poem pre.poem { white-space: pre-wrap; overflow-wrap: normal; font-family: inherit; line-height: 1.65; margin-bottom: 0; }
.selected-poem pre.concrete { white-space: pre; overflow-x: auto; max-width: 100%; font-family: monospace; font-size: 11px; line-height: 1.35; padding-bottom: 12px; }

.poem-image { display:block; width:100%; height:auto; border-radius:4px; } .poem-transcript summary { min-height:44px; display:flex; align-items:center; cursor:pointer; }

.cowboys { padding:20px; background:rgb(5 13 26 / .84); border-radius:12px; margin:28px 0; }

.pdf { margin: 16px 0 4px; }
.cowboys .season { margin: 0 0 18px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.episodes { list-style: none; margin: 0; padding: 0; }
.episode { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid rgb(220 233 245 / .16); }
.episode:first-child { border-top: 0; }
.ep-num { font-size: 22px; font-weight: 300; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ep-body h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.ep-body ul { margin: 0; padding-left: 18px; }
.ep-body li { margin: 5px 0; line-height: 1.6; }
.wall-photo { margin: 0 0 24px; } .wall-photo img { display:block; width:100%; max-width:640px; height:auto; border-radius:4px; } .wall-photo figcaption { margin-top:8px; }
.wall-photo.featured img { max-width: 100%; }

.poem-light { background:#fff; padding:6px; }
.poem-transcript { margin-top:10px; background:#050b16; border:1px solid rgb(159 183 207 / .22); border-radius:8px; padding:0 14px; color:var(--ink); color-scheme:dark; }
.poem-transcript summary { color:var(--accent-soft); }
.poem-transcript[open] { padding-bottom:12px; }
.poem-transcript pre.poem { background:transparent; color:var(--ink); margin-top:4px; }

/* Event photography: show each full composition without cropping. */
.event-highlight { margin: 0 0 36px; }
.event-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.event-photos a { display:block; }
.event-photos .landscape { grid-column:1 / -1; }
.event-photos img { display:block; width:100%; height:auto; border-radius:4px; }
@media(max-width:480px) { .event-photos { grid-template-columns:1fr; } }

/* Photo gallery: larger grid, full compositions, no cropping. */
.photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.photo-grid a { display:block; }
.photo-grid .landscape { grid-column:1 / -1; }
.photo-grid img { display:block; width:100%; height:auto; border-radius:4px; }
@media(max-width:480px) { .photo-grid { grid-template-columns:1fr; } }