/* Public product page and guide, styled with the shared Adria Summer tokens. */
/*
 * Adria Summer — shared design tokens for every Adria Island site.
 * Source of truth: /root/projects/infra/brand/ (see README.md there).
 * Copy this block into a product stylesheet and map the product's own
 * variables onto it; keep the values identical across products.
 */
:root {
  /* Surfaces: Dalmatian limestone, sand and shallow water */
  --adria-paper: #fbf7ef;
  --adria-sand: #f5ecdd;
  --adria-sand-deep: #ecdfc8;
  --adria-card: #fffdf8;
  --adria-shallow: #e6f1f4;
  --adria-line: #e5dac7;
  --adria-line-strong: #d3c4ab;

  /* Text: deep Adriatic ink */
  --adria-ink: #13314a;
  --adria-muted: #5a6672;

  /* Sea, sun and the island palette */
  --adria-sea: #1b5e8c;          /* primary buttons and links */
  --adria-sea-strong: #144b72;   /* hover / pressed */
  --adria-sea-bright: #2e8cbf;   /* waves, focus ring, decoration */
  --adria-sea-light: #86c0dd;
  --adria-sun: #f2b33d;          /* highlights, underline marker */
  --adria-sun-soft: #fbe7b5;
  --adria-terracotta: #a8442d;   /* text-safe terracotta */
  --adria-terracotta-soft: #f6e1d6;
  --adria-seaplane: #c9302c;     /* small red accents */
  --adria-olive: #5f6f3a;
  --adria-olive-soft: #e9ecd9;
  --adria-pine: #2f5d4a;
  --adria-pine-soft: #e2ece5;
  --adria-lavender: #6e5ba8;
  --adria-lavender-soft: #ece8f5;
  --adria-lagoon: #17707a;
  --adria-lagoon-soft: #ddeeee;
  --adria-bougainvillea: #b23a75;

  /* Shape */
  --adria-radius-card: 20px;
  --adria-radius-control: 12px;
  --adria-radius-pill: 999px;
  --adria-shadow: 0 1px 2px rgba(19, 49, 74, .06), 0 14px 34px -16px rgba(19, 49, 74, .24);
  --adria-shadow-lift: 0 2px 4px rgba(19, 49, 74, .06), 0 24px 48px -20px rgba(19, 49, 74, .3);

  /* Type */
  --adria-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --adria-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;

  /* Each product sets its own accent from the table in README.md */
  --adria-accent: var(--adria-sea);
  --adria-accent-strong: var(--adria-sea-strong);
  --adria-accent-soft: var(--adria-shallow);
}
/* Studio: sea for controls and links, terracotta for small brand labels, sand as the tinted surface. */
:root{--adria-accent-soft:var(--adria-sand);
 --paper:var(--adria-paper);--ink:var(--adria-ink);--muted:var(--adria-muted);--line:var(--adria-line);--soft:var(--adria-sand);
 --accent:var(--adria-accent);--label:var(--adria-terracotta);--sans:var(--adria-font-sans);--display:var(--adria-font-display);
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color-scheme:light}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--accent)}
:is(a,button,summary):focus-visible{outline:3px solid var(--adria-sea-bright);outline-offset:3px;border-radius:4px}
/* Chinese headings break only at spaces and punctuation, so a word is never split across lines. */
h1,h2,h3{margin:0;font-weight:700;line-height:1.3;letter-spacing:-.01em;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
:lang(en) :is(h1,h2,.adria-display){font-family:var(--display);font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(34px,4.6vw,56px);line-height:1.2}
h2{font-size:clamp(24px,2.7vw,32px);margin-bottom:20px}
h3{font-size:18px;font-weight:650;margin-bottom:8px}
p{margin:0 0 16px}
p,li,dd,small,figcaption,summary{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
figcaption{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.7}
code{font-family:var(--mono);font-size:.88em;background:var(--soft);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
pre code{background:none;padding:0;font-size:inherit}
.shell{width:min(1120px,calc(100% - 48px));margin:0 auto}
.skip:not(:focus){position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;top:8px;left:8px;z-index:10;padding:10px 16px;background:var(--adria-card)}
/* The small label sits inside the H1 so the product name is part of the heading. */
.eyebrow,.kicker{display:block;font:650 13px/1.5 var(--sans);letter-spacing:.08em;color:var(--label);margin-bottom:14px}
.lead{font-size:19px;line-height:1.8;color:var(--muted);max-width:620px}
.muted{color:var(--muted)}

/* Header and footer */
.site-header{border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;font:600 22px/1 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand img{border-radius:8px}
.top nav{display:flex;align-items:center;gap:22px;font-size:15px}
.top nav>a:not(.button){display:flex;align-items:center;min-height:44px;text-decoration:none}
.top nav>a:not(.button):hover{text-decoration:underline}
.adria-wave{display:block;width:100%;height:28px;fill:currentColor;margin-top:40px;color:var(--soft)}
.site-footer{background:var(--soft)}
.site-footer .shell{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:20px 0 44px;font-size:14px;color:var(--muted)}
.site-footer .shell>a:not(.adria-home){display:inline-flex;align-items:center;min-height:44px}
.adria-home{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-right:auto;color:var(--ink);font:600 13px/1.4 var(--sans);text-decoration:none}
.adria-home img{width:22px;height:22px;border-radius:6px}
.adria-home:hover{color:var(--adria-sea)}

/* Buttons and links */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 22px;border:1px solid var(--adria-line-strong);border-radius:var(--adria-radius-pill);background:var(--adria-card);color:var(--ink);font:650 15px/1.4 var(--sans);text-decoration:none;transition:background .16s,border-color .16s}
.button:hover{border-color:var(--ink);color:var(--ink)}
.button.primary{background:var(--accent);border-color:transparent;color:#fff}
.button.primary:hover{background:var(--adria-accent-strong);color:#fff}
.button.small{min-height:44px;padding:9px 18px;font-size:14px}
.text-link{display:inline-block;padding:10px 0;font-weight:650;color:var(--accent);text-decoration:none}
.text-link:hover{color:var(--adria-sea-strong);text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.price-note{font-size:14px;color:var(--muted);margin-top:14px}

/* Product page */
.landing>section{padding:72px 0;border-top:1px solid var(--line)}
.landing>.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:64px 0 80px;border-top:0}
.hero h1{margin-bottom:22px}
/* The two example pages are shown as postcards. */
.hero-art>div{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;padding:8px 12px 0}
.hero-art img{background:#fff;padding:8px 8px 24px;border-radius:6px;box-shadow:var(--adria-shadow-lift)}
.hero-art img:first-child{transform:rotate(-2.5deg)}
.hero-art img+img{transform:rotate(2deg);margin-top:48px}
.hero-art figcaption{text-align:center;margin-top:24px}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:24px 56px;align-items:end;margin-bottom:32px}
.section-head h2{margin:0}
.section-head p{color:var(--muted);margin:0}
.theme-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:24px 16px}
.theme-strip li{font-size:14px;color:var(--muted);text-align:center;line-height:1.5}
.theme-strip img,.theme-strip .blank{width:100%;aspect-ratio:3/4;border-radius:8px;margin-bottom:10px;box-shadow:var(--adria-shadow)}
.theme-strip img{object-fit:cover}
.theme-strip .blank{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);font:28px var(--display);color:var(--muted)}
.features,.steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.features{grid-template-columns:repeat(2,1fr)}
.features li{background:var(--adria-card);border:1px solid var(--line);border-radius:var(--adria-radius-card);box-shadow:var(--adria-shadow);padding:26px 28px}
.features p,.steps p{color:var(--muted);margin:0}
.steps{grid-template-columns:repeat(3,1fr);gap:36px;counter-reset:step;margin-bottom:20px}
.steps li{counter-increment:step}
.steps li:before{content:counter(step);display:block;font:600 30px/1 var(--display);color:var(--accent);margin-bottom:14px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:18px 36px 18px 0;font-weight:650}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:14px;font-size:22px;font-weight:400;color:var(--accent)}
.faq details[open]>summary:after{content:"−"}
.faq details>p{color:var(--muted);margin:0;padding:0 36px 20px 0;max-width:760px}
.landing>.related{background:var(--soft);border:0;border-radius:var(--adria-radius-card);padding:40px;margin:16px 0 0}
.related p{max-width:720px}
/* Chinese paragraphs fill their box instead of stopping at the English measure, so lines next to
   full-width cards do not look hard-wrapped. English keeps the shorter measure. */
:lang(zh) :is(.lead,.faq details>p,.related p){max-width:none}

/* Guide: one reading column; figures marked .bleed widen to 960px */
.guide{max-width:720px;margin:0 auto;font-size:17px;line-height:1.8;padding-bottom:24px}
.guide .bleed{width:min(960px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
.guide-head{padding:48px 0 8px}
.crumbs{display:flex;gap:10px;font-size:14px;color:var(--muted);margin-bottom:28px}
.guide-head h1{font-size:clamp(32px,4.2vw,48px);margin-bottom:22px}
.byline{font-size:14px;color:var(--muted);margin-top:20px}
.toc{background:var(--soft);border-radius:var(--adria-radius-card);padding:20px 28px;margin:24px 0 8px;font-size:16px}
.toc p{font-weight:650;margin:0 0 6px}
.toc ol{margin:0;padding-left:22px}
.toc li{padding:3px 0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.guide section{margin-top:56px}
.guide .step{counter-increment:guide}
.guide{counter-reset:guide}
.step>h2{display:flex;align-items:baseline;gap:14px}
.step>h2:before{content:counter(guide);flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--adria-sun-soft);color:var(--ink);font:600 17px/1 var(--display);transform:translateY(-3px)}
.guide ul{padding-left:22px;margin:0 0 16px}
.guide li{margin:6px 0}
.guide figure{margin:28px 0}
.snippet pre,.source pre{margin:0;background:var(--soft);border-radius:var(--adria-radius-control);padding:18px 22px;font:14px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.covers>div{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.covers figure{margin:0;text-align:center}
.covers img,.pair img,.gallery img{border-radius:6px;box-shadow:var(--adria-shadow)}
.covers figcaption{margin-top:10px}
.covers>figcaption{text-align:center}
.pair>div{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.example .download{margin:24px 0 8px}
.source{border:1px solid var(--line);border-radius:var(--adria-radius-control);margin:16px 0 32px;background:var(--adria-card)}
.source summary{cursor:pointer;padding:12px 18px;font-weight:650;font-size:16px}
.source pre{border-radius:0 0 var(--adria-radius-control) var(--adria-radius-control)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 18px}
.gallery figure{margin:0}
.gallery figcaption{font-size:13px;text-align:center}
.gallery figcaption a{color:var(--accent)}
.aside{margin-top:48px;padding:18px 22px;border-left:3px solid var(--adria-sea-bright);background:var(--soft);border-radius:0 var(--adria-radius-control) var(--adria-radius-control) 0;font-size:16px}
.aside a{font-weight:650;color:var(--accent);white-space:nowrap}
.guide .closing{background:var(--soft);border-radius:var(--adria-radius-card);padding:36px;text-align:center}
.closing h2{margin-bottom:22px}
.closing p{font-size:14px;color:var(--muted);margin:14px 0 0}

@media(max-width:860px){
 .landing>.hero{grid-template-columns:1fr;gap:40px;padding:40px 0 56px}
 .hero-art{max-width:520px}
 .section-head{grid-template-columns:1fr}
 .theme-strip{grid-template-columns:repeat(4,1fr)}
 .features,.steps{grid-template-columns:1fr}
 .steps{gap:24px}
 .landing>section{padding:52px 0}
}
@media(max-width:560px){
 body{font-size:16px}
 .shell{width:calc(100% - 32px)}
 .top{flex-wrap:wrap;gap:4px 12px;padding:8px 0;min-height:0}
 .brand{font-size:19px;gap:8px}
 .brand img{width:26px;height:26px}
 .top nav{gap:14px;font-size:14px;margin-left:auto}
 .button.small{padding:9px 15px}
 .lead{font-size:17px}
 .theme-strip{grid-template-columns:repeat(3,1fr);gap:18px 12px}
 .theme-strip li{font-size:12px}
 .features li{padding:22px}
 .landing>.related,.guide .closing{padding:28px 22px}
 .guide{font-size:16px}
 .guide .bleed{width:calc(100vw - 32px)}
 .hero h1{font-size:30px}
 .hero-art img{padding:6px 6px 18px}
 .guide-head{padding-top:32px}
 .covers>div{grid-template-columns:repeat(2,1fr);gap:18px 14px}
 .pair>div{gap:12px}
 .gallery{grid-template-columns:repeat(2,1fr);gap:18px 12px}
 .toc{padding:16px 20px}
 .step>h2:before{width:30px;height:30px;font-size:15px}
 .site-footer .shell{gap:0 20px;padding-bottom:32px}
 .adria-home{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}