/* Konoha in daylight. Presentation layer; the original page flow stays intact. */
:root {
  --ink: #123c37;
  --ink-2: #1c4c44;
  --ink-3: #295d51;
  --paper: #f6f1e4;
  --paper-2: #ece3cd;
  --paper-3: #d7c49a;
  --brown: #233e36;
  --brown-2: #345747;
  --brown-mute: #576452;
  --gold: #d9b56c;
  --gold-hi: #f4dfaa;
  --gold-lo: #987139;
  --red: #a53524;
  --red-hi: #c95035;
  --red-lo: #752719;
  --night-text: #fff7e7;
  --night-mute: #d9dcc5;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
body { background: var(--paper); }
html { scroll-padding-top: 88px; }
[hidden] { display: none !important; }
button, a, input { -webkit-tap-highlight-color: transparent; }
.title { color: var(--ink); text-shadow: none; font-size: clamp(36px, 4.1vw, 56px); }
.title--light { color: var(--gold-hi); text-shadow: 0 3px 12px #102f29; }
.title::before, .title::after { opacity: .7; }
.btn, .tile { border-radius: 4px 14px; }
.btn::before, .tile::before {
  content: ""; position: absolute; inset: 4px; border: 1px solid #f4dfaa66;
  border-radius: 1px 10px; pointer-events: none;
}
.btn--wood, .tile--wood { --b1: #397466; --b2: #205447; --b3: #123b34; }
.btn:hover, .tile:hover { filter: brightness(1.12); transform: translateY(-3px); }
.btn:active, .tile:active { transform: translateY(1px); }
.btn--red { box-shadow: inset 0 1px 0 #fff2c985, inset 0 -2px 3px #591d2333, 0 8px 20px -9px #752719bb; }
.btn:focus-visible, .tile:focus-visible { outline-color: var(--ink); }
.top { height: 76px; background: linear-gradient(180deg, #f6f1e4ee, #f6f1e400); }
.top.is-solid { background: #153f3af7; box-shadow: 0 1px 0 var(--gold), 0 8px 28px -18px #153f3a; }
.top.is-solid .btn:focus-visible, .join .btn:focus-visible, .mbar .btn:focus-visible, .dock .tile:focus-visible { outline-color: var(--gold-hi); }
.top__logo { pointer-events: auto; }
.top__logo img { opacity: 1; transform: none; height: 56px; }
.top__menu { border-radius: 50%; background: var(--ink); }
.drawer { top: 76px; background: #153f3afc; }
.rail {
  background: linear-gradient(160deg, #2b5b4ef5, #103b35f7); border-color: var(--gold);
  box-shadow: 0 12px 26px -14px #0e372d99; padding-block: 16px;
}
.rail a:not(.rail__brand) { font-size: 17px; padding-block: 10px; }
.rail a.is-on { color: #233e36; background: #f4dfaa; border-radius: 3px 10px; }
.rail__brand { transition: transform .5s var(--ease); }
.rail__brand:hover { transform: rotate(-12deg); }

/* The artwork stays legible; light haze joins it to the action dock. */
.hero {
  min-height: clamp(760px, 100svh, 1000px); padding-top: 100px; padding-bottom: 52px;
  background: var(--paper); color: var(--ink); grid-template-rows: 1fr auto;
}
.hero__art {
  object-position: 65% 40%; animation: konoha-arrive 1.4s var(--ease) both;
  transform: scale(1.025) translate(var(--art-x, 0px), var(--art-y, 0px));
}
.hero__shade {
  background: linear-gradient(0deg, var(--paper) 0%, #f6f1e4b3 14%, transparent 36%),
    linear-gradient(90deg, #f6f1e430 0%, transparent 50%);
}
.hero__head { max-width: 530px; margin: -24px 0 20px; align-self: center; }
.hero__logo img { width: clamp(300px, 33vw, 470px); filter: drop-shadow(0 12px 18px #725c342b); animation: konoha-title 1s var(--ease) both; }
.hero__tag { margin: 22px 0 0 20px; color: var(--ink); font-size: clamp(25px, 2.25vw, 34px); text-shadow: 0 2px 10px #fffaf0; animation: konoha-title 1.2s var(--ease) both; }
.hero__tag strong { display: inline-block; font-size: 1.55em; font-weight: 400; margin-top: 5px; color: #9b3c23; }
.hero__explore { display: inline-flex; align-items: center; gap: 14px; margin: 24px 0 0 22px; color: #163f35; font: 400 22px/1.3 var(--f-display); text-decoration: none; border-bottom: 1px solid #6e8061; padding-bottom: 6px; }
.hero__explore svg { width: 22px; height: 22px; transition: transform .3s var(--ease); }
.hero__explore:hover svg { transform: translateX(6px); }
.hero__particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.motion-toggle { position: absolute; right: var(--gutter); bottom: 10px; display: flex; align-items: center; gap: 7px; min-height: 34px; background: transparent; border: 0; padding: 4px 8px; color: #385447; font-size: 12px; cursor: pointer; }
.motion-toggle svg { width: 14px; height: 14px; }
.dock { position: relative; width: min(1080px, 100%); padding: 24px; gap: 14px; border-radius: 8px 24px; background: linear-gradient(120deg, #2c5b4e, #153d36); box-shadow: 0 22px 42px -23px #163d39b3; animation: konoha-title 1.25s var(--ease) both; border: 1px solid var(--gold); }
.dock::after { border: 1px solid #d9b56c88; border-image: none; inset: 6px; border-radius: 3px 18px; }
.dock__downloads h2 { font-size: 28px; }
.dock__downloads > p { margin-bottom: 14px; color: var(--night-mute); }
.dl { background: #0d2d2833; border-color: #c7bb8860; border-radius: 4px 12px; min-height: 84px; padding: 12px; gap: 6px; }
.dl svg { width: 22px; height: 22px; }
.dl span { gap: 4px; }
.dl small { color: #ead7a7; }
.dl[aria-disabled="true"] { opacity: .8; }
.dl.is-ready { background: #d9b56c18; }
.dl.is-ready:hover { background: #d9b56c30; box-shadow: inset 0 0 0 1px var(--gold); }
.tile { position: relative; font-size: 26px; gap: 12px; }
.tile svg { width: 34px; height: 34px; }

/* Registration retains its two-column structure, with a quieter reading ground. */
.join { background: var(--ink); padding-top: 100px; padding-bottom: 100px; }
.join::before, .feats::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.join__bg { background: linear-gradient(90deg, #103c35f0, #143f35b8 52%, #113a32e8), url("assets/img/konoha-hall.webp") center / cover no-repeat; }
.join__grid { grid-template-columns: 1fr minmax(340px, 460px); gap: clamp(32px, 5vw, 72px); }
.join .title { font-size: clamp(38px, 4vw, 56px); }
.join__lead { font-size: 17px; line-height: 1.8; }
.steps { gap: 20px; max-width: 420px; }
.steps li { background: transparent; border: 0; border-radius: 0; padding: 4px 0 4px 65px; }
.steps li::before { left: 2px; width: 42px; height: 42px; background: transparent; color: var(--gold-hi); border: 1px solid var(--gold); box-shadow: none; }
.steps b { font-size: 24px; }
.steps span { line-height: 1.65; }
.join__npc { right: -35px; bottom: -105px; width: 175px; opacity: .9; }
.scroll-card { background: var(--paper); border-radius: 6px 24px; padding: 32px; box-shadow: 0 25px 45px -24px #082d25; }
.scroll-card::after { border: 1px solid var(--gold); border-image: none; inset: 7px; border-radius: 2px 18px; }
.scroll-card h3 { color: var(--ink); text-shadow: none; font-size: 36px; margin-bottom: 24px; }
.field input { background: #fffdf6; border-color: #b6b79e; border-radius: 4px; box-shadow: none; }
.field input:focus { border-color: var(--ink-3); box-shadow: 0 0 0 3px #295d5124; }
.field > span:first-child { font-size: 20px; }
.account-nav { margin-bottom: 24px; border-color: #d4c5a1; }
.account-nav button { padding: 8px 3px; font-size: 13px; }
.account-nav button:hover { background: #ece4cf; }

/* Paper, jade and gold carry the existing news / ninja / gallery sequence. */
.paper { background: var(--paper); padding-block: 90px; }
.paper::before { opacity: .13; filter: sepia(.3); }
.paper::after { opacity: .14; height: 120px; }
.news__grid { gap: 26px; }
.banner, .gallery__view { border: 1px solid var(--gold-lo); border-radius: 5px 22px; box-shadow: 0 18px 30px -22px #173d39aa; }
.banner::after, .gallery__view::after { border: 1px solid #f4dfaa99; border-image: none; inset: 6px; border-radius: 2px 16px; }
.framed > .media-in, .framed > .banner__track > .banner__slide { clip-path: none; }
.banner__slide span { padding: 65px 28px 52px; font-size: 30px; background: linear-gradient(transparent, #103d36f5); }
.banner__dots { left: 28px; bottom: 22px; gap: 4px; }
.banner__dots button { width: 32px; height: 24px; border-radius: 0; background: transparent; position: relative; }
.banner__dots button::before { content: ""; position: absolute; inset: 10px 3px; background: #fff7e780; }
.banner__dots button[aria-selected="true"] { background: transparent; }
.banner__dots button[aria-selected="true"]::before { background: var(--gold-hi); }
.board { background: #fffaf0; border-radius: 5px 22px; padding: 18px 16px; border: 1px solid #d7c49a; box-shadow: none; }
.board::after { display: none; }
.board__tabs { padding-inline: 4px; border-bottom-width: 1px; }
.board__tabs button { font-size: 21px; padding-inline: 12px; }
.row { transition: background .2s, color .2s; }
.row:hover { background: #e9eadb; }
.row__date { font-variant-numeric: tabular-nums; }
.row__cat { background: var(--ink); }
.links { gap: 20px; }
.plaque { border-radius: 5px 20px; background: linear-gradient(125deg, #396a58, #173e36); box-shadow: inset 0 0 0 4px #173e36, inset 0 0 0 5px #d9b56c80, 0 14px 22px -18px #173e36; }
.plaque span { text-shadow: 0 2px 8px #173e36; }
.links li:nth-child(2) .plaque { background: linear-gradient(125deg, #a54a35, #672c24); }
.links li:nth-child(3) .plaque { background: linear-gradient(125deg, #837344, #4e4528); }
.ninja { background: #e7ecdf; }
.ninja__bg { background: linear-gradient(180deg, #e7ecdf 0%, #e7ecdfc9 25%, #e7ecdf99 60%, #e7ecdf 100%), url("assets/img/map-24.webp") center 70% / cover no-repeat; }
.ninja::after { opacity: .1; }
.dossier__role { background: var(--ink-3); }
.skill__desc { background: #fffcf0d9; border: 1px solid #b4b99d; border-radius: 4px 16px; }
.skill__desc b { color: var(--ink); }
.pick[aria-selected="true"] img { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink-3), 0 12px 22px -10px #153f3a; }
.feats { background: linear-gradient(145deg, #214f44, #102f2c); padding-block: 90px; }
.fan { gap: 12px; }
.fan__item { border-radius: 4px 20px; border-width: 1px; }
.fan__item[aria-expanded="true"] { border-color: var(--gold-hi); }
.fan__body { background: linear-gradient(transparent, #092d28e8 30%, #092d28 100%); }
.fan__label { background: linear-gradient(transparent, #092d28f0); }
.gallery__view figcaption { padding: 60px 28px 28px; background: linear-gradient(transparent, #103c35ee); }
.gallery__view figcaption b { font-size: 30px; }
.gallery__nav--prev { left: 20px; }
.gallery__nav--next { right: 20px; }
.gallery__thumbs button { border-radius: 3px 12px; }
.foot { background: #102f2c; border-top: 1px solid var(--gold-lo); }
.foot__note { color: var(--night-mute); }
.mbar { background: #123c37fa; }

@keyframes konoha-arrive { from { filter: saturate(.75); scale: 1.035; } to { filter: saturate(1); scale: 1; } }
@keyframes konoha-title { from { opacity: .65; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 1180px) {
  .hero__head { margin-left: max(0px, calc((100vw - 1440px) / 2)); }
}
@media (max-width: 1179px) {
  .hero { min-height: 850px; }
  .hero__head { margin-top: 12px; }
  .hero__logo img { width: 380px; }
  .dock { grid-template-columns: minmax(0, 3fr) 1fr 1fr; }
  .dock__downloads { grid-column: auto; }
  .top { padding-inline: var(--gutter); }
}
@media (max-width: 860px) {
  .hero__head { max-width: 380px; }
  .hero__logo img { width: 320px; }
  .hero__tag { font-size: 25px; }
  .dock { grid-template-columns: minmax(0, 1fr) 160px; }
  .dock .tile--wood { display: none; }
  .join__grid { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); }
  .join__npc { display: none; }
  .scroll-card { padding: 27px; }
  .board__tabs button { padding-inline: 9px; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  html { scroll-padding-top: 76px; }
  .top { height: 66px; padding-inline: 14px; gap: 8px; background: #f6f1e4ef; }
  .top__logo img { width: 120px; height: auto; }
  .top__actions { gap: 8px; }
  .top__actions > .btn--wood { display: none; }
  .top__actions > .btn--red { display: inline-flex; }
  .top__actions .btn { font-size: 18px; padding-inline: 18px; }
  .top__menu { display: block; width: 40px; height: 40px; padding: 9px; }
  .drawer { top: 66px; }
  .hero { min-height: 880px; padding: 330px 20px 50px; gap: 24px; }
  .hero__art { height: 530px; object-position: 71% 0%; }
  .hero__shade { background: linear-gradient(0deg, var(--paper) 0%, var(--paper) 40%, #f6f1e400 72%); }
  .hero__head { width: 100%; max-width: none; margin: 0; align-self: end; text-align: center; }
  .hero__logo img { width: 250px; margin-inline: auto; }
  .hero__tag { margin: 10px 0 0; font-size: 23px; line-height: 1.3; }
  .hero__tag strong { font-size: 1.55em; margin-top: 0; }
  .hero__explore { margin: 12px 0 0; font-size: 20px; gap: 8px; }
  .hero__explore svg { width: 18px; height: 18px; }
  .dock { display: grid; grid-template-columns: 1fr; padding: 20px; gap: 14px; border-radius: 5px 20px; }
  .dock__downloads h2 { font-size: 24px; text-align: center; }
  .dock__downloads > p { font-size: 12px; text-align: center; margin-bottom: 12px; }
  .dock__dl { gap: 7px; }
  .dl { min-height: 88px; padding: 9px 5px; align-items: center; text-align: center; }
  .dl span { align-items: center; gap: 4px; }
  .dl b { font-size: 20px; }
  .dl small { font-size: 11px; }
  .dock .tile--red { min-height: 58px; font-size: 26px; }
  .dock .tile--red br { display: none; }
  .motion-toggle { right: 20px; bottom: 8px; }
  .join, .paper, .feats { padding-block: 60px; }
  .join__grid { grid-template-columns: 1fr; gap: 36px; }
  .join .title { font-size: 38px; }
  .join__lead { font-size: 16px; margin-bottom: 26px; }
  .steps { gap: 16px; }
  .scroll-card { padding: 25px; }
  .scroll-card h3 { font-size: 32px; }
  .title { font-size: 36px; margin-bottom: 32px; }
  .title::before, .title::after { flex-basis: 28px; }
  .news__grid { gap: 24px; }
  .banner { aspect-ratio: 16 / 11; }
  .banner__slide span { font-size: 26px; padding-inline: 22px; }
  .board { padding: 12px 8px; }
  .board__tabs { gap: 0; }
  .board__tabs button { font-size: 18px; padding-inline: 10px; }
  .row { padding: 15px 10px; }
  .links { gap: 14px; }
  .plaque { height: 112px; padding: 0 10px 12px; }
  .plaque img { height: 126px; }
  .plaque span { font-size: 20px; max-width: 60%; }
  .dossier { min-height: 0; }
  .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .skill { font-size: 15px; }
  .skill img { width: 60px; height: 60px; }
  .fan { gap: 10px; }
  .fan__label { background: linear-gradient(90deg, #123c37ed, #123c3740); }
  .fan__body { padding: 80px 22px 24px; }
  .fan__item[aria-expanded="true"] { height: 490px; }
  .gallery__view { aspect-ratio: 1.25; }
  .gallery__view figcaption { padding: 50px 20px 24px; gap: 7px; }
  .gallery__view figcaption b { font-size: 26px; }
  .gallery__nav--prev { left: 12px; }
  .gallery__nav--next { right: 12px; }
  .gallery__thumbs { gap: 8px; grid-auto-rows: 74px; }
  .gallery__thumbs span { font-size: 13px; }
}
@media (max-width: 359px) {
  :root { --gutter: 14px; }
  .hero { padding-inline: 14px; }
  .top__logo img { width: 100px; }
  .scroll-card { padding: 24px 18px; }
  .account-nav button { font-size: 12px; }
  .title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__art { transform: none; }
  .hero__particles { display: none; }
}
.effects-paused .hero__art { transform: none; animation: none; }
.effects-paused .hero__particles { visibility: hidden; }