/* Emphasis Tattoo — styles.css
   Shared across all pages. Forked from Ape Studios "bold" sample with Emphasis brand tokens. */

:root{
  --bg:#0a0a0a;
  --bg-2:#101010;
  --ink:#f5f5f5;
  --ink-soft:#9a9a9a;
  --ink-dim:#5e5e5e;
  --line:#1f1f1f;
  --accent:#00d4e0;       /* bright cyan — primary brand accent */
  --accent-2:#7ee8ee;     /* pastel cyan — hover/secondary */
  --accent-3:#16a89c;     /* teal — tertiary */
  --max:1400px;
  --pad:40px;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --display:'Archivo Black',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --body:Inter,system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* NAV — transparent overlay on hero, sticky on inner pages */
nav.top{padding:24px 0;position:absolute;top:0;left:0;right:0;z-index:50;background:transparent}
nav.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{display:flex;align-items:center;line-height:0}
.brand img{height:64px;width:auto;display:block;transition:opacity 0.2s}
.brand:hover img{opacity:0.85}
.top-links{display:flex;gap:32px;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft)}
.top-links a{position:relative;padding:6px 0}
.top-links a:hover, .top-links a.active{color:var(--accent)}
.top-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent)}
.top-cta{background:var(--accent);color:#000;padding:12px 22px;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;transition:all 0.2s;cursor:pointer}
.top-cta:hover{background:var(--accent-2);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--accent)}
.nav-burger{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:10px;z-index:60}
.nav-burger span{width:22px;height:2px;background:#fff;display:block;transition:transform 0.3s var(--ease),opacity 0.2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-drawer{position:fixed;inset:0;background:var(--bg);z-index:55;display:flex;flex-direction:column;padding:96px 32px 40px;transform:translateY(-100%);transition:transform 0.4s var(--ease);visibility:hidden;overflow-y:auto}
.mobile-drawer.open{transform:translateY(0);visibility:visible}
.mobile-drawer-links{display:flex;flex-direction:column;gap:4px;margin-top:24px}
.mobile-drawer-links a{font-family:var(--display);font-size:30px;text-transform:uppercase;color:#fff;padding:14px 0;border-bottom:1px solid var(--line);letter-spacing:-0.02em}
.mobile-drawer-links a:hover, .mobile-drawer-links a.active{color:var(--accent)}
.mobile-drawer-cta{margin-top:28px}
.mobile-drawer-foot{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);padding-top:24px}
.mobile-drawer-foot a{color:var(--accent)}

/* HERO — homepage */
.hero{position:relative;padding:160px 0 100px;overflow:hidden;min-height:90vh;display:flex;align-items:center}
.hero::before{content:"";position:absolute;top:-20%;right:-15%;width:60vmax;height:60vmax;border-radius:50%;background:radial-gradient(circle,rgba(0,212,224,0.18) 0%,transparent 65%);z-index:0;pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-30%;left:-20%;width:60vmax;height:60vmax;border-radius:50%;background:radial-gradient(circle,rgba(22,168,156,0.12) 0%,transparent 65%);z-index:0;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:60px;align-items:center;position:relative;z-index:1;width:100%}
.hero-eyebrow{display:flex;gap:12px;align-items:center;margin-bottom:36px}
.hero-eyebrow .dot{width:12px;height:12px;background:var(--accent);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(0.85)}}
h1.bold-h1{font-family:var(--display);font-size:clamp(64px,10vw,168px);line-height:0.86;letter-spacing:-0.045em;text-transform:uppercase;margin-bottom:32px}
h1.bold-h1 .line2{display:block;color:var(--accent)}
.hero-tag{font-size:20px;color:var(--ink-soft);max-width:48ch;line-height:1.5;margin-bottom:36px}
.hero-tag strong{color:var(--ink);font-weight:600}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 30px;font-family:var(--mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;transition:all 0.2s var(--ease);cursor:pointer;border:0;line-height:1}
.btn-fill{background:var(--accent);color:#000}
.btn-fill:hover{background:var(--accent-2);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent-3)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#000}
.btn-dark{background:#000;color:var(--ink);border:2px solid var(--accent)}
.btn-dark:hover{background:var(--accent);color:#000}
.btn .arr{transition:transform 0.2s}
.btn:hover .arr{transform:translateX(4px)}

/* Hero side: portrait card (kept for future use) */
.hero-side .photo{aspect-ratio:3/4;background:#0e0e0e;border:2px solid var(--accent);overflow:hidden;position:relative;box-shadow:12px 12px 0 var(--accent-3)}
.hero-side .photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.08) brightness(0.96)}
.hero-side .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,212,224,0.18) 100%);mix-blend-mode:screen;pointer-events:none}
.hero-side .caption{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft)}
.hero-side .caption strong{color:var(--accent);font-weight:400}
/* Hero side: stat cards (current default) */
.hero-side .stat-card{border:2px solid var(--line);padding:22px 26px;margin-bottom:14px;background:var(--bg-2);transition:border-color 0.2s var(--ease)}
.hero-side .stat-card:hover{border-color:var(--accent)}

/* Strip image band — full-bleed shop interior between hero and roster */
.strip-image{width:100%;background:#000;line-height:0;position:relative;overflow:hidden}
.strip-image img{width:100%;height:auto;display:block;max-height:78vh;object-fit:cover;filter:contrast(1.04) brightness(0.98)}
@media(max-width:900px){.strip-image img{max-height:54vh}}

/* Owner cards — face is near the top of the source portrait, anchor the crop there */
.artist-card.owner-card .photo img{object-position:center top}
.artist-card.owner-card .photo{aspect-ratio:3/4}

/* SUB-HERO — inner page heads (about/artists/etc.) */
.page-head{padding:200px 0 80px;position:relative;overflow:hidden;background:var(--bg)}
.page-head::before{content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,224,0.12) 0%,transparent 70%);pointer-events:none}
.page-head .wrap{position:relative;z-index:1}
.page-head .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.page-head h1{font-family:var(--display);font-size:clamp(56px,8vw,128px);line-height:0.9;letter-spacing:-0.04em;text-transform:uppercase;margin-bottom:22px}
.page-head h1 em{color:var(--accent);font-style:normal}
.page-head p.sub{font-size:19px;color:var(--ink-soft);max-width:60ch;line-height:1.5}

/* SECTION SCAFFOLDING */
section{padding:120px 0;position:relative}
section.tight{padding:80px 0}
section.alt{background:var(--bg-2)}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:60px;gap:32px;flex-wrap:wrap}
.section-head h2{font-family:var(--display);font-size:clamp(48px,6.5vw,96px);line-height:0.9;letter-spacing:-0.04em;text-transform:uppercase;max-width:16ch}
.section-head h2 em{color:var(--accent);font-style:normal}
.section-head .meta{text-align:right;color:var(--ink-soft);font-size:13px;line-height:1.7;font-family:var(--mono);letter-spacing:0.05em;text-transform:uppercase}
.section-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}

/* ARTIST ROSTER (homepage) — table-style rows like bold.html */
.roster-table{border-top:2px solid var(--ink)}
.roster-row{display:grid;grid-template-columns:80px 1.6fr 1fr 1fr 120px;gap:32px;padding:28px 0;border-bottom:1px solid var(--line);align-items:center;transition:background 0.2s var(--ease),padding 0.3s var(--ease);text-decoration:none;color:inherit}
.roster-row:hover{background:#0f0f0f;padding-left:16px;padding-right:16px}
.roster-row .n{font-family:var(--mono);color:var(--ink-soft);font-size:13px}
.roster-row .name{font-family:var(--display);font-size:28px;letter-spacing:-0.01em;text-transform:uppercase}
.roster-row .sec{font-size:13px;color:var(--ink-soft);letter-spacing:0.05em;text-transform:uppercase}
.roster-row .style{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase}
.roster-row .arrow{text-align:right;font-size:18px;color:var(--ink-soft)}
.roster-row:hover .name{color:var(--accent)}
.roster-row:hover .arrow{color:var(--accent);transform:translateX(4px)}

/* ARTIST GRID (artists.html) — cards */
.artist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.artist-card{background:var(--bg-2);border:2px solid var(--line);overflow:hidden;display:block;color:inherit;transition:all 0.25s var(--ease);position:relative}
.artist-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.artist-card .photo{aspect-ratio:4/5;overflow:hidden;background:#000;position:relative}
.artist-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease);filter:contrast(1.08)}
.artist-card:hover .photo img{transform:scale(1.04)}
.artist-card .body{padding:24px 26px}
.artist-card .name{font-family:var(--display);font-size:28px;letter-spacing:-0.01em;text-transform:uppercase;margin-bottom:8px}
.artist-card:hover .name{color:var(--accent)}
.artist-card .style{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:14px}
.artist-card p{font-size:15px;color:var(--ink-soft);line-height:1.5}

/* ARTIST DETAIL PAGE — big hero portrait + work grid */
.artist-hero{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start;padding:200px 0 80px;position:relative;overflow:hidden}
.artist-hero::before{content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,224,0.12) 0%,transparent 70%);pointer-events:none}
.artist-portrait{aspect-ratio:3/4;background:#0e0e0e;border:2px solid var(--accent);overflow:hidden;position:relative;box-shadow:14px 14px 0 var(--accent-3);z-index:1}
.artist-portrait img{width:100%;height:100%;object-fit:cover;filter:contrast(1.08)}
.artist-meta{position:relative;z-index:1}
.artist-meta .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.artist-meta h1{font-family:var(--display);font-size:clamp(64px,8vw,128px);line-height:0.88;letter-spacing:-0.04em;text-transform:uppercase;margin-bottom:24px}
.artist-meta .specs{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:28px}
.artist-meta p.bio{font-size:18px;color:var(--ink-soft);line-height:1.6;margin-bottom:36px;max-width:50ch}
.artist-meta .meta-row{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:36px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.artist-meta .meta-row .item{font-family:var(--mono);font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-soft)}
.artist-meta .meta-row .item strong{display:block;color:var(--ink);font-size:15px;font-family:var(--body);font-weight:600;letter-spacing:0;text-transform:none;margin-top:6px}

/* WORK GRID (gallery + artist detail pages) — masonry-ish */
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.work-grid .tile{position:relative;overflow:hidden;background:#000;aspect-ratio:3/4;display:block}
.work-grid .tile img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease)}
.work-grid .tile:hover img{transform:scale(1.05)}
.work-grid .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,0.5) 100%);opacity:0;transition:opacity 0.3s}
.work-grid .tile:hover::after{opacity:1}
.work-grid .tile.tall{grid-row:span 2}
.work-grid .tile.wide{grid-column:span 2}

/* CONTENT BLOCK */
.content-block{padding:96px 0}
.content-block.dark{background:var(--bg-2)}
.content-block h2{font-family:var(--display);font-size:clamp(40px,5vw,72px);line-height:0.95;letter-spacing:-0.035em;text-transform:uppercase;margin-bottom:24px}
.content-block h2 em{color:var(--accent);font-style:normal}
.content-block p{font-size:18px;color:var(--ink-soft);line-height:1.65;margin-bottom:18px;max-width:64ch}
.content-block p strong{color:var(--ink);font-weight:600}
.content-block ul{margin:18px 0 24px 22px;color:var(--ink-soft)}
.content-block li{font-size:17px;line-height:1.6;margin-bottom:8px}
.content-block h3{font-family:var(--display);font-size:24px;text-transform:uppercase;letter-spacing:-0.01em;margin:36px 0 14px;color:var(--ink)}

/* FAQ */
.faq-list{border-top:2px solid var(--ink);max-width:880px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);padding:24px 0}
.faq-item summary{font-family:var(--display);font-size:21px;letter-spacing:-0.01em;text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--ink);padding:8px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--display);font-size:32px;color:var(--accent);transition:transform 0.2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{font-size:17px;color:var(--ink-soft);line-height:1.65;padding:14px 0 8px;max-width:64ch}

/* OUTRO CTA band */
.outro{padding:140px 0;background:var(--accent);color:#000;text-align:center;position:relative;overflow:hidden}
.outro::before{content:"EMPHASIS·EMPHASIS·EMPHASIS·EMPHASIS·";position:absolute;top:50%;left:0;width:200%;font-family:var(--display);font-size:220px;color:rgba(0,0,0,0.06);transform:translateY(-50%);white-space:nowrap;pointer-events:none}
.outro .wrap{position:relative}
.outro h2{font-family:var(--display);font-size:clamp(56px,8vw,128px);line-height:0.9;letter-spacing:-0.04em;text-transform:uppercase;margin-bottom:32px}
.outro p{font-size:20px;max-width:48ch;margin:0 auto 36px;line-height:1.45;font-weight:500}
.outro .btn-fill{background:#000;color:var(--accent)}
.outro .btn-fill:hover{background:#fff;color:#000;box-shadow:6px 6px 0 #000}

/* FOOTER */
footer{background:#000;color:var(--ink-soft);padding:72px 0 32px;font-size:14px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-col h4{font-family:var(--mono);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:18px}
.foot-col ul{list-style:none}
.foot-col li{padding:5px 0;color:var(--ink-soft)}
.foot-col a:hover{color:var(--accent)}
.foot-brand img{height:54px;width:auto;margin-bottom:14px}
.foot-col p{color:var(--ink-soft);line-height:1.6;max-width:34ch}
.foot-bottom{padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--ink-dim);font-family:var(--mono);font-size:11px;letter-spacing:0.15em;text-transform:uppercase}
.foot-bottom a{color:var(--accent)}

/* BOOKINGS MODAL */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:200;opacity:0;visibility:hidden;transition:opacity 0.25s var(--ease),visibility 0.25s var(--ease)}
.modal-backdrop.open{opacity:1;visibility:visible}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.96);background:var(--bg);border:2px solid var(--accent);box-shadow:14px 14px 0 var(--accent-3);max-width:920px;width:calc(100% - 40px);max-height:calc(100vh - 40px);overflow-y:auto;z-index:201;padding:48px 56px;opacity:0;visibility:hidden;transition:all 0.3s var(--ease)}
.modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.modal-close{position:absolute;top:18px;right:22px;width:42px;height:42px;display:grid;place-items:center;font-size:24px;color:var(--ink-soft);transition:color 0.2s}
.modal-close:hover{color:var(--accent)}
.modal h2{font-family:var(--display);font-size:48px;text-transform:uppercase;letter-spacing:-0.02em;margin-bottom:8px;line-height:1}
.modal h2 em{color:var(--accent);font-style:normal}
.modal .modal-sub{color:var(--ink-soft);margin-bottom:32px;font-size:15px}
.modal form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.modal .field-full{grid-column:1 / -1}
.modal label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.modal label .req{color:var(--accent)}
.modal input[type=text],
.modal input[type=email],
.modal input[type=tel],
.modal select,
.modal textarea{width:100%;padding:14px 16px;background:#0e0e0e;border:1px solid var(--line);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.4;transition:border-color 0.2s;border-radius:0}
.modal input:focus, .modal select:focus, .modal textarea:focus{outline:0;border-color:var(--accent)}
.modal textarea{resize:vertical;min-height:120px}
.modal .file-row{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;background:#0e0e0e;border:1px dashed var(--line);color:var(--ink-soft);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase}
.modal .file-row:hover{border-color:var(--accent);color:var(--accent)}
.modal .file-row input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.modal .file-row .file-icon{font-size:18px;color:var(--accent)}
.modal .file-row .file-status{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:0.12em}
.modal .file-hint{grid-column:1 / -1;font-family:var(--mono);font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-dim);margin-top:-8px}
.modal .consent{grid-column:1 / -1;display:flex;align-items:flex-start;gap:14px;padding:18px;background:#0e0e0e;border:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--ink-soft)}
.modal .consent input{margin-top:4px;flex-shrink:0;accent-color:var(--accent);width:18px;height:18px;cursor:pointer}
.modal .consent a{color:var(--accent);text-decoration:underline}
.modal .submit-row{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:14px;margin-top:8px}
.modal .form-status{grid-column:1 / -1;padding:14px 18px;border-left:3px solid var(--accent);background:#0e0e0e;font-family:var(--mono);font-size:12px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink);margin-top:8px;display:none}
.modal .form-status.show{display:block}
.modal .form-status.error{border-color:#ff5252;color:#ff8a8a}
/* Honeypot — hidden but in DOM */
.honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* RESPONSIVE */
@media(max-width:1100px){
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .artist-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .top-links, .top-cta{display:none}
  .nav-burger{display:flex}
  .hero{padding:140px 0 80px;min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-side .photo{max-width:380px;margin:0 auto}
  .artist-hero{grid-template-columns:1fr;padding:160px 0 60px}
  .artist-portrait{max-width:380px;margin:0 auto}
  .roster-row{grid-template-columns:50px 1fr 100px;gap:14px}
  .roster-row .sec, .roster-row .style{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .work-grid .tile.wide, .work-grid .tile.tall{grid-column:span 1;grid-row:span 1}
  section{padding:80px 0}
  .modal{padding:32px 28px;border-width:1px}
  .modal h2{font-size:32px}
  .modal form{grid-template-columns:1fr}
  .modal .submit-row{flex-direction:column}
  .modal .submit-row .btn{width:100%;justify-content:center}
  :root{--pad:24px}
}
@media(max-width:600px){
  .artist-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .brand img{height:50px}
  h1.bold-h1{font-size:clamp(48px,12vw,72px)}
  .hero{padding:120px 0 60px}
  .page-head{padding:160px 0 60px}
  .page-head h1{font-size:clamp(44px,12vw,72px)}
  .outro{padding:96px 0}
  .outro h2{font-size:clamp(44px,12vw,72px)}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}