/* Awwwards reference: Inter Tight, sampled var(--motif-bg, #fff) / var(--motif-ink, #000) with white accents, generous gallery spacing.
   Crooked Orbit's own content and assets remain the subject. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/outfit-variable.ttf') format('truetype')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/inter-tight-300.ttf') format('truetype')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-tight-400.ttf') format('truetype')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-tight-500.ttf') format('truetype')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-tight-600.ttf') format('truetype')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-tight-700.ttf') format('truetype')}
:root,.spark-launch{
  --neutral-background:var(--motif-bg, #fff);--neutral-accent:var(--motif-panel, #fff);
  --font-sans:var(--selected-body-font,'Inter Tight',Arial,sans-serif);
  --font-headline:var(--selected-headline-font,'Inter Tight',Arial,sans-serif);
  --font-editorial:var(--font-headline);
  --mono:var(--selected-interface-font,'Inter Tight',Arial,sans-serif);
  --b-bg:var(--neutral-background);--b-panel:var(--neutral-accent);--b-well:var(--motif-well, #eee);--b-ink:var(--motif-ink, #000);--b-muted:var(--motif-muted, #555);
  --b-sage:var(--motif-sage, #ddd);--b-signal:var(--motif-ink, #000);--b-signal-text:var(--motif-ink, #000);--b-on-signal:var(--neutral-accent);
  --p-saffron:var(--motif-secondary, #888);--p-red:var(--motif-ink, #000);--p-night:var(--neutral-accent);--p-lens:var(--motif-ink, #000);
  --p-rule:1px solid var(--motif-sage, #ddd);--p-hair:1px solid var(--motif-sage, #ddd);--b-frame:1px;
  --content-gutter:max(32px,calc((100vw - 1816px)/2));
  --type-body:1.125rem;--type-note:.875rem;--type-label:.875rem;
  --section-space:120px;--leading-copy:1.6;--line:var(--motif-sage, #ddd);
  color-scheme:light;
}
html,body{background:var(--neutral-background);color:var(--motif-ink, #000)}
body{font-weight:400}
p{font-weight:400}
h1,h2,h3{font-family:var(--font-headline);font-weight:600;filter:none!important}
h1 em,h2 em,h3 em{font-weight:inherit;color:inherit;font-style:normal}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--motif-ink, #000);outline-offset:5px}
.poster .company-nav{min-height:88px;position:relative;top:auto;border:0;background:var(--neutral-background);padding:16px var(--content-gutter);gap:40px}
.brand-lockup{width:142px}
.company-nav nav{gap:28px;font-size:14px;text-transform:none;letter-spacing:0;font-weight:500}
.company-nav nav a{border:0;padding:10px 0}
.company-nav nav a:hover,.company-nav nav a[aria-current='page']{text-decoration:underline;text-underline-offset:6px}
.header-tools{gap:24px}
.header-tools button{font:500 14px/1 var(--mono);text-transform:none;letter-spacing:0}
.header-tools button[data-panel='login']{background:var(--motif-ink, #000);color:var(--neutral-accent);padding:14px 20px;border-radius:6px}
.header-tools .header-cart{border:1px solid var(--motif-sage, #ddd);border-radius:6px;width:48px;margin:0}
.header-cart svg{width:24px;height:24px}
.cart-count{top:-6px;right:-6px;background:#22c55e;color:#062913;font-weight:600;transform-origin:center}
.cart-count[hidden]{display:none}
@keyframes cart-badge-pop{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.22);opacity:1}
  80%{transform:scale(.94)}
  100%{transform:scale(1);opacity:1}
}
@media(prefers-reduced-motion:no-preference){
  .cart-count:not([hidden]){animation:cart-badge-pop 360ms cubic-bezier(.2,.8,.2,1) both}
}
.brand-intro{min-height:0;padding:72px var(--content-gutter) 88px;gap:0;text-align:center;justify-items:center;border:0;background:var(--neutral-background)}
.brand-intro::before,.brand-intro::after{display:none}
.brand-intro .intro-label{max-width:none;font:400 14px/28px var(--mono);margin:0 0 32px;color:var(--motif-ink, #000)}
.brand-intro h1{font-size:clamp(64px,8.25vw,150px);font-weight:600;line-height:1;letter-spacing:-.085em;max-width:1550px;margin:0;filter:none}
.brand-intro h1 strong{font-weight:600}
#site-title .hero-color-word{display:inline-block;position:relative;white-space:nowrap}
.hero-color-layer{position:absolute;inset:0 -.08em -.2em 0;text-align:left;pointer-events:none;opacity:0}
.hero-color-layer--wipe{mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-size:240% 100%;mask-position:100% 0;mask-repeat:no-repeat}
.hero-transition-preview{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:28px;padding:6px;border:1px solid var(--motif-sage);border-radius:10px;background:var(--neutral-accent)}
.hero-transition-preview[hidden]{display:none}
.hero-transition-preview>span{font:400 12px/1.4 var(--mono);padding:0 8px;color:var(--motif-muted)}
.hero-transition-preview button{border:0;border-radius:6px;background:transparent;color:var(--motif-ink);padding:9px 12px;font:500 12px/1.4 var(--mono);cursor:pointer}
.hero-transition-preview button[aria-pressed="true"]{background:var(--motif-ink);color:var(--neutral-accent)}
@media(max-width:480px){.hero-transition-preview{gap:4px}.hero-transition-preview>span{width:100%;padding:4px}.hero-transition-preview button{padding:9px 8px}}
.brand-intro h1 em{color:var(--motif-ink, #000)}
.hero-support{max-width:620px;margin-top:32px}
.brand-intro .hero-support p{max-width:46ch;margin:0;font-size:20px;line-height:1.6;color:var(--motif-muted, #555)}
.plugin-showcase{padding:0 var(--content-gutter) 120px;background:var(--neutral-background)}
.featured-plugin{grid-template-columns:1fr;gap:0}
.featured-image{grid-row:1;margin:0 0 40px;display:block;padding:clamp(24px,5vw,88px);background:var(--neutral-accent);border-radius:8px;overflow:hidden}
.featured-image img.drum-designer-preview{width:100%;max-width:1440px;height:auto;margin:0 auto;display:block;border:0;border-radius:5px;box-shadow:none;transform:none}
.featured-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px;align-items:start}
.featured-copy .product-type{grid-column:1;font:400 14px/1.5 var(--mono);color:var(--motif-muted, #555);text-transform:none;letter-spacing:0;margin:0 0 16px}
.featured-copy .plugin-heading{grid-column:1;grid-row:2;gap:20px;align-items:center}
.featured-copy :is(h1,h2){font-size:clamp(42px,4.3vw,72px);font-weight:600;line-height:1.05;letter-spacing:-.04em;margin:0}
.featured-copy :is(h1,h2) br{display:none}
.featured-copy :is(h1,h2) em{margin-left:0}
.featured-copy .plugin-motif{width:44px}
.featured-copy .featured-summary{grid-column:2;grid-row:1/3;max-width:46ch;margin:0 0 24px;font-size:18px;line-height:1.6}
.featured-copy .product-actions{display:flex;align-items:center;flex-wrap:wrap;grid-column:1;gap:24px}
.featured-copy .product-actions button{cursor:pointer}
.featured-copy .product-actions .text-link{font-size:var(--type-note)}
.featured-copy .launch-button{display:inline-flex;justify-content:space-between;gap:28px;white-space:normal}
.featured-copy .shop-preview-note{grid-column:1;margin:16px 0 0;color:var(--b-muted);font:400 12px/1.5 var(--mono)}
.launch-button,.poster .launch-button,.featured-copy .launch-button{padding:18px 24px;border:1px solid var(--motif-ink, #000);border-radius:6px;box-shadow:none;font:500 14px/1.4 var(--mono);text-transform:none;letter-spacing:0;background:var(--motif-ink, #000);color:var(--neutral-accent)}
html[data-motif] .launch-button--primary:hover{background:var(--motif-muted, #555);filter:none}
.text-link{font:500 14px/1.5 var(--mono);letter-spacing:0;text-transform:none;border-color:var(--motif-secondary, #888);padding-bottom:4px}
.plugin-facts{margin-top:56px;border-top:1px solid var(--motif-sage, #ddd);border-bottom:0;font:400 14px/1.5 var(--mono);letter-spacing:0;text-transform:none}
.plugin-facts span{padding:24px 0;border:0;text-align:center}
.plugin-facts span:first-child{padding-left:0;text-align:left}
.plugin-facts span:last-child{text-align:right}
html[data-motif] .plugin-coming{margin:0 var(--content-gutter) 120px;padding:64px;gap:48px;background:var(--neutral-accent);border-radius:8px;grid-template-columns:1fr 1fr auto;color:var(--motif-ink, #000)}
.plugin-coming .product-type{font:400 14px/1.5 var(--mono);letter-spacing:0;text-transform:none;color:var(--motif-muted, #555)}
.plugin-coming h2{font-size:clamp(36px,4vw,64px);line-height:1.1;font-weight:600;letter-spacing:-.04em;margin:0}
.plugin-coming .plugin-heading{margin-top:20px}
.plugin-coming .plugin-motif{width:44px}
.coming-note{font:400 14px/1.4 var(--mono);padding:12px 16px;border:1px solid var(--motif-sage, #ddd);border-radius:6px;white-space:nowrap}
.poster .company-footer{padding:56px var(--content-gutter);border-top:1px solid var(--motif-sage, #ddd);background:var(--neutral-background)!important;color:var(--motif-ink, #000);gap:40px;font-family:var(--mono);font-size:14px;letter-spacing:0;text-transform:none}
.poster .company-footer nav{font-size:14px;gap:24px}
.company-footer small{font-size:12px}
.poster .company-section{padding-block:112px;border-top:1px solid var(--motif-sage, #ddd)}
.poster .company-eyebrow{font:400 14px/1.5 var(--mono);letter-spacing:0;text-transform:none}
.poster .company-eyebrow .eyebrow-no{font-family:var(--font-headline);font-weight:500}
.story-page h1,.product-hero h1{font-weight:600;font-size:clamp(56px,7vw,112px);line-height:1.05;letter-spacing:-.04em}
.poster .company-section h2{font-weight:600;line-height:1.1}
html[data-motif] .poster #approach,html[data-motif] .poster #about{background:var(--neutral-background)}
.poster .principles,.poster .principles article{border-color:var(--motif-sage, #ddd)}
.product-type,.product-hero>.product-type,.product-tags span,.release-strip,.specification dt,.article-kicker{font-family:var(--mono);letter-spacing:0;text-transform:none}
.product-hero{padding-top:72px;padding-bottom:96px;background:var(--neutral-background)}
.product-hero .plugin-motif{width:80px}
.instrument-shot{padding:clamp(16px,4vw,64px);background:var(--neutral-accent);border-radius:8px}
.instrument-shot img.drum-designer-preview,.details-image img,.founder-portrait img{border:0;border-radius:6px;box-shadow:none}
.product-tags span{border-color:var(--motif-sage, #ddd);border-radius:4px}
.motif-panel,.customer-dialog{border-radius:8px;border:1px solid var(--motif-sage, #ddd);background:var(--neutral-accent);color:var(--motif-ink, #000);box-shadow:0 12px 36px #0001}
.motif-picker summary{border-radius:6px;background:var(--neutral-accent);box-shadow:0 4px 20px #0001}
.motif-choices{grid-template-columns:1fr}
.motif-option{border-radius:6px}
.motif-panel{width:360px}
.motif-heading h2{font-weight:600}
.type-note,.type-controls select{font-family:var(--font-sans)}
.customer-dialog h2{font-weight:600}
.spark-launch .company-nav{min-height:88px;position:relative;top:auto;border:0;background:var(--neutral-background);padding:16px var(--content-gutter);gap:40px}
.spark-launch .hero-bottom .launch-button{padding:18px 24px;border:1px solid var(--motif-ink, #000);border-radius:6px;box-shadow:none;font:500 14px/1.4 var(--mono);letter-spacing:0;text-transform:none;background:var(--motif-ink, #000);color:var(--neutral-accent)}
.release-strip{border-block:1px solid var(--motif-sage, #ddd);letter-spacing:0;text-transform:none}
.spark-launch .company-footer{border-top:1px solid var(--motif-sage, #ddd);background:var(--neutral-background);color:var(--motif-ink, #000);letter-spacing:0;text-transform:none}
.blog-main{max-width:none;margin:0;padding-inline:max(24px,calc((100vw - 1280px)/2))}
.blog-masthead,.article-header,.article-end{border-color:var(--motif-sage, #ddd)}
.blog-masthead,.article-sidebar p,.article-end>span{letter-spacing:0;text-transform:none}
@media(min-width:1900px){.brand-intro{padding-top:96px;padding-bottom:96px}}
@media(max-width:1100px){
  .poster .company-nav{gap:24px;flex-wrap:wrap}
  .company-nav nav{order:2;flex-basis:100%;justify-content:center}
  .header-tools{margin-left:auto}
  .brand-intro{padding-top:56px;padding-bottom:64px}
  .featured-copy{column-gap:40px}
  html[data-motif] .plugin-coming{grid-template-columns:1fr 1fr;padding:40px;gap:32px}
  .coming-note{grid-column:2;justify-self:start}
}
@media(max-width:700px){
  :root,.spark-launch{--content-gutter:24px;--section-space:72px}
  .poster .company-nav{min-height:0;padding:20px 24px;gap:20px}
  .brand-lockup{width:116px}
  .header-tools{gap:16px}
  .header-tools button{font-size:13px}
  .header-tools button[data-panel='login']{padding:12px 16px}
  .header-tools .header-cart{width:42px}
  .company-nav nav{gap:24px;justify-content:space-between;font-size:14px}
  .brand-intro{padding-top:52px;padding-bottom:56px}
  .brand-intro .intro-label{font-size:12px;margin-bottom:24px}
  .brand-intro h1{font-size:clamp(44px,8.3vw,60px);line-height:1.04;letter-spacing:-.085em}
  .hero-support{margin-top:24px;max-width:36ch}
  .brand-intro .hero-support p{font-size:18px;line-height:1.6}
  .plugin-showcase{padding-bottom:72px}
  .featured-image{padding:20px;margin-bottom:28px;border-radius:6px}
  .featured-copy{grid-template-columns:1fr}
  .featured-copy .product-type,.featured-copy .plugin-heading,.featured-copy .featured-summary,.featured-copy .product-actions,.featured-copy .shop-preview-note{grid-column:1;grid-row:auto}
  .featured-copy .plugin-heading{justify-content:space-between;margin-bottom:24px}
  .featured-copy :is(h1,h2){font-size:40px}
  .featured-copy .plugin-motif{width:36px}
  .featured-copy .featured-summary{font-size:16px}
  .featured-copy .product-actions{gap:20px}
  .featured-copy .launch-button{width:auto;padding:16px 20px;font-size:14px}
  .plugin-facts{margin-top:36px;grid-template-columns:1fr 1fr;font-size:13px}
  .plugin-facts span,.plugin-facts span:last-child{padding:16px 0;text-align:left;border:0}
  .plugin-facts span:nth-child(n+3){border-top:1px solid var(--motif-sage, #ddd)}
  html[data-motif] .plugin-coming{grid-template-columns:1fr;margin-bottom:72px;padding:28px;gap:24px}
  .plugin-coming p{font-size:16px}
  .coming-note{grid-column:1}
  .poster .company-footer{padding-block:40px;display:flex;flex-wrap:wrap;gap:32px}
  .poster .company-footer nav{width:100%;gap:24px;order:2}
  .company-footer small{width:100%;order:3}
  .poster .company-section{padding-block:64px}
  .story-page h1,.product-hero h1{font-size:clamp(44px,10vw,64px)}
  .product-hero{padding-top:48px;padding-bottom:64px}
  .product-hero .plugin-motif{width:48px}
  .motif-current{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* Profile-style facts: fine rules, small labels and a generous value row. */
.info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--motif-secondary, #888);border-radius:8px;overflow:hidden;color:var(--motif-ink, #000)}
.info-grid>div{min-width:0;display:grid;grid-template-rows:auto 1fr}
.info-grid>div+div{border-left:1px solid var(--motif-secondary, #888)}
.info-grid dt{padding:18px 22px;border-bottom:1px solid var(--motif-secondary, #888);font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:0}
.info-grid dd{margin:0;padding:26px 22px;font:600 clamp(22px,2vw,30px)/1.25 var(--font-sans);letter-spacing:-.025em;overflow-wrap:anywhere}
.hero-stats{width:min(100%,360px);margin-top:52px}
.brand-intro .hero-stats-caption{font:400 12px/1.5 var(--mono);margin:0 0 16px;color:var(--motif-muted, #555)}
.info-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.info-grid--compact dt{padding:18px 10px;font-size:11px}
.info-grid--compact dd{padding:22px 10px;font-size:28px}
.featured-copy .product-price{grid-column:1;grid-row:3;margin:24px 0 20px;font:500 30px/1.2 var(--font-sans);letter-spacing:-.025em}
.featured-copy .product-price span{font:400 12px/1.5 var(--mono);letter-spacing:0}
.featured-copy .product-actions{grid-row:4;justify-self:start}
.featured-copy .shop-preview-note{grid-row:5;text-align:left}
.info-grid--wide{margin-top:64px}
.featured-copy .instrument-statement{grid-column:2;grid-row:2/6;max-width:none;margin:0;font:300 clamp(28px,2.7vw,48px)/1.3 var(--font-sans);letter-spacing:-.025em;color:var(--motif-ink, #000);text-wrap:pretty}
@media(max-width:700px){
  .hero-stats{margin-top:36px;width:min(100%,330px)}
  .info-grid--compact dt{font-size:10px;padding:16px 8px}
  .info-grid--compact dd{font-size:26px;padding:20px 8px}
  .featured-copy .product-actions,.featured-copy .shop-preview-note{grid-row:auto;justify-self:start;text-align:left}
  .info-grid--wide{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}
  .info-grid--wide>div:nth-child(3){border-left:0}
  .info-grid--wide>div:nth-child(n+3){border-top:1px solid var(--motif-secondary, #888)}
  .info-grid--wide dt{padding:16px;font-size:10px}
  .info-grid--wide dd{padding:20px 16px;font-size:22px}
  .instrument-statement{margin-top:48px;font-size:30px;line-height:1.4}
}

/* A full-height introduction, with the existing Three.js mark kept in the background. */
.brand-intro{min-height:calc(100svh - 88px);padding-block:clamp(96px,10svh,144px);align-content:center}
.brand-intro .hero-orbit-scene{display:block;inset:-12% -12% -12% 5%;opacity:.6;z-index:0}
.brand-intro>.intro-label,.brand-intro>.hero-stats{position:relative;z-index:1}
.hero-stats .info-grid{background:var(--neutral-accent)}
@media(max-width:700px){
  .brand-intro{min-height:calc(100svh - 132px);padding-block:64px 72px}
  .brand-intro .hero-orbit-scene{inset:0 -70% 0 -30%;opacity:.45}
}
@media print{.brand-intro .hero-orbit-scene{display:none}}

/* Public wordmark; retain the existing orbit symbol as the graphic identity. */
.brand-lockup{display:block;position:relative;width:auto;min-width:142px;min-height:48px;padding-left:60px;align-content:center;aspect-ratio:auto;mask:none;background:none;font:600 24px/.9 'Space Grotesk',Arial,sans-serif;letter-spacing:-.055em;color:inherit}
.brand-lockup::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:48px;height:48px;background:currentColor;mask:url('assets/crooked-orbit-mark.svg') center/contain no-repeat}
@media(max-width:600px){.brand-lockup{font-size:21px;min-width:126px;min-height:40px;padding-left:50px}.brand-lockup::before{width:40px;height:40px}}

/* A spacious journal entrance, followed by charcoal editorial cards. */
.journal-section{padding:40px var(--content-gutter) 112px}
.journal-heading{text-align:center;margin-bottom:96px}
.journal-heading .journal-kicker{font:400 14px/1.5 var(--mono);color:var(--motif-ink, #000);margin:0 0 32px}
.journal-heading h2{font:600 clamp(64px,10.8vw,170px)/1 var(--font-headline);letter-spacing:-.045em;text-transform:uppercase;margin:0 0 32px;color:var(--motif-ink, #000)}
.journal-heading>p:last-child{font-size:22px;line-height:1.5;margin:0;color:var(--motif-ink, #000)}
.journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.journal-card{display:flex;flex-direction:column;min-width:0;min-height:580px;padding:clamp(28px,2.5vw,56px);border:1px solid var(--motif-ink, #000);border-radius:8px;background:var(--motif-ink, #000);color:var(--motif-panel, #fff);transition:background .2s,border-color .2s}
.journal-card:hover{background:var(--motif-ink, #000);border-color:var(--motif-secondary, #888)}
.journal-card:focus-visible{outline:3px solid var(--motif-ink, #000);outline-offset:6px}
.journal-card-art{display:flex;align-items:flex-start;justify-content:flex-end;gap:28px;min-height:220px;margin-bottom:32px}
.journal-mark{width:48px;height:48px;flex:none;object-fit:contain;filter:grayscale(1) brightness(0) invert(1)}
.journal-preview,.journal-detail-crop{display:block;width:100%;height:auto;aspect-ratio:2275/1171;border-radius:6px;background:var(--motif-ink, #000);overflow:hidden}
.journal-preview{object-fit:contain}
.journal-card-art--rack{align-items:center}
.journal-preview--rack{aspect-ratio:2215/292}
.journal-detail-crop img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 100%;transform:scale(2.7);transform-origin:100% 100%}
.journal-card .journal-category{display:flex;align-items:center;gap:10px;font:400 14px/1.5 var(--mono);color:var(--motif-bg, #fff);margin:0 0 24px}
.journal-card h3{font:600 clamp(26px,2.5vw,44px)/1.1 var(--font-headline);letter-spacing:-.035em;color:var(--motif-panel, #fff);margin:0 0 40px;text-wrap:balance}
.journal-card-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:auto;padding-top:40px;font:400 12px/1.5 var(--mono);color:var(--motif-bg, #fff)}
.journal-card-footer span:last-child{color:var(--motif-panel, #fff);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--motif-secondary, #888)}
.journal-card--type h3{font-size:clamp(30px,3vw,52px)}
.journal-more{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:48px;font-size:14px;color:var(--motif-muted, #555)}
@media(max-width:1100px){
  .journal-grid{gap:16px}
  .journal-card{padding:24px;min-height:500px}
  .journal-card-art{min-height:170px;gap:16px}
  .journal-mark{width:36px;height:36px}
}
@media(max-width:800px){
  .journal-section{padding-top:24px;padding-bottom:72px}
  .journal-heading{margin-bottom:48px}
  .journal-heading h2{font-size:clamp(48px,10.8vw,86px);margin-bottom:24px}
  .journal-heading .journal-kicker{margin-bottom:24px}
  .journal-heading>p:last-child{font-size:18px;max-width:32ch;margin-inline:auto}
  .journal-grid{grid-template-columns:1fr;gap:20px}
  .journal-card{min-height:420px;padding:32px}
  .journal-card-art{min-height:180px}
  .journal-card h3,.journal-card--type h3{font-size:36px;text-wrap:pretty}
  .journal-more{flex-direction:column;gap:16px;margin-top:32px}
}
@media(prefers-reduced-motion:reduce){.journal-card{transition:none}}

/* Original identity: all presentation colors derive from the selected two-tone pair. */
:root,.spark-launch{--paper:var(--b-ink);--muted:var(--b-muted);--acid:var(--b-ink);--signal:var(--b-ink)}
.palette-logo{display:block;width:100%;height:68px;background:var(--preview-ink);mask:url('assets/crooked-orbit-logo.svg') center/contain no-repeat;margin:8px 0 12px}
.motif-option,.motif-option:hover{background:var(--preview-paper);color:var(--preview-ink)}
.motif-option small{color:inherit;opacity:.75}
.motif-choices{grid-template-columns:1fr 1fr}
.motif-option[aria-pressed="true"]{outline:2px solid var(--b-ink);outline-offset:2px}
.journal-mark{filter:none;object-position:-9999px;background:var(--motif-bg);mask:url('assets/crooked-orbit-mark.svg') center/contain no-repeat}
.journal-category .journal-mark{display:block;width:24px;height:24px;flex-shrink:0}
/* Begin the first product at 80% of the initial viewport where content fits. */
:root{--nav-height:88px}
.brand-intro{min-height:calc(80svh - var(--nav-height));padding-block:24px;box-sizing:border-box}
.brand-intro h1{font-size:calc(clamp(48px,min(7vw,11svh),132px) + 20px)}
.brand-intro .intro-label{line-height:20px;margin-bottom:16px}
.hero-support{margin-top:20px}
.hero-stats{margin-top:24px}
.brand-intro .hero-stats-caption{margin-bottom:10px}
.info-grid--compact dt{padding:10px 8px}
.info-grid--compact dd{padding:12px 8px;font-size:24px}
@media(max-width:1100px){:root{--nav-height:132px}}
@media(max-width:700px){.brand-intro{min-height:calc(80svh - var(--nav-height));padding-block:24px}.hero-stats{margin-top:20px}}

.original-orbit{display:block;background:currentColor;mask:url('assets/crooked-orbit-mark.svg') center/contain no-repeat}

/* The padded product panel begins at the hero boundary. */

/* A quiet divider separates navigation from the page in every palette. */
.poster .company-nav,.spark-launch .company-nav{border-bottom:1px solid var(--motif-secondary, #888)}

/* Small screens use an independent type scale, never viewport-ratio sizing.
   Keep this after the desktop hero rules so they cannot enlarge mobile type. */
@media(max-width:800px){
  :root,.spark-launch{
    --type-hero:3rem;--type-section:2rem;--type-card:1.5rem;
    --type-quote:1.5rem;--tracking-card:0;--leading-copy:1.7;
  }
  h1,h2{letter-spacing:-.5px}
  h3{letter-spacing:0}
  .brand-intro{min-height:0;padding-block:64px 72px;gap:0}
  .brand-intro h1,.story-page h1,.product-hero h1{font-size:3rem;line-height:1.15;letter-spacing:-1px}
  .brand-intro .intro-label{margin-bottom:28px;line-height:1.6}
  .hero-support{margin-top:28px}
  .brand-intro .hero-support p{font-size:1.125rem;line-height:1.7}
  .featured-copy :is(h1,h2),.plugin-coming h2{font-size:2.25rem;line-height:1.2;letter-spacing:-.5px}
  .poster .company-section h2{font-size:2rem;line-height:1.25;letter-spacing:-.5px}
  .poster .company-eyebrow .eyebrow-no,.poster .principles article>span{font-size:3rem;line-height:1.1;letter-spacing:-.5px}
  .journal-heading h2{font-size:3rem;line-height:1.15;letter-spacing:-.5px}
  .journal-card h3,.journal-card--type h3{font-size:2rem;line-height:1.25;letter-spacing:0}
  .instrument-statement{font-size:1.75rem;line-height:1.5;letter-spacing:0}
  .info-grid dd{font-size:1.375rem;line-height:1.4;letter-spacing:0}
  .blog-related>a{font-size:1.5rem;line-height:1.35;letter-spacing:0}
  .customer-dialog h2{font-size:1.75rem;line-height:1.3;letter-spacing:0}
}
@media(max-width:700px){
  :root,.spark-launch{--content-gutter:24px;--section-space:80px}
  .poster .company-nav,.spark-launch .company-nav{padding:20px 24px;gap:20px 12px;flex-wrap:wrap}
  .company-nav nav{gap:12px;flex-wrap:wrap}
  .company-nav nav a{min-height:44px;display:inline-flex;align-items:center}
  .brand-intro h1 br{display:none}
  .brand-intro h1{max-width:480px}
  .hero-transition-preview{margin-top:32px;gap:8px;padding:8px;max-width:100%}
  .hero-transition-preview>span{width:100%;padding:4px 8px}
  .hero-transition-preview button{min-height:44px;padding:10px 12px}
  .featured-image{padding:16px;margin:0 0 36px}
  .featured-copy .product-type{font-size:.75rem;line-height:1.7;margin-bottom:20px}
  .featured-copy .plugin-heading{gap:16px;margin-bottom:32px}
  .featured-copy .product-actions{flex-direction:column;align-items:stretch;gap:24px;width:100%}
  .featured-copy .launch-button{width:100%;min-height:52px;justify-content:space-between}
  .featured-copy .text-link{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center}
  .featured-copy .shop-preview-note{margin-top:20px;line-height:1.7}
  .info-grid--wide{margin-top:40px}
  .info-grid--wide dt{font-size:.75rem;line-height:1.5;padding:16px}
  .info-grid--wide dd{padding:24px 16px}
  .instrument-statement{margin-top:40px}
  .plugin-showcase{padding-bottom:80px}
  html[data-motif] .plugin-coming{padding:28px 24px;gap:28px;margin-bottom:80px}
  .plugin-coming p{font-size:1rem;line-height:1.75}
  .journal-heading{margin-bottom:40px}
  .journal-card{padding:28px 24px;min-height:0}
  .journal-card-art{min-height:120px;margin-bottom:32px}
  .journal-card h3{margin-bottom:32px}
  .journal-card-footer{padding-top:24px}
  .poster .company-section{padding-block:64px}
  .instrument-shot{padding:16px}
  .blog-main{padding-bottom:80px}
  .article-header{padding-block:48px}
  .article-layout{gap:40px;padding-top:40px}
  .blog-related{padding:24px}
  .poster .company-footer nav{gap:16px 24px;line-height:1.7}
}
@media(max-width:480px){
  :root,.spark-launch{--type-hero:2.5rem}
  .brand-intro h1,.story-page h1,.product-hero h1{font-size:2.5rem;line-height:1.2;letter-spacing:-.5px}
  .brand-intro{padding-block:56px 64px}
  .brand-intro .hero-support p{font-size:1rem;line-height:1.75}
  .header-tools{gap:12px}
  .header-tools button[data-panel='login']{padding-inline:12px}
  .featured-copy :is(h1,h2),.plugin-coming h2{font-size:2rem}
  .journal-heading h2{font-size:2.5rem;letter-spacing:0}
  .journal-card h3,.journal-card--type h3{font-size:1.75rem}
  .info-grid--wide{grid-template-columns:1fr}
  .info-grid--wide>div+div{border-left:0;border-top:1px solid var(--motif-secondary, #888)}
  .info-grid--wide dt{padding:16px 20px}
  .info-grid--wide dd{padding:20px}
}
@media(max-width:360px){
  .spark-launch .company-nav{column-gap:2px}
  .brand-lockup{width:108px;min-width:108px;min-height:34px;padding-left:38px;font-size:18px}
  .brand-lockup::before{width:32px;height:32px}
  .header-tools{gap:10px}
  .brand-intro h1,.story-page h1,.product-hero h1{font-size:2.25rem}
}

/* Stack the product introduction at tablet and phone widths. */
@media(max-width:800px){
  .featured-copy{grid-template-columns:minmax(0,1fr)}
  .featured-copy .product-type,.featured-copy .plugin-heading,.featured-copy .product-price,.featured-copy .product-actions,.featured-copy .shop-preview-note,.featured-copy .instrument-statement{grid-column:1;grid-row:auto}
  .featured-copy .plugin-heading{margin-bottom:0}
  .featured-copy .instrument-statement{margin:36px 0 0;font-size:1.75rem;line-height:1.5;letter-spacing:0}
}

/* Product-page hero shares the homepage product overview. */
.product-overview{padding:72px var(--content-gutter) 96px;background:var(--neutral-background)}
.product-overview .instrument-shot{margin:64px 0 0}
@media(max-width:700px){
  .product-overview{padding-block:48px 64px}
  .product-overview .instrument-shot{margin-top:40px}
}

/* Keep the header's layout space while sliding it out of the viewport. */
.spark-launch .company-nav{
  position:sticky;top:0;z-index:20;
  transform:translateY(0);
  transition:transform 280ms cubic-bezier(.22,1,.36,1);
}
.spark-launch .company-nav.is-scroll-hidden{
  transform:translateY(calc(-100% - 1px));pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .spark-launch .company-nav{transition:none}
}
@media print{
  .spark-launch .company-nav{position:relative;transform:none}
}

/* Three signature directions: keep surfaces quiet and concentrate the accent. */
html[data-signature-palette="true"] .spark-launch{
  --b-signal:var(--motif-signal);--b-on-signal:var(--motif-on-signal);--b-signal-text:var(--motif-signal-text);
  --p-red:var(--motif-signal);--p-lens:var(--motif-signal);--brand-accent:var(--motif-signal);
}
html[data-signature-palette="true"] .launch-button--primary{
  background:var(--motif-signal);color:var(--motif-on-signal);border-color:var(--motif-signal);
}
html[data-signature-palette="true"] .launch-button--primary:hover{background:var(--motif-signal);filter:brightness(.94)}
html[data-signature-palette="true"] .text-link{color:var(--motif-signal-text)}
html[data-signature-palette="true"] .company-nav nav a[aria-current="page"]{text-decoration-color:var(--motif-signal)}
html[data-signature-palette="true"] .hero-color-base{color:var(--motif-signal-text)}

/* The controls keep their own legible type while the website is being tuned. */
.motif-picker{font-family:'Inter Tight',Arial,sans-serif;line-height:1.4;letter-spacing:0;font-weight:400}
.motif-picker .motif-panel{width:400px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 100px);scrollbar-gutter:stable}
.motif-picker :is(h2,p,label,button,select,input,summary,strong,small){font-family:'Inter Tight',Arial,sans-serif;letter-spacing:0}
.motif-picker .motif-heading h2{font-size:24px;line-height:1.2}
.motif-picker .type-role{margin-top:12px;border:1px solid var(--motif-sage);border-radius:6px;padding:0 12px 12px}
.motif-picker .type-role:not([open]){padding-bottom:0}
.motif-picker .type-role>summary{display:list-item;list-style:disclosure-closed;min-height:44px;padding:12px 0;border:0;border-radius:0;box-shadow:none;background:transparent;font-size:14px;font-weight:600;cursor:pointer}
.motif-picker .type-role[open]>summary{list-style:disclosure-open}
.motif-picker .type-role>summary::-webkit-details-marker{display:revert}
.motif-picker .type-role label{font-size:12px;margin:12px 0 6px}
.type-adjustment{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:6px 12px;align-items:center;margin-top:14px}
.motif-picker .type-adjustment label{margin:0}
.type-adjustment input[type=number]{min-width:0;width:100%;height:36px;border:1px solid var(--motif-sage);border-radius:4px;background:var(--motif-bg);color:var(--motif-ink);padding:6px;font-size:13px}
.type-adjustment input[type=range]{grid-column:1/-1;width:100%;height:24px;accent-color:var(--motif-signal);cursor:pointer}
.motif-picker input:focus-visible{outline:2px solid var(--motif-signal-text);outline-offset:3px}
.motif-picker .type-pairing{margin-top:12px}
.motif-picker .type-note{font-size:12px;line-height:1.5;margin:0 0 16px}
.motif-picker .type-role .type-reset{font-size:12px;margin:10px 0 0}
.motif-picker .motif-option[data-signature="true"]{border-left:4px solid var(--preview-signal)}
.motif-picker .motif-choices{display:block}
.palette-group+.palette-group{margin-top:24px;padding-top:20px;border-top:1px solid var(--motif-sage)}
.motif-picker .palette-group h3,.motif-picker .palette-group>summary{font:600 14px/1.4 'Inter Tight',Arial,sans-serif;letter-spacing:0;margin:0 0 8px;text-wrap:initial}
.motif-picker .palette-group>summary{display:list-item;list-style:disclosure-closed;padding:0;border:0;min-height:0;background:transparent;box-shadow:none;cursor:pointer}
.motif-picker .palette-group[open]>summary{list-style:disclosure-open}
.motif-picker .palette-group>summary::-webkit-details-marker{display:revert}
.motif-picker .palette-group>p{font:400 12px/1.5 'Inter Tight',Arial,sans-serif;margin:0 0 12px;color:var(--motif-muted)}
.palette-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:480px){.motif-picker .motif-panel{width:calc(100vw - 24px);max-width:calc(100vw - 24px);padding:16px}}

/* Animate the frame separately so the link's hit area and page layout stay still. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .plugins-page .featured-image{
    position:relative;isolation:isolate;background:transparent;
  }
  .plugins-page .featured-image::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:var(--neutral-accent);border-radius:inherit;
    transform:scale(1);
    transition:transform 650ms cubic-bezier(.22,1.35,.36,1);
    pointer-events:none;
  }
  .plugins-page .featured-image img.drum-designer-preview{
    transform:scale(1);
    transition:transform 650ms cubic-bezier(.22,1.35,.36,1);
  }
  .plugins-page .featured-image:is(:hover,:focus-visible)::before{transform:scale(.97)}
  .plugins-page .featured-image:is(:hover,:focus-visible) img.drum-designer-preview{transform:scale(1.045)}
}