/* Built by ./6-cache-bust.py from static-src/style.css -- edit the master, never this file. */
:root {
--bg:            #000000;
--surface:       #0a0a0a;
--surface-2:     #141414;
--border:        #1f1f1f;
--border-strong: #2e2e2e;
--text:          #e6e6e6;
--text-muted:    #a0a6b0;
--text-subtle:   #6b7180;
--accent:        #7aa7ff;
--accent-hover:  #a5c4ff;
--accent-quiet:  #3f5a8a;
--warn:          #d4a85a;
--success:       #7db68a;
--code-bg:       #0b0d11;
--code-fg:       #e6e6e6;
--content-width: 960px;
--font-serif:   'Newsreader', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
--font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-mono:    'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
--font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
--h1-color:       #FF6F61;
--h1-color-hover: #FF8F84;
--h1-glow:        rgba(255, 111, 97, 0.18);
}
* { box-sizing: border-box; }
html {
background: var(--bg);
font-size: calc(16px * var(--pa-fs, 1));
}
:root[data-font="small"] { --pa-fs: 0.9; }
:root[data-font="large"] { --pa-fs: 1.15; }
body {
margin: 0;
max-width: none;
padding: 0 40px 60px;
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.7;
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 720px) {
body { padding: 0 20px 48px; }
}
@media (min-width: 1600px) {
html { font-size: calc(18px * var(--pa-fs, 1)); }
}
@media (min-width: 1920px) {
html { font-size: calc(19px * var(--pa-fs, 1)); }
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 600;
color: var(--text);
line-height: 1.25;
letter-spacing: -0.01em;
margin: 1.8em 0 0.6em;
}
h1 {
font-family: var(--font-display);
font-size: 2.2rem;
font-weight: 700;
margin-top: 0.4em;
color: var(--h1-color);
letter-spacing: -0.005em;
transition: color 0.15s ease;
}
h1:hover { color: var(--h1-color-hover); }
h1#top {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.015em;
color: var(--h1-color);
text-shadow: 0 0 30px var(--h1-glow);
padding-bottom: 0.15em;
}
h1#top:hover { color: var(--h1-color-hover); }
h2 { font-size: 1.55rem; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 0.35em; }
h3 { font-size: 1.2rem; font-weight: 600; color: var(--text); }
h4 { font-size: 1.02rem; font-weight: 600; color: var(--text-muted); text-transform: none; }
p {
color: var(--text);
margin: 0 0 1.1em;
}
ul, ol {
color: var(--text);
margin: 0 0 1.2em 0;
padding-left: 1.4em;
}
li {
margin-bottom: 0.45em;
color: var(--text);
}
strong {
color: var(--text);
font-weight: 600;
}
em { color: var(--text-muted); font-style: italic; }
blockquote {
margin: 1.5em 0;
padding: 0.6em 1.2em;
border-left: 3px solid var(--accent-quiet);
background: var(--surface);
color: var(--text-muted);
font-style: italic;
}
hr {
border: 0;
border-top: 1px solid var(--border);
margin: 2em 0;
}
a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease, color 0.15s ease;
}
a:hover {
color: var(--accent-hover);
border-bottom-color: var(--accent-hover);
background: transparent;
}
code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--code-bg);
color: var(--code-fg);
padding: 0.12em 0.4em;
border-radius: 3px;
border: 1px solid var(--border);
}
pre {
background: var(--code-bg);
color: var(--code-fg);
padding: 1em 1.2em;
border-radius: 6px;
border: 1px solid var(--border);
overflow-x: auto;
line-height: 1.55;
font-family: var(--font-mono);
font-size: 0.88rem;
margin: 1.2em 0;
}
pre code {
background: transparent;
border: 0;
padding: 0;
}
body pre[class*="language-"] {
font-size: 0.95rem;
line-height: 1.5;
font-family: var(--font-mono);
}
body code[class*="language-"] {
font-size: 0.8rem;
font-family: var(--font-mono);
}
body pre[class*="language-"] {
padding: 0.9em 1.1em;
border-radius: 6px;
margin: 1.2em 0;
}
table {
border-collapse: collapse;
width: 100%;
margin: 1.4em 0;
font-size: 0.95rem;
}
th, td {
text-align: left;
padding: 10px 14px;
border: 1px solid var(--border);
vertical-align: top;
}
th {
background: var(--surface-2);
color: var(--text);
font-weight: 600;
font-family: var(--font-sans);
letter-spacing: 0.01em;
}
td { background: var(--surface); color: var(--text); }
tr:hover td { background: var(--surface-2); }
.table, .comparison-table {
width: 100%;
border-collapse: collapse;
margin: 1.4em 0;
background: var(--surface);
}
.table th, .comparison-table th {
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
padding: 10px 14px;
}
.table td, .comparison-table td {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
padding: 10px 14px;
}
.table tr:hover td, .comparison-table tr:hover td { background: var(--surface-2); }
.hero {
margin: 2.4em 0 2.2em;
padding: 0;
}
.hero-subtitle {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.25rem;
color: var(--text-muted);
margin: 0 0 1.4em;
font-weight: 400;
}
.hero-meta {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 18px;
font-size: 0.95rem;
color: var(--text-muted);
margin: 0;
padding: 0;
}
.hero-meta dt {
font-weight: 600;
color: var(--text);
font-variant: small-caps;
letter-spacing: 0.04em;
font-size: 0.85rem;
padding-top: 3px;
}
.hero-meta dd {
margin: 0;
color: var(--text);
}
.search-box { margin-bottom: 24px; }
input[type="text"] {
width: 100%;
max-width: 720px;
height: 44px;
padding: 8px 14px;
font-size: max(16px, 1rem);
font-family: var(--font-sans);
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
}
input[type="text"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(122, 167, 255, 0.15);
}
input[type="submit"] {
height: 44px;
padding: 0 22px;
font-size: 0.95rem;
font-family: var(--font-sans);
font-weight: 500;
background: var(--accent-quiet);
color: var(--text);
border: 1px solid var(--accent-quiet);
border-radius: 4px;
cursor: pointer;
margin-left: 6px;
}
input[type="submit"]:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
.site-footer {
width: calc(100% + 80px);
margin: 4em -40px -60px;
padding: 2.6rem 40px 0;
background: #05141F;
border-top: 1px solid rgba(255, 183, 3, .22);
color: rgba(233, 223, 200, .78);
font-size: .95rem;
}
.footer-top {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr repeat(4, 1fr);
gap: 2.2rem;
padding-bottom: 2.2rem;
}
.footer-brand h2 {
font-family: var(--font-display, "Playfair Display"), serif;
font-size: 1.15rem;
font-weight: 400;
letter-spacing: .2em;
color: #F2EDE3;
margin: 0 0 .9rem;
border-bottom: 0;
padding-bottom: 0;
}
.footer-brand h2 .mark-dot { color: #FFB703; padding: 0 .1em; }
.footer-brand p {
margin: 0;
color: rgba(233, 223, 200, .78);
font-size: .92rem;
line-height: 1.7;
}
.footer-col h3 {
font-family: var(--font-sans, system-ui), system-ui, sans-serif;
font-size: .66rem;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: #FFB703;
margin: 0 0 .8rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li a {
display: block;
padding: .3rem 0;
font-size: .92rem;
color: rgba(233, 223, 200, .78);
text-decoration: none;
border-bottom: 0;
}
.footer-col li a:hover,
.footer-col li a:focus-visible { color: #FFB703; border-bottom: 0; }
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
border-top: 1px solid rgba(255, 183, 3, .22);
padding: 1.1rem 62px 1.4rem 0;
display: flex;
flex-wrap: wrap;
gap: .6rem 2rem;
align-items: center;
justify-content: space-between;
font-size: .74rem;
letter-spacing: .06em;
color: rgba(233, 223, 200, .62);
}
.footer-totop {
color: rgba(233, 223, 200, .62);
text-decoration: none;
border-bottom: 0;
white-space: nowrap;
}
.footer-totop:hover,
.footer-totop:focus-visible { color: #FFB703; border-bottom: 0; }
@media (max-width: 1100px) {
.footer-top { grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
.site-footer { width: calc(100% + 32px); margin: 3em -16px -48px; padding: 2.2rem 16px 0; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.footer-col li a,
.footer-totop { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
@media (max-width: 480px) {
.site-footer { width: calc(100% + 20px); margin: 2.4em -10px -40px; padding: 2rem 10px 0; }
.footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
html:has(.tri-stick) .site-footer { margin-bottom: -110px; padding-bottom: 72px; }
}
.question { font-weight: 600; color: var(--accent); }
.answer { margin-bottom: 1.2em; color: var(--text); }
.tagline {
color: var(--warn);
font-size: 1.15rem;
font-family: var(--font-serif);
font-style: italic;
}
.video-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
.video-item { display: flex; flex-direction: column; }
.video-item img {
max-width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
display: block;
}
.video-item a {
text-decoration: none;
color: var(--accent);
font-weight: 500;
}
.video-item a:hover { border-bottom-color: var(--accent-hover); }
.video-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
border-radius: 6px;
border: 1px solid var(--border);
}
.video-media img, .video-media iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
.video-description {
margin: 1.2em 0;
font-size: 0.9rem;
color: var(--text-muted);
}
img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
img.raw { border-radius: 0; }
.page-hero {
margin: 0.6em auto 2em;
max-width: 100%;
text-align: center;
}
.page-hero img {
width: 100%;
border-radius: 8px;
border: 1px solid var(--border);
box-shadow: 0 12px 38px rgba(0, 0, 0, 0.55);
display: block;
}
.page-hero figcaption {
margin-top: 0.65em;
font-size: 0.9rem;
color: var(--text-muted);
font-style: italic;
}
.poster-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
margin: 1.4em 0 2.2em;
align-items: start;
}
.poster-grid .page-hero {
max-width: 100%;
margin: 0;
}
@media (max-width: 640px) {
.poster-grid { grid-template-columns: 1fr; gap: 16px; }
}
.poster-figure {
margin: 0.6em 0 1.6em;
max-width: none;
text-align: center;
}
.poster-figure img {
width: 100%;
border-radius: 8px;
border: 1px solid var(--border);
box-shadow: 0 12px 38px rgba(0, 0, 0, 0.55);
display: block;
cursor: zoom-in;
}
.poster-figure figcaption {
margin-top: 0.65em;
font-size: 0.9rem;
color: var(--text-muted);
font-style: italic;
}
.video-container {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 20px 0 8px;
}
@media screen and (max-width: 1000px) {
.video-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 600px) {
.video-container { grid-template-columns: 1fr; }
}
.video-item {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.video-item:hover {
transform: translateY(-3px);
border-color: var(--border-strong);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.video-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
cursor: pointer;
}
.video-media img, .video-media iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
display: block;
}
.video-media[data-video-id]:hover img { opacity: 0.82; }
.video-description {
margin: 0;
padding: 11px 14px;
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.45;
}
#featured-playlist h3 { margin-bottom: 6px; }
#playlist-play-all {
background: var(--accent);
color: #06122b;
border: 0;
border-radius: 6px;
padding: 12px 24px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
#playlist-play-all:hover { background: var(--accent-hover); }
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 1.4em 0 2.2em;
}
.photo-grid figure {
margin: 0;
display: flex;
flex-direction: column;
}
.photo-grid img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--border);
display: block;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.photo-grid figure:hover img {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.photo-grid figcaption {
margin-top: 0.5em;
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.45;
}
@media (max-width: 900px) {
.photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 540px) {
.photo-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 768px) {
html { font-size: calc(15px * var(--pa-fs, 1)); }
body {
padding: 0 16px 48px;
line-height: 1.6;
}
h1 { font-size: 1.6rem !important; line-height: 1.2; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.08rem; }
.hero-subtitle { font-size: 1rem; }
.hero table, .hero table tr, .hero table tbody { display: block; width: 100% !important; }
.hero table td {
display: block !important;
width: 100% !important;
padding: 0 0 1em 0 !important;
text-align: left;
}
table, .table, .comparison-table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
font-size: 0.88rem;
}
th, td, .table th, .table td, .comparison-table th, .comparison-table td {
padding: 8px 10px;
}
pre, body pre[class*="language-"] {
font-size: 0.78rem;
padding: 0.7em 0.85em;
overflow-x: auto;
word-wrap: break-word;
}
body code[class*="language-"] { font-size: 0.78rem; }
code { word-break: break-word; }
hr[width], hr[width="1100"] {
width: 100% !important;
max-width: 100% !important;
}
img { max-width: 100%; height: auto; }
.hero-meta {
grid-template-columns: 1fr;
gap: 2px 0;
}
.hero-meta dt { padding-top: 8px; }
nav[aria-label="Table of contents"] {
padding: 0.8em 1em !important;
font-size: 0.92rem;
}
[style*="width: 1100"], [style*="width:1100"] {
width: 100% !important;
max-width: 100% !important;
}
.hero table td[style*="padding: 0 0 0 60px"] {
padding: 1em 0 0 0 !important;
}
}
.connections-bar {
margin: 1.2em 0 2em;
padding: 12px 16px;
background: var(--surface);
border-left: 3px solid var(--accent);
border-radius: 4px;
}
.connections-bar .connections-label {
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
font-size: 0.78rem;
letter-spacing: 0.06em;
margin-right: 10px;
}
.connections-bar a {
display: inline-block;
padding: 4px 12px;
margin: 3px 4px 3px 0;
background: var(--surface-2);
border: 1px solid var(--border-strong);
border-radius: 16px;
color: var(--text) !important;
text-decoration: none;
font-size: 0.9em;
white-space: nowrap;
transition: all 0.2s ease;
}
.connections-bar a:hover {
background: var(--bg);
color: var(--accent-hover) !important;
border-color: var(--accent);
}
ol.toc-grid, ul.toc-grid {
display: block;
column-count: 3;
column-gap: 40px;
padding-left: 1.6em;
margin: 0 0 1.8em 0;
}
ol.toc-grid li, ul.toc-grid li {
break-inside: avoid;
margin: 0 0 8px 0;
padding-left: 4px;
line-height: 1.45;
}
@media (max-width: 900px) {
ol.toc-grid, ul.toc-grid { column-count: 2; }
}
@media (max-width: 500px) {
ol.toc-grid, ul.toc-grid { column-count: 1; }
}
.deep-dive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 1.4em 0 2.4em;
}
.deep-dive-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--h1-color);
border-radius: 6px;
padding: 18px 20px 16px;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
text-decoration: none;
}
.deep-dive-card:hover {
transform: translateY(-3px);
border-color: var(--border-strong);
border-left-color: var(--h1-color-hover);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
background: var(--surface-2);
}
.deep-dive-card .card-eyebrow {
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 6px;
}
.deep-dive-card h3 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 700;
color: var(--h1-color);
margin: 0 0 8px;
line-height: 1.2;
border-bottom: 0;
padding-bottom: 0;
}
.deep-dive-card:hover h3 { color: var(--h1-color-hover); }
.deep-dive-card p {
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.55;
margin: 0 0 12px;
}
.deep-dive-card .card-cta {
margin-top: auto;
color: var(--accent);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.deep-dive-card:hover .card-cta { color: var(--accent-hover); }
@media (max-width: 900px) {
.deep-dive-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
.deep-dive-grid { grid-template-columns: 1fr; gap: 12px; }
.deep-dive-card { padding: 14px 16px 12px; }
}
@media (max-width: 480px) {
html { font-size: calc(14.5px * var(--pa-fs, 1)); }
body {
padding: 0 10px 40px;
}
h1 { font-size: 1.4rem !important; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.hero-subtitle { font-size: 0.95rem; }
pre, body pre[class*="language-"] {
font-size: 0.72rem;
padding: 0.55em 0.7em;
}
body code[class*="language-"] { font-size: 0.72rem; }
th, td, .table th, .table td, .comparison-table th, .comparison-table td {
padding: 6px 8px;
font-size: 0.82rem;
}
nav[aria-label="Table of contents"] {
padding: 0.65em 0.8em !important;
font-size: 0.88rem;
}
nav[aria-label="Table of contents"] ol { padding-left: 1.1em; }
}
.photo-grid figure img { cursor: zoom-in; }
.lightbox {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.92);
display: flex; align-items: center; justify-content: center;
z-index: 9999; cursor: zoom-out;
}
.lightbox img {
max-width: 95vw; max-height: 95vh;
display: block;
}
.hotel-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--h1-color);
border-radius: 6px;
padding: 18px 22px 14px;
margin: 0 0 18px;
}
.hotel-card h3 {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--h1-color);
margin: 0 0 2px;
border-bottom: 0;
}
.hotel-card h3 .rank { color: var(--text-subtle); font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; margin-right: 6px; }
.hotel-meta { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 10px; }
.hotel-meta strong { color: var(--warn); font-weight: 600; }
.badges { margin: 0 0 10px; }
.badge {
display: inline-block;
padding: 2px 10px;
margin: 2px 6px 2px 0;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: var(--surface-2);
color: var(--text-muted);
font-size: 0.75rem;
letter-spacing: 0.03em;
}
.badge.luxe { border-color: var(--warn); color: var(--warn); }
.hotel-card p { margin: 0 0 0.8em; color: var(--text); font-size: 0.97rem; }
.signature { color: var(--text-muted); font-size: 0.9rem; font-style: italic; margin: 0 0 4px; }
.signature strong { color: var(--accent); font-style: normal; }
.rate-chart { margin: 1.2em 0 2em; }
.rate-row { display: grid; grid-template-columns: minmax(150px, 240px) 1fr 70px; gap: 10px; align-items: center; margin-bottom: 7px; }
.rate-row a { color: var(--text); font-size: 0.88rem; border-bottom: 0; }
.rate-row a:hover { color: var(--accent-hover); }
.rate-track { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; height: 16px; overflow: hidden; }
.rate-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-quiet), var(--h1-color)); border-radius: 3px; }
.rate-val { color: var(--warn); font-size: 0.85rem; font-weight: 600; text-align: right; }
.chart-note { color: var(--text-subtle); font-size: 0.8rem; }
.season-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 1em 0 0.5em; }
.season-strip .m {
text-align: center; padding: 7px 2px; border-radius: 4px;
font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text);
border: 1px solid var(--border); background: var(--surface-2); cursor: default;
}
.m.best { background: rgba(80, 180, 120, 0.30); border-color: rgba(80, 180, 120, 0.55); }
.m.wet { background: rgba(90, 140, 220, 0.26); border-color: rgba(90, 140, 220, 0.5); }
.m.hot { background: rgba(220, 140, 70, 0.28); border-color: rgba(220, 140, 70, 0.5); }
.season-legend { color: var(--text-muted); font-size: 0.8rem; margin: 0 0 1.6em; }
.season-legend .k { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin: 0 4px 0 12px; vertical-align: middle; }
.k.best { background: rgba(80, 180, 120, 0.5); }
.k.fine { background: var(--surface-2); border: 1px solid var(--border); }
.k.hot { background: rgba(220, 140, 70, 0.5); }
.k.wet { background: rgba(90, 140, 220, 0.5); }
@media (max-width: 640px) {
.rate-row { grid-template-columns: 1fr; gap: 2px; margin-bottom: 12px; }
.rate-val { text-align: left; }
.season-strip { grid-template-columns: repeat(6, 1fr); }
}
.budget-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 20px 0 8px;
}
@media screen and (max-width: 1000px) {
.budget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 600px) {
.budget-grid { grid-template-columns: 1fr; }
}
.budget-box {
display: flex;
flex-direction: column;
background:
linear-gradient(135deg, rgba(120, 167, 255, 0.18), rgba(0, 0, 0, 0)),
linear-gradient(135deg, var(--surface-2), var(--surface));
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 18px 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.budget-box:hover {
transform: translateY(-3px);
border-color: var(--border-strong);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.budget-box.tier-1 { background: linear-gradient(135deg, rgba(80, 180, 120, 0.22), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); }
.budget-box.tier-2 { background: linear-gradient(135deg, rgba(120, 167, 255, 0.20), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); }
.budget-box.tier-3 { background: linear-gradient(135deg, rgba(186, 140, 255, 0.20), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); }
.budget-box.tier-4 { background: linear-gradient(135deg, rgba(233, 181, 92, 0.22), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); }
.budget-box h3 {
font-family: var(--font-display);
font-size: 1.12rem;
color: var(--h1-color);
margin: 0 0 2px;
border-bottom: 0;
}
.budget-band {
display: block;
margin: 0 0 10px;
color: var(--warn);
font-size: 0.9rem;
font-weight: 600;
}
.budget-box ul {
list-style: none;
margin: 0 0 12px;
padding: 0;
flex: 1 1 auto;
}
.budget-box li {
margin: 0 0 9px;
color: var(--text);
font-size: 0.88rem;
line-height: 1.45;
}
.budget-box li strong { color: var(--text); font-weight: 600; }
.budget-box li span {
display: block;
color: var(--text-muted);
font-size: 0.82rem;
line-height: 1.4;
}
.budget-best {
margin: 0;
padding-top: 10px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: 0.8rem;
line-height: 1.4;
}
.budget-best strong { color: var(--accent); font-weight: 600; }
.related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 18px 0 14px;
}
@media screen and (max-width: 1000px) {
.related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 600px) {
.related-grid { grid-template-columns: 1fr; }
}
.related-card {
display: block;
background:
linear-gradient(135deg, rgba(120, 167, 255, 0.14), rgba(0, 0, 0, 0)),
linear-gradient(135deg, var(--surface-2), var(--surface));
border: 1px solid var(--border);
border-radius: 8px;
padding: 13px 16px;
text-decoration: none;
color: inherit;
font-weight: 600;
line-height: 1.4;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.related-card:hover {
transform: translateY(-3px);
border-color: var(--border-strong);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
text-decoration: none;
}
.related-links {
margin: 4px 0 8px;
line-height: 2;
}
.related-links a { font-weight: 600; }
.related-links span { opacity: 0.45; padding: 0 8px; }
body[data-wallpaper] { background: transparent; }
html:has(body[data-wallpaper])::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--pa-wallpaper, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: var(--pa-wallpaper-opacity, 0.18);
filter: var(--pa-wallpaper-filter, blur(3px));
transform: scale(1.03);
}
:root[data-theme="warm-sand"]:has(body[data-wallpaper])::before, :root[data-theme="calm-sky"]:has(body[data-wallpaper])::before, :root[data-theme="sage-wellness"]:has(body[data-wallpaper])::before, :root[data-theme="soft-linen"]:has(body[data-wallpaper])::before {
opacity: var(--pa-wallpaper-opacity-light, 0.11);
}
@media (max-width: 640px) {
html:has(body[data-wallpaper])::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html:has(body[data-wallpaper])::before { background-attachment: scroll; }
}
html:has(.dep-strip) #breadcrumb,
html:has(.board-nav, .section-nav) #breadcrumb { display: none; }
.dep-more {
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: .72rem;
letter-spacing: .1em;
color: #FFB703;
text-decoration: none;
white-space: nowrap;
border: 1px solid rgba(255, 183, 3, .35);
border-radius: 6px;
padding: 4px 8px;
}
.dep-more:hover { color: #FF8A50; border-color: #FF8A50; }
.board-nav, .section-nav {
position: sticky;
top: 0;
z-index: 40;
display: flex;
gap: .3rem;
align-items: center;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
margin: 0 0 12px;
padding: .4rem .45rem;
background: #05141F;
border: 1px solid rgba(255,183,3,.22);
border-radius: 8px;
box-shadow: 0 6px 14px rgba(0,0,0,.45);
}
.board-nav a, .section-nav a {
flex: 0 0 auto;
display: flex;
align-items: center;
min-height: 44px;
padding: 0 .7rem;
border-radius: 6px;
font-family: 'Segoe UI Historic', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.84rem;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
color: rgba(233,223,200,.78);
border: 1px solid transparent;
}
.board-nav a:hover, .board-nav a:focus-visible, .section-nav a:hover, .section-nav a:focus-visible {
color: #FFB703;
background: rgba(255,183,3,.08);
border-color: rgba(255,183,3,.35);
}
.board-nav a[aria-current="page"], .section-nav a[aria-current="page"] {
color: #071A2E;
background: #FFB703;
font-weight: 700;
border-color: #FFB703;
}
.board-nav a[aria-current="page"]:hover, .section-nav a[aria-current="page"]:hover { color:#071A2E; }
.board-nav a[aria-current="true"], .section-nav a[aria-current="true"] {
color: #FFB703;
background: rgba(255,183,3,.10);
font-weight: 600;
border-color: rgba(255,183,3,.55);
}
.board-nav a[aria-current="true"]:hover, .board-nav a[aria-current="true"]:focus-visible, .section-nav a[aria-current="true"]:hover, .section-nav a[aria-current="true"]:focus-visible {
color: #FFB703;
background: rgba(255,183,3,.20);
border-color: #FFB703;
}
@media (max-width: 700px){
.board-nav a, .section-nav a { font-size: 0.8rem; padding: 0 .55rem; }
}
@media (prefers-reduced-motion: no-preference){
.board-nav, .section-nav { scroll-behavior: smooth; }
}
html:has(.board-nav, .section-nav) {
--pa-menu-h: 102px;
--board-nav-h: 66px;
scroll-padding-top: calc(var(--pa-menu-h, 102px) + var(--board-nav-h, 66px) + 8px);
}
html:has(.board-nav, .section-nav) #menu {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
}
html:has(.board-nav, .section-nav) #menu .navbar {
width: 100%;
margin-left: 0;
}
html:has(.board-nav, .section-nav) .board-nav, html:has(.board-nav, .section-nav) .section-nav {
position: fixed;
top: var(--pa-menu-h, 102px);
left: 0; right: 0;
z-index: 9998;
margin: 0;
border: 0;
border-bottom: 1px solid rgba(255,183,3,.28);
border-radius: 0;
padding: .35rem .6rem;
box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
html:has(.board-nav, .section-nav) body {
padding-top: calc(var(--pa-menu-h, 56px) + var(--board-nav-h, 66px)) !important;
}
.related-card small {
display: block;
margin-top: 3px;
font-weight: 400;
font-size: 0.82rem;
color: var(--text-muted);
}
.viz-strip {margin:14px 0 0;padding:18px 20px;background:#12151b;border:1px solid #2a2a2a;border-left:4px solid var(--h1-color,#FF6F61);border-radius:10px;}
.viz-strip-head {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
.viz-strip h2 {margin:0;border:0;padding:0;color:var(--nav-text,#F2EDE3);font-family:var(--font-display,"Playfair Display"),serif;font-size:1.5rem;}
.viz-strip-lede {margin:0 0 14px;color:#b9c9e6;font-size:.97em;line-height:1.5;}
.viz-strip-legend {margin:-8px 0 14px;color:#b9c9e6;font-size:.86rem;line-height:1.45;}
.viz-strip-all {
display:inline-flex; align-items:center;
min-height:44px; padding:0 2px;
color:#3ad0ff; font-weight:700; font-size:.9rem;
white-space:nowrap; text-decoration:none;
border-bottom:0;
}
.viz-strip-all:hover, .viz-strip-all:focus-visible {color:#FFB703;border-bottom:0;}
.viz-chips {display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:10px;}
.viz-chip {display:flex;align-items:center;gap:11px;padding:12px;min-height:64px;background:#0a1628;border:1px solid #4a6da8;border-radius:10px;text-decoration:none;transition:border-color .15s,transform .12s;}
.viz-chip:hover, .viz-chip:focus-visible {background:#0a1628;border-color:#3ad0ff;transform:translateY(-2px);}
.viz-chip:focus-visible {outline:2px solid #3ad0ff;outline-offset:2px;}
.viz-chip-icon {font-size:1.55em;line-height:1;flex:0 0 auto;text-align:center;}
.viz-chip-text {min-width:0;}
.viz-chip-name {display:block;min-width:0;color:#e6edf3;font-size:.98rem;font-weight:700;line-height:1.2;}
.viz-chip-sub {display:block;margin-top:3px;color:#a8bde0;font-size:.85rem;font-weight:500;line-height:1.3;}
.viz-chip-sub b {color:#e6edf3;font-weight:700;}
.viz-chip-ext {color:#8ea4cc;font-weight:400;}
.viz-chip:hover .viz-chip-name, .viz-chip:focus-visible .viz-chip-name {color:#3ad0ff;}
.viz-chip-logo {
flex:0 0 auto; width:40px; height:40px; border-radius:11px;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-sans),system-ui,sans-serif;
font-size:20px; font-weight:700; letter-spacing:.02em; line-height:1;
color:#fff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.viz-chip.warn {border-color:#FFB703;}
.viz-chip.warn:hover, .viz-chip.warn:focus-visible {border-color:#FFD166;}
.viz-chip.warn .viz-chip-sub b {color:#FFD166;}
.viz-notes {margin:12px 0 0;padding:10px 12px;background:#2a1d08;border:1px solid #a08020;border-radius:8px;}
.viz-note {margin:0;color:#F2E3C0;font-size:.88rem;line-height:1.45;}
.viz-note + .viz-note {margin-top:7px;}
.viz-note b {color:#FFD166;}
@media (prefers-reduced-motion: reduce){
.viz-chip {transition:border-color .15s;}
.viz-chip:hover, .viz-chip:focus-visible {transform:none;}
}
@media (max-width: 480px){
.viz-strip {padding:16px 14px;}
.viz-chips {grid-template-columns:1fr;}
}
.tri{--w:#FFFFFF;--red:#C8102E;--red-deep:#9E0B22;--tint:#FBE9EC;--steel:#4A5561;--ink:#1B2632;--line:#DCE1E6;--soft:#F3F5F7;--dark:#1B2632;--dark-line:#3A4654;--dark-muted:#C9D1DA;--dark-link:#FFD5DB;--sans:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Noto Sans Thai', sans-serif;
font-family:var(--sans);color:var(--ink);background:var(--w);line-height:1.55;font-size:1.0625rem;
width:calc(100% + 80px);margin:0 0 0 -40px;padding:0 40px 1.5rem}
.tri *{box-sizing:border-box;font-family:var(--sans)}
.tri a{color:var(--red-deep)}
.tri a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.tri .wrap{max-width:1120px;margin:0 auto}
.tri h1#top{font:800 clamp(2rem,5.2vw,3.6rem)/1.04 var(--sans);letter-spacing:-.02em;color:var(--ink);margin:.4rem 0 .5rem;padding:0;border:0;text-shadow:none;text-align:left}
.tri h2{font:800 1.35rem/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink);margin:0 0 .5rem;padding:.6rem 0 0;border:0;border-top:3px solid var(--red);display:inline-block;text-shadow:none}
.tri h3{font:800 1.08rem/1.3 var(--sans);color:var(--ink);margin:0;border:0}
.tri p{margin:0 0 .9rem;max-width:70ch;color:var(--ink)}
.tri ul,.tri ol{margin:0 0 .9rem 1.2rem;padding:0}
.tri .hero{background:var(--tint);border-bottom:8px solid var(--red);margin:0 -40px;padding:1.8rem 40px 2.1rem}
.tri .kind{font-weight:600;color:var(--red-deep);font-size:.95rem;margin:0}
.tri .formerly{color:var(--steel);max-width:62ch;margin:0}
.tri .actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:1.4rem}
.tri .btn{display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:6rem;padding:1.1rem 1.25rem;text-decoration:none;border:2px solid var(--ink);color:var(--ink);background:var(--w)}
.tri .btn-call{background:var(--red);border-color:var(--red);color:#fff}
.tri .btn-label{font-size:.95rem;font-weight:600}
.tri .btn-num{font-size:clamp(1.3rem,3.4vw,2rem);font-weight:800;line-height:1.12;letter-spacing:-.01em;overflow-wrap:anywhere}
.tri .btn:hover{filter:brightness(.95);text-decoration:none}
.tri .also{margin:1rem 0 0;font-size:.95rem;color:var(--steel)}
.tri .also a{font-weight:800}
.tri .band{background:var(--dark);color:#fff;margin:0 -40px;padding:1.6rem 40px 1.8rem}
.tri .band .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem}
.tri .band p{color:inherit}
.tri .band-h{font-size:.9rem;font-weight:600;color:var(--dark-muted);margin:0}
.tri .thai,.tri [lang="th"]{font-family:"Noto Sans Thai","Leelawadee UI",Leelawadee,Thonburi,"Sukhumvit Set",Tahoma,var(--sans)}
.tri .thai{font-size:clamp(1.7rem,4.4vw,2.6rem);font-weight:800;line-height:1.3;margin:.3rem 0 .5rem;color:#fff;max-width:none}
.tri .big{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:800;line-height:1.25;margin:.3rem 0 .6rem;color:#fff;max-width:26ch}
.tri .say{color:var(--dark-muted);max-width:52ch;margin:0}
.tri .say a{color:var(--dark-link)}
.tri .facts{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;align-content:start;font-size:.95rem}
.tri .facts li{display:grid;grid-template-columns:7rem 1fr;gap:.8rem;border-top:1px solid var(--dark-line);padding-top:.5rem;color:#fff}
.tri .facts li span:first-child{color:var(--dark-muted)}
.tri .facts a{color:var(--dark-link)}
.tri .triage{list-style:none;margin:.3rem 0 0;padding:0}
.tri .triage li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;border-top:1px solid var(--dark-line);padding:.55rem 0;font-size:1rem}
.tri .triage li span{color:var(--dark-muted)}
.tri .triage li a{color:#fff;font-weight:800;text-decoration:none;text-align:right}
.tri .triage li a:hover{color:var(--dark-link);text-decoration:underline}
.tri .content{padding:2.2rem 0 1.6rem}
.tri .lede{font-size:1.2rem;line-height:1.5;max-width:64ch;margin-bottom:1.6rem}
.tri section{margin-bottom:1.6rem}
.tri .fig{margin:0 0 1.8rem}
.tri .fig img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.tri .fig figcaption{font-size:.85rem;color:var(--steel);margin-top:.4rem}
.tri .others{background:var(--soft);border-top:1px solid var(--line);margin:0 -40px;padding:1.6rem 40px 1.8rem}
.tri .others h2,.tri .content h2{margin-bottom:.7rem}
.tri .list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.75rem 1.5rem}
.tri .list li{border-left:4px solid var(--line);padding:.15rem 0 .15rem .75rem;font-size:.95rem}
.tri .list li a{font-weight:600;color:var(--ink);text-decoration:none}
.tri .list li a:hover{color:var(--red-deep);text-decoration:underline}
.tri .list li span{display:block;color:var(--steel)}
.tri .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin:.6rem 0 1.8rem}
.tri .card{display:flex;flex-direction:column;background:var(--w);border:1px solid var(--line);border-top:4px solid var(--red)}
.tri .card .thumb{display:block;text-decoration:none;color:inherit}
.tri .card img,.tri .card .mono{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.tri .card .mono{display:flex;align-items:center;justify-content:center;gap:.8rem;background:var(--tint);color:var(--red-deep);font-size:2rem;font-weight:800;letter-spacing:.06em}
.tri .card .mono svg{width:2rem;height:2rem;flex:0 0 auto}
.tri .card .cb{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.tri .card h3 a{color:var(--ink);text-decoration:none}
.tri .card h3 a:hover{color:var(--red-deep);text-decoration:underline}
.tri .card .meta{color:var(--steel);font-size:.86rem;margin:0}
.tri .card p{margin:0;font-size:.95rem;max-width:none}
.tri .card .addr{color:var(--steel);font-size:.86rem}
.tri .card .links{font-size:.9rem;font-weight:600}
.tri .card .links a{white-space:nowrap}
.tri .card .more{margin-top:auto;padding-top:.5rem;font-weight:800;font-size:.9rem;text-decoration:none;color:var(--red-deep)}
.tri .card.plain .cb{padding:1rem 1.1rem 1.1rem}
.tri .card.plain .sub{color:var(--steel);font-size:.9rem;margin:0}
.tri .scroll{overflow-x:auto;margin:0 0 1rem}
.tri table{width:100%;border-collapse:collapse;margin:.4rem 0 0;font-size:.95rem;background:var(--w)}
.tri th{text-align:left;font-weight:600;color:var(--steel);border:0;border-bottom:2px solid var(--ink);padding:.6rem .7rem;background:var(--w);white-space:nowrap}
.tri td{border:0;border-bottom:1px solid var(--line);padding:.6rem .7rem;vertical-align:top;background:var(--w);color:var(--ink)}
.tri tr:hover td{background:var(--soft)}
.tri table a{font-weight:600}
.tri .note{font-size:.88rem;color:var(--steel);max-width:none}
.tri .links{font-size:.95rem;color:var(--steel);margin:1rem 0 0}
.tri .links a{font-weight:600}
.tri .fine{font-size:.9rem;color:var(--steel);border-top:1px solid var(--line);padding-top:1rem;margin:1.6rem 0 0;max-width:none}
.tri #featured-videos{margin-top:.4rem}
.tri .video-container{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;margin:.7rem 0 1.1rem}
.tri .video-item{background:var(--w);border:1px solid var(--line);border-radius:0;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.tri .video-item:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:0 8px 22px rgba(27,38,50,.16)}
.tri .video-media{border-radius:0;border:0;border-bottom:1px solid var(--line);background:var(--ink)}
.tri .video-description{margin:0;padding:.8rem 1rem;font-size:.88rem;line-height:1.45;color:var(--ink);letter-spacing:.01em;max-width:none;flex:1}
.tri .fv-ext-link{margin:0 1rem 1rem;color:var(--red-deep);opacity:1;font-size:.68rem;font-weight:700}
.tri .fv-ext-link:hover{opacity:1;color:var(--red)}
.tri .fv-note{color:var(--steel);opacity:1;font-size:.88rem;border-left:3px solid var(--line);max-width:70ch}
.tri #featured-playlist h3{font:800 1.15rem/1.3 var(--sans);color:var(--ink);margin:0 0 .3rem}
.tri #featured-playlist p{color:var(--steel);font-size:.95rem}
.tri #playlist-play-all{background:var(--red);color:#fff;border:0;border-radius:0;padding:.8rem 1.4rem;font:800 1rem/1 var(--sans);cursor:pointer}
.tri #playlist-play-all:hover{background:var(--red-deep)}
.tri .fv-ext-all{color:var(--red-deep);font-weight:700}
.tri #playlist-frame{border-radius:0 !important}
@media (max-width:1100px){.tri .video-container{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tri .video-container{grid-template-columns:1fr}}
.tri-stick{display:none}
@media (max-width:1100px){.tri .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
.tri .scroll table{min-width:640px}
.tri .actions{grid-template-columns:1fr}
.tri .band .wrap{grid-template-columns:1fr}
.tri .cards{grid-template-columns:1fr}
.tri .facts li{grid-template-columns:6rem 1fr}
.tri-stick{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:9990;border-top:2px solid #1B2632;font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Noto Sans Thai', sans-serif}
.tri-stick a{display:block;text-align:center;padding:.85rem .6rem;font-weight:800;text-decoration:none;font-size:1rem}
.tri-stick .s-call{background:#C8102E;color:#fff}
.tri-stick .s-dir{background:#fff;color:#1B2632}
body:has(.tri-stick){padding-bottom:110px}
html:has(.tri-stick) #pa-theme-fab{bottom:66px}
html:has(.tri-stick) .pa-panel{bottom:122px}
}
@media (max-width:720px){
.tri{width:calc(100% + 40px);margin-left:-20px;padding:0 20px 1.5rem}
.tri .hero,.tri .band,.tri .others{margin:0 -20px;padding-left:20px;padding-right:20px}
}