/* Sierra West's portal (her words, 8 Nov 2026: "build it", "it needs to be otriqen.com/sierra-west"). The artist pages'
   look (/christmas/core.css and /artists/artists.css, loaded first); this file adds only what the portal needs: the
   player, the dated lists, and Sierra's room (her to-dos, notes, questions). One font pair, one button, one layout. */

.portal .work h2 { margin-top: 0; }
.portal .lede { margin: 0 0 14px; font-size: 20px; line-height: 1.55; color: var(--dim); }

/* the Bandcamp player, as on the homepage */
.bandcamp { display: block; width: 100%; max-width: 700px; height: 120px; border: 0; border-radius: 6px; background: var(--deep); }

/* a dated list: the date on the left, the line on the right */
.dated li { display: grid; grid-template-columns: 132px 1fr; gap: 4px 18px; align-items: baseline; padding: 14px 0; }
.dated .when { font: 600 12px/1.6 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.dated .what { font-size: 20px; line-height: 1.5; color: var(--ink); }
.dated .what small { display: block; margin-top: 2px; font-size: 17px; color: var(--dim); }
.dated a { color: var(--ice); text-underline-offset: 4px; }
.year { margin: 26px 0 0; font: 600 13px/1.25 var(--display); letter-spacing: .3em; color: var(--silver); }

.plain { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.plain li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 20px; line-height: 1.5; }
.plain a { color: var(--ice); text-underline-offset: 4px; }

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 13px 26px; border-radius: 999px;
  border: 1px solid rgba(238, 243, 248, .85); background: linear-gradient(#4a86d4, #1f4f99); color: #ffffff; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px rgba(0, 8, 30, .35);
  font: 600 14px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.btn:hover { filter: brightness(1.1); }
.btn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* Sierra's room */
.room-note { margin: 0 0 20px; font-size: 18px; color: var(--dim); }
.todo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.todo li { border-bottom: 1px solid var(--line); }
.todo label { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; cursor: pointer; font-size: 20px; line-height: 1.5; }
.todo input { flex: none; width: 26px; height: 26px; margin: 3px 0 0; accent-color: #4a86d4; cursor: pointer; }
.todo .done-text { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.todo a { color: var(--ice); text-underline-offset: 4px; }
.codes { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 18px; }
.codes th, .codes td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.codes th { font: 600 12px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }
.codes td.code { font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; }
.note { margin: 14px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(8, 24, 56, .55); }
.note h3 { margin: 0 0 10px; font: 600 13px/1.3 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--silver); }
.note pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 18px/1.55 var(--body); color: var(--ink); }
.ask { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ask p { margin: 0 0 10px; font-size: 20px; line-height: 1.5; }
.ask textarea { width: 100%; min-height: 84px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(3, 10, 28, .6); color: var(--ink); font: 500 18px/1.5 var(--body); resize: vertical; }
.saved { margin-left: 12px; font: 600 12px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ice); }
.later { margin: 0; padding: 16px 0; font-size: 20px; color: var(--dim); }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.shots img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }

/* Easier to read (her words, 8 Nov 2026: "improve the visibility"): the reading sections sit on the homepage's white
   cards (.made.read in christmas.css), dark ink at 21px; the galleries stay on the night. */
.portal .bio { color: var(--text); font-size: 22px; }
.portal .card { --ink: var(--card-ink); --dim: var(--card-dim); --line: rgba(19, 35, 63, .16); --silver: var(--blue); --ice: var(--blue);
  position: relative; z-index: 2; margin-top: 30px; padding: 26px 30px 30px; border-radius: 6px; background: var(--card);
  color: var(--card-ink); box-shadow: 0 18px 40px rgba(0, 6, 24, .45); }
.portal .card::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(130, 150, 178, .45); border-radius: 3px; pointer-events: none; }
.portal .card h2, .portal .card .year { color: var(--blue); }
.portal .card .tag { color: var(--card-dim); }
.portal .card .tag.go { color: var(--blue); }
.portal .card a { color: var(--blue); }
.portal .card .what, .portal .card .plain li, .portal .card .lede { font-size: 21px; color: var(--card-ink); }
.portal .card .what small, .portal .card .name small { color: var(--card-dim); }
.portal .card .when { color: var(--blue); font-size: 13px; }
.portal .card .btn { color: #ffffff; }
.portal .card .row { position: relative; z-index: 1; }
.row .cover { flex: none; width: 64px; height: 64px; margin-right: 16px; border-radius: 4px; object-fit: cover; box-shadow: 0 4px 10px rgba(0, 6, 24, .25); }
.row.has-cover { justify-content: flex-start; align-items: center; }
.row.has-cover .tag { margin-left: auto; }

/* the photo at the top in a silver frame (her words: "make the image at the top of the silver framing") */
.portal .portrait.silver { padding: 9px; border: 0; border-radius: 4px;
  background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%), var(--foil);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 18px 36px rgba(0, 6, 24, .5); }

/* Videos (her words: "put them in a gallery and the link goes directly to them in the gallery"). Each plays in place; any
   "Watch" link on the page goes to its video and starts it. The play button is silver, as on the homepage. */
.vid { margin: 0; scroll-margin-top: 90px; }
.vid .play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.vid .play img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.vid .play:hover img { opacity: 1; }
.vid .play::after { content: ''; position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%), var(--foil); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.vid .play::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; margin: -13px 0 0 -7px;
  border-left: 23px solid #10295a; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.player iframe, .hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid.lit .player { outline: 3px solid var(--ice); outline-offset: 5px; }

/* a photo opened large */
dialog.lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(3, 10, 28, .92); }
dialog.lightbox img { display: block; max-width: 94vw; max-height: 84vh; margin: 0 auto; object-fit: contain; border-radius: 4px; }
dialog.lightbox p { margin: 12px 0 0; text-align: center; font-size: 19px; color: #eef3f8; }
dialog.lightbox .btn { display: flex; margin: 14px auto 0; }

@media (max-width: 699px) {
  .portal .card { padding: 22px 20px 24px; }
  .portal .card::after { inset: 7px; }
  .row .cover { width: 52px; height: 52px; margin-right: 12px; }
  .dated li { grid-template-columns: 1fr; gap: 2px; }
  .shots { grid-template-columns: 1fr; }
  .codes { font-size: 16px; }
}

/* Her photos as a collage at the top (her words, 8 Nov 2026: "keep the photos in rows but dont have the padding. i wanted it
   to look like a collage", "i think that should also be at the top"): rows of photos at their own shape, edge to edge, with
   no gaps and no captions. A row's photos share one height, each growing by its width over its height (--r). Two rows on a
   computer; on a phone they wrap into rows of two or three. Each opens large. */
/* edge to edge at every width (her words, 8 Nov 2026: "remove the blue line on the left side so everfything sits flush full
   width"): the whole window, less the OTRIQEN rail, wherever the page's middle column sits */
.collage { width: calc(100vw - var(--rail, 0px)); margin: 26px 0 0 calc(50% - 50vw + var(--rail, 0px) / 2); }
.collage-row { display: flex; }
.collage .tile { flex: var(--r) 1 0%; min-width: 0; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--deep); cursor: zoom-in; }
.collage .tile img { display: block; width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; }
.collage .tile:focus-visible { outline: 3px solid var(--ice); outline-offset: -3px; }

/* The top and the videos laid out like Chris Jordan's portal (her words, 8 Nov 2026: "can we make the top section and the
   video set up look simiar?", "I want to keep the architecture similar"), in this page's own blue and silver: the silver
   foil where his page has its rainbow, Cinzel and Cormorant where it has its sans; his spacing. Her film at the top
   ("put this one at the top": Durango Songwriters Expo, 2013), then who she is, then her videos as cards. */
.bar { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 16px 20px 0; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-right: 60px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .logo { display: block; width: 44px; height: 44px; object-fit: contain; filter: grayscale(1) brightness(1.35) contrast(1.05); }
.brand span { font: 600 17px/1 var(--display); letter-spacing: .2em;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.place { font: 400 13px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--text-dim); }

/* The film at the top with her photo as its cover (her words, 8 Nov 2026: "use this as a hero over the video", "oh i meant
   overthe actual video", "as the thumbnail for it"): the photo at its own shape with the silver line on top; once it plays,
   the film at 16:9. On a phone the photo is cropped to 3:2 around her and her guitar. */
.hero { position: relative; z-index: 1; width: 100%; aspect-ratio: 2000 / 848; overflow: hidden; background: #000; }
.hero.playing { aspect-ratio: 16 / 9; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--foil); z-index: 2; }
.hero .play img { opacity: 1; }
.hero .play::after { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.hero .play::before { margin: -19px 0 0 -11px; border-left-width: 34px; border-top-width: 19px; border-bottom-width: 19px; }
.hero-cap { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 10px 20px 0; font-size: 17px; color: var(--text-dim); }

.intro { display: grid; gap: 8px 48px; align-items: end; padding-top: 16px; }
.intro .eyebrow, .intro h1 { margin: 0; }
.intro .lede { max-width: 62ch; margin: 4px 0 0; font-size: 21px; line-height: 1.55; color: var(--text-dim); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.facts li { padding: 6px 14px; border: 1px solid rgba(238, 243, 248, .45); border-radius: 999px; background: rgba(4, 14, 38, .6);
  font-size: 18px; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1fr) auto; }
  .intro .eyebrow, .intro h1, .intro .lede { grid-column: 1; }
  .intro .facts { grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; margin: 0; }
}

.group { margin: 40px 0 12px; font: 600 13px/1.25 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--silver); scroll-margin-top: 24px; }
.panel { position: relative; min-width: 0; overflow: hidden; padding: 24px; border: 1px solid rgba(201, 211, 223, .22); border-radius: 16px;
  background: rgba(4, 14, 38, .72); box-shadow: 0 18px 40px rgba(0, 6, 24, .35); }
.panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--foil); }
.lesson { display: flex; flex-direction: column; }
.num { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font: 600 12.5px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.dur { font: 500 17px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player { position: relative; aspect-ratio: 16 / 9; margin: 0 0 14px; border-radius: 10px; overflow: hidden; background: #000; }
.lesson h3 { margin: 0 0 4px; font: 600 23px/1.3 var(--body); color: var(--text); text-wrap: balance; }
.lesson .meta { margin: 0; font-size: 17px; line-height: 1.45; color: var(--text-dim); }
.lesson .btns { margin-top: auto; padding-top: 18px; }
.btn.soon { opacity: .6; cursor: default; filter: none; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

.pair .col { min-width: 0; display: flex; flex-direction: column; }
.pair .col > .panel { flex: 1; }
.start .bandcamp { max-width: none; margin: 16px 0 0; border-radius: 10px; }
.about .who-row { display: flex; align-items: center; gap: 18px; margin: 0 0 14px; }
.about .portrait.silver { width: 120px; height: 150px; padding: 7px; }
.about .who-row p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--text-dim); }
.about ul { margin: 0; padding: 0; list-style: none; }
.about li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 19px; line-height: 1.45; }
.about a { color: var(--ice); text-underline-offset: 4px; }
.foot { margin: 64px 0 0; text-align: center; font: 400 13px/1.5 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The OTRIQEN scrollbar, copied from the homepage (christmas.css; her words, 8 Nov 2026: "the scrollbard is not
   correct"): the browser's is hidden, and the page keeps room on the right for the silver foil on blue. Only on the page
   that has it (html.rail), so Sierra's room keeps the browser's. */
html.rail { scrollbar-width: none; }
html.rail::-webkit-scrollbar { display: none; }
.rail body { padding-right: 18px; --rail: 18px; }
#scrollbar-track {
  position: fixed; top: 0; right: 0; width: 18px; height: 100dvh; z-index: 20;
  background: linear-gradient(90deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45)), #10295a;
  border-left: 1px solid rgba(238, 243, 248, .22);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
#scrollbar-label {
  position: relative; z-index: 1; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  font: 400 11px/1 var(--display); letter-spacing: .9em; color: rgba(238, 243, 248, .7);
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
#scrollbar-thumb { position: absolute; right: 2px; width: 14px; z-index: 2; border-radius: 7px; background: #c9d3df url(/christmas/silver.webp?v=1) center / 90px 90px repeat; box-shadow: 0 0 10px rgba(191, 227, 255, .4); }

/* the short cards two to a row */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }

@media (max-width: 699px) {
  .collage { display: flex; flex-wrap: wrap; }
  .collage-row { display: contents; }
  .collage .tile { flex: var(--r) 1 calc(var(--r) * 100px); }
  .pair { grid-template-columns: 1fr; }
  .rail body { padding-right: 14px; --rail: 14px; }
  #scrollbar-track { width: 14px; }
  #scrollbar-thumb { width: 10px; }
  #scrollbar-label { display: none; }
  .head { padding-right: 56px; }
  .hero { aspect-ratio: 3 / 2; }
  .hero.playing { aspect-ratio: 16 / 9; }
  .hero .play img { object-position: 47% 50%; }
  .place { font-size: 11px; letter-spacing: .22em; }
  .hero .play::after { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .hero .play::before { margin: -14px 0 0 -8px; border-left-width: 25px; border-top-width: 14px; border-bottom-width: 14px; }
  .hero-cap { font-size: 16px; }
  .intro .lede { font-size: 19px; }
  .panel { padding: 20px; }
  .lesson h3 { font-size: 21px; }
  .about .portrait.silver { width: 104px; height: 130px; }
}