/* Architecture layouts use the shared studio palette, typography and motion. */
.arch-width { width: min(calc(100% - 2rem), var(--max-width)); margin-inline: auto; }
.architecture-page a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.arch-hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3rem; margin-top: 2rem; }
.arch-kicker { font-family: var(--font-body); font-size: .75rem; line-height: 1.6; }
.arch-hero h1 { max-width: 13ch; font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 5.15rem); line-height: 1.04; font-weight: 650; letter-spacing: -.035em; margin: 1.2rem 0; }
.arch-lede { font-size: 1.15rem; line-height: 1.7; max-width: 34rem; }
.arch-intro { color: var(--muted); line-height: 1.8; max-width: 33rem; }
.arch-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.8rem; }
.arch-button { gap: 1.25rem; }
.arch-text-link { display: inline-block; line-height: 1.6; }
.arch-blueprint { background: rgba(247,243,237,.9); border: 1px solid var(--surface-border); padding: 1.5rem; color: var(--text); border-radius: var(--radius-xl); box-shadow: 0 12px 30px rgba(36,35,33,.08); text-align: center; backdrop-filter: blur(14px); }
.arch-drawing-meta { color: var(--muted); font-size: .8rem; font-weight: 600; margin-bottom: 1.5rem; }
.arch-orbit { border: 1px solid rgba(108,98,88,.3); border-radius: 999px; width: 160px; min-height: 54px; display: grid; place-items: center; margin: auto; font-size: .85rem; background: rgba(255,255,255,.45); }
.arch-wire { height: 24px; width: 1px; background: var(--gold); margin-inline: auto; }
.arch-interface-row, .arch-data-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; }
.arch-interface-row span, .arch-data-row span { border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: .8rem .3rem; font-size: .8rem; line-height: 1.5; background: rgba(255,255,255,.4); }
.arch-core { border: 1px solid rgba(168,138,100,.4); background: rgba(168,138,100,.09); border-radius: var(--radius-lg); padding: 1.2rem .5rem; }
.arch-core > span { display: block; font-size: .67rem; letter-spacing: .08em; color: var(--teal); font-weight: 700; }
.arch-core strong { display: block; font-size: 1.15rem; font-weight: 600; margin-block: .7rem .4rem; }
.arch-core small { font-size: .78rem; color: var(--muted); }
.arch-foundation { border-top: 1px solid var(--surface-border); padding: 1rem .2rem 0; margin-top: 1.3rem; font-size: .8rem; display: flex; justify-content: space-between; color: var(--teal); }
.arch-drawing-foot { font-size: .7rem; line-height: 1.6; margin-top: .7rem; color: var(--muted); }
.arch-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; padding-block: 1.5rem; font-size: .9rem; color: var(--teal); }
.arch-index a { border-bottom: 1px solid transparent; padding-bottom: .2rem; }
.arch-index a:hover { border-color: var(--gold); }
.arch-section { padding-block: clamp(2rem,5vw,4rem) 1rem; scroll-margin-top: 7rem; }
.arch-section-head { display: block; max-width: 700px; margin-bottom: 2rem; }
.arch-section-head h2, .arch-contact h2 { font-family: var(--font-display); font-size: clamp(1.9rem,3.3vw,2.8rem); font-weight: 650; line-height: 1.15; letter-spacing: -.035em; margin: .8rem 0 1rem; }
.arch-section-head > p:last-child { line-height: 1.8; color: var(--muted); }
.arch-explorer { display: grid; grid-template-columns: 250px minmax(0,1fr); border: 1px solid var(--surface-border); border-radius: var(--radius-xl); overflow: hidden; background: rgba(247,243,237,.9); box-shadow: 0 12px 30px rgba(36,35,33,.08); }
.arch-selector { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-right: 1px solid var(--surface-border); background: rgba(108,98,88,.04); }
.arch-selector a { display: block; padding: 1.1rem; border: 1px solid transparent; border-radius: var(--radius-lg); transition: background 180ms ease, border-color 180ms ease; }
.arch-selector strong { display: block; font-size: .95rem; font-weight: 600; }
.arch-selector small { display: block; font-size: .78rem; margin-top: .5rem; line-height: 1.7; color: var(--muted); }
.arch-selector a:hover, .arch-selector a.is-selected { background: var(--surface); border-color: rgba(168,138,100,.4); }
.arch-view { padding: 2rem; scroll-margin-top: 7rem; }
.arch-view + .arch-view { border-top: 1px solid var(--surface-border); }
.arch-view-heading { font-size: .78rem; color: var(--teal); }
.arch-tag { display: inline-block; border: 1px solid var(--surface-border); background: rgba(108,98,88,.05); padding: .4rem .65rem; border-radius: 999px; }
.arch-view h3 { font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; letter-spacing: -.035em; margin: 1.5rem 0; }
.arch-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; padding: 0; list-style: none; }
.arch-flow li { position: relative; border-top: 1px solid rgba(168,138,100,.6); padding-top: 1rem; }
.arch-flow li:not(:last-child)::after { content: '→'; position: absolute; top: -.85rem; right: -1rem; background: var(--surface); color: var(--gold); padding: 0 .2rem; }
.arch-flow li > span { display: block; font-size: .75rem; line-height: 1.6; color: var(--teal); }
.arch-flow strong { display: block; font-size: .95rem; margin-top: .7rem; }
.arch-flow p { font-size: .88rem; line-height: 1.8; color: var(--muted); }
.arch-annotation { border-left: 2px solid var(--gold); background: rgba(168,138,100,.07); padding: 1rem 1.2rem; margin-top: 1.5rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.arch-annotation > span { font-size: .8rem; color: var(--teal); font-weight: 600; }
.arch-annotation p { font-size: .9rem; line-height: 1.8; margin-bottom: 0; }
.arch-caption { font-size: .78rem; line-height: 1.8; color: var(--muted); margin-top: 1rem; max-width: 55rem; }
.arch-case { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; padding-block: 2.5rem; border-top: 1px solid var(--surface-border); }
.arch-case-title > .arch-kicker { margin-top: .25rem; }
.arch-case h3 { font-family: var(--font-display); font-size: clamp(1.6rem,2.8vw,2.3rem); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; margin: 1rem 0; }
.arch-case-title > p:not(.arch-kicker) { line-height: 1.8; color: var(--muted); max-width: 27rem; }
.arch-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.arch-tags span { border: 1px solid var(--surface-border); background: rgba(247,243,237,.6); padding: .4rem .65rem; border-radius: 999px; font-size: .75rem; line-height: 1.5; color: var(--teal); }
.arch-case-body h4 { font-size: .85rem; font-weight: 600; margin: .3rem 0 .7rem; color: var(--teal); }
.arch-case-body p { font-size: .95rem; line-height: 1.85; margin: 0 0 1.6rem; color: var(--muted); }
.arch-detail-note { font-size: .8rem; line-height: 1.8; border-top: 1px solid var(--surface-border); padding-top: 1rem; color: var(--teal); }
.arch-principles { margin-top: 3rem; scroll-margin-top: 7rem; }
.arch-principle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem 3rem; margin-bottom: 2rem; }
.arch-principle-grid article { border-top: 1px solid var(--surface-border); padding-top: 1rem; }
.arch-principle-grid article > span { font-size: .78rem; color: var(--teal); }
.arch-principle-grid h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.035em; margin-top: .7rem; }
.arch-principle-grid p { font-size: .9rem; line-height: 1.85; color: var(--muted); }
.arch-contact { padding-block: 4rem; text-align: center; }
.arch-contact > p:not(.arch-kicker) { color: var(--muted); max-width: 34rem; margin: 1.5rem auto 2rem; line-height: 1.8; }
.arch-contact .arch-text-link { margin: 1rem 1.5rem; }
@media (max-width: 1000px) { .arch-hero { gap: 2rem; } .arch-explorer { grid-template-columns: 210px minmax(0,1fr); } .arch-view { padding: 1.5rem; } .arch-case { gap: 3rem; } }
@media (max-width: 760px) { .arch-hero { grid-template-columns: 1fr; gap: 2rem; margin-top: 1rem; } .arch-hero h1 { font-size: clamp(2.6rem,10vw,4rem); } .arch-blueprint { padding: 1.2rem; } .arch-index { gap: .8rem 1.5rem; font-size: .8rem; } .arch-explorer { grid-template-columns: 1fr; } .arch-selector { border-right: 0; border-bottom: 1px solid var(--surface-border); } .arch-selector a { padding: .9rem; } .arch-selector small { margin-top: .25rem; } .arch-case { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem; } .arch-principles { margin-top: 1rem; } .arch-contact { padding-block: 3rem; } }
@media (max-width: 480px) { .arch-view { padding: 1.2rem; } .arch-flow { grid-template-columns: 1fr; gap: .5rem; } .arch-flow li { padding-top: .8rem; } .arch-flow li:not(:last-child)::after { content: none; } .arch-flow strong { margin-top: .5rem; } .arch-flow p { margin-top: .4rem; } .arch-principle-grid { grid-template-columns: 1fr; gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { html:has(.architecture-page) { scroll-behavior: auto; } .arch-selector a { transition: none; } }