/* world.css · Wholeframe Expeditions · XXI, The World · "The whole map"
   Extends arcana.css: overrides its --arc-* tokens on [data-brand="the-world"], adds the --brand-*
   extras arcana-brand.css reads, then the signature: salt-white atlas paper with faint contour lines,
   a graticule in the head, three crossings braided under the name, a red route that keeps marching
   and panels that unfold like a folded map. Fonts are SIL OFL, self-hosted. */
/* fonts:begin Young Serif, Public Sans */
@font-face { font-family:"Young Serif"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/brands/young-serif-normal-400.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../../fonts/brands/public-sans-normal-400-700.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* fonts:end */

[data-brand="the-world"] {
  --arc-paper: #f4f1e8;
  --arc-surface: #dde7e1;
  --arc-wash: #e8e4d6;
  --arc-ink: #1b3b2d;
  --arc-muted: #4e5a53;
  --arc-line: #c6cfc6;
  --arc-accent: #b4432a;
  --arc-on-accent: #fbf9f3;
  --arc-focus: #2f6283;
  --arc-display: "Young Serif", "Sitka Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --arc-body: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --arc-radius: 4px;
  --brand-mono: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --brand-accent-2: #2f6283;
  --brand-display-weight: 400;
  --brand-track: -.015em;
  --brand-button-radius: 4px;
  --brand-enter: world-unfold;
  --brand-ease: cubic-bezier(.25, .8, .25, 1);
  --brand-texture:
    repeating-radial-gradient(ellipse 60% 40% at 82% 18%, transparent 0 22px, rgba(27, 59, 45, .06) 22px 23px),
    repeating-radial-gradient(ellipse 50% 35% at 12% 88%, transparent 0 26px, rgba(27, 59, 45, .05) 26px 27px);
  --brand-bezel: #122a20;
  --brand-bezel-edge: #24503c;
  --brand-bezel-ink: #d3dfd9;
  --brand-glow: rgba(180, 67, 42, .4);
  --brand-wallpaper:
    radial-gradient(circle at 34% 58%, #b4432a 0 6px, #f4f1e8 6px 9px, transparent 9px),
    radial-gradient(circle at 66% 40%, #b4432a 0 6px, #f4f1e8 6px 9px, transparent 9px),
    linear-gradient(90deg, rgba(27, 59, 45, .1) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(rgba(27, 59, 45, .1) 1px, transparent 1px) 0 0 / 80px 80px,
    repeating-radial-gradient(ellipse at 34% 58%, #d3dfd9 0 14px, rgba(27, 59, 45, .35) 14px 15px),
    #d3dfd9;
}

/* Signature: a graticule, a braided route underline, a marching red thread, a map-pin "you are here". */
[data-brand="the-world"] .abr-head { border-block-end: 1px solid var(--arc-ink); }
[data-brand="the-world"] .abr-head::before {
  content: ""; position: absolute; inset: 0 0 0 auto; inline-size: min(42%, 34rem); z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(47, 98, 131, .16) 1px, transparent 1px) 0 0 / 3.5rem 3.5rem,
    linear-gradient(rgba(47, 98, 131, .16) 1px, transparent 1px) 0 0 / 3.5rem 3.5rem;
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%);
}
[data-brand="the-world"] .abr-head::after {
  content: ""; position: absolute; inset: auto 0 -1px; block-size: 3px;
  background: repeating-linear-gradient(90deg, #b4432a 0 14px, transparent 14px 22px) 0 0 / 22px 3px;
  animation: world-march 1.6s linear infinite;
}
[data-brand="the-world"] .abr-head > .abr-shell { position: relative; z-index: 1; }
[data-brand="the-world"] .abr-title__word {
  display: inline-block; padding-block-end: .22em;
  background:
    linear-gradient(#b4432a, #b4432a) 0 100% / 100% 3px,
    linear-gradient(#2f6283, #2f6283) 0 calc(100% - 5px) / 100% 3px,
    linear-gradient(#24503c, #24503c) 0 calc(100% - 10px) / 100% 3px;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: world-braid 1.3s .6s var(--brand-ease) both;
}
[data-brand="the-world"] .abr-title { line-height: 1.12; }
[data-brand="the-world"] .abr-tagline { font-family: var(--arc-display); margin-block-start: 1.5rem; }
[data-brand="the-world"] .abr-card__num { background: var(--arc-accent); color: var(--arc-on-accent); border-color: var(--arc-accent); border-radius: 50% 50% 50% 0; }
[data-brand="the-world"] .abr-card__dot { box-shadow: 0 0 0 0 var(--brand-glow); animation: world-ping 2.4s ease-out infinite; }
[data-brand="the-world"] .abr-button { font-weight: 700; letter-spacing: .02em; }
[data-brand="the-world"] .abr-tier { background: linear-gradient(225deg, var(--arc-wash) 0 1.4rem, var(--arc-paper) 1.4rem); box-shadow: 0 16px 30px -24px rgba(18, 42, 32, .6); }
[data-brand="the-world"] .abr-tier[data-kind="custom"] { background: linear-gradient(225deg, var(--arc-surface) 0 1.4rem, transparent 1.4rem); border-style: dashed; border-color: var(--arc-ink); }
[data-brand="the-world"].abr-tile .abr-tile__word { font-size: min(2.15rem, 9.5cqi); }
@media (hover: hover) {
  [data-brand="the-world"].abr-tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--arc-ink), 0 22px 44px -24px rgba(18, 42, 32, .55); }
  [data-brand="the-world"].abr-tile:hover .abr-tile__bar { animation: world-trace .7s var(--brand-ease); }
}

@keyframes world-unfold { from { opacity: 0; transform: perspective(700px) rotateX(-28deg); transform-origin: 50% 0; } to { opacity: 1; transform: none; transform-origin: 50% 0; } }
@keyframes world-braid { from { background-size: 0 3px, 0 3px, 0 3px; } 40% { background-size: 100% 3px, 0 3px, 0 3px; } 70% { background-size: 100% 3px, 100% 3px, 0 3px; } to { background-size: 100% 3px, 100% 3px, 100% 3px; } }
@keyframes world-march { to { background-position: 22px 0; } }
@keyframes world-ping { 0% { box-shadow: 0 0 0 0 var(--brand-glow); } 80%, 100% { box-shadow: 0 0 0 9px rgba(180, 67, 42, 0); } }
@keyframes world-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }