/* Original animated instrument, with restrained geometric folk borders. */
.home-hero {
  min-height:560px;
  grid-template-columns:56% 44%;
  margin:0 -24px 26px;
  border-bottom:1px solid #c8bba5;
  background:var(--paper);
}
.home-hero .hero-art { min-height:560px; }
.home-hero .hero-instrument { width:min(490px,88%); left:49%; top:48%; }
.home-hero .hero-copy { align-self:center; padding:55px 9% 55px 5%; }
.home-hero .eyebrow { font-size:16px; letter-spacing:4px; margin-bottom:20px; }
.home-hero h1 { font:500 clamp(36px,4vw,54px)/1.5 var(--serif); letter-spacing:3px; margin-bottom:20px; }
.home-hero .hero-intro { font-size:16px; max-width:24em; }
.home-hero .hero-actions { gap:24px; flex-wrap:wrap; }
.home-hero .text-link { font-size:16px; min-height:48px; }
.home-hero .hero-note { font-size:14px; letter-spacing:1px; }
.home-hero .hero-ribbon { height:240px; }
.home-hero .hero-ribbon-top { top:-44px; }
.home-hero .hero-ribbon-bottom { bottom:-15px; }
.home-hero .hero-seed { left:8%; }
.home-hero .art-label { font-size:13px; bottom:32px; }
.home-hero .art-label b { font-size:14px; }
.footer-sea { margin:0 -24px; }

/* These non-representational lines sit in padding, beneath the content. */
:root {
  --folk-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' fill='none' stroke='%23954d35' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 12H20L28 4L36 12L28 20L20 12H60L68 4L76 12L68 20L60 12H100L108 4L116 12L108 20L100 12H140L148 4L156 12L148 20L140 12H160'/%3E%3Cpath d='M0 3H14M42 3H54M82 3H94M122 3H134M0 21H14M42 21H54M82 21H94M122 21H134' stroke='%23b58d53'/%3E%3C/svg%3E");
}
:is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame) {
  position:relative;
  isolation:isolate;
  --folk-height:14px;
  --folk-inset:5px;
}
:is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog)::before,
:is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog)::after {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  height:var(--folk-height,14px);
  background-image:var(--folk-pattern);
  background-repeat:repeat-x;
  background-size:auto 100%;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  clip-path:inset(0 50% 0 50%);
  transition:clip-path 1.15s cubic-bezier(.22,.68,.18,1),opacity .35s ease;
}
:is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog)::before {
  top:var(--folk-inset,5px);
}
:is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog)::after {
  bottom:var(--folk-inset,5px);
  transform:rotate(180deg);
  transition-delay:100ms,0ms;
}
:is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog):is(:hover,:focus-within)::before,
:is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog):is(:hover,:focus-within)::after {
  opacity:.6;
  clip-path:inset(0 0 0 0);
}
.home-main>.section { --folk-height:15px; --folk-inset:6px; }
.function-nav>a,.lesson-list>button,.input-frame { --folk-height:8px; --folk-inset:3px; }
.home-main>.blank-section { padding-top:26px; padding-bottom:26px; }
.input-frame { border-radius:3px; }
.input-frame::before,.input-frame::after { z-index:1; left:8px; right:8px; }
.input-frame input { display:block; }
.function-nav>a { transition:background .25s,border-color .25s,box-shadow .25s; }
.function-nav>a:hover { box-shadow:0 5px 16px #59412314; }
.lesson-feature,.empty-state,.score-card { transition:border-color .35s; }
.lesson-feature:hover,.empty-state:hover,.score-card:hover { border-color:#aa7956; }

/* Pausing motion also disables the new drawing transitions. */
.motion-paused :is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog)::before,
.motion-paused :is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog)::after { transition:none; }

@media(min-width:1600px) {
  .home-hero,.home-hero .hero-art { min-height:620px; }
  .home-hero .hero-instrument { width:530px; }
}
@media(max-width:1000px) and (min-width:701px) {
  .home-hero,.home-hero .hero-art { min-height:500px; }
  .home-hero { grid-template-columns:52% 48%; }
  .home-hero .hero-instrument { width:390px; max-width:97%; }
  .home-hero .hero-copy { padding:36px 6%; }
  .home-hero h1 { font-size:38px; }
}
@media(max-width:700px) {
  .home-hero { display:flex; flex-direction:column; min-height:0; margin:0 -14px 24px; }
  .home-hero .hero-art { min-height:340px; height:340px; width:100%; overflow:hidden; }
  .home-hero .hero-instrument { width:min(320px,86%); top:46%; left:50%; }
  .home-hero .hero-ribbon { height:175px; }
  .home-hero .hero-ribbon-top { top:-45px; }
  .home-hero .hero-ribbon-bottom { bottom:-22px; }
  .home-hero .art-label { bottom:10px; font-size:12px; }
  .home-hero .art-label b { font-size:12px; }
  .home-hero .hero-copy { align-self:stretch; padding:18px 26px 32px; }
  .home-hero .eyebrow { font-size:14px; margin-bottom:10px; }
  .home-hero h1 { font-size:34px; line-height:1.4; letter-spacing:2px; margin-bottom:12px; }
  .home-hero .hero-intro { margin-bottom:18px; }
  .home-hero .hero-note { margin-top:20px; }
  .home-hero .hero-actions { gap:20px; }
  .footer-sea { margin:0 -14px; }
  .home-main>.section { --folk-height:10px; --folk-inset:4px; }
}
@media(hover:none) {
  :is(.function-nav>a,.lesson-feature,.empty-state,.score-card)::before,
  :is(.function-nav>a,.lesson-feature,.empty-state,.score-card)::after { opacity:.24; clip-path:inset(0 0 0 0); }
}
@media(prefers-reduced-motion:reduce) {
  :is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog)::before,
  :is(.function-nav>a,.home-main>.section,.lesson-feature,.lesson-list>button,.fret-controls,.note-result,.empty-state,.market-empty,.score-card,.login-panel,.practice-box,.input-frame,dialog)::after { transition:none; }
}