/* v2 layer: lumber-stamp identity, Island Tough ratings, delivery map, season strip.
   Loaded after site.css. Stamp ink: MSI blue for labels (on brand), lumber-stencil red
   for grade stamps and ratings - the red MSI already sprays on its lumber. */
:root{
  --stamp-red:#B3261E;
  --stencil:"Stardos Stencil","Archivo Narrow",Archivo,sans-serif;
  /* worn-ink texture: noise mapped to alpha, used as a mask on every stamp */
  --ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.kicker,.stamp,.est,.grade,.mk-s,.mini b,.route .day{-webkit-mask-image:var(--ink);mask-image:var(--ink);-webkit-mask-size:240px;mask-size:240px}

/* 1. stamps: every kicker becomes an ink stamp */
.kicker{display:inline-block;font:700 14px/1 var(--stencil);letter-spacing:.16em;color:var(--blue);
  border:2px solid currentColor;padding:.42em .7em .32em;transform:rotate(-1.6deg);border-radius:3px}
.hero .kicker,.phero .kicker,.deliv .kicker{color:var(--yellow)}
.stamp{display:inline-block;font:700 15px/1 var(--stencil);letter-spacing:.14em;text-transform:uppercase;
  border:2.5px solid currentColor;padding:.45em .75em .35em;transform:rotate(-2deg);border-radius:3px}
.stamp.red{color:var(--stamp-red)}
h1,h2{letter-spacing:-.035em}
.route .day{font-family:var(--stencil);font-size:14px}

.est{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;margin-left:.3rem;
  width:58px;height:58px;border:2.5px solid var(--stamp-red);border-radius:50%;color:var(--stamp-red);
  font:700 10px/1 var(--stencil);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-12deg)}
.est b{font-size:16px;letter-spacing:.04em;margin-top:2px}

/* hero grade stamp, styled after a lumber grade mark */
.grade{position:absolute;right:48px;bottom:96px;width:300px;color:#fff;border:3px solid currentColor;border-radius:6px;
  font-family:var(--stencil);text-transform:uppercase;transform:rotate(-7deg);opacity:.93}
.grade > div{border-bottom:2px solid currentColor;padding:.5rem .8rem}
.grade > div:last-child{border-bottom:0}
.g-top{display:flex;align-items:center;gap:.8rem}
.g-top b{font-size:42px;line-height:1;letter-spacing:.04em;border:2px solid currentColor;padding:.1rem .4rem .02rem}
.g-top span{font-size:12px;letter-spacing:.14em;line-height:1.35}
.g-mid{font-size:44px;line-height:1;text-align:center;letter-spacing:.06em;color:var(--yellow)}
.g-row{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.14em}
.g-bot{text-align:center;font-size:14px;letter-spacing:.2em}

/* 2. Island Tough rating */
.rating{border:2px solid var(--line);border-radius:14px;padding:22px 24px 24px;margin:0 0 2.2rem;background:#FFFCF7}
.rating-h{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:18px}
.rating-h p{margin:0;color:var(--muted);font-size:15px}
.marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mk{display:flex;flex-direction:column;gap:.3rem}
.mk-s{align-self:flex-start;font:700 20px/1 var(--stencil);letter-spacing:.12em;text-transform:uppercase;
  border:2.5px solid currentColor;padding:.4em .6em .3em;border-radius:3px;transform:rotate(-2deg)}
.mk.on .mk-s{color:var(--stamp-red)}
.mk.off .mk-s{color:#B8C1CC;border-style:dashed}
.mk small{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:.35rem}
.mk p{margin:0;font-size:15px;color:#3D4A5A;line-height:1.45}
.mk.off p{color:#9AA5B1}
.mini{display:flex;gap:6px;margin:.55rem 0 .2rem}
.mini b{font:700 11px/1 var(--stencil);letter-spacing:.12em;text-transform:uppercase;padding:.35em .45em .25em;border:1.5px solid currentColor;border-radius:2px}
.mini b.on{color:var(--stamp-red)}
.mini b.off{color:#C3CBD5;border-style:dashed}
.cat .mini{margin:.45rem 0 0}
.cat .mini b.on{color:#fff}
.cat .mini b.off{color:rgba(255,255,255,.4)}

/* 3. delivery map */
.dmap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.dmap .routes{grid-template-columns:repeat(2,minmax(0,1fr))}
.vimap{margin:0}
.vimap svg{display:block;width:100%;height:auto;max-height:560px}
.vimap figcaption{font-size:13px;color:#8FA3BD;margin-top:.6rem}
.vimap .grid path{stroke:rgba(255,255,255,.05);stroke-width:1}
.vimap .compass path{fill:var(--yellow)} .vimap .compass text{fill:#C9D6E8;font:700 13px var(--stencil);text-anchor:middle}
.vimap .isl path{fill:#1B3D6B;stroke:#4C72A3;stroke-width:1.5;stroke-linejoin:round}
.vimap .isl.home path{fill:#2A5A96;stroke:#8FB3E0}
.vimap .isl.home.today path{fill:#356BB0}
.vimap .lbl text{fill:#E6EDF6;font:800 20px Archivo,sans-serif;text-anchor:middle}
.vimap .lbl text.sm{font-size:14px;font-weight:600;fill:#9FB3CC}
.vimap .rt path{fill:none;stroke:#7F98B8;stroke-width:3;stroke-dasharray:8 8;stroke-linecap:round}
.vimap .rt text{fill:#C9D6E8;font:700 15px var(--stencil);letter-spacing:.1em;text-transform:uppercase;text-anchor:middle}
.vimap .brk path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5}
.vimap .brk text{fill:#8FA3BD;font:600 13px Archivo,sans-serif;text-anchor:middle}
.vimap .rt.today path{stroke:var(--yellow);stroke-width:4;animation:run 1s linear infinite}
.vimap .rt.today text{fill:var(--yellow)}
.vimap .cb circle{fill:var(--yellow)}
.vimap .cb .pulse{fill:none;stroke:var(--yellow);stroke-width:2;transform-origin:124px 252px;animation:pulse 2s ease-out infinite}
.vimap .cb text{fill:var(--yellow);font:700 15px var(--stencil);letter-spacing:.08em;text-transform:uppercase}
@keyframes run{to{stroke-dashoffset:-32}}
@keyframes pulse{from{transform:scale(1);opacity:1}to{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.vimap .rt.today path,.vimap .cb .pulse{animation:none}}

/* 4. hurricane-season strip */
.season{background:var(--yellow);color:var(--yellow-ink);font-size:14px}
.season[hidden]{display:none}
.season .wrap{display:flex;align-items:center;gap:1rem;min-height:38px;flex-wrap:wrap;padding-top:.3rem;padding-bottom:.3rem}
.season b{font-family:var(--stencil);letter-spacing:.1em;text-transform:uppercase;font-size:14px}
.season .sbar{flex:0 1 220px;height:8px;border-radius:4px;background:rgba(26,19,0,.18);overflow:hidden}
.season .sbar i{display:block;height:100%;background:var(--yellow-ink)}
.season a{margin-left:auto;font-weight:800;text-decoration:none;white-space:nowrap}
.season a:hover{text-decoration:underline}
.season.off{background:#E8F0FA;color:var(--navy)}
.season.off b{color:var(--blue)}
.season.peak{background:#FFB020}

/* live NHC states */
.season .snote{color:inherit;opacity:.75;font-size:13px}
.season a + a{margin-left:0}
.season.storm .wrap{min-height:44px}
.season.warning{background:var(--stamp-red);color:#fff}
.season.warning b{font-size:15px}
.season.watch{background:#F97316;color:#1A1300}
.season.near{background:var(--navy);color:#DCE5F2}
.season.near b{color:var(--yellow)}
.season .sfacts{font-weight:600}
@media (max-width:1320px){.est{width:50px;height:50px}}
@media (max-width:980px){
  .grade{display:none}
  .dmap{grid-template-columns:1fr}
  .vimap svg{max-height:440px}
}
@media (max-width:560px){
  .marks{grid-template-columns:1fr}
  .est{display:none}
  .dmap .routes{grid-template-columns:1fr}
  .season a{margin-left:0}
  .season .sbar{display:none}
}