/* Nine identities translated from the portfolio covers into working interfaces.
   ASM Observatory, Signal Data Studio and Form do not load this stylesheet. */

/* 01 — Field Notes: warm paper, photographic contact sheets, quiet framing. */
:root[data-project='gallery'] { --bg:#211e19; --panel:#302a23; --panel-2:#3a3228; --ink:#f4eadb; --muted:#c6b69f; --line:#645540; --accent:#edb885; --accent-2:#d6c295; --accent-ink:#211b14; --shadow:0 18px 45px #100b0730; --paper:#fff9ec; --paper-ink:#554635; }
:root[data-project='gallery'][data-theme='light'] { --bg:#e5dfd2; --panel:#f8f3e8; --panel-2:#e8ddc9; --ink:#332b21; --muted:#635640; --line:#bcb09a; --accent:#875424; --accent-2:#5a6744; --accent-ink:#fff9ec; --shadow:0 18px 40px #5c4a2b14; }

/* 02 — Atmos: blue isobars, cream surfaces and a suspended warm sun. */
:root[data-project='weather'] { --bg:#192d3b; --panel:#233d4c; --panel-2:#304d5d; --ink:#e9f2f5; --muted:#b0cbd4; --line:#547380; --accent:#a4d3e7; --accent-2:#e9be69; --accent-ink:#203b48; --shadow:0 20px 50px #081a2422; --weather-sun:#e9be69; }
:root[data-project='weather'][data-theme='light'] { --bg:#ccdef0; --panel:#f6f9f3; --panel-2:#e3edf0; --ink:#314954; --muted:#45616d; --line:#b0c6cc; --accent:#315e76; --accent-2:#815d18; --accent-ink:#f6f9f3; --shadow:0 20px 60px #42678016; }

/* 03 — Common Room: lavender conversations, a deep-plum channel rail. */
:root[data-project='chat'] { --bg:#241e30; --panel:#32283f; --panel-2:#493654; --ink:#f6effc; --muted:#ccbadb; --line:#655177; --accent:#c7b3dc; --accent-2:#e3bacd; --accent-ink:#35283f; --shadow:0 24px 60px #0d081820; --bubble:#41324e; --mine:#c7b3dc; }
:root[data-project='chat'][data-theme='light'] { --bg:#ded6ee; --panel:#f6f2fa; --panel-2:#e9e0f1; --ink:#35283f; --muted:#6c557e; --line:#beacd0; --accent:#6d4c98; --accent-2:#834767; --accent-ink:#fff7ff; --shadow:0 24px 60px #3b264b18; --bubble:#e6dced; }

/* 04 — Daymark: butter-yellow desk, folded cream paper, graphite type. */
:root[data-project='todo'] { --bg:#292619; --panel:#353020; --panel-2:#443d28; --ink:#fbf1d5; --muted:#d0c09b; --line:#746443; --accent:#e8c06c; --accent-2:#d8b28d; --accent-ink:#2a2519; --shadow:0 20px 60px #100b0925; --rule:#94845d30; }
:root[data-project='todo'][data-theme='light'] { --bg:#e9d79f; --panel:#fff9e9; --panel-2:#f0e4c4; --ink:#342e21; --muted:#6e5b35; --line:#bfa97c; --accent:#77570d; --accent-2:#754b27; --accent-ink:#fff9e9; --shadow:0 20px 60px #77552016; --rule:#b89f631f; }

/* 06 — Table Notes: peach stock, recipe cards and warm editorial typography. */
:root[data-project='blog'] { --bg:#34221e; --panel:#442f27; --panel-2:#573b30; --ink:#fceadd; --muted:#d8b7a1; --line:#8c624d; --accent:#f1af98; --accent-2:#c7d3a4; --accent-ink:#3c2419; --shadow:0 18px 55px #1c0c0925; }
:root[data-project='blog'][data-theme='light'] { --bg:#efd5c5; --panel:#fbf1e5; --panel-2:#ecdcca; --ink:#693d2e; --muted:#79513e; --line:#b88f75; --accent:#8b4930; --accent-2:#495f34; --accent-ink:#fff8eb; --shadow:0 18px 55px #743c2715; }

/* 07 — Pedro / UI System: olive tokens, modular surfaces and precise grids. */
:root[data-project='spa'] { --bg:#20291c; --panel:#2b3823; --panel-2:#3b4b30; --ink:#ecf2df; --muted:#bdcea8; --line:#5f7350; --accent:#badf88; --accent-2:#d1cfa4; --accent-ink:#26351f; --shadow:0 16px 50px #0e180c20; }
:root[data-project='spa'][data-theme='light'] { --bg:#d5dfc0; --panel:#f4f7e9; --panel-2:#c5d2ad; --ink:#324528; --muted:#435736; --line:#95a880; --accent:#385b23; --accent-2:#505321; --accent-ink:#f4f7e9; --shadow:0 16px 50px #3a502515; }

/* 08 — Common Ground: sage, gallery-like product photography and ink-green type. */
:root[data-project='ecommerce'] { --bg:#20352b; --panel:#2b4436; --panel-2:#395642; --ink:#f0f4e9; --muted:#bbcfbd; --line:#647f69; --accent:#9bcdb3; --accent-2:#deb79f; --accent-ink:#233c2d; --shadow:0 18px 60px #06150b22; }
:root[data-project='ecommerce'][data-theme='light'] { --bg:#c4d7c9; --panel:#eef3e9; --panel-2:#d7e4d7; --ink:#34513e; --muted:#445b4b; --line:#89a690; --accent:#2d604a; --accent-2:#805039; --accent-ink:#f5f7ef; --shadow:0 18px 60px #25482b18; }

/* 09 — Signal Quiz: violet field, converging diamonds and a light answer surface. */
:root[data-project='quiz'] { --bg:#494064; --panel:#55496f; --panel-2:#66537e; --ink:#f6efff; --muted:#ded2f0; --line:#9480ab; --accent:#d2c0f2; --accent-2:#f0c3be; --accent-ink:#34273e; --shadow:0 22px 65px #24133228; }
:root[data-project='quiz'][data-theme='light'] { --bg:#e7dff1; --panel:#f8f3fb; --panel-2:#d9cee9; --ink:#413451; --muted:#67527c; --line:#ad98c0; --accent:#6655a4; --accent-2:#924937; --accent-ink:#fff9ff; --shadow:0 22px 65px #38254816; }

/* 10 — Frame: cinema burgundy, rose ink and graphic film framing. */
:root[data-project='movie'] { --bg:#42292c; --panel:#53363b; --panel-2:#654448; --ink:#f2d6cc; --muted:#dfbdb5; --line:#9b7170; --accent:#f0b7a6; --accent-2:#e5cca0; --accent-ink:#42292c; --shadow:0 24px 65px #1b10142a; }
:root[data-project='movie'][data-theme='light'] { --bg:#ead8d1; --panel:#fbefea; --panel-2:#e1c6c0; --ink:#4a2c31; --muted:#795258; --line:#bd9694; --accent:#8e4448; --accent-2:#785c28; --accent-ink:#fff2ed; --shadow:0 24px 65px #5c303017; }

/* Shared craft — only these nine project documents opt in. */
html { --project-mark:var(--accent); --ease:cubic-bezier(.22,.7,.25,1); }
:root[data-project][data-theme] { --project-mark:var(--accent); }
body:before { content:none; }
body { min-width:320px; }
.app-shell { padding-top:clamp(35px,4vw,62px); }
.hero { gap:42px; margin-bottom:42px; }
.hero h1 { font-size:clamp(3rem,6.3vw,6.1rem); font-weight:550; line-height:.98; letter-spacing:-.065em; }
.hero-copy { font-size:14px; line-height:1.8; max-width:57ch; }
.hero-aside { font-size:12px; }
.eyebrow { line-height:1.7; }
.app-header.project-header { background:var(--bg); backdrop-filter:none; }
.panel { box-shadow:var(--shadow); }
.field { min-width:0; }
.field input,.field select,.field textarea { background:var(--panel); min-height:46px; font-size:13px; }
.field label,.label { line-height:1.5; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.9; }
.button { border-radius:4px; min-height:46px; font-weight:600; }
.button.primary:hover:not(:disabled) { color:var(--accent-ink); background:var(--accent); filter:brightness(.95); }
.chip,.text-button { min-height:40px; }
.panel-head { flex-wrap:wrap; gap:12px; }
.empty { font-size:13px; line-height:1.8; padding:32px 24px; }
.note { font:11px/1.8 Inter,'Segoe UI',system-ui,sans-serif; max-width:110ch; color:var(--muted); }
.identity-flourish { width:90px; height:90px; display:block; color:var(--accent); margin-bottom:22px; }
.app-footer.project-footer { background:none; }
.modal { background:#171218c9; }
.modal-card { background:var(--panel); }
.modal-top h2 { overflow-wrap:anywhere; }

/* The photo collection is a contact sheet, not a dark UI grid. */
[data-project='gallery'] .hero h1 { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.055em; }
[data-project='gallery'] .hero h1 em { color:var(--ink); }
[data-project='gallery'] .hero-aside { border:1px solid var(--line); padding:24px; justify-self:end; width:min(100%,260px); }
[data-project='gallery'] .hero-aside strong { font:64px/1 Georgia,serif; }
[data-project='gallery'] .toolbar { border-inline:0; border-radius:0; background:transparent; padding:22px 0; gap:18px; }
[data-project='gallery'] .gallery-grid { gap:28px; padding:14px 7px 20px; align-items:start; }
[data-project='gallery'] .gallery-card { display:flex; flex-direction:column; aspect-ratio:auto; border:0; padding:12px 12px 0; border-radius:1px; background:var(--paper); box-shadow:0 10px 22px #382b181c; }
[data-project='gallery'] .gallery-card:nth-child(3n+1) { rotate:-1.1deg; }
[data-project='gallery'] .gallery-card:nth-child(3n+2) { rotate:1.3deg; }
[data-project='gallery'] .gallery-card img { height:auto; aspect-ratio:4/3; filter:none; }
[data-project='gallery'] .gallery-card:hover img { transform:scale(1.025); }
[data-project='gallery'] .gallery-overlay { position:static; padding:18px 3px; background:none; color:var(--paper-ink); }
[data-project='gallery'] .gallery-overlay strong { font:500 14px/1.4 Inter,'Segoe UI',sans-serif; }
[data-project='gallery'] .gallery-overlay span { color:#716047; font-size:10px; }
[data-project='gallery'] .gallery-heading h2 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.04em; }
[data-project='gallery'] .lightbox-layout img { background:var(--bg); }

/* The actual reading is the centrepiece of Atmos. */
[data-project='weather'] .hero { grid-template-columns:1.3fr .7fr; }
[data-project='weather'] .hero-aside { justify-self:end; padding:22px 28px; border:1px solid var(--line); border-radius:50% 50% 5px 5px; text-align:center; min-width:180px; }
[data-project='weather'] .hero-aside strong { font-size:42px; }
[data-project='weather'] .weather-main { min-height:420px; padding:32px; background:var(--panel); border:0; border-radius:12px; }
[data-project='weather'] .weather-main:after { width:550px; height:300px; right:-190px; bottom:46px; border-color:var(--line); box-shadow:0 0 0 25px color-mix(in srgb,var(--line) 25%,transparent),0 0 0 55px color-mix(in srgb,var(--line) 13%,transparent); rotate:-20deg; opacity:.3; }
[data-project='weather'] .weather-mark { color:var(--weather-sun); font-size:96px; width:110px; text-align:center; flex-shrink:0; }
[data-project='weather'] .current-reading strong { font-size:clamp(5rem,12vw,11rem); font-weight:350; }
[data-project='weather'] .current-reading { margin-top:48px; margin-bottom:42px; }
[data-project='weather'] .condition-grid { gap:20px; }
[data-project='weather'] .forecast-panel { background:transparent; box-shadow:none; border:0; padding:30px 0 0; }
[data-project='weather'] .forecast-card { background:var(--panel); border-radius:9px; padding:21px 18px; }
[data-project='weather'] .forecast-card:first-child { background:var(--panel); }
[data-project='weather'] .forecast-icon { color:var(--accent-2); }
[data-project='weather'] .forecast-grid { gap:14px; }
[data-project='weather'] .search-panel { box-shadow:none; border-radius:12px; }

/* The room rail and the conversation read as a single product window. */
[data-project='chat'] .hero h1 em { color:var(--ink); }
[data-project='chat'] .chat-layout { gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
[data-project='chat'] .chat-layout > .panel { border:0; border-radius:0; box-shadow:none; }
[data-project='chat'] .room-panel { --ink:#f2eafa; --muted:#d0bcdf; --accent:#d8bdec; --accent-ink:#34293f; --panel-2:#554262; --line:#756085; background:#34293f; color:var(--ink); align-self:stretch; padding:26px 19px; }
[data-project='chat'] .room-note { margin-top:32px; }
[data-project='chat'] .room-avatar.pink,[data-project='chat'] .room-avatar.orange { background:#bc9bcf; color:#34293f; }
[data-project='chat'] .room { min-height:68px; }
[data-project='chat'] .conversation { padding:28px; background:var(--panel); }
[data-project='chat'] .messages { padding:26px 0; gap:24px; }
[data-project='chat'] .bubble { background:var(--bubble); border-color:transparent; border-radius:3px 13px 13px 13px; padding:14px 17px; font-size:13px; }
[data-project='chat'] .mine .bubble { background:var(--mine); color:#35283f; border-radius:13px 3px 13px 13px; }
[data-project='chat'] .message-actions button { min-height:30px; padding:5px; }
[data-project='chat'] .composer { background:var(--panel); }
[data-project='chat'] .composer .field input,[data-project='chat'] .composer textarea { background:var(--panel-2); }

/* A useful notepad: real controls, paper treatment, no decorative fake tasks. */
[data-project='todo'] .hero h1 { font-family:Georgia,serif; letter-spacing:-.05em; font-weight:400; }
[data-project='todo'] .hero h1 em { color:var(--ink); }
[data-project='todo'] .hero-aside { padding:25px 30px; background:var(--panel); border:0; border-left:6px solid var(--accent); justify-self:end; width:240px; box-shadow:var(--shadow); rotate:3deg; }
[data-project='todo'] .hero-aside strong { font-family:Georgia,serif; font-size:58px; }
[data-project='todo'] .identity-flourish { width:42px; height:42px; margin-bottom:18px; }
[data-project='todo'] .todo-layout { grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:26px; }
[data-project='todo'] .composer { border-radius:3px; box-shadow:none; }
[data-project='todo'] .form-row { grid-template-columns:1fr 1fr; }
[data-project='todo'] .form-row .button { grid-column:1/-1; }
[data-project='todo'] .list-panel { border:0; border-left:6px solid var(--accent); border-radius:2px; padding:30px; min-height:365px; background:repeating-linear-gradient(transparent 0 35px,var(--rule) 35px 36px),var(--panel); }
[data-project='todo'] .list-panel h2 { font:30px/1.2 Georgia,serif; }
[data-project='todo'] .task { background:var(--panel); border-width:0 0 1px; border-radius:0; padding-inline:6px; }
[data-project='todo'] .task-check { border-radius:3px; width:26px; height:26px; }
[data-project='todo'] .task.done { opacity:1; }
[data-project='todo'] .task.done .task-title { color:var(--muted); }
[data-project='todo'] .metrics { margin-top:26px; gap:0; border-block:1px solid var(--line); }
[data-project='todo'] .metric { background:transparent; border:0; border-right:1px solid var(--line); border-radius:0; }
[data-project='todo'] .metric:last-child { border-right:0; }
[data-project='todo'] .metric strong { font-family:Georgia,serif; font-size:38px; }

/* A recipe journal, with a tangible food illustration in the opening spread. */
[data-project='blog'] .hero h1 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.05em; }
[data-project='blog'] .hero h1 em { color:var(--ink); }
[data-project='blog'] .hero-aside { border:0; padding:0; display:grid; grid-template-columns:1fr auto; gap:15px 24px; align-items:center; }
[data-project='blog'] .identity-still { grid-column:1/-1; margin:0 24px 7px 0; rotate:4deg; padding:12px; background:#f7ede1; box-shadow:var(--shadow); width:min(calc(100% - 24px),360px); justify-self:end; }
[data-project='blog'] .identity-still img { width:100%; height:auto; aspect-ratio:1.8; object-fit:cover; object-position:center top; display:block; }
[data-project='blog'] .identity-still figcaption { font:11px/1.4 Georgia,serif; color:#7b4d38; padding:14px 5px 5px; }
[data-project='blog'] .identity-photo-credit { display:block; width:fit-content; margin-top:5px; padding-block:5px; color:#694630; font:10px/1.5 Inter,'Segoe UI',sans-serif; text-decoration:underline; text-underline-offset:3px; }
[data-project='blog'] .hero-aside strong { justify-self:end; font-family:Georgia,serif; margin:0; }
[data-project='blog'] .hero-aside > span { max-width:20ch; }
[data-project='blog'] .recipe-layout { gap:32px; grid-template-columns:270px minmax(0,1fr); }
[data-project='blog'] .filter-panel { border-radius:2px; box-shadow:none; }
[data-project='blog'] .filter-panel h2 { font:27px/1.1 Georgia,serif; }
[data-project='blog'] .recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
[data-project='blog'] .recipe-card { border:0; border-radius:2px; padding:10px 10px 0; box-shadow:var(--shadow); }
[data-project='blog'] .recipe-image { aspect-ratio:1.5; filter:none; }
[data-project='blog'] .recipe-content { padding:18px 10px; }
[data-project='blog'] .recipe-card h3 { font:26px/1.15 Georgia,serif; letter-spacing:-.035em; }
[data-project='blog'] .recipe-card p { font-size:12px; }
[data-project='blog'] .recipe-actions button { min-height:40px; font-size:12px; }
[data-project='blog'] .recipe-actions .save { min-width:40px; font-size:21px; }
[data-project='blog'] .results-head h2 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.035em; margin:0; }

/* Reusable modules become the visual language of the component portfolio. */
[data-project='spa'] .hero { grid-template-columns:1.15fr .85fr; }
[data-project='spa'] .profile-aside { min-height:290px; border:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; overflow:visible; }
[data-project='spa'] .identity-tokens { grid-column:1/-1; background:#36492e; color:#ecf2df; padding:23px; border-radius:7px; }
[data-project='spa'] .identity-tokens p { margin:0 0 22px; font:10px ui-monospace,monospace; letter-spacing:.13em; }
[data-project='spa'] .identity-swatches { display:flex; justify-content:space-between; gap:10px; }
[data-project='spa'] .identity-swatches i { display:block; width:40px; aspect-ratio:1; border-radius:50%; background:var(--swatch); }
[data-project='spa'] .identity-module { padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:7px; }
[data-project='spa'] .identity-module > span { display:block; margin:0 0 22px; font:10px ui-monospace,monospace; color:var(--muted); }
[data-project='spa'] .identity-module > i { display:block; height:50px; border-radius:4px; background:var(--panel-2); }
[data-project='spa'] .identity-module--grid > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
[data-project='spa'] .identity-module--grid i { display:block; height:23px; background:var(--accent); opacity:.65; border-radius:2px; }
[data-project='spa'] .work-grid { gap:20px; }
[data-project='spa'] .work-card { padding:27px; min-height:300px; border-radius:4px; transition:transform .25s,border-color .25s; }
[data-project='spa'] .work-card:before { width:90px; height:90px; right:22px; top:22px; border-radius:3px; rotate:0deg; opacity:.3; background:linear-gradient(90deg,transparent 48%,var(--accent) 48% 51%,transparent 51%),linear-gradient(transparent 48%,var(--accent) 48% 51%,transparent 51%); }
[data-project='spa'] .work-card:nth-child(3n+2) { background:var(--panel-2); }
[data-project='spa'] .work-card h3 { font-size:23px; }
[data-project='spa'] .work-card p { font-size:13px; }
[data-project='spa'] .contact-panel { background:var(--panel); box-shadow:none; }

/* The product page echoes the cover: editorial type beside a paper-framed shoe. */
[data-project='ecommerce'] .product-layout { grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(28px,6vw,90px); }
[data-project='ecommerce'] .product-info { grid-column:1; grid-row:1; }
[data-project='ecommerce'] .product-gallery { grid-column:2; grid-row:1; }
[data-project='ecommerce'] .product-info h1 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.055em; line-height:.97; font-size:clamp(3.2rem,6.2vw,6.4rem); }
[data-project='ecommerce'] .product-info h1 em { color:var(--ink); }
[data-project='ecommerce'] .product-description { font-size:14px; }
[data-project='ecommerce'] .main-image-wrap { min-height:0; aspect-ratio:1; padding:35px 22px 20px; background:#edf0ed; border:10px solid #f4f6ef; border-radius:2px; box-shadow:var(--shadow); }
[data-project='ecommerce'] .main-image-wrap:before { content:none; }
[data-project='ecommerce'] .main-image-wrap img { position:absolute; inset:42px 16px 16px; width:calc(100% - 32px); height:calc(100% - 58px); object-fit:contain; }
[data-project='ecommerce'] .product-stamp { color:#3f5d4c; left:15px; top:15px; }
[data-project='ecommerce'] .thumbnail { background:#edf0ed; border-radius:2px; padding:8px; }
[data-project='ecommerce'] .thumbnail img { aspect-ratio:1.65; }
[data-project='ecommerce'] .thumbnail.active { outline:2px solid var(--accent); outline-offset:2px; }
[data-project='ecommerce'] .product-price { margin-top:30px; }
[data-project='ecommerce'] .size { min-height:44px; }
[data-project='ecommerce'] .buy-row .button { min-height:52px; }
[data-project='ecommerce'] .cart-inner { background:var(--panel); }

/* The four-option motif frames an actual, keyboard-operable quiz. */
[data-project='quiz'] .hero h1 { font-size:clamp(3rem,5.6vw,5.3rem); }
[data-project='quiz'] .hero-aside { display:grid; grid-template-columns:95px 1fr; border:0; gap:0 25px; align-items:center; padding:0; justify-self:end; }
[data-project='quiz'] .identity-flourish { grid-row:1/3; margin:0; width:95px; height:95px; }
[data-project='quiz'] .hero-aside strong { margin:0; }
[data-project='quiz'] .quiz-layout { gap:32px; }
[data-project='quiz'] .quiz-intro { border:0; box-shadow:none; padding:25px 0; background:transparent; }
[data-project='quiz'] .quiz-intro h2 { font:42px/1.05 Georgia,serif; }
[data-project='quiz'] .quiz-card { --bg:#e9e0f2; --panel:#f1edf8; --panel-2:#ddd0eb; --ink:#413451; --muted:#6c557d; --line:#bca9cc; --accent:#655179; --accent-ink:#fff7ff; --accent-2:#934d38; color:var(--ink); background:var(--panel); border:0; border-radius:10px; padding:32px; }
[data-project='quiz'] .quiz-card #question { font:clamp(1.8rem,3vw,2.9rem)/1.15 Georgia,serif; letter-spacing:-.035em; }
[data-project='quiz'] .answer { background:#e1d7ed; min-height:64px; border-color:transparent; font-size:14px; }
[data-project='quiz'] .answer:disabled { opacity:1; cursor:default; }
[data-project='quiz'] .answer.correct { background:#d5e7d1; color:#25452c; border-color:#678764; }
[data-project='quiz'] .answer.correct span { color:#25452c; border-color:#678764; }
[data-project='quiz'] .answer.incorrect { background:#f2d5cd; color:#792f25; border-color:#b37e71; }
[data-project='quiz'] .answer.incorrect span { color:#792f25; border-color:#b37e71; }
[data-project='quiz'] .feedback:not(.wrong) { color:#365635; }
[data-project='quiz'] .timer-wrap strong { font-size:32px; }

/* Cinema typography and a graphic reel connect Frame to its cover artwork. */
[data-project='movie'] .hero h1 { font-family:Georgia,serif; font-weight:400; font-size:clamp(4rem,8vw,8rem); letter-spacing:-.065em; }
[data-project='movie'] .hero h1 em { font-size:.65em; display:block; margin-top:10px; color:var(--ink); }
[data-project='movie'] .hero-aside { border:12px solid var(--panel-2); border-top-width:18px; border-bottom-width:18px; background:var(--panel); padding:25px; width:min(100%,285px); justify-self:end; rotate:5deg; text-align:center; box-shadow:var(--shadow); }
[data-project='movie'] .identity-flourish { width:85px; height:85px; margin:0 auto 15px; padding:15px; border-radius:50%; background:var(--panel-2); }
[data-project='movie'] .hero-aside strong { font:44px/1 Georgia,serif; margin-bottom:12px; }
[data-project='movie'] .search-bar { box-shadow:none; border-radius:4px; padding:24px; }
[data-project='movie'] .search-bar input { background:var(--panel-2); min-height:52px; }
[data-project='movie'] .search-bar form .button { height:52px; }
[data-project='movie'] .movie-grid { gap:24px; }
[data-project='movie'] .movie-grid > .empty { grid-column:1/-1; min-height:165px; display:grid; place-items:center; font:24px/1.4 Georgia,serif; }
[data-project='movie'] .movie-card { padding:9px; border-radius:1px; transition:transform .25s; }
[data-project='movie'] .movie-content { padding:17px 5px 9px; }
[data-project='movie'] .movie-content h3 { font:22px/1.15 Georgia,serif; }
[data-project='movie'] .movie-content button { min-height:40px; font-size:12px; }
[data-project='movie'] .results-head h2 { font-family:Georgia,serif; font-weight:400; margin:0; }

@media (max-width:1050px) {
  [data-project='todo'] .todo-layout { grid-template-columns:1fr; }
  [data-project='todo'] .composer { position:static; }
  [data-project='chat'] .chat-layout { grid-template-columns:230px minmax(0,1fr); }
  [data-project='chat'] .room-panel { display:block; }
  [data-project='chat'] .composer-row { grid-template-columns:1fr 1fr; }
  [data-project='chat'] .message-field { grid-column:1/-1; }
  [data-project='chat'] .composer-row .button { grid-column:2; }
}
@media (max-width:850px) {
  .hero, [data-project='weather'] .hero, [data-project='spa'] .hero { grid-template-columns:1fr; gap:28px; }
  .hero h1 { font-size:clamp(2.8rem,8.5vw,5rem); }
  .hero-copy { max-width:65ch; }
  [data-project='gallery'] .hero-aside { justify-self:start; width:100%; display:flex; align-items:center; gap:25px; padding:20px; }
  [data-project='gallery'] .hero-aside strong { margin:0; }
  [data-project='weather'] .hero-aside { justify-self:start; border-radius:5px; display:flex; gap:22px; align-items:center; text-align:left; }
  [data-project='weather'] .hero-aside strong { margin:0; }
  [data-project='todo'] .hero-aside { justify-self:start; rotate:0deg; width:100%; display:flex; align-items:center; gap:22px; padding:18px 22px; }
  [data-project='todo'] .identity-flourish,[data-project='todo'] .hero-aside strong { margin:0; }
  [data-project='blog'] .hero-aside { grid-template-columns:minmax(0,1fr) auto; gap:18px; max-width:500px; }
  [data-project='blog'] .identity-still { grid-column:1; grid-row:1/3; width:100%; rotate:0deg; margin:0; }
  [data-project='blog'] .hero-aside strong { justify-self:start; align-self:end; }
  [data-project='blog'] .recipe-layout { grid-template-columns:1fr; }
  [data-project='blog'] .filter-panel { position:static; }
  [data-project='blog'] .filter-panel form { grid-template-columns:1fr 1fr; }
  [data-project='blog'] .filter-panel form .button { grid-column:1/-1; }
  [data-project='spa'] .profile-aside { min-height:0; grid-template-columns:1.6fr 1fr 1fr; gap:10px; }
  [data-project='spa'] .identity-tokens { grid-column:auto; }
  [data-project='spa'] .identity-swatches i { width:26px; }
  [data-project='spa'] .identity-swatches { gap:5px; }
  [data-project='ecommerce'] .product-layout { grid-template-columns:1fr; }
  [data-project='ecommerce'] .product-info,[data-project='ecommerce'] .product-gallery { grid-row:auto; grid-column:auto; }
  [data-project='ecommerce'] .main-image-wrap { aspect-ratio:1.2; }
  [data-project='quiz'] .hero-aside { justify-self:start; grid-template-columns:70px 1fr; }
  [data-project='quiz'] .identity-flourish { width:70px; height:70px; }
  [data-project='movie'] .hero-aside { justify-self:start; rotate:0deg; width:100%; display:grid; grid-template-columns:60px auto 1fr; align-items:center; gap:22px; text-align:left; padding:15px; }
  [data-project='movie'] .identity-flourish { width:60px; height:60px; margin:0; padding:10px; }
  [data-project='movie'] .hero-aside strong { margin:0; }
}
@media (max-width:800px) {
  [data-project='chat'] .chat-layout { grid-template-columns:1fr; }
  [data-project='chat'] .room-panel { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  [data-project='chat'] .room-panel .panel-head { margin-bottom:8px; }
  [data-project='chat'] .room-note { margin-top:10px; padding-top:12px; }
  [data-project='chat'] .room { display:flex; min-width:0; padding:8px; }
  [data-project='chat'] .room-avatar,[data-project='chat'] .room small,[data-project='chat'] .room b { display:none; }
  [data-project='chat'] .room strong { white-space:normal; font-size:11px; }
  [data-project='quiz'] .quiz-intro { display:block; padding:8px 0; }
  [data-project='quiz'] .quiz-intro ul { display:grid; grid-template-columns:1fr 1fr; gap:0 25px; }
  [data-project='quiz'] .score-card { border-left:0; border-top:1px solid var(--line); padding:14px 0 0; display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
  [data-project='quiz'] .score-card span { margin:0; }
}
@media (max-width:540px) {
  .hero { margin-bottom:30px; }
  .hero-copy { font-size:13px; }
  .hero h1 { font-size:clamp(2.55rem,11.5vw,4rem); }
  .panel { padding:20px; }
  .identity-flourish { width:55px; height:55px; }
  [data-project='gallery'] .gallery-grid { gap:23px; }
  [data-project='gallery'] .gallery-card { aspect-ratio:auto; }
  [data-project='weather'] .weather-main { padding:24px 20px; }
  [data-project='weather'] .weather-mark { font-size:64px; width:64px; }
  [data-project='weather'] .current-reading { flex-wrap:wrap; margin-block:32px; gap:8px; }
  [data-project='weather'] .current-reading strong { font-size:5.5rem; }
  [data-project='weather'] .current-reading p { width:100%; max-width:none; margin:18px 0 0; text-align:left; }
  [data-project='weather'] .forecast-grid { gap:10px; }
  [data-project='chat'] .conversation { padding:21px 18px; }
  [data-project='chat'] .composer-row { grid-template-columns:1fr; }
  [data-project='chat'] .message-field,[data-project='chat'] .composer-row .button { grid-column:auto; }
  [data-project='todo'] .hero-aside { gap:17px; }
  [data-project='todo'] .hero-aside strong { font-size:40px; }
  [data-project='todo'] .form-row { grid-template-columns:1fr; }
  [data-project='todo'] .list-panel { padding:24px 18px; }
  [data-project='todo'] .metric:nth-child(2) { border-right:0; }
  [data-project='todo'] .metric:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  [data-project='blog'] .hero-aside { grid-template-columns:minmax(0,1fr) 100px; gap:12px; }
  [data-project='blog'] .identity-still { padding:7px; }
  [data-project='blog'] .identity-still figcaption { font-size:10px; padding:10px 3px 3px; }
  [data-project='blog'] .filter-panel form { grid-template-columns:1fr; }
  [data-project='blog'] .recipe-grid { grid-template-columns:1fr; gap:20px; }
  [data-project='spa'] .profile-aside { grid-template-columns:1fr 1fr; }
  [data-project='spa'] .identity-tokens { grid-column:1/-1; }
  [data-project='spa'] .identity-swatches i { width:35px; }
  [data-project='spa'] .identity-module { padding:18px; }
  [data-project='ecommerce'] .main-image-wrap { border-width:7px; padding:27px 10px 12px; }
  [data-project='ecommerce'] .product-info h1 { font-size:clamp(3rem,12vw,4.6rem); }
  [data-project='quiz'] .quiz-card { padding:24px 20px; }
  [data-project='quiz'] .quiz-intro ul { grid-template-columns:1fr; }
  [data-project='movie'] .hero h1 { font-size:clamp(3.5rem,15vw,5rem); }
  [data-project='movie'] .hero-aside { grid-template-columns:45px auto 1fr; gap:14px; border-width:8px; padding:15px 10px; }
  [data-project='movie'] .identity-flourish { width:45px; height:45px; }
  [data-project='movie'] .movie-grid { gap:18px; }
  [data-project='movie'] .search-bar { padding:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .gallery-card,.movie-card,.work-card,.hero-aside { transition:none!important; }
}