/* portfolio.css — page-specific (auto-generated) */

.eyebrow{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--accent);display:inline-block}

a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.brand{font-family:"Fraunces",serif;font-size:1.28rem;font-weight:500;color:#fff;transition:color .35s ease}

.page-hero{position:relative;background:linear-gradient(155deg,#332720 0%,var(--espresso) 45%,#140f0b 100%);color:#fff;overflow:hidden;padding-top:clamp(9rem,16vh,12rem);padding-bottom:clamp(4rem,9vw,7rem)}

.page-hero .wave-bg{position:absolute;left:0;right:0;top:58%;transform:translateY(-50%);color:rgba(201,168,122,.09);width:100%;height:260px}

.page-hero .inner{position:relative;max-width:46rem}

.page-hero .eyebrow{color:var(--accent-soft)}

.page-hero h1{color:#fff;font-size:clamp(3rem,8vw,5.5rem);margin:1rem 0 1.2rem;line-height:.95}

.page-hero .tag{font-family:"Fraunces",serif;font-style:italic;font-weight:400;font-size:clamp(1.1rem,2.2vw,1.45rem);color:rgba(255,255,255,.85);max-width:40ch;line-height:1.4}

.eq{display:inline-flex;align-items:flex-end;gap:5px;height:24px;margin-bottom:1.6rem}

.eq span{width:4px;background:var(--accent-soft);border-radius:2px;height:45%}

@media (prefers-reduced-motion: no-preference){
    .eq.playing span{animation:bounce 1.3s ease-in-out infinite}
    .eq.playing span:nth-child(1){animation-delay:-.2s}
    .eq.playing span:nth-child(2){animation-delay:-.5s}
    .eq.playing span:nth-child(3){animation-delay:0s}
    .eq.playing span:nth-child(4){animation-delay:-.7s}
    .eq.playing span:nth-child(5){animation-delay:-.3s}
    .eq.playing span:nth-child(6){animation-delay:-.6s}
    .eq.playing span:nth-child(7){animation-delay:-.1s}
  }

@keyframes bounce{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

.section{padding-block:clamp(4.5rem,10vw,8rem)}

.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}

.section-head h2{font-size:clamp(2.3rem,5vw,3.6rem);margin:.9rem 0 1rem}

.section-head p{font-size:1.08rem;color:var(--stone)}

.wave{width:150px;height:16px;color:var(--accent);opacity:.9;margin-top:1.4rem;display:block}

.player{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}

.now{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:clamp(1.6rem,3.5vw,2.6rem);background:linear-gradient(160deg,#fffdf9,#f6efe3);border-bottom:1px solid var(--line)}

.now .meta .eyebrow{color:var(--accent)}

.now .meta h3{font-size:clamp(1.6rem,3.5vw,2.3rem);margin:.5rem 0 .35rem;line-height:1.05}

.now .meta .sub{color:var(--stone);font-size:.98rem}

.now .art{width:96px;height:96px;border-radius:12px;flex:none;display:grid;place-items:center;background:linear-gradient(150deg,#3a2f27,#1c1712);color:var(--accent-soft)}

.controls{display:flex;flex-direction:column;gap:.9rem;padding:0 clamp(1.6rem,3.5vw,2.6rem) clamp(1.6rem,3.5vw,2.4rem);background:linear-gradient(160deg,#fffdf9,#f6efe3)}

.seekrow{display:flex;align-items:center;gap:.9rem;font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--stone)}

input[type=range].seek{-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;width:100%;background:linear-gradient(to right,var(--accent) 0 var(--pct,0%),var(--line) var(--pct,0%) 100%);cursor:pointer}

input[type=range].seek::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;margin-top:0}

input[type=range].seek::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--ink);cursor:pointer}

input[type=range].seek::-moz-range-track{background:transparent}

input[type=range].seek::-moz-range-progress{background:var(--accent);height:5px;border-radius:3px}

.btns{display:flex;align-items:center;gap:1.1rem}

.icon-btn{background:none;border:none;cursor:pointer;color:var(--ink);display:grid;place-items:center;padding:.3rem;border-radius:50%;transition:color .2s,transform .2s}

.icon-btn:hover{color:var(--accent);transform:scale(1.08)}

.play-btn{width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;border:none;cursor:pointer;transition:background .25s,transform .25s}

.play-btn:hover{background:#000;transform:scale(1.05)}

.hint{font-size:.82rem;color:var(--accent);margin-left:auto;max-width:22ch;text-align:right;display:none;line-height:1.4}

.hint.show{display:block}

.list{list-style:none}

.track{display:grid;grid-template-columns:2.4rem 1fr auto 2.4rem;gap:1rem;align-items:center;padding:1rem clamp(1.4rem,3vw,2.2rem);border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s}

.track:last-child{border-bottom:none}

.track:hover{background:#faf5ec}

.track .num{font-variant-numeric:tabular-nums;color:var(--stone);font-size:.9rem}

.track .tt{font-family:"Fraunces",serif;font-size:1.12rem;color:var(--ink);line-height:1.2}

.track .tp{font-size:.85rem;color:var(--stone);margin-top:.1rem}

.track .len{font-variant-numeric:tabular-nums;color:var(--stone);font-size:.88rem}

.track .go{color:var(--accent);opacity:0;transition:opacity .2s}

.track:hover .go{opacity:1}

.track.active{background:#f6efe3}

.track.active .num{color:transparent;position:relative}

.track.active .num::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}

.track.active.playing .num::before{border:none;width:9px;height:12px;background:var(--accent);box-shadow:6px 0 0 var(--accent);left:1px}

.track.active .go{opacity:1}

.filmo{border-top:1px solid var(--line)}

.row{display:grid;grid-template-columns:1fr 10rem 12rem 4.5rem;gap:1.5rem;align-items:baseline;padding:1.5rem .5rem;border-bottom:1px solid var(--line);transition:background .2s,padding-left .25s}

.row:hover{background:#faf5ec;padding-left:1rem}

.row .proj{font-family:"Fraunces",serif;font-size:1.3rem;color:var(--ink)}

.row .fmt{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}

.row .dir{color:var(--stone);font-size:.98rem}

.row .dir span{color:var(--stone);opacity:.7;font-size:.82rem;display:block;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.1rem}

.row .yr{font-variant-numeric:tabular-nums;color:var(--stone);text-align:right}

.filmo-head{display:grid;grid-template-columns:1fr 10rem 12rem 4.5rem;gap:1.5rem;padding:0 .5rem .9rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);font-weight:600}

.filmo-head .r{text-align:right}

.band{background:var(--espresso);color:#fff;position:relative;overflow:hidden;padding-block:clamp(4.5rem,10vw,7rem)}

.band .wave-bg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);color:rgba(201,168,122,.10);width:100%;height:200px}

.band .inner{position:relative;text-align:center;max-width:40rem;margin-inline:auto}

.band .eyebrow{color:var(--accent-soft)}

.band h2{color:#fff;font-size:clamp(2.2rem,5vw,3.5rem);margin:1rem 0 1.1rem}

.band p{color:rgba(255,255,255,.75);font-size:1.1rem;margin-bottom:2rem;line-height:1.7}

.cta{display:inline-flex;align-items:center;gap:.7rem;background:var(--accent-soft);color:var(--espresso);font-weight:600;font-size:.98rem;padding:.95rem 1.9rem;border-radius:2px;border:none;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}

.cta svg{transition:transform .25s}

.cta:hover{transform:translateY(-2px);background:#d9bd94;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}

.cta:hover svg{transform:translateX(4px)}

@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}.eq span{animation:none}}

@media (max-width:860px){
    nav ul{gap:1.3rem}nav a{font-size:.85rem}.brand{font-size:1.1rem}
    .now{grid-template-columns:1fr;gap:1.2rem}
    .now .art{width:72px;height:72px;order:-1}
    .row,.filmo-head{grid-template-columns:1fr auto;gap:.4rem 1rem}
    .row .fmt{grid-row:2;grid-column:1}
    .row .dir{grid-row:3;grid-column:1/-1}
    .row .yr{grid-row:1;grid-column:2}
    .filmo-head{display:none}
    .track{grid-template-columns:2rem 1fr auto;gap:.8rem}
    .track .go{display:none}
  }

@media (max-width:520px){nav ul li:not(:last-child){display:none}}

.track .mood{display:inline-block;margin-left:.6rem;padding:.1rem .55rem;border:1px solid var(--line);border-radius:999px;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);vertical-align:middle}