/* ============================================================
   pools of starwaves — hand-built portfolio
   palette + motifs sampled from the paintings
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,400&family=Karla:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
  --canvas: #f5f0e4;        /* warm off-white canvas ground */
  --canvas-deep: #ece4d2;
  --ink: #2c3a56;           /* ink navy */
  --ink-soft: #4c5a76;
  --teal: #2e6f5e;          /* deep teal-green */
  --copper: #b06a2a;        /* ochre copper */
  --gold: #c9863b;
  --pink: #cf98a0;          /* dusty pink */
  --charcoal: #29261f;
  --evergreen: #1f5c48;     /* deep evergreen */
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cg stroke='%23b06a2a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.5 5.5l13 13M18.5 5.5l-13 13'/%3E%3C/g%3E%3C/svg%3E");
  /* four-point twinkle (✨-style), deep evergreen, with a small companion star */
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cg fill='%231f5c48'%3E%3Cpath d='M10 2c1 4.4 2.1 5.5 6.5 6.5C12.1 9.5 11 10.6 10 15c-1-4.4-2.1-5.5-6.5-6.5C7.9 7.5 9 6.4 10 2z'/%3E%3Cpath d='M18 13c.55 2.4 1.15 3 3.55 3.55-2.4.55-3 1.15-3.55 3.55-.55-2.4-1.15-3-3.55-3.55 2.4-.55 3-1.15 3.55-3.55z'/%3E%3C/g%3E%3C/svg%3E");
  --star-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cg stroke='%232c3a56' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.5 5.5l13 13M18.5 5.5l-13 13'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Karla', 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--charcoal);
  background-color: var(--canvas);
  /* stipple: faint hand-dotted field, like the paintings' grounds */
  background-image:
    radial-gradient(rgba(44,58,86,.055) 1px, transparent 1.4px),
    radial-gradient(rgba(176,106,42,.05) 1px, transparent 1.4px);
  background-size: 28px 28px, 46px 46px;
  background-position: 0 0, 14px 20px;
}

/* ---------- type ---------- */

h1, h2, h3, .wordmark {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
  line-height: 1.15;
  font-weight: 900;
}

h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); margin: 0 0 .4em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 2.6em 0 .6em; }
h3 { font-size: 1.18rem; margin: 1.6em 0 .4em; font-weight: 600; }

p { max-width: 68ch; }

a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-style: dashed;   /* stitch-line links */
  text-decoration-thickness: 1.2px;
  text-underline-offset: 4px;
  transition: color .15s;
}
a:hover { color: var(--copper); }

::selection { background: var(--pink); color: var(--charcoal); }

/* ---------- header / nav ---------- */

header.site {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2rem;
  padding: 1.6rem clamp(1.2rem, 5vw, 4rem) 1.2rem;
  border-bottom: 2px dashed var(--ink-soft);
}

.wordmark {
  font-size: 1.5rem; font-weight: 900; font-style: italic;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
}
.wordmark::before {
  content: ''; width: 18px; height: 18px;
  background: var(--star) center/contain no-repeat;
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(45deg) scale(.85); }
}

nav.site { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.4rem; }
nav.site a {
  font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  color: var(--ink); text-decoration: none;
}
nav.site a:hover { color: var(--copper); }
nav.site a.here {
  color: var(--copper);
  border-bottom: 2px dashed var(--copper); padding-bottom: 2px;
}

/* ---------- layout ---------- */

main { padding: 1rem clamp(1.2rem, 5vw, 4rem) 4rem; max-width: 1200px; margin: 0 auto; }

.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 58ch; }

/* stitch divider with a star in the middle
   (sparkle intentionally omitted here — it collides with the stitch lines) */
.stitch {
  border: 0; margin: 3.2rem auto; max-width: 640px; height: 18px;
  background:
    var(--star) center/16px no-repeat,
    repeating-linear-gradient(90deg, var(--ink-soft) 0 10px, transparent 10px 20px) left calc(50% - 34px) center / calc(50% - 34px) 2px no-repeat,
    repeating-linear-gradient(90deg, var(--ink-soft) 0 10px, transparent 10px 20px) right calc(50% - 34px) center / calc(50% - 34px) 2px no-repeat;
}

/* star bullets — alternating copper asterisk and evergreen sparkle */
ul.stars { list-style: none; padding-left: .2rem; }
ul.stars li { padding-left: 1.7rem; position: relative; margin: .55rem 0; }
ul.stars li::before {
  content: ''; position: absolute; left: 0; top: .32em;
  width: 15px; height: 15px;
  background: var(--star) center/contain no-repeat;
}
ul.stars li:nth-child(even)::before {
  background: var(--sparkle) center/contain no-repeat;
}

/* evergreen sparkle after section headers */
main h2::after {
  content: ''; display: inline-block; width: 15px; height: 15px;
  margin-left: .5rem; vertical-align: baseline;
  background: var(--sparkle) center/contain no-repeat;
}

/* hand-drawn card: uneven "sketchy" corners, slight tilt */
.card {
  background: #fbf8f0;
  border: 2px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 1.6rem 1.8rem;
  box-shadow: 4px 5px 0 rgba(44,58,86,.16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: rotate(-.4deg) translateY(-3px); box-shadow: 6px 8px 0 rgba(44,58,86,.2); }
.card h3 { margin-top: 0; }
.card .kicker { margin-top: 0; }

.cards { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 2rem 0; }

.kicker {
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper); margin-bottom: .3rem;
}

blockquote {
  margin: 1.2rem 0; padding: .2rem 0 .2rem 1.3rem;
  border-left: 3px dashed var(--pink);
  font-style: italic; color: var(--ink-soft); max-width: 62ch;
}
blockquote p { margin: .5em 0; }

.note {
  font-size: .92rem; color: var(--ink-soft);
  background: var(--canvas-deep);
  border: 1.5px dashed var(--ink-soft);
  border-radius: 14px 4px 14px 4px;
  padding: .8rem 1.1rem; max-width: 68ch;
}

.tag {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; color: var(--canvas);
  background: var(--teal); border-radius: 999px;
  padding: .12rem .7rem .16rem; margin: 0 .3rem .3rem 0;
}
.tag.copper { background: var(--copper); }
.tag.ink { background: var(--ink); }
.tag.pink { background: var(--pink); color: var(--charcoal); }

/* ---------- hero (home) ---------- */

.hero { padding: 3.5rem 0 1rem; }
.hero .tagline {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--teal); margin-top: 0;
}

/* collage strip of painting crops */
.artstrip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin: 2.6rem 0;
}
.artstrip a {
  display: block; aspect-ratio: 1; overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 12px 3px 12px 3px;
  transition: transform .18s ease;
}
.artstrip a:nth-child(even) { transform: rotate(1deg); }
.artstrip a:nth-child(odd)  { transform: rotate(-1deg); }
.artstrip a:hover { transform: rotate(0deg) scale(1.05); z-index: 2; position: relative; }
.artstrip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) { .artstrip { grid-template-columns: repeat(3, 1fr); } }

/* ---------- art gallery ---------- */

.gallery { columns: 3 300px; column-gap: 1.4rem; margin-top: 2rem; }
.piece {
  break-inside: avoid; margin: 0 0 1.4rem; display: block;
  background: #fbf8f0; border: 2px solid var(--ink);
  border-radius: 14px 4px 14px 4px; overflow: hidden;
  box-shadow: 3px 4px 0 rgba(44,58,86,.14);
  transition: transform .18s ease;
}
.piece:hover { transform: rotate(.5deg) translateY(-3px); }
.piece img { width: 100%; display: block; }
.piece figcaption {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: .98rem; color: var(--ink);
  padding: .6rem .9rem .7rem;
  border-top: 1.5px dashed var(--ink-soft);
}
.piece figcaption::before {
  content: ''; display: inline-block; width: 11px; height: 11px; margin-right: .45rem;
  background: var(--star) center/contain no-repeat;
}
.piece a { text-decoration: none; color: inherit; }

/* ---------- writing ---------- */

.work { margin: 2.4rem 0; }
.work .meta { font-size: .9rem; color: var(--ink-soft); margin: .1rem 0 .6rem; }

.worklist { list-style: none; padding: 0; }
.worklist li {
  padding: 1rem 0; border-bottom: 1.5px dashed var(--canvas-deep);
}

/* ---------- media grids ---------- */

.mediagrid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.4rem 0; }
.mediagrid figure { margin: 0; }
.mediagrid img, .mediagrid video {
  width: 100%; display: block; border: 2px solid var(--ink);
  border-radius: 12px 3px 12px 3px;
}
.mediagrid figcaption { font-size: .88rem; color: var(--ink-soft); padding-top: .4rem; }

/* ---------- piece pages (full writing) ---------- */

.prose {
  background: #fbf8f0;
  border: 2px solid var(--ink);
  border-radius: 18px 5px 18px 5px;
  box-shadow: 4px 5px 0 rgba(44,58,86,.14);
  padding: clamp(1.4rem, 4vw, 3rem);
  max-width: 76ch;
  margin: 2rem auto;
}
.prose p { max-width: none; }
.prose p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.1em; font-weight: 900; color: var(--copper);
  float: left; line-height: .85; padding-right: .12em;
}
.backlink { font-weight: 700; font-size: .95rem; }
.backlink::before { content: '↞ '; }

/* PSA-style two-column script */
table.script { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: .95rem; }
table.script th {
  font-family: 'Fraunces', Georgia, serif; text-align: left; color: var(--ink);
  border-bottom: 2px dashed var(--ink-soft); padding: .4rem .6rem;
}
table.script td {
  vertical-align: top; padding: .55rem .6rem;
  border-bottom: 1.5px dashed var(--canvas-deep);
}
table.script td:first-child { width: 46%; color: var(--ink-soft); }

/* writing index cards */
.card .cta { font-weight: 700; font-size: .92rem; }
.card .cta::after { content: ' ✳'; color: var(--copper); }
.card p { font-size: .97rem; }

/* ---------- portraits ---------- */

.portrait {
  float: right; width: min(38%, 300px); margin: 0 0 1rem 2rem;
  border: 2px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 5px 0 rgba(44,58,86,.16);
  transform: rotate(1deg);
}
.portrait.small { width: min(30%, 210px); }

figure.hero-portrait {
  float: right; width: min(30%, 210px); margin: 0 0 1rem 2rem;
  text-align: center;
}
figure.hero-portrait img {
  width: 100%; display: block;
  border: 2px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 5px 0 rgba(44,58,86,.16);
  transform: rotate(1deg);
}
figure.hero-portrait figcaption {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  color: var(--ink); font-size: .95rem; padding-top: .55rem;
}
@media (max-width: 620px) {
  figure.hero-portrait { float: none; margin: 1.2rem auto; width: 60%; }
}
@media (max-width: 620px) {
  .portrait { float: none; display: block; margin: 1.2rem auto; width: 70%; }
}

figure.snapshot { margin: 2rem 0; max-width: 340px; }
figure.snapshot img {
  width: 100%; display: block; border: 2px solid var(--ink);
  border-radius: 12px 3px 12px 3px; transform: rotate(-1deg);
}
figure.snapshot figcaption { font-size: .88rem; color: var(--ink-soft); padding-top: .5rem; }

/* photography theme subheads */
.phototheme {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  color: var(--teal); font-size: 1.15rem; margin: 2.2rem 0 .2rem;
}

/* ---------- forms ---------- */

form.contact { max-width: 520px; display: grid; gap: 1rem; margin-top: 1.5rem; }
form.contact label { font-weight: 700; font-size: .92rem; color: var(--ink); }
form.contact input, form.contact textarea {
  width: 100%; font: inherit; color: var(--charcoal);
  background: #fbf8f0; border: 2px solid var(--ink);
  border-radius: 10px 3px 10px 3px; padding: .6rem .8rem;
}
form.contact input:focus, form.contact textarea:focus { outline: 2px dashed var(--copper); outline-offset: 2px; }
form.contact button {
  font: 700 1rem 'Karla', sans-serif; letter-spacing: .04em;
  color: var(--canvas); background: var(--ink);
  border: 0; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: .7rem 2rem; cursor: pointer; justify-self: start;
}
form.contact button:hover { background: var(--copper); }

/* ---------- footer ---------- */

footer.site {
  border-top: 2px dashed var(--ink-soft);
  padding: 1.6rem clamp(1.2rem, 5vw, 4rem) 2.2rem;
  font-size: .9rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: center;
}
footer.site .dots {
  flex-basis: 100%; height: 8px; margin-bottom: .6rem;
  background: radial-gradient(circle 3px, var(--copper) 97%, transparent) 0 center / 22px 8px repeat-x;
  opacity: .5;
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}