/* Albert Tan site design. Project styles still own their layouts and controls. */
:root {
  --at-paper: #F2EEDF;
  --at-paper-deep: #E8E1CF;
  --at-ink: #19171B;
  --at-ink-soft: #514B48;
  --at-purple: #6C35C4;
  --at-orange: #FF742F;
  --at-lime: #A6D83D;
  --at-white: #FFFFFF;
  --at-display: "Arial Black", Arial, Helvetica, sans-serif;
  --at-sans: Arial, Helvetica, sans-serif;
  --at-mono: "Courier New", ui-monospace, monospace;
  --at-page-width: 1360px;
}

.at-site-bar {
  width: 100%;
  color: var(--at-paper);
  background: var(--at-ink);
  border-bottom: 3px solid var(--at-ink);
}
.at-site-bar *, .at-site-bar *::before, .at-site-bar *::after { box-sizing: border-box; }
.at-site-bar .at-site-inner {
  width: min(var(--at-page-width), calc(100% - 64px));
  min-height: 72px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.at-site-bar .at-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
  color: var(--at-paper);
  font: 900 28px/1 var(--at-display);
  text-transform: uppercase;
  letter-spacing: -.07em;
  white-space: nowrap;
  text-decoration: none;
}
.at-wordmark svg { flex: 0 0 30px; width: 30px; height: 30px; color: var(--at-orange); transform: rotate(13deg); }
.at-site-bar .at-site-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 22px; margin: 0; padding: 0; }
.at-site-bar .at-site-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  color: var(--at-paper);
  font: 700 12px/1.3 var(--at-mono);
  text-decoration: none;
  text-transform: uppercase;
}
.at-site-bar .at-site-links a:is(:hover, [aria-current="page"]) { color: var(--at-lime); text-decoration: underline; text-underline-offset: .25em; }
.at-site-bar a:focus-visible { outline: 3px solid var(--at-lime); outline-offset: 4px; }
.at-site-page > .at-local-nav { color: var(--at-ink); background: var(--at-paper-deep); border-bottom: 2px solid var(--at-ink); box-shadow: none; }
.at-site-page > .at-local-nav a { color: var(--at-ink); }
.at-site-skip {
  position: absolute;
  z-index: 100;
  top: -100px;
  left: 16px;
  padding: 12px 16px;
  background: var(--at-lime);
  color: var(--at-ink);
  border: 2px solid var(--at-ink);
  font: 700 1rem/1.4 var(--at-sans);
}
.at-site-skip:focus { top: 12px; }

/* Long-form pages use the same editorial hierarchy as the homepage. */
.at-editorial-page { margin: 0; background: var(--at-paper); color: var(--at-ink); font: 17px/1.7 var(--at-sans); }
.at-editorial-page *, .at-editorial-page *::before, .at-editorial-page *::after { box-sizing: border-box; }
.at-editorial-page .wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.at-editorial-page a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.at-editorial-page a:hover { text-decoration-style: wavy; }
.at-editorial-page :is(a, button):focus-visible { outline: 3px solid var(--at-purple); outline-offset: 4px; }
.at-editorial-page .at-site-bar a:focus-visible { outline-color: var(--at-lime); }
.at-editorial-page .skip { position: absolute; top: -100px; left: 16px; z-index: 100; }
.at-editorial-page .skip:focus { top: 12px; padding: 12px 16px; background: var(--at-lime); border: 2px solid var(--at-ink); }
.at-editorial-page main { padding-block: clamp(2.5rem, 5vw, 5rem); }
.at-editorial-page :is(h1, h2) { font-family: var(--at-display); font-weight: 900; }
.at-editorial-page h1 { max-width: 14ch; margin: 16px 0 22px; font-size: clamp(3rem, 9vw, 7.3rem); line-height: .92; letter-spacing: -.075em; text-transform: uppercase; }
.at-editorial-page h1 em { color: var(--at-purple); font-style: normal; }
.at-editorial-page h2 { margin: 0 0 12px; font-size: clamp(1.9rem, 4vw, 3.25rem); line-height: 1.04; letter-spacing: -.055em; }
.at-editorial-page .kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--at-purple);
  font: 700 .78rem/1.5 var(--at-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.at-editorial-intro { position: relative; isolation: isolate; }
.at-editorial-intro::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto auto;
  width: min(62%, 490px);
  height: min(100%, 370px);
  content: "";
  background: url('/albert-background/assets/reference-peony.jpg') right top / cover no-repeat;
  filter: grayscale(1);
  opacity: .14;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at 68% 42%, #000 27%, transparent 73%);
  pointer-events: none;
}
.at-kicker-row { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.at-editorial-stamp {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 8px 10px;
  color: var(--at-ink);
  background: var(--at-orange);
  border: 2px solid var(--at-ink);
  box-shadow: 4px 4px 0 var(--at-ink);
  font: 900 .82rem/1.2 var(--at-display);
  transform: rotate(5deg);
}
.at-editorial-page .intro, .at-editorial-page main > p { max-width: 74ch; color: var(--at-ink-soft); }
.at-editorial-page .question { max-width: 39ch; color: var(--at-ink); font: 900 clamp(1.4rem, 3vw, 2.2rem)/1.17 var(--at-display); letter-spacing: -.045em; }
.at-editorial-page .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-block: 26px; }
.at-editorial-page .button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 2px solid var(--at-ink);
  box-shadow: 4px 4px 0 var(--at-ink);
  color: var(--at-ink);
  background: var(--at-orange);
  font: 800 .9rem/1.4 var(--at-sans);
  text-decoration: none;
}
.at-editorial-page .button:hover { background: var(--at-lime); }
.at-editorial-page .feature, .at-editorial-page .panel {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 4vw, 2.6rem);
  border: 2px solid var(--at-ink);
  box-shadow: 6px 6px 0 var(--at-ink);
  background: var(--at-paper-deep);
}
.at-editorial-page .feature { color: var(--at-paper); background: var(--at-purple); }
.at-editorial-page .feature .kicker { color: var(--at-paper); }
.at-editorial-page .feature :focus-visible { outline-color: var(--at-lime); }
.at-editorial-page .feature .identity { font: 700 .86rem/1.6 var(--at-mono); }
.at-editorial-page .compact, .at-editorial-page .note { font-size: .94rem; }
.at-editorial-page .resource-grid, .at-editorial-page .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem clamp(1.25rem, 5vw, 3.75rem); margin-top: 3rem; }
.at-editorial-page :is(.resource-card, .grid > section) { border-top: 2px solid var(--at-ink); padding-block: 1.35rem; }
.at-editorial-page .resource-card h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.at-editorial-page .panel { background: var(--at-lime); }
.at-editorial-page .panel > .kicker { color: var(--at-ink); }
.at-editorial-page .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 250px); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; margin-bottom: 2rem; }
.at-editorial-page .logo { display: block; width: 100%; height: auto; background: var(--at-white); border: 2px solid var(--at-ink); box-shadow: 6px 6px 0 var(--at-ink); transform: rotate(2deg); }
.at-editorial-page .subtitle { font-size: 1.3rem; font-weight: 700; }
.at-editorial-page footer { margin-top: 1rem; padding-block: 1.5rem; border-top: 2px solid var(--at-ink); background: var(--at-paper-deep); font-size: .9rem; }
.at-privacy-page main.wrap { max-width: 74ch; }
.at-privacy-page h1 { color: var(--at-purple); font-size: clamp(3rem, 8vw, 6rem); }
.at-privacy-page h2 { margin-top: 2rem; font-size: 1.65rem; }
.at-privacy-page .status { padding: .8rem 1rem; border: 2px solid var(--at-ink); background: var(--at-lime); color: var(--at-ink); }
.at-privacy-page .date { font: .9rem/1.5 var(--at-mono); }
.at-privacy-page footer nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }

/* Apply the site palette to the existing consent UI without changing its behaviour. */
.analytics-consent { color: var(--at-ink); background: var(--at-paper); border: 2px solid var(--at-ink); border-radius: 0; box-shadow: 5px 5px 0 var(--at-ink); font-family: var(--at-sans); }
.analytics-consent__title { font-family: var(--at-display); font-weight: 900; }
.analytics-consent__status { color: var(--at-ink-soft); }
.analytics-consent :is(.analytics-consent__button, .analytics-consent__close) { border: 2px solid var(--at-ink); border-radius: 0; background: var(--at-paper); color: var(--at-ink); font-family: var(--at-sans); }
.analytics-consent :is(.analytics-consent__button, .analytics-consent__close):hover { background: var(--at-lime); color: var(--at-ink); }
.analytics-consent button:focus-visible, [data-analytics-settings]:focus-visible { outline-color: var(--at-purple); }

@media (max-width: 750px) {
  .at-site-bar .at-site-inner { width: calc(100% - 36px); padding-block: 9px; }
  .at-site-bar .at-wordmark { font-size: 24px; }
  .at-site-bar .at-site-links { gap: 0 15px; }
  .at-editorial-page .wrap { width: calc(100% - 36px); }
  .at-editorial-page .at-site-inner { width: calc(100% - 36px); }
  .at-editorial-page .hero, .at-editorial-page .resource-grid, .at-editorial-page .grid { grid-template-columns: minmax(0, 1fr); }
  .at-editorial-page .logo { max-width: 185px; }
  .at-editorial-intro::before { opacity: .1; }
}
@media print {
  .at-site-bar, .at-site-skip, .at-editorial-stamp, .analytics-consent { display: none; }
  .at-editorial-intro::before { display: none; }
  .at-editorial-page :is(.panel, .feature, .logo, .button) { color: #000; background: #fff; box-shadow: none; transform: none; }
  .at-editorial-page .feature .kicker { color: #000; }
}
@media (forced-colors: active), (prefers-contrast: more) { .at-editorial-intro::before { display: none; } }