/* ===== Strong layout: the logo's colours (crimson tile, gold P, ivory horse) with a near-black crimson for depth.
   Character: strong, active, agile. Left-aligned and asymmetric, slanted band edges like a horse in flight,
   chamfered corners from the hexagon P, parallelogram buttons, big numbered section heads, motion on scroll.
   Loaded after site.css; it only overrides. Remove the <link> in layouts/site.blade.php to go back. ===== */
:root {
  --bg: #14040a;            /* night crimson: page background */
  --bg-rgb: 20, 4, 10;
  --surface: #22070f;
  --surface-2: #2e0a14;
  --line: rgba(247, 239, 220, 0.12);
  --line-strong: rgba(247, 239, 220, 0.28);
  --text: #f7efdc;          /* logo ivory */
  --text-dim: #d6c2bf;
  --gold: #f0d394;          /* logo gold, light end */
  --accent-rgb: 240, 211, 148;
  --champ: #e8c47c;
  --crimson: #a6192e;       /* logo crimson */
  --crimson-hi: #c8203a;
  --crimson-lo: #7d1022;
  --brand-rgb: 166, 25, 46;
  --gold-grad: linear-gradient(180deg, #f0d394, #d4a959 58%, #a97a2f);
  --cut: clamp(1.5rem, 4.5vw, 4.5rem);            /* slant of the band edges */
  --chamfer: 14px;                                  /* cut corners, from the hexagon P */
  --radius: 2px;
}

/* ---------- Bands: night (default), crimson and cream, with slanted edges ---------- */
.band-red {
  --bg: #a6192e; --bg-rgb: 166, 25, 46; --surface: #8f1426; --surface-2: #7d1022;
  --text: #f7efdc; --text-dim: #f6dcd6; --gold: #f7e2b0; --accent-rgb: 247, 226, 176; --champ: #f7e2b0;
  --line: rgba(247, 239, 220, 0.22); --line-strong: rgba(247, 239, 220, 0.4);
  position: relative; color: var(--text); background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
  margin-top: var(--band-gap); padding-block: calc(var(--band-gap) + var(--cut));
}
.band-light { --gold: var(--crimson); --champ: #8a5d12; margin-top: var(--band-gap); padding-block: calc(var(--band-gap) + var(--cut)); }
.band-light, .band-red {
  clip-path: polygon(-100vmax var(--cut), calc(100% + 100vmax) 0, calc(100% + 100vmax) calc(100% - var(--cut)), -100vmax 100%);
}
.band-light + .band-light, .band-red + .band-red { margin-top: 0; }
/* band straight after band: the slanted edges almost meet, leaving a thin night speed line between them */
.band-light + .band-red, .band-red + .band-light { margin-top: calc(var(--cut) * -1 + 12px); }
body:has(#subscribe.band-red) footer { margin-top: 0; }
.band-light + section:not(.band-light):not(.band-red), .band-red + section:not(.band-light):not(.band-red) { padding-top: var(--band-gap); }
.band-red .mark .m-horse { stroke: var(--bg); }
.band-red ::selection { background: var(--gold); color: #2a0a10; }

/* ---------- Type ---------- */
.eyebrow { font-weight: 700; letter-spacing: 0.24em; }
.eyebrow::before { width: 1.6rem; height: 3px; opacity: 1; transform: skewX(-30deg); background: var(--gold); }
.sec-head .eyebrow::after, .hero .eyebrow::after, .hs-text .eyebrow::after { display: none; }

/* Section heads: left-aligned, a big outlined index number, the title leaning forward */
html { overflow-x: clip; }
body { counter-reset: sec; }
.sec-head { counter-increment: sec; }
.sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; text-align: left; gap: 1.5rem 3rem; flex-wrap: wrap;
            border-bottom: 1px solid var(--line); padding-bottom: clamp(1.1rem, 2.5vw, 1.6rem); }
.sec-head > div { display: grid; justify-items: start; position: relative; }
.sec-head > div::before { content: counter(sec, decimal-leading-zero); font: 800 clamp(3.2rem, 7vw, 5.5rem)/.8 var(--wide); font-stretch: 125%;
                          color: transparent; -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), .55); margin-bottom: .6rem; letter-spacing: -.04em; }
.sec-head h2 { margin-top: .55rem; font: 800 var(--step-3)/.95 var(--wide); font-stretch: 125%; letter-spacing: -.03em; text-transform: uppercase; transform: skewX(-6deg); transform-origin: left bottom; }
.sec-head h2 .serif { text-transform: none; font-size: 1.08em; letter-spacing: 0; color: var(--gold); font-stretch: 100%; }
.sec-head h2::after { content: ""; display: block; width: 4.5rem; height: 6px; margin: 1rem 0 0; background: var(--gold-grad); transform: skewX(-30deg); }
.band-light .sec-head h2::after { background: var(--crimson); }
.sec-head p { max-width: 40ch; margin: 0; color: var(--text-dim); text-align: left; }

/* ---------- Buttons: parallelograms that move ---------- */
.btn { border-radius: 0; border: 0; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding: 1rem 1.7rem;
       font: 700 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: transform .2s, background-color .2s, color .2s; }
.btn:not(.solid) { background: rgba(var(--accent-rgb), .12); box-shadow: inset 0 0 0 100vmax rgba(var(--accent-rgb), 0); color: var(--text); }
.btn:not(.solid):hover { background: rgba(var(--accent-rgb), .24); }
.btn.solid { background: var(--crimson); color: #fff; }
.btn.solid:hover { background: var(--crimson-hi); color: #fff; }
.btn:hover { transform: translateX(3px); }
.btn svg { transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.band-red .btn.solid, .hero .btn.solid { background: var(--gold-grad); color: #2a0a10; }
.band-red .btn.solid:hover, .hero .btn.solid:hover { background: linear-gradient(180deg, #f8e4b4, #e0b867 58%, #b98a3a); color: #2a0a10; }
.band-light .btn:not(.solid) { background: rgba(var(--ink-rgb), .07); color: var(--ink); }
.band-light .btn:not(.solid):hover { background: rgba(var(--ink-rgb), .14); }
.band-light .btn.solid { background: var(--crimson); color: #fff; }

/* ---------- Nav ---------- */
.nav { background: rgba(20, 4, 10, .92); border-bottom: 0; box-shadow: inset 0 -2px 0 var(--crimson); }
.nav nav a { font-weight: 600; letter-spacing: .02em; position: relative; }
.nav nav a:not(.pill)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.45rem; height: 2px; background: var(--gold); transform: scaleX(0) skewX(-30deg); transform-origin: left; transition: transform .25s; }
.nav nav a:not(.pill):hover::after { transform: scaleX(1) skewX(-30deg); }
.nav nav .pill { background: var(--gold-grad); color: #2a0a10; border-radius: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: .62rem 1.15rem; }
.lang, .lang a { border-radius: 0; }

/* ---------- Hero: asymmetric, the name leaning into the jump ---------- */
.hero { min-height: clamp(40rem, 94vh, 60rem); background: var(--bg); }
.hero-bg { inset: 0; }
.hero-bg::after { background:
  linear-gradient(100deg, rgba(20, 4, 10, .96) 0%, rgba(20, 4, 10, .82) 30%, rgba(94, 11, 25, .42) 52%, rgba(20, 4, 10, 0) 72%),
  linear-gradient(0deg, var(--bg) 0%, rgba(20, 4, 10, 0) 28%),
  linear-gradient(180deg, rgba(20, 4, 10, .55) 0%, rgba(20, 4, 10, 0) 16%); }
/* the crimson slash behind the copy, with a gold edge */
.hero::before { display: block; content: ""; position: absolute; z-index: 0; inset: auto auto 0 -12%; width: 58%; height: 100%;
                background: linear-gradient(180deg, rgba(166, 25, 46, .35) 0%, rgba(166, 25, 46, .7) 50%, rgba(166, 25, 46, .95) 100%);
                transform: skewX(-14deg); transform-origin: bottom left; box-shadow: 6px 0 0 -1px rgba(240, 211, 148, .85); border-radius: 0; aspect-ratio: auto; pointer-events: none; }
.hero::after { display: none; }
.hero-inner { z-index: 1; }
.hero-copy { justify-items: start; text-align: left; margin-inline: 0; max-width: 60rem; }
.hero .eyebrow::before { display: block; }
.brandline { flex-direction: row; align-items: center; gap: clamp(.8rem, 2vw, 1.5rem); }
.brandline .mark { width: clamp(4.5rem, 8vw, 7rem); filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); }
.brandline .wordmark { font-size: clamp(3.2rem, 9vw, 8.6rem); line-height: .86; transform: skewX(-8deg); transform-origin: left bottom; text-align: left; }
.brandline .wordmark:has(.wd + .wd) { font-size: clamp(3rem, 8.4vw, 8rem); }
.wordmark .wd { display: block; }
.wordmark .wd + .wd { color: transparent; -webkit-text-stroke: 2px var(--text); }
.motto { color: var(--gold); }
.lede { margin-inline: 0; }
.hero-copy .ctas { justify-content: flex-start; }
.hero .wordmark, .hero .motto, .hero .lede { text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
/* facts as slanted tabs */
.hero-meta { justify-content: flex-start; margin-inline: 0; width: auto; gap: .5rem; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-meta .meta-card { background: rgba(20, 4, 10, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
                        border: 0; border-top: 3px solid var(--gold); border-radius: 0; text-align: left; justify-items: start;
                        clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding: 1rem 2.2rem 1rem 1.2rem; }
.hero-meta .meta-card + .meta-card { border-left: 0; }
.hero-credit { right: clamp(1rem, 4vw, 2.5rem); transform: none; }

/* ---------- Ticker: a gold band crossing the page at an angle ---------- */
.ticker { position: relative; z-index: 2; background: var(--gold-grad); transform: rotate(-1.6deg) scale(1.04); margin-block: -1.4rem -.6rem; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.ticker-track span { color: #2a0a10; font-size: 1.05rem; padding-block: 1.05rem; }
.ticker-track span::after { background: var(--crimson); border-radius: 0; width: 10px; height: 10px; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .ticker-track { animation-duration: 28s; } }

/* ---------- Cards and pictures: chamfered corners, gold edge, lift on hover ---------- */
.chamfer, .tile, .pillar, .fact-card, .show-card, .post-card, .package, .routine, .progress, .ladder, .none, .hs-card, .partner, .inquiry, .name-card,
.portrait, .sequence figure, .gallery button, .article .cover, .logo-card {
  border-radius: 0 !important;
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.pillar::after, .fact-card::after { display: none; }
.tile, .pillar, .fact-card, .show-card, .post-card, .package, .name-card, .logo-card { transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .25s; }
.tile:hover, .pillar:hover, .fact-card:hover, .show-card:hover, .post-card:hover, .package:hover, .name-card:hover { transform: translateY(-4px); }
.pillar, .fact-card, .name-card, .tile { border: 0; box-shadow: inset 3px 0 0 var(--gold); background: var(--surface); }
.band-light .pillar, .band-light .fact-card, .band-light .tile { background: #fffaf0; box-shadow: inset 3px 0 0 var(--crimson); }
.pillar, .team .tile { text-align: left; justify-items: start; }
.pillar .n { font: 800 2.6rem/1 var(--wide); font-stretch: 125%; color: var(--gold); }
.person-head { flex-direction: row; }

/* Profile: a chamfered portrait (no arch), slight tilt */
.portrait { border-radius: 0; }
.portrait figcaption { justify-content: flex-start; align-items: flex-start; }
.portrait .float-chip { right: auto; left: 1rem; transform: none; }
@media (min-width: 900px) { .profile .portrait { transform: rotate(-1.2deg); } }

/* Sequence and gallery: zoom on hover */
.sequence figure img, .gallery button img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sequence figure:hover img, .gallery button:hover img { transform: scale(1.06); }
.sequence figcaption { justify-content: flex-start; }
.sequence figcaption b { color: var(--gold); font: 800 1.3rem/1 var(--wide); font-stretch: 125%; }

/* Home stable: a split card on night */
.hs-card { grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; background: linear-gradient(110deg, var(--surface-2), var(--surface)); border: 0; box-shadow: inset 0 3px 0 var(--crimson); }
.hs-text { justify-items: start; }
.hs-text h2 { transform: skewX(-6deg); transform-origin: left bottom; }
@media (max-width: 760px) { .hs-card { grid-template-columns: 1fr; } }

/* The name: three cards on crimson */
.name-story .name-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.name-card { min-width: 0; text-align: left; border: 0; }
.name-card .word { font-size: clamp(2.4rem, 4.4vw, 3.2rem); }
.name-card .wishes { justify-content: flex-start; }
.name-card .wishes li { border-radius: 0; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding-inline: .9rem; }
.band-red .name-card { background: rgba(20, 4, 10, .22); box-shadow: inset 3px 0 0 var(--gold); }
.band-red .name-card.together { background: rgba(20, 4, 10, .4); box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px rgba(247, 226, 176, .45); }

/* Closing on crimson */
.closing { text-align: left; justify-items: start; }
.closing h2 { max-width: 18ch; font-size: clamp(2.8rem, 6.5vw, 5.6rem); }
.closing h2 b { display: inline-block; transform: skewX(-8deg); }
.subscribe { justify-items: start; }
.band-red .sub-row input { background: rgba(20, 4, 10, .25); border-color: rgba(247, 239, 220, .4); color: var(--text); }
.band-red .sub-row input::placeholder { color: rgba(247, 239, 220, .7); }
.sub-row input, .field input, .field textarea { border-radius: 0; }

/* Footer: night, the name in a huge outline */
footer { background: #0d0206; border-top: 0; box-shadow: inset 0 3px 0 var(--crimson); }
footer .wrap { justify-items: start; text-align: left; }
footer .foot-mark { flex-direction: row; }
footer .big { -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), .4); transform: skewX(-8deg); transform-origin: left bottom; }
footer .row-f { justify-content: space-between; flex-direction: row; flex-wrap: wrap; }

/* ---------- Motion: sections slide in as they arrive (only when JS is running) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-on [data-reveal] { opacity: 0; transform: translate3d(-28px, 18px, 0); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rd, 0ms); }
  html.reveal-on [data-reveal].in { opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  /* photo on top, then a solid crimson slab with a slanted top edge cutting across its foot */
  .hero::before { z-index: 1; inset: calc(min(78vh, 40rem) - 8rem) 0 0 0; width: auto; height: auto; transform: none; box-shadow: none;
                  background: linear-gradient(180deg, #a6192e 0%, #8f1426 100%);
                  clip-path: polygon(0 4.5rem, 100% 0, 100% 100%, 0 100%); }
  .hero-inner { z-index: 2; padding-top: calc(min(78vh, 40rem) - 5rem); }
  .hero-bg::after { background: linear-gradient(180deg, rgba(20, 4, 10, .45) 0%, rgba(20, 4, 10, 0) 22%); }
  .profile .portrait { aspect-ratio: 4 / 5; }
  .brandline { flex-direction: column; align-items: flex-start; }
  .brandline .mark { width: 3.6rem; }
  .brandline .wordmark, .brandline .wordmark:has(.wd + .wd) { font-size: clamp(3rem, 16vw, 4.6rem); }
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .hero-meta .meta-card { padding: .85rem 1.4rem .85rem 1rem; }
  .hero-meta .stable-chip { grid-column: 1 / -1; }
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta .meta-card strong.name { font-size: 1.05rem; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .ticker { transform: rotate(-2.2deg) scale(1.08); }
  .btn { padding: 1rem 1.4rem; }
  .hero-copy .ctas { display: grid; width: 100%; }
  .hero-copy .ctas .btn { justify-content: center; }
}

/* ===== Character of the name: Macan Velar, "the hidden tiger" =====
   Macan: tiger stripes (images/site/stripes.svg) and claw marks (images/site/claw.svg), used as masks so they take
   any colour. Velar ("to veil"): the hero opens from behind a veil, and section titles are unveiled as they arrive. */
.claw { display: inline-block; width: 2.4rem; height: 1.55rem; background: var(--gold-grad);
        -webkit-mask: url(/images/site/claw.svg) center / contain no-repeat; mask: url(/images/site/claw.svg) center / contain no-repeat; }

/* Stripes: on the crimson bands, the hero and the footer, coming in from the edges */
.band-red, footer { isolation: isolate; position: relative; }
.band-red::before, footer::before, .hero .stripes {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: calc(50% - 50vw); width: min(46vw, 620px); pointer-events: none;
  background: var(--gold); opacity: .09;
  -webkit-mask: url(/images/site/stripes.svg) right center / cover no-repeat; mask: url(/images/site/stripes.svg) right center / cover no-repeat;
}
.band-red::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: min(30vw, 420px); pointer-events: none;
  background: #14040a; opacity: .16; transform: scaleX(-1);
  -webkit-mask: url(/images/site/stripes.svg) right center / cover no-repeat; mask: url(/images/site/stripes.svg) right center / cover no-repeat; }
footer::before { opacity: .06; width: min(60vw, 820px); }
.hero .stripes { z-index: 1; opacity: .12; width: min(40vw, 560px); right: 0; top: 0; bottom: 0; mix-blend-mode: overlay; }

/* Section titles: claw marks instead of a plain rule */
.sec-head h2::after { width: 3.4rem; height: 2.2rem; margin-top: .8rem; transform: none; background: var(--gold-grad);
  -webkit-mask: url(/images/site/claw.svg) left center / contain no-repeat; mask: url(/images/site/claw.svg) left center / contain no-repeat; }
.band-light .sec-head h2::after { background: var(--crimson); }

/* Hero: "the hidden tiger" line, the veil that lifts, the eyes in the dark (the cursor glow) */
.alias { margin: -.2rem 0 0; display: inline-flex; align-items: center; gap: .8rem; font: 700 .8rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--text); }
.alias .claw { width: 2rem; height: 1.3rem; }
.glow { z-index: 1; background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(240, 211, 148, .16), transparent 60%); mix-blend-mode: screen; }
.veil { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #14040a; transform-origin: right center; transform: scaleX(0); }
@media (prefers-reduced-motion: no-preference) {
  .veil { animation: unveil 1.15s cubic-bezier(.75, 0, .2, 1) .1s backwards; }
  @keyframes unveil { from { transform: scaleX(1); } }
  .hero-copy > *, .hero-meta { animation: emerge .9s cubic-bezier(.2, .7, .2, 1) backwards; }
  .hero-copy > :nth-child(1) { animation-delay: .7s; } .hero-copy > :nth-child(2) { animation-delay: .8s; }
  .hero-copy > :nth-child(3) { animation-delay: 1s; } .hero-copy > :nth-child(4) { animation-delay: 1.1s; }
  .hero-copy > :nth-child(5) { animation-delay: 1.2s; } .hero-copy > :nth-child(6) { animation-delay: 1.3s; }
  .hero-meta { animation-delay: 1.4s; }
  @keyframes emerge { from { opacity: 0; transform: translate3d(-34px, 0, 0); } }
  .wordmark .ch { animation-delay: calc(.75s + var(--i) * 55ms); }
  /* titles are unveiled left to right, like a veil drawn away */
  html.reveal-on .sec-head[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.75, 0, .2, 1); }
  html.reveal-on .sec-head[data-reveal].in { clip-path: inset(0 0 0 0); }
}

/* Gallery: a claw mark strikes across the corner on hover */
.gallery button::after { content: ""; position: absolute; z-index: 2; top: 10px; right: 12px; width: 3rem; height: 2rem; background: var(--gold-grad);
  -webkit-mask: url(/images/site/claw.svg) center / contain no-repeat; mask: url(/images/site/claw.svg) center / contain no-repeat;
  opacity: 0; transform: translate(-8px, -8px) scale(.8); transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.gallery button:hover::after, .gallery button:focus-visible::after { opacity: 1; transform: none; }

/* Footer: the name filled with stripes */
footer .big { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; opacity: .85; }

@media (max-width: 640px) {
  .hero .stripes { width: 70vw; top: 0; bottom: auto; height: min(78vh, 40rem); }
  .band-red::after { display: none; }
}