/* Mobile Safari and some Android browsers auto-inflate text size in
   narrow columns/flex layouts independent of any font-size set here —
   unpredictable and specifically the kind of thing that reads as "hard
   to read" without an obvious cause. Locks rendering to the sizes this
   stylesheet actually specifies. */
html
{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body
{
background-attachment:fixed;
background-color:#cccccc;
background-image:url('img/bg.jpg');
background-position: right bottom;
background-repeat:no-repeat;
}

/* background-attachment: fixed is a well-known iOS Safari landmine —
   causes visible jank/flicker mid momentum-scroll on long pages. Falls
   back to normal scrolling attachment on mobile; desktop is untouched. */
@media (max-width: 700px) {
    body { background-attachment: scroll; }
}

.line
{ 
    background:black;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
    border: 1px dotted #8B0000;
    border:none;
    color:white;
    display:block;
    height:2px;
}
.container
{
    height: 950px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1050px;
    text-align: center;
    width: 100%;
}

/* Without this, .container's fixed 1050px width forces the entire page
   — nav, statement text, every card — to lay out at desktop width on
   any screen narrower than that, regardless of the viewport meta tag.
   max-width above preserves the exact desktop look; this just lets it
   shrink below 1050px instead of forcing horizontal scroll/overflow on
   phones. */
@media (max-width: 700px) {
    .container { height: auto; }
}

/* participate.html's Tumblr embed has a hardcoded width="940" attribute
   and sits directly in the page flow (unlike the Bandcamp/Vimeo embeds
   on index.html, which are deliberately wide inside the horizontal-
   scroll carousel — .scroll-cell iframe — and untouched by this rule).
   Scoped to a direct child of .container so it doesn't affect those. */
.container > iframe
{
    max-width: 100%;
}

.header
{
    height: 135px;
    margin: 5px;
    width: 100%;
}

.footer
{
  text-align: center;
}

.content
{
    position:relative;
}

p
{	
    color: #d0cac2;
    font-family: arial;
    font-size: 25px;
    letter-spacing: 2px;
    margin:10px;
    text-align:left;
    text-indent: 50px;
}

title
{
    color: #ae9898;
    display: inline;
    font-family: arial;
    font-size: 50px;
    text-align:center;
}

.link
{
    color: #ae9898;
    display: inline;
    font-family: verdana;
    font-size: 35px;
}

.contact
{
    font-size: 10px;
    margin-top: 50px;
}

h1 
{
  color: #d0cac2;
  font-family: Arial;
  font-size: 75px;
  margin-bottom: 5px;
}

h5 
{
  color: #f2caa1;
  font-family: Arial;
  font-size: 20px;
  margin-bottom: 2px;
  margin-top: 2px;  
}

h6 
{
  color: #d0cac2;
  font-family: Arial;
  font-size: 14px;
  margin-bottom: 2px;
  margin-top: 2px;  
}

.scrolling-content
{
    margin-top: 25px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.scroll-track
{
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.scroll-cell
{
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
}

a:link {color:#ae9898; text-decoration:none;}      /* unvisited link */
a:visited {color:#ae9898; text-decoration:none;}  /* visited link */
a:hover {color:#f2caa1; text-decoration:none;}  /* mouse over link */
a:active {color:#f2caa1; text-decoration:none;}  /* selected link */ 

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  background: #450607;
  border: 3px solid #520705;
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff2a0e;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #67090d;
  border: 1px solid #8c160a;
  border-radius: 100px;
}
::-webkit-scrollbar-track:hover {
  background: #673e38;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ==========================================================================
   collab scaffolds page — see docs/DESIGN.md
   ========================================================================== */

.scaffolds-container
{
    height: auto;
    min-height: 950px;
    padding-bottom: 60px;
}

.site-nav
{
    color: #d0cac2;
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 2px;
    margin: 20px 0 10px;
    text-align: center;
    text-transform: lowercase;
    white-space: nowrap; /* never wrap to a second line. site-nav.js
                             shrinks font-size as needed to actually fit
                             one line on the real device's real rendered
                             font — a fixed px value here can't account
                             for how much monospace's width varies by
                             platform (confirmed: a value tuned to fit
                             desktop Chromium didn't fit real iOS Safari) */
}

.site-nav a
{
    margin: 0 14px;
}

/* Margins are a fixed, predictable cost regardless of font metrics —
   worth trimming on narrow screens before site-nav.js has to shrink
   text to compensate for space these are eating unnecessarily. */
@media (max-width: 700px) {
    .site-nav
    {
        letter-spacing: 1px;
    }

    .site-nav a
    {
        margin: 0 6px;
    }
}

.site-nav a.current
{
    color: #f2caa1;
    text-decoration: underline;
}

/* statement */

.statement
{
    color: #d0cac2;
    font-family: monospace;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1.7;
    margin: 30px auto 10px;
    max-width: 620px;
    text-align: left;
    text-indent: 0;
}

.statement p
{
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    margin: 14px 0;
    text-align: left;
    text-indent: 0;
}

.statement-terms
{
    text-align: right;
}

/* A <button> now (opens a dialog, doesn't navigate), but reads exactly
   like the plain <a> it replaced — no button chrome. */
.terms-trigger
{
    background: none;
    border: none;
    color: #ae9898;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    padding: 0;
}

.terms-trigger:hover,
.terms-trigger:focus
{
    color: #f2caa1;
    outline: none;
}

/* the shelf */

.shelf
{
    position: relative;
    scroll-snap-type: x mandatory;
}

/* Explicit prev/next controls — mobile only. Desktop already has wheel
   translation and the pulsing peek arrow (below); on a touch screen with
   one full-width card per view, an explicit tappable control is a more
   reliable discoverability mechanism than a peek sliver or a hover-only
   affordance. A static row below the shelf, not an overlay on top of
   the card — cards vary in height (impl + N components + optional
   reference stems), so a fixed on-card position would land in a
   different, sometimes-colliding spot depending on which card is in
   view. Hidden by default; shown inside the mobile breakpoint. */
.shelf-controls
{
    display: none;
}

@media (max-width: 700px) {
    .shelf-controls
    {
        display: flex;
        gap: 28px;
        justify-content: center;
        margin-top: 12px;
    }

    .shelf-nav
    {
        align-items: center;
        background: rgba(10, 8, 6, 0.6);
        border: 1px solid #e99708;
        border-radius: 50%;
        color: #e99708;
        cursor: pointer;
        display: flex;
        font-family: monospace;
        font-size: 22px;
        height: 44px;
        justify-content: center;
        line-height: 1;
        padding: 0;
        width: 44px;
    }

    .shelf-nav:active
    {
        background: rgba(233, 151, 8, 0.3);
    }

    /* the pulsing "»" hint's job is now done by the explicit buttons
       above — showing both is redundant and one more thing to read */
    .shelf-peek { display: none; }
}

.shelf .scroll-track
{
    padding: 4px 4px 14px;
}

.shelf .scroll-cell
{
    scroll-snap-align: start;
}

.shelf::-webkit-scrollbar-thumb {
  background: #e99708;
  border: 2px solid #7a5104;
}
.shelf::-webkit-scrollbar-thumb:hover {
  background: #ffb52e;
}
.shelf::-webkit-scrollbar-track {
  background: #1a1a1a;
  border: 1px solid #333;
}

.shelf-peek
{
    animation: shelf-peek-pulse 2.2s ease-in-out infinite;
    color: #e99708;
    font-size: 22px;
    pointer-events: none;
    position: sticky;
    right: 6px;
    top: 0;
    text-align: right;
}

.shelf-peek.seen
{
    animation: none;
    opacity: 0;
    transition: opacity 800ms ease-out;
}

@keyframes shelf-peek-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

.shelf-empty
{
    color: #7a7269;
    font-family: monospace;
    font-size: 14px;
    text-align: center;
    text-indent: 0;
}

/* scaffold card */

.scaffold-card
{
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #8a8178;
    box-sizing: border-box;
    color: #d0cac2;
    font-family: monospace;
    padding: 14px 16px;
    text-align: left;
    width: 42vw;
    min-width: 300px;
    max-width: 420px;
}

@media (max-width: 700px) {
    /* Near-full-width — one card fills the view at each scroll-snap
       stop, matching the explicit prev/next controls above: tap a
       button, one new card, not a partial peek of the next. The
       previous border color (#3a3530) was nearly indistinguishable
       from the card's own translucent-black fill; #8a8178 (already used
       for meta text elsewhere on the card) reads at a contrast level
       already proven legible on this background. */
    .scaffold-card
    {
        border-color: #8a8178;
        min-width: 0;
        padding: 16px 18px;
        width: 92vw;
    }

    /* Fitting the identifier and bpm/date side by side (desktop's
       space-between) got tight once .scaffold-label's mobile font-size
       grew — stacking avoids fighting over one line's worth of width. */
    .scaffold-id
    {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

.scaffold-id
{
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.scaffold-label
{
    color: #f2caa1;
    font-size: 15px;
}

.scaffold-meta
{
    color: #8a8178;
    font-size: 12px;
}

.track-rows
{
    display: flex;
    flex-direction: column;
}

.track-row
{
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    opacity: 0.65;
    padding: 5px 2px;
    transition: opacity 150ms ease-out;
}

.track-row:hover,
.track-row:focus
{
    opacity: 0.9;
    outline: none;
}

.track-row.playing
{
    color: #e99708;
    opacity: 1;
}

.track-row.pending
{
    opacity: 0.4;
}

.track-row.errored
{
    color: #8c160a;
}

.track-glyph
{
    flex: 0 0 auto;
    width: 12px;
}

.track-row.playing .track-glyph
{
    color: #e99708;
}

.track-wave
{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.track-wave img
{
    display: block;
    height: 20px;
    width: 100%;
}

/* loop-sweep: a soft highlight that crosses the waveform once per loop
   cycle while a component row is playing, timed via --loop-seconds (set
   per row in collab-scaffolds.js). Makes the repeat visible instead of just
   audible — impl and reference-stem rows never get this since they
   don't loop. */

.loop-sweep
{
    background: linear-gradient(90deg, transparent, rgba(233, 151, 8, 0.45), transparent);
    bottom: 0;
    left: -30%;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 30%;
}

.track-row.playing[data-role="component"] .loop-sweep
{
    animation: loop-sweep-move linear infinite;
    animation-duration: var(--loop-seconds, 2s);
}

@keyframes loop-sweep-move {
    from { left: -30%; }
    to   { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .track-row.playing[data-role="component"] .loop-sweep { animation: none; }
}

.section-label
{
    color: #8a8178;
    font-size: 11px;
    margin: 8px 0 2px;
}

.track-rows > .section-label:first-child
{
    margin-top: 0;
}

.track-label
{
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
}

.track-time
{
    color: #8a8178;
    flex: 0 0 auto;
    font-size: 11px;
    width: 34px;
    text-align: right;
}

.track-rule
{
    border: none;
    border-top: 1px solid #3a3530;
    margin: 4px 0 6px;
}

.scaffold-copyright,
.scaffold-size
{
    color: #8a8178;
    font-family: monospace;
    font-size: 11px;
    margin: 2px 0;
    text-align: left;
    text-indent: 0;
}

.name-field
{
    background: transparent;
    border: 1px solid #3a3530;
    color: #d0cac2;
    font-family: monospace;
    font-size: 12px;
    padding: 5px 7px;
}

.name-field::placeholder
{
    color: rgba(242, 202, 161, 0.45);
}

.scaffold-actions
{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}

.take-slot
{
    display: inline-flex;
}

.take-btn,
.dropbox-save
{
    color: #e99708;
    font-size: 13px;
}

/* the name prompt takes the take-btn's place in the row when it's
   revealed — see docs/DESIGN.md, "The name field" */
/* :not([hidden]) is load-bearing: [hidden] is a same-specificity UA
   rule, so an unconditional `.name-prompt { display: block }` here
   would beat it and the prompt would never actually hide. */
.name-prompt:not([hidden])
{
    animation: name-field-in 150ms ease-out;
    display: block;
}

.who-goes-there-inline
{
    color: #8a8178;
    display: block;
    font-size: 11px;
}

.name-field-inline
{
    display: block;
    margin-top: 4px;
    width: 190px;
    max-width: 45vw;
}

@keyframes name-field-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Mobile card typography — the desktop sizes above were calibrated by
   eye against a ~300-420px desktop-rendered card; at the same px values
   on a phone (held closer, denser text) they read as genuinely cramped,
   not just smaller. This bumps the card's own text a step up, now that
   .scaffold-card has the room (92vw, see above) to take it. */
@media (max-width: 700px) {
    .scaffold-label { font-size: 17px; }
    .scaffold-meta { font-size: 13px; }
    .section-label { font-size: 12px; }
    .track-label { font-size: 14px; }
    .track-time { font-size: 13px; width: 40px; }
    .scaffold-copyright,
    .scaffold-size { font-size: 12px; }
    .who-goes-there-inline { font-size: 12px; }
    .take-btn,
    .dropbox-save { font-size: 15px; }

    /* 16px is the iOS Safari threshold below which focusing a text
       input auto-zooms the whole page — jarring, and not something any
       amount of layout work elsewhere fixes. Below that size, the
       browser does it regardless of any other CSS. */
    .name-field { font-size: 16px; }

    /* Phone screens read darker than desktop monitors — same colors,
       less pop. Brighter versions of the same three card text colors,
       mobile only; desktop keeps the original values throughout. */
    .scaffold-card,
    .name-field,
    .track-label,
    .track-row { color: #e8e1d8; }              /* was #d0cac2 */
    .scaffold-label { color: #ffdbab; }          /* was #f2caa1 */
    .scaffold-meta,
    .section-label,
    .track-time,
    .scaffold-copyright,
    .scaffold-size,
    .who-goes-there-inline { color: #b3a99c; }   /* was #8a8178 */
}

/* collab-scaffolds footer + gotosleep door */

.scaffolds-footer
{
    margin-top: 50px;
}

/* Standard-issue boilerplate — no email, no CTA, nothing meant to draw
   an eye. Everything actionable on this page already has its own,
   more prominent home (nav, cards, the feedback-drop band). */
.scaffolds-footer h6
{
    color: #5c554a;
    font-size: 11px;
}

/* The audio feedback drop — a real, findable feature of this page, not
   the reason to be here. A distinct bordered band above the shelf: more
   presence than a footer text link (was getting visually lost down
   there), but dimmer than the shelf's cards and dimmer than the card's
   own amber take/dropbox buttons, so it never competes with the primary
   point of the page. */
.feedback-drop-trigger
{
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #5c554a;
    color: #b3a99c;
    cursor: pointer;
    display: block;
    font-family: monospace;
    margin: 20px auto 30px;
    max-width: 420px;
    padding: 12px 16px;
    text-align: center;
    width: 100%;
}

.feedback-drop-trigger:hover,
.feedback-drop-trigger:focus
{
    border-color: #8a8178;
    color: #d0cac2;
    outline: none;
}

.feedback-drop-label
{
    display: block;
    font-size: 13px;
}

.feedback-drop-sub
{
    color: #8a8178;
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

.feedback-drop-trigger:hover .feedback-drop-sub,
.feedback-drop-trigger:focus .feedback-drop-sub
{
    color: #b3a99c;
}

/* Real mobile bug, reproduced live: toggling display:none <-> flex on a
   position:fixed element (the old [hidden]/:not([hidden]) approach)
   rendered the just-shown modal in the wrong place — "loads at the
   bottom with a gray stripe at the top" — a known class of iOS Safari
   bug where a freshly-displayed fixed element can compute its initial
   box against the wrong reference. Fix: display:flex and
   position:fixed are unconditional, established once at page load and
   never toggled; opacity/pointer-events (below) do the actual
   show/hide instead, so there's no "just turned on" moment for a fixed
   element to get wrong. `inert` (not [hidden]) keeps a closed modal out
   of the tab order and the accessibility tree without touching display. */
.modal-overlay
{
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    position: fixed;
    transition: opacity 200ms ease-out;
    z-index: 600;
}

.modal-overlay.open
{
    opacity: 1;
    pointer-events: auto;
}

.modal-dialog
{
    background: #1a1210;
    border: 1px solid #8a8178;
    box-sizing: border-box;
    color: #d0cac2;
    font-family: monospace;
    max-height: 90vh;
    max-width: 480px;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    width: 100%;
}

.modal-dialog p
{
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: inherit;
    line-height: 1.6;
    margin: 12px 0;
    text-align: left;
    text-indent: 0;
}

.modal-title
{
    color: #f2caa1;
    font-size: 16px;
    font-weight: normal;
    margin: 0 24px 4px 0;
}

.modal-close
{
    background: transparent;
    border: none;
    color: #8a8178;
    cursor: pointer;
    font-family: monospace;
    font-size: 22px;
    line-height: 1;
    padding: 4px;
    position: absolute;
    right: 12px;
    top: 12px;
}

.modal-close:hover,
.modal-close:focus
{
    color: #e99708;
    outline: none;
}

.modal-body
{
    margin-top: 16px;
}

.gotosleep-overlay
{
    background: #000;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 600ms ease-in-out;
    z-index: 500;
}

.gotosleep-overlay.dim
{
    opacity: 0.92;
}

.gotosleep-overlay.closing
{
    opacity: 1;
    transition: opacity 700ms ease-in-out;
}

.gotosleep-door
{
    position: relative;
    z-index: 501;
}

/* Hides completely once lit — the banner (below) is the only visible
   thing from this point until it either commits or cancels. Two things
   showing at once ("the text appears separately from the link, which
   is still visible") is exactly the bug this fixes.
   pointer-events stays untouched deliberately, even though the door is
   invisible here — toggling pointer-events on the exact element
   mouseenter/mouseleave are watching is the same self-defeating loop as
   the earlier position bug, just via a different property: the instant
   pointer-events:none applies under a stationary cursor, the browser
   decides the cursor is no longer over the door and fires mouseleave,
   which removes .lit (pointer-events back to auto), making it hoverable
   under that same cursor again, firing mouseenter — confirmed live,
   another infinite loop. A click landing on the door's now-invisible
   original spot still correctly commits (same handler as the banner),
   so leaving it interactive costs nothing. */
.gotosleep-door.lit
{
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

/* The banner is a real, independently clickable <a> — not a decorative
   clone. Growing the door itself and moving it to position:fixed used
   to move it out from under the cursor the instant it lit, firing
   mouseleave, which moved it back under the cursor, firing mouseenter
   again — an infinite flicker loop, confirmed live (90+ toggles/
   second), and the font-size transition could never finish. Starts
   invisible/tiny/unclickable and grows in; 7vw leaves real margin below
   "fills the viewport exactly" since monospace character width varies
   enough across real device font stacks that a tighter value (9vw)
   clipped the closing ")" on an actual phone. */
.gotosleep-banner
{
    color: #f2caa1;
    font-size: 0;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    text-decoration: none;
    text-shadow: 0 0 10px #e99708, 0 0 22px #e99708;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: font-size 600ms ease-in-out, opacity 600ms ease-in-out;
    white-space: nowrap;
    z-index: 501;
}

.gotosleep-banner.lit
{
    cursor: pointer;
    font-size: 7vw;
    opacity: 1;
    pointer-events: auto;
}