/* =========================
   Theme tokens
   ========================= */

:root{
  /* Light mode (default) */
  --bg:#f5ddbc;
  --panel:#fabb64;

  --text:#000000;
  --muted:#5f2f45;

  --border:#5f2f45;
  --shadow:0 10px 30px #000000;

  --accent:#fd724e;
  --accent-2:#a02f40;
  --focus:#fd724e;

  --chip:#f5ddbc;

  /* Kept (still used for some non-corner things if you want) */
  --corner-round:.55rem;

  --hero-grad:none;

  --bg-header:#fabb64;
  --bg-footer:#e8ad55;

  --bg-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%2367413a' stroke-opacity='0.10' stroke-width='1.3'%3E%3Cpath d='M0 48 C 16 26, 32 26, 48 48 S 80 70, 96 48'/%3E%3Cpath d='M0 48 C 16 70, 32 70, 48 48 S 80 26, 96 48'/%3E%3Cpath d='M48 0 C 26 16, 26 32, 48 48 S 70 80, 48 96'/%3E%3Cpath d='M48 0 C 70 16, 70 32, 48 48 S 26 80, 48 96'/%3E%3C/g%3E%3C/svg%3E");

  /* Corner presets */
  --corner-shape-box: bevel squircle bevel squircle;
  --corner-radius-box: 14px;

  --corner-shape-ui: squircle;
  --corner-radius-ui: 8px;

  --corner-shape-logo: squircle;
  --corner-radius-logo: 8px;

  /* Alias: “default corners for most UI controls” */
  --corner-shape-default: var(--corner-shape-ui);
  --corner-radius-default: var(--corner-radius-ui);
}

/* Dark mode overrides only */
:root[data-theme="dark"]{
  --bg:#5f2f45;
  --panel:#a02f40;

  --text:#f5ddbc;
  --muted:#fabb64;

  --border:#f5ddbc;
  --shadow:0 12px 38px #000000;

  --accent:#fd724e;
  --accent-2:#fabb64;
  --focus:#fd724e;

  --chip:#5f2f45;

  --bg-header:#4f2639;
  --bg-footer:#432033;

  --bg-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23f5ddbc' stroke-opacity='0.1' stroke-width='0.9'%3E%3Cpath d='M0 48 C 16 26, 32 26, 48 48 S 80 70, 96 48'/%3E%3Cpath d='M0 48 C 16 70, 32 70, 48 48 S 80 26, 96 48'/%3E%3Cpath d='M48 0 C 26 16, 26 32, 48 48 S 70 80, 48 96'/%3E%3Cpath d='M48 0 C 70 16, 70 32, 48 48 S 26 80, 48 96'/%3E%3C/g%3E%3C/svg%3E");
}

/* =========================
   Global / base
   ========================= */

@font-face {
  font-family: 'Vollkorn';
  src:
    url('/assets/Vollkorn-Regular.woff2') format('woff2'),
    url('/assets/Vollkorn-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn';
  src:
    url('/assets/Vollkorn-Bold.woff2') format('woff2'),
    url('/assets/Vollkorn-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

*{box-sizing:border-box}

html{scrollbar-gutter:stable}
body{overflow-y:scroll}

html,body{
  height:100%;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: 'Vollkorn', serif;
  font-size: 110%;
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

p, li, dd { color: var(--muted); }
h1, h2, h3, h4, h5, h6 { color: var(--text); }

/* =========================
   Accessibility helpers
   ========================= */

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
  white-space:nowrap
}

.skip-link{
  position:absolute;
  left:-999px;top:0;
  padding:.65rem .9rem;
  background:var(--panel);
  border:1px solid var(--border);

  corner-shape:var(--corner-shape-default);
  border-radius:var(--corner-radius-default);

  z-index:2000
}
.skip-link:focus{
  left:.75rem;top:.75rem;
  outline:3px solid var(--focus);
  outline-offset:2px
}

/* =========================
   Layout
   ========================= */

.page{
  min-height:100%;
  display:flex;
  flex-direction:column;

  background-image:var(--bg-pattern),var(--hero-grad);
  background-repeat:repeat,no-repeat;
  background-size:48px 48px,auto;
  background-position:0 0,0 0;
}

main{flex:1 1 auto}

/*
 * The main content wrapper should adapt fluidly to small screens while
 * remaining centred on larger displays.  A common responsive pattern
 * is to set the container to take up the full available width and
 * constrain its maximum width with `max-width`.  When paired with
 * `margin: 0 auto` and horizontal padding, this prevents the content
 * from being pushed off screen on mobile devices while keeping it
 * nicely centred on wider viewports【33221197786065†L269-L282】.
 */
.wrap{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:1.25rem 1rem 2.25rem;

}


.showlinks a{color:inherit;text-decoration:underline}
.showlinks a:hover{color: var(--accent); text-decoration:  underline}




section{margin-top:1.35rem}

/* =========================
   Header / nav
   ========================= */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(10px);
  background:var(--bg-header);
  border-bottom:1px solid var(--border)
}

.topbar{
  max-width:1100px;
  /* Allow the topbar to span the full width on small screens while centring
   * its contents on larger viewports.  This addresses the issue of the
   * navigation disappearing off the screen edge on mobile by letting the
   * container grow and shrink with the viewport.  The `margin: 0 auto` keeps
   * the bar centred on larger widths.
   */
  width:100%;
  margin:0 auto;
  padding:.85rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0
}

.logo{
  width:38px;
  height:38px;

  corner-shape:var(--corner-shape-logo);
  border-radius:var(--corner-radius-logo);

  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--accent),#fff 18%),
    color-mix(in srgb,var(--accent-2),#fff 10%)
  );
  display:grid;
  place-items:center;
  flex:0 0 auto
}
.logo svg{width:22px;height:22px}

.brand h1{
  font-size:1rem;
  margin:0;
  letter-spacing:.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.topnav{
  display:none;
  gap:.6rem;
  align-items:center
}
@media (min-width:860px){.topnav{display:flex}}

.topnav-link{
  padding:.45rem .6rem;

  corner-shape:var(--corner-shape-default);
  border-radius:var(--corner-radius-default);

  border:1px solid transparent;
  color:var(--muted);
  font-weight:650
}
.topnav-link:hover{
  border-color:var(--border);
  text-decoration:none;
  background:color-mix(in srgb,var(--panel),var(--bg) 14%)
}
.topnav-link.is-active{
  border-color:var(--border);
  background:var(--panel);
  color:var(--text)
}

.controls{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:0 0 auto
}

/* =========================
   Buttons / pills / tags / chips
   ========================= */

.btn,
.pill,
.tag,
.sub a{
  border:1px solid var(--border);
  corner-shape:var(--corner-shape-default);
  border-radius:var(--corner-radius-default);
}

.btn{
  appearance:none;
  background:var(--panel);
  color:var(--text);
  padding:.55rem .7rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
  font-weight:700
}
.btn:hover{filter:brightness(1.02)}
.btn:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px
}
.btn svg{width:18px;height:18px}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  background:var(--chip);
  color:var(--muted);
  font-weight:700;
  font-size:.9rem
}
.pill svg{width:16px;height:16px}

.tag{
  font-size:.78rem;
  font-weight:800;
  padding:.25rem .55rem;
  background:var(--chip);
  color:var(--muted);
  white-space:nowrap
}

.sub{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.25rem
}
.sub a{
  font-size:.9rem;
  color:var(--muted);
  padding:.35rem .55rem;
  text-decoration:none;
  background:color-mix(in srgb,var(--panel),var(--bg) 14%)
}
.sub a:hover{text-decoration:underline}

/* =========================
   Surfaces / cards (big boxes)
   ========================= */

.card,
.card-surface{
  background:var(--panel);
  border:1px solid var(--border);

  corner-shape:var(--corner-shape-box);
  border-radius:var(--corner-radius-box);
}

.card h2:first-child,
.card-surface h2:first-child
{
  margin-top: 0;
}

.card-surface{
  padding:1.25rem;
  box-shadow:var(--shadow)
}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem
}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.grid{grid-template-columns:1fr 1fr 1fr}}

.card{
  padding:1rem;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  display:grid;
  gap:.55rem;
  min-height:128px
}
.card:focus-within{
  outline:3px solid var(--focus);
  outline-offset:2px
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.85rem
}

.card h4{
  margin:0;
  font-size:1.05rem;
  letter-spacing:.1px
}

.meta{
  color:var(--muted);
  font-size:.92rem;
  margin:0
}

.card a.primary{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:800;
  color:color-mix(in srgb,var(--accent),var(--text) 15%);
  text-decoration:none;
  width:fit-content
}
.card a.primary:hover{text-decoration:underline}
.card a.primary svg{width:16px;height:16px}

/* =========================
   Hero
   ========================= */

.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-top:.75rem
}

@media (min-width:860px){
  .hero{
    grid-template-columns:1.15fr .85fr;
    align-items:stretch;
    gap:1.5rem
  }
}

.hero h2{
  font-size:clamp(1.35rem,1.8vw + 1rem,2.05rem);
  line-height:1.15;
  margin:0 0 .65rem;
  letter-spacing:.2px
}
.hero p{
  margin:.25rem 0 0;
  color:var(--muted);
  font-size:1.02rem
}

.hero-actions{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center
}

/* symbol wrapper controls overall presence */
.symbol{
  display:grid;
  place-items:center;
  min-height:220px; /* keeps it from becoming “small” */
}

/* figure is the framed, clipped surface */
.symbol figure{
  margin:0;
  width:100%;
  max-width:420px;
  aspect-ratio:16/12;

  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--accent),#000 8%),
    color-mix(in srgb,var(--accent-2),#000 8%)
  );

  border:1px solid var(--border);
  box-shadow:var(--shadow);

  corner-shape:var(--corner-shape-box);
  border-radius:var(--corner-radius-box);
  overflow:hidden;

  position:relative;
}

/* image fills the framed area and is clipped by overflow:hidden */
.symbol figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;

  corner-shape:inherit;
  border-radius:inherit;
}

.symbol figcaption{
  position:absolute;
  right:.85rem;
  bottom:.75rem;
  right:.85rem;
  color:rgba(255,255,255,.86);
  font-weight:700;
  font-size:.95rem;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0  2px 18px rgba(0,0,0,.35);
}

/* =========================
   Section titles
   ========================= */

.section-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 .75rem
}
.section-title h3{
  margin:0;
  font-size:1.15rem;
  letter-spacing:.2px
}
.section-title p{
  margin:0;
  color:var(--muted);
  font-size:.95rem
}

/* =========================
   Footer
   ========================= */

footer{
  border-top:1px solid var(--border);
  background:var(--bg-footer)
}

.footer{
  max-width:1100px;
  /* On mobile screens the footer container should span the full width to
   * prevent horizontal scrolling.  Setting width:100% with a max-width
   * constraint and centre margins keeps the footer aligned with the rest
   * of the page across breakpoints【33221197786065†L269-L282】.
   */
  width:100%;
  margin:0 auto;
  padding:1.1rem 1rem 1.5rem;
  display:grid;
  gap:.65rem
}

.legal{
  color:var(--muted);
  font-size:.92rem
}
.legal h5{
  margin:0;
  font-size:1rem;
  color:var(--text)
}
.legal p{margin:.35rem 0 0}
.legal a{text-decoration:underline}

.lang{
  display:inline-flex;
  gap:.25rem;
  align-items:center
}


/* =========================
   Cologne Iframe Embed
   ========================= */

.cologneprotocol{
  display:block;
  width:100%;
  height:1200px;   /* fixed height for testing */
  border:0;
}

/* =========================
   Mobile navigation enhancements
   ========================= */

/* Hide the site title and theme label on narrow viewports to free up
 * horizontal space.  Keeping only the logo and icons makes the header
 * more usable on mobile devices.  The accessible name is preserved via
 * the `aria-label` on the menu button and theme button【382645220149191†L32-L44】.
 */
@media (max-width:859px){
  .brand h1{
    display:none;
  }
  #themeLabel{
    display:none;
  }
}

/* Hamburger/menu toggle button.  Hidden by default and only displayed on
 * narrow screens.  Uses flexbox to centre the SVG icon.  The button is
 * styled to look consistent with other controls without adding extra
 * borders or backgrounds.  The visible focus outline comes from the
 * browser.
 */
.mobile-menu-btn{
  display:none;
  background:none;
  border:none;
  padding:.45rem;
  color:inherit;
  cursor:pointer;
  line-height:0;
}
@media (max-width:859px){
  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* Mobile menu container.  Hidden via the `hidden` attribute until
 * expanded.  On small screens it becomes a block of links stacked
 * vertically.  On wider screens the container is always hidden to avoid
 * redundant content.
 */
.mobile-menu{
  flex-direction:column;
  background:var(--bg-header);
  border-bottom:1px solid var(--border);
  width:100%;
}

/* Hide when the `hidden` attribute is present (default state). */
.mobile-menu[hidden]{
  display:none;
}

@media (min-width:860px){
  .mobile-menu{
    display:none !important;
  }
}

/* Style links inside the mobile menu similar to the desktop navigation
 * but displayed as block elements that fill the available width.  The
 * `topnav-link` styles already handle colour and borders; we only need
 * to reset display and padding for vertical orientation.
 */
.mobile-menu a{
  display:block;
  padding:.55rem 1rem;
  border-top:1px solid var(--border);
}
.mobile-menu a:first-child{
  border-top:none;
}