/* Aviel Mymon: a listening-first portfolio. Shared utility and legal styles remain separate. */
:root{--bg:#131414;--surface:#1b1c1c;--ink:#f5f2eb;--muted:#c0bcb5;--line:#454543;--accent:#ff857a;--action:#b52c23;--focus:#ffd166;--white:#f5f2eb;--red:var(--action);--pad:clamp(24px,4.5vw,80px);--content:1280px;--section-space:clamp(64px,8vw,116px);--header-height:84px}
html[data-theme="light"]{--bg:#eeeae2;--surface:#e4dfd6;--ink:#232321;--muted:#54534e;--line:#a39d93;--accent:#a42e25;--action:#aa2b23;--focus:#84241d}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 24px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.65 "Assistant",sans-serif}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}
::selection{background:var(--action);color:white}
:is(a,button,input):focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.shell{width:min(var(--content),calc(100% - 2 * var(--pad)));margin-inline:auto}
.skip-link{position:fixed;z-index:400;inset-block-start:10px;inset-inline-start:10px;background:var(--ink);color:var(--bg);padding:12px 18px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.progress{position:fixed;z-index:100;inset:0 0 auto;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right}
#header{position:sticky;z-index:80;top:0;background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
#header>nav{min-height:82px;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;direction:ltr}
.header-tools{justify-self:start}.logo{width:194px;min-height:44px;display:flex;align-items:center}.logo img{width:100%;height:auto}
.portfolio{padding-bottom:var(--st-banner-height,0px)}
.header-tools{display:flex;align-items:center;gap:12px}
.portfolio .st-toolbar{position:static;display:flex;gap:4px}
.portfolio .st-toolbar button{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--ink);cursor:pointer}
.portfolio .st-toolbar button:hover{border-color:var(--accent)}
.portfolio .st-toolbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portfolio .st-toolbar button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:900px){.portfolio .header-tools{gap:4px}.portfolio .lang-switch button{min-width:44px;padding-inline:4px}.portfolio #header .logo{width:clamp(110px,31vw,144px)}.portfolio #header>nav{column-gap:12px}.st-large-text .portfolio #header>nav{grid-template-columns:1fr auto}.st-large-text .portfolio .header-tools{grid-column:1/-1;grid-row:2;justify-content:space-between}.st-large-text .portfolio #header .logo{grid-column:1/-1;grid-row:1;justify-self:center}.st-large-text .portfolio .nav-links{grid-row:3}}
html[data-theme="light"] .logo img{filter:invert(1)}
.lang-switch{display:flex;gap:2px;direction:ltr}.lang-switch button{min-width:44px;min-height:44px;border:1px solid transparent;background:transparent;color:var(--ink);font:650 .75rem/1 "Manrope",sans-serif;cursor:pointer}
.lang-switch button.active{border-color:var(--line)}.lang-switch button:hover{border-color:var(--ink)}
.nav-links{display:flex;justify-self:end;align-items:center;gap:clamp(12px,2vw,28px);direction:rtl;font-weight:600;font-size:.92rem}
body.lang-en .nav-links{direction:ltr;font-family:"Manrope",sans-serif;font-size:.78rem}
.nav-links a{display:flex;align-items:center;min-height:44px;text-decoration:none;text-underline-offset:8px}
.nav-links a:hover,.nav-links a[aria-current="location"]{text-decoration:underline;text-decoration-color:var(--accent)}
.nav-links a:last-child{color:var(--accent)}
main{background:var(--bg)}section{padding-block:var(--section-space)}
.label{color:var(--accent);font:650 .75rem/1.5 "Manrope",sans-serif;letter-spacing:.12em;text-transform:uppercase;direction:ltr;text-align:start;margin-bottom:22px}
body:not(.lang-en) .label{text-align:right}
h1,h2,h3,p{margin-top:0}h2{font:550 clamp(2.6rem,4.6vw,4.6rem)/1.08 "Assistant",sans-serif;letter-spacing:-.04em;margin-bottom:24px;overflow-wrap:anywhere}
h3{font-weight:550}.outlined{color:inherit;-webkit-text-stroke:0}
.hero{position:relative;isolation:isolate;min-height:690px;display:flex;align-items:center;padding:0;overflow:hidden}
.hero-image{position:absolute;z-index:-1;inset:0 0 0 48%;background:#3a1714}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:63% 40%}
.hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),transparent 18%)}
.hero-content{padding-block:78px 82px;padding-right:50%;direction:ltr}
.kicker{font:600 .67rem/1.7 "Manrope",sans-serif;letter-spacing:.12em;color:var(--muted);margin-bottom:24px}
.hero h1{font:650 clamp(3.4rem,5.6vw,5.5rem)/1.02 "Manrope",sans-serif;letter-spacing:-.065em;text-transform:uppercase;margin:0;overflow-wrap:normal}
.hero h1 span{color:var(--ink)}
.hero-bottom{direction:rtl;margin-top:30px;max-width:490px}
body.lang-en .hero-bottom{direction:ltr}
.hero-service{font-size:1.25rem;line-height:1.45;font-weight:600;margin-bottom:10px}
.hero-intro{color:var(--muted);font-size:1.1rem;line-height:1.65;margin-bottom:24px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 23px;border:1px solid var(--line);border-radius:3px;font:600 1rem/1.4 "Assistant",sans-serif;transition:background .16s,color .16s}
.btn-red{background:var(--action);border-color:var(--action);color:#fff}.btn-red:hover{background:#8f211b;border-color:#8f211b}
.hero .btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}.hero .btn:hover{background:var(--surface);color:var(--ink)}
.text-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:underline;text-underline-offset:5px;font-size:1rem}
.brand-icon{width:21px;height:21px;object-fit:contain;flex:none}
.hero-index{display:none}
.marquee{padding:18px 0;border-block:1px solid var(--line);background:var(--bg);color:var(--muted)}
.marquee-track{width:min(var(--content),calc(100% - 2 * var(--pad)));margin:auto;display:flex;justify-content:space-between;gap:18px;direction:ltr;font:550 .7rem/1.4 "Manrope",sans-serif;letter-spacing:.1em;text-transform:uppercase}
.marquee span:nth-child(n+5){display:none}.marquee span::before{content:"";display:inline-block;vertical-align:middle;width:4px;height:4px;background:var(--accent);margin-inline-end:12px}
#music{background:var(--surface);border-bottom:1px solid var(--line)}
#music .music-grid{width:min(var(--content),calc(100% - 2 * var(--pad)));margin:auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:clamp(32px,6vw,88px);align-items:start}
#music .music-copy p{color:var(--muted);font-size:1.13rem;line-height:1.7;max-width:32ch;margin:0}
#music .recordings{margin:0;border-top:0}
#music .recordings-heading{padding-top:0;color:var(--muted)}
#music .set-copy h3{font-size:clamp(1.25rem,2vw,1.85rem)}
#music .set-row{grid-template-columns:24px minmax(0,1fr) 44px;gap:18px;min-height:126px;padding-block:25px}
#music .set-listen>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#music .set-listen svg{border-color:var(--line)}
.music-followup{border-top:1px solid var(--line);padding-top:22px;margin-top:26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 18px}
.music-followup p{margin:0;color:var(--muted);font-size:1rem}.music-followup a{font-weight:600}
#about{border-bottom:1px solid var(--line)}
.about-top{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:clamp(32px,6vw,88px);align-items:start}
.about-copy{max-width:66ch;color:var(--muted);font-size:1.13rem;line-height:1.8}
.about-copy p{margin:0 0 20px}.about-copy p:last-child{margin-bottom:0}
.about-copy .about-lede{font-size:1.4rem;line-height:1.6;font-weight:500;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:56px}
.fact{padding:26px 24px 0;text-align:start;border-inline-end:1px solid var(--line)}
.fact:first-child{padding-inline-start:0}.fact:last-child{border-inline-end:0}.fact b{display:block;font:550 clamp(2rem,3.5vw,3rem)/1.2 "Manrope",sans-serif;letter-spacing:-.05em;direction:ltr;unicode-bidi:isolate;width:max-content;margin-bottom:10px}
.fact em{font-style:normal;color:var(--accent)}.fact span{display:block;color:var(--muted);font-size:1rem;line-height:1.5}
.experience-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:clamp(32px,6vw,88px);margin-bottom:40px}
.experience-head p{color:var(--muted);font-size:1.13rem;max-width:49ch;margin:0}
.experience-head h2{max-width:19ch}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.step{border-top:1px solid var(--line);padding-top:24px}
.step-num{font:600 .75rem/1.4 "Manrope",sans-serif;color:var(--accent);display:block;margin-bottom:24px;direction:ltr;unicode-bidi:isolate;width:max-content}
.step h3{font-size:1.6rem;line-height:1.25;margin-bottom:14px;letter-spacing:-.02em}.step p{color:var(--muted);font-size:1.08rem;line-height:1.65;margin:0;max-width:35ch}
.contact{background:var(--surface);border-block:1px solid var(--line);padding-bottom:56px}
.contact>.shell{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:clamp(32px,6vw,88px);align-items:center}
.contact h2{margin:0}.contact p{font-size:1.23rem;color:var(--muted);max-width:40ch;margin-bottom:24px}
.contact .actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.contact .btn-glass{background:transparent}
.quick-links{padding-block:32px 48px;background:var(--surface);border-bottom:1px solid var(--line)}
.quick-links>.shell{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:clamp(32px,6vw,88px)}
.quick-links .label{margin:0;color:var(--muted)}
.link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.link-card{display:flex;align-items:flex-start;gap:10px;padding-block:4px;min-height:64px}
.link-icon{flex:none;width:20px;margin-top:3px}.link-icon img{width:20px;height:20px;object-fit:contain}
.link-card strong{font:600 .85rem/1.5 "Manrope",sans-serif}.link-card small{display:block;margin-top:7px;color:var(--muted);font:400 .94rem/1.5 "Assistant",sans-serif}
.link-card:hover strong{text-decoration:underline;text-underline-offset:5px}
footer{padding:28px 0;color:var(--muted);font-size:.88rem}
footer>.shell{display:grid;grid-template-columns:1fr auto;gap:16px 32px;align-items:center}
.business-line{font-size:.88rem}.business-line a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.legal-links{display:flex;flex-wrap:wrap;gap:4px 18px;grid-column:1/-1;font-size:.88rem}
.legal-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
footer>.shell>span{grid-row:1;grid-column:2;font:500 .7rem/1.5 "Manrope",sans-serif;direction:ltr}
.mobile-contact,.theme-toggle{display:none!important}.reveal{opacity:1;transform:none}
.portfolio #site-tools .st-toolbar button{border-radius:4px;box-shadow:none}
.portfolio #site-tools .st-toolbar{gap:6px}
.portfolio #site-tools .st-toolbar button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.portfolio #site-tools .st-toolbar button{width:44px;height:44px;padding:10px;justify-content:center}
.portfolio #site-tools .st-banner{border-radius:5px}
html.st-high-contrast .portfolio .hero .btn{background:#111!important;color:#fff!important;border-color:#fff!important}
html.st-high-contrast .portfolio .logo img{filter:none!important}
html.st-high-contrast .portfolio .lang-switch button,html.st-high-contrast .portfolio .st-toolbar button{color:#fff!important;border-color:#aaa!important;background:#080808!important}
@media(min-width:901px){.st-large-text .portfolio #header>nav{grid-template-columns:1fr auto}.st-large-text .portfolio .logo{grid-column:2;grid-row:1}.st-large-text .portfolio .nav-links{grid-column:1/-1;justify-self:stretch;justify-content:space-between}.st-large-text .portfolio .hero h1{font-size:clamp(3rem,5.7vw,6rem)}}
@media(max-width:1100px){.hero{min-height:620px}.hero h1{font-size:clamp(2.9rem,5.7vw,5rem)}#header>nav{gap:14px}.logo{width:165px}.nav-links{gap:14px}.quick-links>.shell{grid-template-columns:1fr}.quick-links .label{text-align:start}.link-grid{gap:22px}}
@media(max-width:900px){:root{--pad:28px;--header-height:115px}#header>nav{min-height:0;grid-template-columns:1fr auto;gap:2px 16px;padding-block:10px 4px}.logo{grid-column:2;grid-row:1;width:150px}.header-tools{grid-column:1;grid-row:1}.nav-links{grid-column:1/-1;justify-self:stretch;justify-content:space-between;gap:12px}.nav-links a{min-height:44px}.hero{display:block;min-height:0;overflow:visible}.hero-image{position:relative;inset:auto;height:clamp(300px,50vw,440px);width:100%;z-index:0}.hero-image img{object-position:center 38%}.hero-image::after{background:linear-gradient(0deg,var(--bg),transparent 30%)}.hero-content{position:relative;padding:0 0 44px;margin-top:-10px}.hero h1{font-size:clamp(3.25rem,8.8vw,5.5rem);max-width:750px}.hero h1 br:first-of-type{display:block}.hero-bottom{max-width:560px;margin-top:24px}.hero-actions{gap:12px 24px}.hero-service{font-size:1.2rem}.hero-intro{font-size:1.1rem}.kicker{font-size:.65rem;margin-bottom:18px}.marquee-track{flex-wrap:wrap;gap:12px 24px}.marquee span{width:calc(50% - 12px)}#music .music-grid,.about-top,.experience-head,.contact>.shell{grid-template-columns:1fr;gap:30px}#music .music-copy p{max-width:60ch}#music .recordings{margin-top:0}.experience-head{margin-bottom:30px}.steps{gap:24px}.step h3{font-size:1.4rem}.about-copy .about-lede{font-size:1.3rem}.facts{margin-top:36px}.quick-links{padding-top:0}.quick-links .label{text-align:start}.contact{padding-bottom:36px}.contact>.shell{gap:24px}.contact p{font-size:1.15rem}.link-grid{gap:20px}}
@media(max-width:640px){:root{--pad:24px;--section-space:60px}body{font-size:17px}.logo{width:144px}.nav-links{font-size:.9rem}body.lang-en .nav-links{font-size:.72rem}.hero-image{height:310px}.hero h1{font-size:clamp(2.75rem,11.7vw,4.5rem);letter-spacing:-.06em}.hero-content{padding-bottom:36px}.hero-bottom{margin-top:22px}.hero-service{font-size:1.13rem}.hero-intro{font-size:1.0625rem}.hero-actions{gap:10px 20px}.hero-actions .btn{min-width:150px}.kicker{font-size:.6rem;letter-spacing:.09em}.marquee{padding-block:16px}.marquee-track{font-size:.64rem;letter-spacing:.07em}h2{font-size:2.65rem;line-height:1.1}.label{font-size:.72rem;margin-bottom:16px}#music .music-grid{gap:24px}#music .music-copy p{font-size:1.08rem}#music .set-row{min-height:118px;gap:12px;grid-template-columns:20px minmax(0,1fr) 44px}#music .set-copy h3{font-size:1.25rem;letter-spacing:-.025em}#music .recordings-heading{font-size:.62rem;letter-spacing:.04em}.music-followup{display:block}.music-followup p{margin-bottom:3px}.about-copy{font-size:1.08rem;line-height:1.75}.about-copy .about-lede{font-size:1.2rem}.facts{gap:0}.fact{padding:20px 12px 0}.fact b{font-size:2rem}.fact span{font-size:.88rem}.steps{grid-template-columns:1fr;gap:28px}.step{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 16px;padding-top:20px}.step-num{grid-row:1/3;margin-top:6px;margin-bottom:0}.step h3{margin-bottom:10px;font-size:1.5rem}.step p{grid-column:2;max-width:none;font-size:1.0625rem}.link-grid{grid-template-columns:1fr;gap:0}.link-card{border-top:1px solid var(--line);padding:18px 0;min-height:76px;gap:14px}.link-card strong{font-size:.94rem}.link-card small{margin-top:4px;font-size:.94rem}.quick-links>.shell{gap:16px}.quick-links{padding-bottom:22px}footer>.shell{grid-template-columns:1fr;gap:8px}footer>.shell>span{grid-row:auto;grid-column:auto;order:3}.legal-links{gap:2px 16px}.business-line{font-size:.8rem}.contact .btn{width:100%;min-height:54px}.contact .text-link{font-size:1rem}html.st-large-text .hero h1{font-size:clamp(2rem,10vw,4.5rem);overflow-wrap:anywhere}html.st-large-text .facts{grid-template-columns:1fr}.st-large-text .fact{border-inline-end:0;border-bottom:1px solid var(--line);padding:20px 0}.st-large-text .fact:last-child{border-bottom:0}.st-large-text .hero-image{height:280px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}