@layer site {
/* eThesis base styles (spec/01 + spec/04 "Shared motion").
   Two page families exist in the design and differ in a few base rules:
   - body.t-template  : the Solutions template pages (links inherit color, .em 400, fade 10px/.4s)
   - body.t-editorial : Home, Topic Selection, News, Article, Company, Contact, legal pages
                        (ink links with teal hover, .em 500, fade 8px/.3s)
   Theme rules use :where() so they stay at element-level specificity, like the design's own
   `a{…}` rules, and never beat a component's class. */

body { margin: 0; background: var(--white); }
/* JS-switched panels use [hidden]; it must beat the design's inline display values. */
[hidden] { display: none !important; }
button:focus { outline: none; }

/* Page wrapper (the design's root div) */
.site { width: 100%; min-width: 0; background: var(--white); color: var(--ink); font-family: var(--font-sans); overflow-x: clip; }
:where(.t-editorial) .site { overflow-x: hidden; }

/* Links and form controls */
:where(.t-template) a { color: inherit; }
:where(.t-editorial) a { color: var(--ink); }
:where(.t-editorial) a:hover { color: var(--teal); }
:where(.t-template) :where(button, input, select) { font: inherit; color: inherit; }
:where(.t-editorial) :where(button) { font: inherit; color: inherit; }

/* Focus ring: keyboard only */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.t-editorial button:focus-visible, .t-editorial a:focus-visible { outline-offset: 2px; }

/* Type classes */
.em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.t-editorial .em { font-weight: 500; }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.cond { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; }
/* Accent spans inside headings are neutralized unless they carry .keep (spec/01). */
h1 .em:not(.keep), h2 .em:not(.keep), h3 .em:not(.keep) { font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; color: inherit !important; letter-spacing: inherit !important; }

/* Shared motion */
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadein-sm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.swap { animation: fadein .4s ease both; }
.t-editorial .swap { animation: fadein-sm .3s ease both; }

.utab { background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; opacity: .62; transition: opacity .2s ease, border-color .2s ease; }
.utab:hover { opacity: 1; }
.utab[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; }
.irow { transition: padding-left .25s ease; }
.irow:hover { padding-left: 14px; }
.ulink { transition: gap .2s ease; }
.ulink:hover { gap: 16px; }
.giant span:last-child { transition: transform .25s ease; }
.giant:hover span:last-child { transform: translateX(12px); }
.door { transition: flex-grow .45s ease; }
.door:hover { flex-grow: 1.7; }
.yr { transition: background-color .2s ease, color .2s ease; }
.split { touch-action: none; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
input[type=range] { accent-color: var(--ink); }

/* News / Article image placeholder */
.img { background-color: var(--ink-2); background-image: repeating-linear-gradient(135deg, rgba(55,150,164,.55) 0 2px, transparent 2px 14px); }

/* Reading progress bar (Home, Article) */
@keyframes grow { to { transform: scaleX(1); } }

/* Visually hidden, still read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

}