/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/anton-400-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/anton-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/anton-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/courier-prime-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/courier-prime-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/courier-prime-700-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/courier-prime-700-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/courier-prime-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/courier-prime-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/courier-prime-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/courier-prime-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/yellowtail-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/yellowtail-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* shirra.com pass two — built to Shirra's own brief and mock-ups (09-05..07):
   "retro teal with more condensed type", "black, white, teal with maybe orange or red highlights",
   "unpolished typewriter font", her headers PHOTOGRAPHY & VIDEO / ARTWORK / MUSIC / CHILL GUERRILLA FILMS,
   the red-script "Welcome!" on a starburst. One page, no slideshow, no big name. */
:root {
  --teal: #12807a;         /* her TEAL swatch (averaged from IMG_5867) */
  --teal-deep: #0b5f5b;    /* vignette */
  --cream: #f1e6cd;
  --cream-2: #cfc3a8;      /* secondary text */
  --gold: #e9a63a;         /* display type, like her mock-ups */
  --orange: #d9622b;       /* "& VIDEO" */
  --red: #b83227;          /* "Welcome!" script */
  --ink: #141414;          /* the LIFE UNSCRIPTED card */
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --script: "Yellowtail", "Brush Script MT", cursive;
  --type: "Courier Prime", "Courier New", Courier, monospace;
  --wrap: 68rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; overflow-x: clip; color: var(--cream); font: 400 1.0625rem/1.6 var(--type);
  background-color: var(--teal);
  /* the worn, grainy teal of her mock-ups: a dark vignette plus SVG noise, on the ground only (never over photos) */
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.28), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, scroll;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cream); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.preview { background: rgba(0,0,0,.35); color: var(--cream-2); font-size: .8rem; text-align: center; padding: .35rem var(--gutter); letter-spacing: .04em; }
.preview b { color: var(--gold); font-weight: 700; }

/* ---------- header: small typewriter name, three links ---------- */
.head { padding: 1rem 0; }
.head__in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; }
.name { font: 700 1rem/1 var(--type); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); text-decoration: none; }
.nav { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.nav li + li::before { content: "\00b7"; color: rgba(241,230,205,.45); margin: 0 .55rem; font-family: var(--type); }
.nav a { font: 400 1.05rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--gold); padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav li:nth-child(2) a { color: var(--orange); }
.nav li:nth-child(3) a { color: var(--gold); }
.nav li:nth-child(4) a { color: var(--cream); }
.nav a:hover { border-bottom-color: currentColor; }
@media (max-width: 26em) { .nav a { font-size: .9rem; letter-spacing: .03em; } .nav li + li::before { margin: 0 .35rem; } }
@media (max-width: 22em) { .nav a { font-size: .82rem; letter-spacing: .02em; } .nav li + li::before { margin: 0 .3rem; } }

/* ---------- display type: her condensed gold caps, slightly worn ---------- */
.h { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .95; letter-spacing: .02em; color: var(--gold);
     text-shadow: 0 2px 0 rgba(0,0,0,.18);
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 .38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 .38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.h--xl { font-size: clamp(2.6rem, 8vw, 5.4rem); }
.h--l { font-size: clamp(2.2rem, 6.5vw, 4.2rem); }
.h .alt { color: var(--orange); }
.h .amp { color: var(--orange); font-size: .9em; }
.h--center { text-align: center; }

/* ---------- Welcome: red script on a cream starburst, then the starfish clip ---------- */
.welcome { padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3rem); text-align: center; }
.burst { position: relative; overflow: hidden; display: grid; place-items: center; min-height: clamp(11rem, 30vw, 17rem); margin-bottom: clamp(1rem, 3vw, 2rem); }
.burst::before { content: ""; position: absolute; inset: -10% -20%; z-index: 0;
  background: repeating-conic-gradient(from 3deg, rgba(241,230,205,.26) 0 4.5deg, transparent 4.5deg 11.25deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 75%); mask-image: radial-gradient(closest-side, #000 20%, transparent 75%); }
.burst .spark { position: absolute; z-index: 1; color: var(--cream); opacity: .7; font-size: 1.2rem; }
.welcome__word { position: relative; z-index: 2; margin: 0; font: 400 clamp(4rem, 13vw, 8.5rem)/1 var(--script); color: var(--red); text-shadow: 3px 3px 0 rgba(241,230,205,.55), 0 10px 26px rgba(0,0,0,.25); transform: rotate(-4deg); }
.opener { width: min(100%, 60rem); margin: 0 auto; aspect-ratio: 16 / 9; background: #0a4c49; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.opener video { width: 100%; height: 100%; object-fit: cover; }
.line { margin: 1.4rem auto 0; max-width: 40ch; font-size: clamp(1rem, 1.6vw, 1.2rem); }

/* ---------- sections ---------- */
.sec { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.sec__head { margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.rule { border: 0; height: 2px; background: rgba(241,230,205,.25); margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.banner { width: min(100%, 52rem); margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.logo-wide { width: min(100%, 34rem); margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.card { background: var(--ink); color: #fff; padding: clamp(1.4rem, 4vw, 2.4rem); max-width: 46rem; margin: 0 auto; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.card h3 { margin: 0 0 .8rem; font: 400 clamp(1.6rem, 3.5vw, 2.4rem)/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.card p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.clip { width: min(100%, 46rem); margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; aspect-ratio: 16 / 9; background: #0a4c49; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.btn { display: inline-block; margin-top: 1.6rem; padding: .8rem 1.3rem; border: 2px solid var(--cream); color: var(--cream); font: 700 .85rem/1 var(--type); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.btn:hover { background: var(--cream); color: var(--teal-deep); }
.center { text-align: center; }

/* ---------- photo grid (grouped by subject; lightbox on tap) ---------- */
.grid { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40em) { .grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; } }
@media (min-width: 64em) { .grid { grid-template-columns: repeat(4, 1fr); } }
.tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0a4c49; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .tile img { transition: none; } .tile:hover img { transform: none; } }
.grid--art { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40em) { .grid--art { grid-template-columns: repeat(4, 1fr); } }
.grid--art .tile { aspect-ratio: 1; }

/* ---------- music ---------- */
.tracks { list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; border-top: 2px solid rgba(241,230,205,.25); }
.track { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: .9rem 0; border-bottom: 2px solid rgba(241,230,205,.25); }
@media (min-width: 40em) { .track { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); align-items: center; } }
.track__t { font-weight: 700; letter-spacing: .04em; }
.track audio { width: 100%; height: 2.2rem; }
.tracks__note { max-width: 40rem; margin: .9rem auto 0; text-align: right; font-size: .85rem; color: var(--cream-2); letter-spacing: .04em; }

.album { display: grid; gap: clamp(1.2rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; max-width: 58rem; margin: 0 auto; }
@media (max-width: 40em) { .album { grid-template-columns: 1fr; } .album__cover { margin: 0 auto; } }
.album__cover { width: 100%; max-width: 15rem; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.album .tracks { max-width: none; }
.bio { max-width: 60ch; }
.bio p { margin: 0 0 1.1em; }
.index { display: grid; gap: clamp(.6rem, 2vw, 1.2rem); padding-top: 0; text-align: center; }
.index__link { display: block; text-decoration: none; padding: .35em 0; border-top: 2px solid rgba(241,230,205,.18); }
.index__link:last-child { border-bottom: 2px solid rgba(241,230,205,.18); }
.index__link:nth-child(even) { color: var(--orange); }
.index__link--about { color: var(--cream); }
.index__link:hover { color: var(--cream); }
.nav a[aria-current="page"] { border-bottom-color: currentColor; }
.card h2 { margin: 0 0 .8rem; font: 400 clamp(1.6rem, 3.5vw, 2.4rem)/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: #fff; }
/* ---------- footer ---------- */
.foot { padding: 2.5rem 0 3rem; text-align: center; font-size: .9rem; color: var(--cream-2); }
.foot ul { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }
.foot a { color: var(--cream-2); text-decoration: none; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; font-weight: 700; }
.foot a:hover { color: var(--gold); }

/* ---------- lightbox ---------- */
.lb { border: 0; padding: 0; background: transparent; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; color: var(--cream); }
.lb::backdrop { background: rgba(8, 40, 38, .95); }
.lb__stage { position: fixed; inset: 0; display: grid; place-items: center; padding: 3.5rem 1rem 3rem; }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lb__btn { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(8,40,38,.75); border: 2px solid rgba(241,230,205,.4); color: var(--cream); width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; }
.lb__btn:hover { background: var(--gold); color: var(--ink); }
.lb__prev { left: .8rem; } .lb__next { right: .8rem; }
.lb__close { position: fixed; top: .8rem; right: .8rem; transform: none; }
.lb__count { position: fixed; left: 50%; bottom: .9rem; transform: translateX(-50%); color: var(--cream-2); font-size: .85rem; font-variant-numeric: tabular-nums; }