/* damedigital.ca's inner pages (five projects and About), built 2026-10-13 in the approved Assembly look:
   the tokens of starter.css, the faces and the shared pieces (.name, .lede, .go, .mail, .company) of
   page.css. These pages are still: no pinned scenes, no swarm. The home page loads this file too, for
   its "More about" links only; every other rule is scoped to body.inner-page. */
[hidden] { display: none !important; }

/* Home: the link from each project to its own page, beside the project's outbound link. */
.more { display: inline-flex; align-items: center; min-height: 44px; margin: 1rem 0 0 1.4rem; vertical-align: middle; color: #E7EBF0; font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: #838C98; transition: text-decoration-color 0.25s ease, color 0.25s ease; }
.more:hover { color: #7CF3FF; text-decoration-color: #7CF3FF; }
@media (max-width: 699px) { .more { margin: 0.4rem 0 0 1rem; } }

/* The nav keeps the home page's layout, on a solid ground, because the copy scrolls under it here. */
.inner-page .nav-solid { background: #0E1116; pointer-events: auto; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.inner-page .nav nav { align-items: center; }
.inner-page .nav nav > a, .menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.inner-page .nav nav > a[aria-current="page"] { color: #7CF3FF; }

/* The home page's header takes no pointer events but its links' (it floats over the swarm), so its menu
   takes them too, and its links centre on the menu's 44px summary as the inner pages' do. */
.nav .menu { pointer-events: auto; }
.nav nav { align-items: center; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; gap: 0.5em; color: #E7EBF0; font-weight: 500; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ''; width: 0.42em; height: 0.42em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform 0.2s ease; }
.menu[open] summary::after { transform: translateY(20%) rotate(-135deg); }
.menu summary:hover, .menu[open] summary { color: #7CF3FF; }
.menu summary:focus-visible { outline: 2px solid #7CF3FF; outline-offset: 4px; border-radius: 4px; }
.menu ul { position: absolute; right: 0; top: calc(100% + 0.35rem); margin: 0; padding: 0.4rem; list-style: none; background: #1A1F27; border-radius: 10px; min-width: 15rem; box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.7); }
.nav .menu ul a { display: flex; align-items: center; min-height: 44px; padding: 0 0.8rem; border-radius: 6px; background: none; color: #E7EBF0; white-space: nowrap; }
.nav .menu ul a:hover { background: #262C36; }
.nav .menu ul a[aria-current="page"] { color: #7CF3FF; }
.nav .menu ul li:first-child { border-bottom: 1px solid #2E3541; margin-bottom: 0.3rem; padding-bottom: 0.3rem; }

/* The page column. */
.inner { max-width: 86rem; margin: 0 auto; padding: 7.5rem clamp(1.2rem, 5vw, 4.5rem) 0; box-sizing: border-box; }
.inner h2 { font-family: 'Antonio', 'Albert Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; }
.inner .lede { max-width: 30ch; }

/* A project's title, its link out and its picture, as the home page shows it, here unpinned. */
.p-hero { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-bottom: clamp(3.5rem, 8vw, 7rem); }
.inner .name { font-size: clamp(2.6rem, 6vw, 6rem); margin-bottom: 1rem; }
.inner[data-showcase="wildroserates"] .name, .inner[data-showcase="design-studio"] .name { font-size: clamp(2.3rem, 4.6vw, 4.8rem); }
.p-shot { margin: 0; }
.p-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 750; object-fit: cover; border-radius: 14px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6); }
.p-shot figcaption { margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.45; color: #838C98; }

/* What it is, read beside the facts. */
.p-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 7vw, 7rem); padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid #262C36; align-items: start; }
.what p { font-size: clamp(1.2rem, 1.65vw, 1.45rem); line-height: 1.5; color: #E7EBF0; max-width: 36rem; margin-bottom: 1.1em; }
.facts h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin: 0 0 1rem; }
.facts dl { margin: 0; }
.facts dl > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 0.95rem 0; border-top: 1px solid #262C36; }
.facts dt { color: #838C98; font-weight: 500; }
.facts dd { margin: 0; color: #E7EBF0; }
.aside { margin: 1.8rem 0 0; max-width: 38ch; font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.4; font-weight: 600; color: #D2C2FF; }

/* Onward: the next project in the home page's order, and the way back to all five. */
.onward { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid #262C36; }
.next { display: grid; gap: 0.4rem; text-decoration: none; }
.next .label { color: #838C98; font-weight: 500; }
.next-name { font-family: 'Antonio', 'Albert Sans', sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 0.95; color: #E7EBF0; transition: color 0.25s ease; }
.next:hover .next-name { color: #7CF3FF; }
.back { display: inline-flex; align-items: center; min-height: 44px; color: #7CF3FF; font-weight: 600; text-underline-offset: 0.3em; }
.back:hover { color: #E7EBF0; }

/* The contact, as the home page closes. */
.contact-foot { display: grid; justify-items: center; text-align: center; padding: clamp(4rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); border-top: 1px solid #262C36; scroll-margin-top: 4rem; }
.foot-logo { display: block; width: min(52vw, 320px); height: auto; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.contact-foot h2 { font-family: 'Antonio', 'Albert Sans', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.1; margin: 0 0 0.8rem; }
.contact-foot .company { margin: 1.4rem auto 0; }

/* About. */
.a-hero { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.a-hero h1 { font-family: 'Antonio', 'Albert Sans', sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 6rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 1.2rem; }
.a-story { background: #1A1F27; border-radius: 18px; padding: clamp(2rem, 6vw, 5rem); }
.a-story p { margin: 0; max-width: 34ch; font-size: clamp(1.35rem, 2.6vw, 2.25rem); line-height: 1.32; font-weight: 600; color: #E7EBF0; text-wrap: balance; }
.a-builds { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 6vw, 6rem); padding: clamp(3.5rem, 7vw, 6rem) 0; align-items: start; }
.a-builds .builds { margin: 0; }
.a-builds .who { padding-top: 0.5rem; }
.a-hire { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid #262C36; }
.a-hire h2 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1.05; margin: 0 0 1rem; }
.a-hire p { max-width: 40ch; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; color: #E7EBF0; margin: 0; }

@media (max-width: 899px) {
  .p-hero, .p-body, .a-builds { grid-template-columns: minmax(0, 1fr); }
  .p-hero { gap: 2rem; }
}
@media (max-width: 699px) {
  .inner { padding-top: 5.5rem; }
  .inner-page .nav nav { gap: 0.9rem; }
  .menu ul { right: -4.5rem; min-width: min(15rem, 80vw); }
  .inner .name { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .inner[data-showcase="wildroserates"] .name, .inner[data-showcase="design-studio"] .name { font-size: clamp(1.9rem, 9.5vw, 2.8rem); }
  .p-shot img { aspect-ratio: auto; }
  .p-shot.is-room img { aspect-ratio: 3 / 4; object-position: 60% 50%; }
  .facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .a-hero h1 { font-size: clamp(2.2rem, 12vw, 3.4rem); }
}

/* Tap targets of at least 44px: the logo link and the email link, padded beyond what they draw. */
.inner-page .nav-mark { display: inline-flex; align-items: center; min-height: 44px; }
.contact-foot .mail { display: inline-flex; align-items: flex-end; min-height: 44px; box-sizing: border-box; }

/* Each project page wears the project's own system, as its card on the home page does: the tokens and
   the name, lede and button rules are page.css's (#dame, #wildroserates, #\33 dp-yyc), so the page and
   the card can never drift apart. Here they reach the rest of the page. Design Studio and Kylo keep the
   Dame Digital colours, as their cards do. */
.inner.project .facts h2 { color: var(--head); }
.inner.project .p-shot picture { display: block; position: relative; border-radius: 14px; }
.inner.project .p-shot picture::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--p-edge, transparent), inset 0 0 0 4px var(--p-frame, transparent); }
/* Dame (ui-tokens): a plain grotesque in sentence case, evergreen headings, dark-mode text #FAFAF8. */
#dame .facts h2 { font-family: 'Albert Sans', sans-serif; font-weight: 700; text-transform: none; letter-spacing: -0.02em; }
#dame .aside { color: #FAFAF8; }
@media (min-width: 700px) { #dame .p-shot img { aspect-ratio: 2400 / 1292; } }
/* Wild Rose Rates (tokens.ts): the system grotesque, sentence case, quartz text, glacierPale support,
   brassPale as its one warm accent, 2px radius. */
#wildroserates .p-hero, #wildroserates .p-body { font-family: 'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; }
#wildroserates .facts h2 { font-family: 'Segoe UI Variable Display', 'Segoe UI', Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; font-weight: 600; text-transform: none; letter-spacing: -0.02em; }
#wildroserates .what p, #wildroserates .facts dd { color: #F8F7F4; }
#wildroserates .aside { color: #E8D9B4; }
#wildroserates .p-shot picture, #wildroserates .p-shot img { border-radius: 2px; }
/* 3DP YYC (book.css): monochrome by design, ink text and its own muted grey. */
#\33 dp-yyc .what p, #\33 dp-yyc .facts dd, #\33 dp-yyc .aside { color: #EBEBE8; }
#\33 dp-yyc .facts dt, #\33 dp-yyc .p-shot figcaption { color: #9A9A94; }

/* About's picture (polish): beside the story inside its panel, below it on a phone. Held at 1.06 inside
   its clipped frame so its drift never shows an edge. */
.a-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.a-pic { margin: 0; overflow: clip; border-radius: 12px; }
.a-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; scale: 1.06; }
@media (max-width: 899px) { .a-story { grid-template-columns: minmax(0, 1fr); } }
.a-rule { display: block; width: min(22rem, 60%); height: 2px; margin-top: clamp(1.6rem, 3vw, 2.4rem); background: linear-gradient(90deg, #4A8FE0 0%, #4A8FE0 58%, #8C6CF0 82%, #7CF3FF 100%); transform-origin: 0 50%; }

/* Motion (polish, stage 10). Every rule that hides or moves is scoped to html.m (set in the head unless
   reduced motion is asked for) or html.m-ready (set by pages-motion.js), so without script, and under
   reduced motion, this block does nothing and the page is the finished page. Each kind of block has its
   own reveal, once (scroll-craft D1): body copy rises, list rows wipe in from the left, a heading wipes
   or sharpens out of blur, the next project's name rises out of its mask, a section's top rule grows in
   the project's colour and cools to the page's, the closing mark opens from its centre, and the hero
   picture is assembled from points (pages-motion.js). Only opacity, translate, scale, clip-path and
   filter animate. Transitions arm (html.m-armed) two frames after the start states land. */
.m .inner-page .p-shot img { opacity: 0; animation: shot-fallback 0.5s ease 2.6s forwards; }
.m-ready .inner-page .p-shot img { animation: none; }
.m-ready .inner-page .p-shot picture.is-on img { opacity: 1; transition: opacity 0.3s ease; }
@keyframes shot-fallback { to { opacity: 1; } }
.inner-page .p-shot canvas.assemble { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
/* The picture's frame eases in in the project's colours once the picture has landed, as the home card's does. */
.m .inner.project .p-shot picture::after { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0), inset 0 0 0 4px rgb(0 0 0 / 0); transition: box-shadow 0.8s ease; }
.m .inner.project.is-set .p-shot picture::after { box-shadow: inset 0 0 0 1px var(--p-edge, rgb(0 0 0 / 0)), inset 0 0 0 4px var(--p-frame, rgb(0 0 0 / 0)); }

/* Start states. */
.m-ready .inner-page [data-r="rise"]:not(.in) { opacity: 0; translate: 0 28px; }
.m-ready .inner-page [data-r="row"]:not(.in) { clip-path: inset(0 100% 0 0); }
.m-ready .inner-page [data-r="wipe"]:not(.in) { clip-path: inset(-0.2em 100% -0.2em -0.2em); }
.m-ready .inner-page [data-r="resolve"]:not(.in) { opacity: 0; filter: blur(10px); }
.m-ready .inner-page [data-r="fade"]:not(.in) { opacity: 0; }
.m-ready .inner-page [data-r="mask"]:not(.in) { clip-path: inset(-0.1em -0.1em 100% -0.1em); translate: 0 0.4em; }
.m-ready .inner-page [data-r="open"]:not(.in) { clip-path: inset(0 50% 0 50%); }
.m-ready .inner-page [data-r="panel"]:not(.in) { clip-path: inset(5% 3% round 18px); }
.m-ready .inner-page [data-r="settle"]:not(.in) img { opacity: 0; scale: 1.16; }
.m-ready .inner-page [data-r="clauses"]:not(.in) .clause { opacity: 0.08; filter: blur(6px); }
/* End states that differ from the resting page's own. */
.m-ready .inner-page [data-r="wipe"].in { clip-path: inset(-0.2em -0.2em -0.2em -0.2em); }
.m-ready .inner-page [data-r="row"].in { clip-path: inset(0 0 0 0); }
.m-ready .inner-page [data-r="mask"].in { clip-path: inset(-0.1em -0.1em -0.15em -0.1em); }
.m-ready .inner-page [data-r="open"].in { clip-path: inset(0 0 0 0); }
.m-ready .inner-page [data-r="panel"].in { clip-path: inset(0 0 round 18px); }

/* Transitions, staggered by --i where a block has siblings. */
.m-armed .inner-page [data-r] { --d: calc(var(--i, 0) * 110ms); }
.m-armed .inner-page [data-r="rise"] { transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d), translate 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--d); }
.m-armed .inner-page [data-r="row"] { transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(150ms + var(--i, 0) * 95ms); }
.m-armed .inner-page [data-r="wipe"] { transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.m-armed .inner-page [data-r="resolve"] { transition: opacity 1s ease 0.35s, filter 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s; }
.m-armed .inner-page [data-r="fade"] { transition: opacity 0.9s ease calc(120ms + var(--d)); }
.m-armed .inner-page [data-r="mask"] { transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, translate 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
.m-armed .inner-page [data-r="open"] { transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.m-armed .inner-page [data-r="panel"] { transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.m-armed .inner-page [data-r="settle"] img { transition: opacity 1.2s ease 0.2s, scale 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.m-armed .inner-page [data-r="clauses"] .clause { transition: opacity 0.8s ease calc(200ms + var(--i, 0) * 260ms), filter 0.9s ease calc(200ms + var(--i, 0) * 260ms); }

/* A section's top rule grows from the left in the project's colour, then cools to the page's #262C36. */
.m-ready .inner-page [data-r="line"] { position: relative; border-top-color: rgb(38 44 54 / 0); }
.m-ready .inner-page [data-r="line"]::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: #262C36; transform-origin: 0 50%; pointer-events: none; }
.m-ready .inner-page .contact-foot[data-r="line"]::before { left: clamp(1.2rem, 5vw, 4.5rem); right: clamp(1.2rem, 5vw, 4.5rem); }
.m-ready .inner-page [data-r="line"]:not(.in)::before { scale: 0 1; background: var(--p-edge, #7CF3FF); }
.m-armed .inner-page [data-r="line"]::before { transition: scale 1.2s cubic-bezier(0.65, 0, 0.35, 1), background-color 1.4s ease 1.1s; }

/* About's entrance, quieter than the projects': the brand's aurora rule draws under the lede on arrival. */
.m .inner-page .a-rule { animation: rule-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both; }
@keyframes rule-draw { from { scale: 0 1; } to { scale: 1 1; } }

/* Depth, on pictures only and never on copy: the hero picture lifts a little faster than the page as the
   hero leaves, and About's picture drifts inside its frame. Native scroll timelines, off the main thread;
   a browser without them keeps the pictures still. */
@supports (animation-timeline: view()) {
  .m .inner-page .p-hero .p-shot picture { animation: hero-lift linear both; }
  .m .inner-page .p-hero .p-shot picture { animation-timeline: view(); animation-range: exit 0% exit 100%; }
  .m .inner-page .a-pic picture { display: block; animation: pic-drift linear both; }
  .m .inner-page .a-pic picture { animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes hero-lift { from { translate: 0 0; } to { translate: 0 -56px; } }
@keyframes pic-drift { from { translate: 0 12px; } to { translate: 0 -12px; } }
@media (max-width: 699px) {
  @keyframes hero-lift { from { translate: 0 0; } to { translate: 0 -24px; } }
  @keyframes pic-drift { from { translate: 0 6px; } to { translate: 0 -6px; } }
}

/* The link out answers the pointer: its arrow leans the way it goes. */
.inner-page .go::after { transition: translate 0.25s ease; }
.m .inner-page .go:hover::after { translate: 3px 0; }