@import url("spectrum2.css");
/* dc336.css — shared design system (Adobe Spectrum 2 since 2026-10-01) for the DC336 public pages (welcome / scene / workflow /
   downloads / help). D4 direction: Adobe-inspired typographic hierarchy and modular composition,
   restrained red emphasis (#C8070A), reliable dark + light themes, real imagery carrying the page.
   The studio app (index.html) keeps its own denser inline styles — this file is public-site only. */

/* Adobe Spectrum 2 (owner 2026-10-01): every page variable below is a Spectrum 2 token from spectrum2.css
   (Adobe's own values). The OS-follow block repeats the light token VALUES, because spectrum2.css only flips to
   light on an explicit data-theme="light". */
:root{
  --red:#c8070a; --red-soft:#e23b3e;      /* brand mark only - interaction is Spectrum blue */
  --display:var(--s2-font); --body:var(--s2-font); --mono:var(--s2-mono);
  --wrap:1280px;
  --r:var(--s2-radius-large);
}
:root, :root[data-theme="dark"], :root[data-theme="light"]{
  --ground:var(--s2-bg-base); --panel:var(--s2-bg-layer-2); --panel2:var(--s2-gray-100);
  --rule:var(--s2-gray-300); --rule2:var(--s2-gray-400);
  --ink:var(--s2-content); --muted:var(--s2-content-subdued); --faint:var(--s2-gray-600);
  --link:var(--s2-accent-content); --good:var(--s2-positive); --amber:var(--s2-notice);
  --scrim:linear-gradient(180deg,rgba(6,8,10,0) 45%,rgba(6,8,10,.72) 100%);
}
:root[data-theme="light"]{ --scrim:linear-gradient(180deg,rgba(10,12,14,0) 45%,rgba(10,12,14,.62) 100%) }
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme:light;
    --ground:#ffffff; --panel:#ffffff; --panel2:#e9e9e9; --rule:#dadada; --rule2:#c6c6c6;
    --ink:#292929; --muted:#505050; --faint:#717171; --link:#3b63fb; --good:#079355; --amber:#d45b00;
    --scrim:linear-gradient(180deg,rgba(10,12,14,0) 45%,rgba(10,12,14,.62) 100%);
  }
}

*{box-sizing:border-box}
html{background:var(--ground);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--s2-focus);outline-offset:2px}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
@media (max-width:480px){ .wrap{width:calc(100% - 32px)} }
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font:700 13px/1.2 var(--body);color:var(--muted)}
.muted{color:var(--muted)}

/* ---- masthead ---- */
.masthead-bar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--panel) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{width:32px;height:32px;border-radius:8px;background:radial-gradient(circle at 30% 30%,var(--red-soft),var(--red) 62%);
  display:grid;place-items:center;font:800 12px var(--mono);color:#fff;letter-spacing:.02em}
.brand .name{font:700 15px var(--display);color:var(--ink);letter-spacing:-.01em}
.brand .name b{color:var(--red-soft);font-weight:700}
.navtoggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9px;background:transparent;border:1px solid var(--rule);cursor:pointer;flex:none}
.navtoggle-icon,.navtoggle-icon::before,.navtoggle-icon::after{display:block;width:16px;height:2px;background:var(--ink)}
.navtoggle-icon{position:relative;transition:background .15s}
.navtoggle-icon::before,.navtoggle-icon::after{content:"";position:absolute;left:0;transition:transform .15s}
.navtoggle-icon::before{top:-5px}.navtoggle-icon::after{top:5px}
.navtoggle[aria-expanded="true"] .navtoggle-icon{background:transparent}
.navtoggle[aria-expanded="true"] .navtoggle-icon::before{transform:translateY(5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle-icon::after{transform:translateY(-5px) rotate(-45deg)}
.sitenav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.navlink{font:600 13.5px var(--body);color:var(--muted);text-decoration:none;background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.navlink:hover,.navlink[aria-current="page"],.navlink[aria-expanded="true"]{color:var(--ink)}
.navlink[aria-current="page"]{color:var(--s2-heading);box-shadow:0 2px 0 var(--s2-heading)}
.cta{font:700 14px var(--body);color:#fff;background:var(--s2-accent-bg);border-radius:var(--s2-radius-full);padding:9px 18px;text-decoration:none;white-space:nowrap;border:2px solid transparent;cursor:pointer}
.cta:hover{background:var(--s2-accent-bg-hover)}
.cta.ghost{background:transparent;border-color:var(--rule2);color:var(--ink)}
.cta.ghost:hover{background:var(--panel2);border-color:var(--s2-gray-500)}
.navdrop{position:relative}
.navdrop .caret{font-size:10px;transition:transform .15s}
.navdrop-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.navdrop-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:var(--panel);
  border:1px solid var(--rule);border-radius:12px;padding:18px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);z-index:70}
.navdrop-panel[hidden]{display:none}
.navdrop-panel--rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 22px;width:min(880px,calc(100vw - 32px))}
.navdrop-col{display:flex;flex-direction:column;gap:7px}
.navdrop-heading{font:700 12px var(--body);color:var(--muted);margin-bottom:2px}
.navdrop-panel a{font-size:13px;color:var(--ink);text-decoration:none;padding:2px 0;line-height:1.35}
.navdrop-panel a:hover{color:var(--link)}
@media (max-width:860px){
  .navtoggle{display:flex}
  .sitenav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    background:var(--panel);border-bottom:1px solid var(--rule);padding:8px 20px 18px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
    max-height:calc(100vh - 70px);overflow-y:auto;overflow-x:hidden}
  .sitenav.open{display:flex}
  .sitenav > .navlink{padding:14px 0;border-top:1px solid var(--rule);width:100%;justify-content:space-between;min-height:44px}
  .sitenav .cta{order:99;margin-top:12px;text-align:center;padding:13px}
  .navdrop{width:100%;border-top:1px solid var(--rule)}
  .navdrop-btn{width:100%;justify-content:space-between;padding:14px 0;min-height:44px}
  .navdrop-panel{position:static;box-shadow:none;border:none;background:transparent;transform:none!important;margin:0 0 10px;padding:0 0 0 12px;width:auto}
  .navdrop-panel--rooms{grid-template-columns:1fr 1fr;width:auto;gap:12px 18px}
}

/* ---- typography / sections ---- */
h1{margin:0;font:800 clamp(34px,5.6vw,64px)/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance}
h1 .accent{color:var(--s2-accent-content)}
h2{margin:0;font:800 clamp(24px,3.2vw,38px)/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance}
h3{margin:0;font:700 17px/1.3 var(--display)}
.lede{margin:0;max-width:62ch;color:var(--muted);font-size:17.5px}
section.module{padding:72px 0;border-bottom:1px solid var(--rule)}
.section-head{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;margin-bottom:36px}
.section-head p{margin:12px 0 0;max-width:64ch;color:var(--muted)}
@media (max-width:860px){ .section-head{grid-template-columns:minmax(0,1fr)} section.module{padding:52px 0} }

/* ---- hero ---- */
.hero{position:relative;border-bottom:1px solid var(--rule)}
.hero-media{position:relative;overflow:hidden}
.hero-media img,.hero-media video{width:100%;aspect-ratio:21/9;object-fit:cover}
@media (max-width:720px){ .hero-media img,.hero-media video{aspect-ratio:16/10} }
.hero-media::after{content:"";position:absolute;inset:0;background:var(--scrim);pointer-events:none}
.hero-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(18px,4vw,44px);color:#fff}
.hero-overlay .label{color:#dbdbdb}
.hero-overlay h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55);max-width:16ch}
.hero-overlay .lede{color:#e8ecef;text-shadow:0 1px 10px rgba(0,0,0,.6);margin-top:10px}
.media-ctl{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;gap:8px}
.media-ctl button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,12,14,.55);
  color:#fff;font-size:15px;cursor:pointer;backdrop-filter:blur(4px)}
.media-ctl button:hover{border-color:#fff}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.plate{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,max-content));justify-content:start;gap:6px 34px;
  font:400 13px/1.4 var(--mono);color:var(--muted);margin-top:18px}
.plate b{display:block;color:var(--ink);font-weight:600;font-size:16px}
.hero-overlay .plate,.hero-overlay .plate b{color:#dfe4e8}
.hero-overlay .plate b{color:#fff}

/* ---- media modules ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.split.rev > figure{order:2}
@media (max-width:860px){ .split{grid-template-columns:1fr} .split.rev > figure{order:0} }
.split figure{margin:0}
.split figure img{border-radius:var(--r);border:1px solid var(--rule)}
.split figcaption{font-size:12.5px;color:var(--faint);margin-top:8px;font-family:var(--mono)}
.edge{margin:0}
.edge img,.edge video{width:100%;border-radius:var(--r);border:1px solid var(--rule)}
.edge figcaption{font-size:12.5px;color:var(--faint);margin-top:8px;font-family:var(--mono)}

/* ---- cards / grids ---- */
.sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1000px){ .sheet{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .sheet{grid-template-columns:minmax(0,1fr)} }
.shot{margin:0;display:grid;gap:10px}
.shot img{border:1px solid var(--rule);border-radius:10px;aspect-ratio:16/9;object-fit:cover;background:var(--panel)}
.shot figcaption{font-size:13px;color:var(--muted)}
.shot figcaption b{display:block;color:var(--ink);font-size:14px;font-weight:600}
a.room-link{display:block;text-decoration:none;color:inherit}
a.room-link:hover .shot img,a.room-link:focus-visible .shot img{border-color:var(--s2-accent-bg)}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:22px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 40px}
.steps > div{padding:20px 0;border-top:1px solid var(--rule)}
.steps dt{font-weight:600;margin-bottom:6px;display:flex;align-items:baseline;gap:10px}
.steps dt .n{font:800 22px var(--display);color:var(--s2-accent-content)}
.steps dd{margin:0;color:var(--muted);font-size:14.5px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--rule)}
.facts > div{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule)}
.facts b{display:block;font:800 30px/1.1 var(--display)}
.facts span{color:var(--muted);font-size:13px}
.note-line{margin-top:20px;font-size:12.5px;color:var(--faint)}
pre.cmd{margin:0;overflow-x:auto;padding:14px 16px;background:var(--panel2);border:1px solid var(--rule);border-radius:9px;
  font:400 13px/1.7 var(--mono);color:var(--ink)}

/* ---- downloads ---- */
.dl-group{margin-bottom:36px}
.dl-item{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto;gap:10px 18px;align-items:center;
  padding:14px 16px;border:1px solid var(--rule);border-radius:10px;background:var(--panel);margin-bottom:10px}
.dl-item .dl-name{font-weight:600}
.dl-item .dl-meta{font-family:var(--mono);font-size:12px;color:var(--muted)}
.dl-item .dl-badge{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 10px;justify-self:start}
.dl-badge.original{color:var(--amber);border:1px solid var(--amber)}
.dl-badge.derivative{color:var(--muted);border:1px solid var(--rule2)}
.dl-badge.staged{color:var(--faint);border:1px dashed var(--rule2)}
.dl-act{display:flex;gap:8px;align-items:center;justify-self:end}
.dl-act a,.dl-act button{font:700 13px var(--body);border-radius:var(--s2-radius-full);padding:8px 16px;text-decoration:none;cursor:pointer;min-height:36px}
.dl-act a.get{background:var(--s2-accent-bg);color:#fff;border:2px solid transparent}
.dl-act a.get:hover{background:var(--s2-accent-bg-hover)}
.dl-act button.info{background:transparent;border:2px solid var(--rule2);color:var(--ink)}
.dl-act .unpub{font-size:12px;color:var(--faint);font-style:normal}
.dl-details{grid-column:1/-1;border-top:1px dashed var(--rule);padding-top:10px;font:400 12px/1.7 var(--mono);color:var(--muted);word-break:break-all}
.dl-details b{color:var(--ink);font-weight:600}
@media (max-width:720px){ .dl-item{grid-template-columns:minmax(0,1fr)} .dl-act{justify-self:start} }

/* ---- gallery strip (manifest-driven) ---- */
.galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.galgrid a{position:relative;display:block;border:1px solid var(--rule);border-radius:10px;overflow:hidden;text-decoration:none;background:var(--panel)}
.galgrid a:hover{border-color:var(--s2-accent-bg)}
.galgrid img{width:100%;aspect-ratio:16/9;object-fit:cover}
.galgrid .cap{display:block;padding:8px 10px;font:500 12px var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.galgrid .cap small{display:block;color:var(--faint);font-family:var(--mono);font-size:10px}

/* ---- footer ---- */
footer.site{padding:44px 0 60px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:24px;align-items:start}
@media (max-width:720px){ .foot-grid{grid-template-columns:minmax(0,1fr)} }
footer.site p{margin:10px 0 0;color:var(--muted);font-size:13.5px;max-width:70ch}
footer.site a{color:var(--link)}
.theme-ctl{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.theme-ctl select{background:var(--panel);border:2px solid var(--rule2);color:var(--ink);border-radius:var(--s2-radius-medium);
  padding:8px 10px;font:inherit;min-height:38px}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13px}