/* cadenzaarthouse.studio -- phone-first, the house palette from cadenzaarthouse.com:
   off-white #F6F2EB, near-black #111111, bronze #A07840. System type: nothing is fetched
   from outside the site. */
:root { --paper:#F6F2EB; --ink:#111111; --bronze:#A07840; --rule:#222222; --dim:#5a554e;
        --card:#fffdf9; --stage:#111111; --stage-ink:#f2ede4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink);
       font:17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x:hidden; }
a { color:inherit; }
img { display:block; max-width:100%; height:auto; }
.wrap { width:100%; max-width:1080px; margin:0 auto; padding:0 20px; }

header.mast { position:sticky; top:0; z-index:9; background:var(--paper);
              border-bottom:2px solid var(--rule); }
.mast .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
              padding-top:14px; padding-bottom:14px; }
/* THE MASTER LOGO, TINTED. Owner ruling 2026-08-24 (log 20260824-01): every
   sub-product wears the Cadenza Arthouse master mark, styled to its own brand --
   never an improvised placeholder and never a second drawing. assets/logo.png
   here is byte-identical to F:\Apps\Libraries\assets\logo.png, and it is carried
   as a CSS MASK filled with --bronze rather than as an <img>, which is how
   houstonyogis does it: one file, re-skinned per sub-brand by changing one
   colour. url() resolves against this stylesheet's own location. */
.mast-symbol { width:34px; height:34px; flex:0 0 auto;
               background-color:var(--bronze);
               -webkit-mask:url(assets/logo.png) center/contain no-repeat;
                       mask:url(assets/logo.png) center/contain no-repeat; }
.mast-symbol a { display:block; width:100%; height:100%; }
@media (max-width:380px) { .mast-symbol { width:28px; height:28px; } }

.wordmark { font-weight:800; letter-spacing:.02em; text-decoration:none; margin-right:auto;
            font-size:clamp(19px, 5vw, 26px); text-transform:uppercase; }
.wordmark span { color:var(--bronze); text-transform:none; letter-spacing:0; }
nav.menu { display:flex; flex-wrap:wrap; gap:4px 16px; }
nav.menu a { text-decoration:none; font-weight:700; font-size:17px; padding:6px 0;
             border-bottom:2px solid transparent; }
nav.menu a:hover, nav.menu a:focus { border-bottom-color:var(--bronze); color:var(--bronze); }

section { padding:40px 0; border-top:1px solid #d9d2c6; }
section:first-of-type { border-top:0; }
h1 { font-size:clamp(30px, 8vw, 54px); line-height:1.08; letter-spacing:-.01em; margin:0 0 14px;
     font-weight:800; }
h2 { font-size:clamp(22px, 4.4vw, 28px); font-weight:800; letter-spacing:.06em;
     text-transform:uppercase; margin:0 0 6px; }
h3 { margin:0 0 4px; font-size:21px; font-weight:800; }
p { margin:0 0 14px; max-width:62ch; }
.lede { font-size:clamp(19px, 2.6vw, 22px); }
.kicker { color:var(--bronze); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
          font-size:14px; margin:0 0 6px; }
.dim { color:var(--dim); }

.hero { padding-top:36px; }
.hero .rule { width:72px; height:5px; background:var(--bronze); margin:0 0 22px; }

/* the products: one card each, the door at the bottom of the card */
ul.products { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:700px) { ul.products { grid-template-columns:1fr 1fr; } }
ul.products li { background:var(--card); border:1px solid #d9d2c6; border-radius:14px;
                 padding:20px 20px 18px; display:flex; flex-direction:column; gap:6px; }
ul.products li.stage { background:var(--stage); color:var(--stage-ink); border-color:var(--stage); }
ul.products li.stage .kicker { color:#e8c860; }
ul.products li p { flex:1; margin:0 0 12px; }
a.door { align-self:flex-start; text-decoration:none; font-weight:800; font-size:18px;
         padding:12px 22px; border-radius:10px; border:2px solid var(--bronze);
         color:var(--bronze); background:transparent; }
a.door:hover, a.door:focus { background:var(--bronze); color:#fff; }
li.stage a.door { border-color:#e8c860; color:#e8c860; }
li.stage a.door:hover, li.stage a.door:focus { background:#e8c860; color:#111; }
.where { font-size:15px; color:var(--dim); margin:8px 0 0; }
li.stage .where { color:#b9b2a6; }

/* the studio's lines: a plain list, no doors yet */
ul.lines { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:700px) { ul.lines { grid-template-columns:1fr 1fr 1fr; } }
ul.lines li { border-top:2px solid var(--rule); padding:12px 0 4px; }
ul.lines .soon { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.1em;
                 text-transform:uppercase; color:var(--bronze); margin-left:8px; }

footer { border-top:2px solid var(--rule); padding:30px 20px 60px; }
footer .wrap { display:flex; flex-direction:column; gap:8px; }
footer p { margin:0; max-width:none; }
footer .mk { font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:18px; }
footer a { text-decoration:underline; text-underline-offset:3px; }