/* Practical type applications, with restrained square accents from the deck references. */
.application-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-bottom:40px}
.application-intro h3,.motif-heading h3{font:500 clamp(24px,2.3vw,34px)/1.3 Unbounded,sans-serif;letter-spacing:-1px}
.application-intro>p,.motif-heading>p{font-size:14px;line-height:1.7;max-width:60ch;color:#5d5963}
.type-application{margin-top:46px}
.application-label{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px}
.application-label>span:last-child{font-size:12px;color:#5d5963}
.application-canvas{padding:44px;position:relative;overflow:hidden}
.application-kicker{display:block;font-size:10px;letter-spacing:1.6px;font-weight:600}
.opener-canvas{background:#B9A1FF;color:#2A2A2A;min-height:410px;display:flex;flex-direction:column;justify-content:center}
.opener-canvas h3{font:750 clamp(36px,4.1vw,64px)/1.12 Unbounded,sans-serif;letter-spacing:-1.9px;margin:36px 0 24px;max-width:85%;position:relative;z-index:1}
.opener-canvas>p{font-size:clamp(16px,1.5vw,21px);line-height:1.5;max-width:38ch;position:relative;z-index:1}
.pixel-steps{--pixel:44px;position:absolute;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,var(--pixel));grid-template-rows:repeat(3,var(--pixel));pointer-events:none}
.pixel-steps i{display:block;background:#9B79FF;aspect-ratio:1}
.pixel-steps i:nth-child(1){grid-column:3;grid-row:1;background:#6214FF}
.pixel-steps i:nth-child(2){grid-column:2;grid-row:2;background:#F6F3F0}
.pixel-steps i:nth-child(3){grid-column:1;grid-row:3;background:#6214FF}
.application-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:22px}
.application-notes h4,.motif-grid h4{font-size:16px;margin:0 0 9px}
.application-notes p,.motif-grid figcaption p{font-size:13px;line-height:1.65;color:#5d5963}
.body-canvas{background:#E5E4E6;display:grid;grid-template-columns:1.1fr 1fr;gap:50px;min-height:380px;align-items:center}
.application-title h3{font:700 clamp(28px,3vw,44px)/1.18 Unbounded,sans-serif;letter-spacing:-1.3px;margin:26px 0}
.pixel-marker{display:block;width:24px;aspect-ratio:1;background:#9B79FF}
.application-body h4{font-size:20px;line-height:1.4;margin:0 0 20px}
.application-body p{font-size:16px;line-height:1.7;max-width:52ch;margin-top:16px}
.application-caption{display:block;margin-top:28px;font-size:9px;letter-spacing:1.5px}
.motif-section{border-top:1px solid #c9c7cc;margin-top:56px;padding-top:40px}
.motif-heading h3{margin:14px 0 20px}
.motif-heading>p{max-width:75ch}
.motif-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.motif-demo{height:255px;position:relative;overflow:hidden;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.mini-label{font-size:8px;letter-spacing:1.2px}
.motif-demo p{font:600 clamp(22px,2.1vw,30px)/1.25 Unbounded,sans-serif;letter-spacing:-.7px;position:relative;z-index:1;margin-bottom:12px;max-width:85%}
.motif-corner{background:#E5E4E6;color:#434343}
.corner-squares{position:absolute;right:0;top:0;width:80px;height:80px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.corner-squares i:first-child{grid-column:2;grid-row:1;background:#9B79FF}
.corner-squares i:last-child{grid-column:1;grid-row:2;background:#FF2DEA}
.motif-marker{background:#0F0B0F;color:#F6F3F0}
.motif-marker p>span{display:inline-block;width:18px;aspect-ratio:1;background:#B9A1FF;margin-right:12px}
.motif-edge{background:#B9A1FF;color:#2A2A2A}
.motif-edge .pixel-steps{--pixel:25px}
.motif-edge .pixel-steps i:nth-child(2){background:#0DFE69}
.motif-edge .pixel-steps i:nth-child(3){background:#DAFF0B}
.motif-grid figcaption{margin-top:18px}
.motif-guidance{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px;padding-top:24px;border-top:1px solid #c9c7cc}
.motif-guidance p{font-size:14px;line-height:1.7;color:#5d5963}
.motif-guidance strong{display:block;color:#434343;margin-bottom:8px}
/* Photography is intentionally left empty until there is a direction to share. */
main>#photography{padding-bottom:160px}
main>#photography>.section-heading{margin-bottom:0;grid-template-columns:1fr}
.chapter-photography{grid-column:1/-1;background:#E5E4E6;color:#434343}
@media(max-width:1100px){
 .application-intro{grid-template-columns:1fr;gap:20px}
 .application-canvas{padding:32px}
 .body-canvas{grid-template-columns:1fr;gap:32px}
 .application-title h3{font-size:38px}
 .application-body p{max-width:60ch}
 .motif-grid{grid-template-columns:1fr;gap:28px}
 .motif-grid figure{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
 .motif-demo{height:240px}
 .motif-grid figcaption{margin:0}
 .application-label{align-items:start;flex-direction:column;gap:8px}
}
@media(max-width:700px){
 .type-application{margin-top:36px}
 .application-canvas{padding:28px 24px}
 .opener-canvas{min-height:370px;padding-bottom:86px}
 .opener-canvas h3{font-size:clamp(26px,7vw,38px);max-width:100%;letter-spacing:-1.1px;margin:30px 0 22px}
 .opener-canvas>p{font-size:16px;max-width:28ch}
 .pixel-steps{--pixel:26px}
 .application-notes,.motif-guidance{grid-template-columns:1fr;gap:20px}
 .application-title h3{font-size:30px;letter-spacing:-1px}
 .application-body h4{font-size:19px}.application-body p{font-size:15px}
 .motif-section{margin-top:40px;padding-top:32px}
 .motif-grid figure{display:block}
 .motif-grid figcaption{margin-top:16px}
 .motif-demo p{font-size:28px}
 .chapter-photography{grid-column:auto}
 main>#photography{padding-bottom:120px}
}

/* Palette accents become small compositions rather than edge tabs. */
/* One shared square unit across the layout applications and motif studies. */
#layout{--layout-tile:64px}
#layout .pixel-marker{width:var(--layout-tile)}
#layout .pixel-steps{--pixel:var(--layout-tile)}
#layout .corner-squares{width:calc(2 * var(--layout-tile));height:calc(2 * var(--layout-tile))}
#layout .motif-marker p{position:static}
#layout .motif-marker p>span{width:var(--layout-tile);height:var(--layout-tile);position:absolute;right:24px;bottom:24px;margin:0}
#layout .motif-demo{height:320px}
#layout .motif-edge .pixel-steps{top:0;bottom:auto}
@media(max-width:700px){#layout{--layout-tile:52px}}

.combination-art{--combination-accent:#B9A1FF}
.editorial-light .combination-art{--combination-accent:#9B79FF}
.soft-lilac .combination-art{--combination-accent:#F6F3F0}
.signature-violet .combination-art{--combination-accent:#D4C4FF}
.combination-pixels{position:absolute;right:28px;bottom:24px;display:grid;grid-template-columns:repeat(3,22px);grid-template-rows:repeat(3,22px);pointer-events:none}
.combination-art .combination-pixels i{position:static;display:block;width:22px;height:22px;background:var(--combination-accent);border-radius:0}
.studio-dark .combination-pixels i:nth-child(1){grid-column:1;grid-row:3}
.studio-dark .combination-pixels i:nth-child(2){grid-column:2;grid-row:2}
.studio-dark .combination-pixels i:nth-child(3){grid-column:3;grid-row:1}
.editorial-light .combination-pixels i:nth-child(1){grid-column:2;grid-row:1}
.editorial-light .combination-pixels i:nth-child(2){grid-column:3;grid-row:1}
.editorial-light .combination-pixels i:nth-child(3){grid-column:3;grid-row:2}
.soft-lilac .combination-pixels i:nth-child(1){grid-column:1;grid-row:1}
.soft-lilac .combination-pixels i:nth-child(2){grid-column:3;grid-row:2}
.soft-lilac .combination-pixels i:nth-child(3){grid-column:2;grid-row:3}
.signature-violet .combination-pixels i:nth-child(1){grid-column:2;grid-row:2}
.signature-violet .combination-pixels i:nth-child(2){grid-column:3;grid-row:2}
.signature-violet .combination-pixels i:nth-child(3){grid-column:3;grid-row:3}
@media(max-width:700px){
 .combination-pixels{right:22px;bottom:20px;grid-template-columns:repeat(3,16px);grid-template-rows:repeat(3,16px)}
 .combination-art .combination-pixels i{width:16px;height:16px}
}

/* A consistent, inline character signature after each main heading's full stop. */
.heading-end{white-space:nowrap}
.heading-character{display:inline-block;width:1.02em;height:1.02em;max-width:none;object-fit:contain;vertical-align:-.12em;margin-left:.23em}
.hero h1 .heading-character{width:.86em;height:.86em;vertical-align:-.08em}

footer .footer-main{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:48px;margin:0;padding:0;border:0;color:inherit;font-size:inherit}
.footer-copy h2{margin-top:0}
.footer-pixels{display:grid;grid-template-columns:repeat(4,48px);grid-template-rows:repeat(4,48px);gap:0;justify-self:end;transform:none}
.footer-pixels i{display:block;background:#B9A1FF;transition:transform 220ms ease}
.footer-pixels i:nth-child(1){grid-column:1;grid-row:4;background:#6214FF}
.footer-pixels i:nth-child(2){grid-column:2;grid-row:3;background:#B9A1FF}
.footer-pixels i:nth-child(3){grid-column:2;grid-row:4;background:#FF2DEA}
.footer-pixels i:nth-child(4){grid-column:3;grid-row:2;background:#F6F3F0}
.footer-pixels i:nth-child(5){grid-column:3;grid-row:3;background:#6214FF}
.footer-pixels i:nth-child(6){grid-column:4;grid-row:1;background:#DAFF0B}
.footer-pixels i:nth-child(7){grid-column:4;grid-row:2;background:#B9A1FF}

@media(max-width:1000px){footer .footer-main{grid-template-columns:minmax(0,1fr) 120px;gap:26px}.footer-pixels{grid-template-columns:repeat(4,28px);grid-template-rows:repeat(4,28px);gap:0}}
@media(max-width:650px){footer .footer-main{grid-template-columns:1fr;gap:30px}.footer-pixels{justify-self:end;margin-top:-20px}}

/* Simple, upright deck-style footer tiles. */
.footer-pixels i{transition:none}
.footer-pixels i:nth-child(1){grid-column:1;grid-row:1;background:#6214FF}
.footer-pixels i:nth-child(2){grid-column:4;grid-row:2;background:#FF2DEA}
.footer-pixels i:nth-child(3){grid-column:3;grid-row:3;background:#DAFF0B}
.footer-pixels i:nth-child(4){grid-column:2;grid-row:4;background:#0DFE69}

/* Bright opening banner, with a clear directional cue. */
#overview .intro-line,#overview .hero{background:#6214FF;color:#FFFFFF}
#overview .hero h1 em{color:#FFFFFF}
#overview .hero-copy>.eyebrow,#overview .hero-copy p,#overview .stage-caption{color:#FFFFFF}
.hero .explore-arrow{display:block;width:22px;height:22px;flex-shrink:0;transform:translateY(-1px)}
.hero .light-button{gap:30px;min-height:46px;background:#FFFFFF;align-items:center;line-height:1.2}

/* Chapter cards: tactile swatches and clearly defined clickable surfaces. */
/* Descriptions use the full width of their content column and its shared gutter. */
.swatch span{right:10px}
.swatch strong{display:block;font-size:13px;font-weight:600;line-height:1.3;margin-bottom:7px}
.swatch small{display:block;font-size:10px;line-height:1.4}
.intro-bottom>p,.application-intro>p,.motif-heading>p,.identity-title>p,
.type-details p,.colour-notes p,.voice-principle p,.family-footer>p,
.secondary-palette .palette-heading p{max-width:none;width:100%;min-width:0}

.chapter-type{background:#E5E4E6;color:#434343;box-shadow:inset 0 0 0 1px #43434315}
.chapter-layout{background:#D4C4FF;color:#2A2A2A;box-shadow:inset 0 0 0 1px #6214FF20}
.chapter .tile-label b{font-size:18px;line-height:1;transition:transform 350ms ease}
.chapter-colours .tile-palette{position:relative;height:122px;width:100%;display:block}
.chapter-colours .tile-palette i{position:absolute;left:50%;bottom:8px;width:clamp(44px,4.5vw,68px);height:100px;margin:0;border-radius:5px;background:#6214FF;box-shadow:0 2px 6px #23006818;transform-origin:50% 92%;transform:translateX(var(--swatch-x)) rotate(var(--swatch-angle));transition:transform 550ms cubic-bezier(.45,0,.2,1)}
.chapter-colours .tile-palette i:nth-child(1){--swatch-x:-140%;--swatch-angle:-18deg;background:#6214FF}
.chapter-colours .tile-palette i:nth-child(2){--swatch-x:-80%;--swatch-angle:-6deg;background:#FF2DEA}
.chapter-colours .tile-palette i:nth-child(3){--swatch-x:-20%;--swatch-angle:6deg;background:#0DFE69}
.chapter-colours .tile-palette i:nth-child(4){--swatch-x:40%;--swatch-angle:18deg;background:#DAFF0B}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .chapter-colours:hover .tile-palette i{transform:translateX(var(--swatch-x)) translateY(-4px) rotate(calc(var(--swatch-angle) * 1.25))}
}
@media(max-width:650px){
 .chapter-colours .tile-palette{height:98px}
 .chapter-colours .tile-palette i{width:38px;height:76px}
}
@media(prefers-reduced-motion:reduce){
 .chapter-colours .tile-palette i,.chapter .tile-label b,.chapter .tile-aa,.chapter .tile-composition{transition:none}
 .chapter:hover .tile-label b{transform:none}
 .chapter-colours:hover .tile-palette i{transform:translateX(var(--swatch-x)) rotate(var(--swatch-angle))}
}