:root { --cs-ink:#222923; --cs-paper:#f8f6f0; --cs-line:#d9d7ce; --cs-sage:#566953; --cs-clay:#b95a3b; --cs-muted:#62675f; --cs-serif:'Playfair Display',Georgia,serif; --cs-sans:'Plus Jakarta Sans',Arial,sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--cs-paper); color:var(--cs-ink); font:400 15px/1.7 var(--cs-sans); }
a { color:inherit; text-underline-offset: 4px; }
img { max-width:100%; display:block; }
::selection { background:#d6d9c7; color:#252723; }
.cs-wrap { max-width:1380px; margin-inline:auto; padding-inline:clamp(1.2rem,4.5vw,5rem); }
.cs-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:88px; }
.cs-top { border-bottom:1px solid var(--cs-line); background:var(--cs-paper); }
.cs-mark img { width:175px; height:auto; }
.cs-nav-right { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:clamp(.8rem,2.1vw,2rem); }
.cs-nav-right a { font-size:.83rem; font-weight:650; text-decoration:none; }
.cs-nav-right a:hover { text-decoration:underline; }
.cs-languages { display:flex; gap:.65rem; align-items:center; border-left:1px solid var(--cs-line); padding-left:1rem; }
.cs-languages a[aria-current] { opacity:.48; }
.cs-eyebrow { display:block; margin:0 0 .9rem; color:var(--cs-clay); font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
h1,h2,h3,h4 { font-family:var(--cs-serif); font-weight:400; line-height:1.12; letter-spacing:-.034em; }
h1 { margin:0 0 1.3rem; font-size:clamp(3.1rem,7vw,7rem); }
h2 { margin:0 0 1.3rem; font-size:clamp(2.5rem,5.2vw,5.6rem); }
h3 { font-size:clamp(1.8rem,2.7vw,3rem); margin:0 0 .8rem; }
.cs-lead { font-size:clamp(1.09rem,1.65vw,1.35rem); line-height:1.75; max-width:56ch; }
.cs-hero { overflow:hidden; background:var(--cs-color,#203b33); color:#fbf9f2; padding-top:clamp(3.5rem,7vw,7rem); }
.cs-hero .cs-eyebrow { color:#e8ccb0; }
.cs-hero h1 em { color:#e8d2b3; font-weight:400; }
.cs-hero .cs-lead { color:#edeae2; max-width:56ch; }
.cs-hero .cs-wrap { display:grid; gap:clamp(3rem,5vw,5rem); }
.cs-hero-text { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:4rem; align-items:end; }
.cs-hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.cs-button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; gap:.65rem; padding:.9rem 1.3rem; border:1px solid currentColor; text-decoration:none; font-size:.86rem; font-weight:700; border-radius:5px; transition:background .2s, color .2s; }
.cs-button.light { background:var(--cs-paper); color:var(--cs-ink); border-color:var(--cs-paper); }
.cs-button.light:hover { background:#e1ddd4; }
.cs-button.outline { color:#fff; background:transparent; }
.cs-button.outline:hover { background:rgba(255,255,255,.1); }
.cs-demo-note { max-width:35ch; color:#e6d9c4; font-size:.81rem; line-height:1.7; }
.cs-device { position:relative; width:min(100%,1150px); margin:0 auto; border-radius:12px 12px 0 0; background:#131719; padding:clamp(.5rem,1vw,1rem) clamp(.5rem,1vw,1rem) 0; box-shadow:0 30px 90px rgba(0,0,0,.2); }
.cs-device::before { content:''; display:block; width:5px; height:5px; background:#6e7978; border-radius:50%; margin:0 auto .65rem; }
.cs-device img { width:100%; aspect-ratio:1480/800; object-fit:cover; object-position:top; border-radius:3px 3px 0 0; }
.cs-section { padding-block:clamp(4rem,8vw,9rem); }
.cs-intro { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(2rem,8vw,9rem); align-items:start; }
.cs-intro p { max-width:58ch; color:var(--cs-muted); font-size:clamp(1.05rem,1.5vw,1.26rem); line-height:1.85; }
.cs-meta { margin:2.5rem 0 0; padding:1.35rem 0 0; border-top:1px solid var(--cs-line); display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; }
.cs-meta div { min-width:150px; }
.cs-meta dt { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cs-clay); }
.cs-meta dd { margin:.3rem 0 0; color:var(--cs-ink); font-size:.92rem; }
.cs-chapter { border-top:1px solid var(--cs-line); padding-block:clamp(3.5rem,7vw,7rem); }
.cs-chapter-inner { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,6vw,7rem); align-items:center; }
.cs-chapter:nth-of-type(even) .cs-chapter-inner { direction:rtl; }
.cs-chapter:nth-of-type(even) .cs-chapter-inner > * { direction:ltr; }
.cs-chapter p { max-width:55ch; color:var(--cs-muted); line-height:1.85; font-size:clamp(1rem,1.25vw,1.12rem); }
.cs-photo { position:relative; margin:0; padding:clamp(.6rem,1.5vw,1rem); border-radius:12px; background:#ebe8df; overflow:hidden; }
.cs-photo img { width:100%; height:auto; max-height:680px; object-fit:cover; object-position:center top; border-radius:5px; }
.cs-photo.portrait img { height:clamp(22rem,42vw,38rem); object-fit:contain; }
.cs-photo figcaption { padding:.6rem .2rem 0; font-size:.75rem; color:var(--cs-muted); }
.cs-list { margin:1.5rem 0; padding:0; list-style:none; }
.cs-list li { padding:.65rem 0; border-bottom:1px solid var(--cs-line); color:var(--cs-ink); font-size:.91rem; }
.cs-list li::before { content:'↗'; margin-right:.6rem; color:var(--cs-clay); }
.cs-gallery { background:#eae8e0; padding-block:clamp(4rem,8vw,7rem); }
.cs-gallery-top { max-width:70ch; margin:0 0 2.3rem; }
.cs-gallery-top p { font-size:1.07rem; color:var(--cs-muted); }
.cs-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.8rem); }
.cs-gallery-grid figure { margin:0; min-width:0; }
.cs-gallery-grid img { width:100%; height:clamp(13rem,24vw,23rem); object-fit:cover; object-position:top; border-radius:6px; }
.cs-gallery-grid figcaption { margin:.8rem 0 0; color:var(--cs-muted); font-size:.86rem; line-height:1.55; }
.cs-gallery-grid b { display:block; font-family:var(--cs-serif); font-size:1.45rem; font-weight:400; color:var(--cs-ink); }
.cs-end { padding-block:clamp(4rem,8vw,8rem); background:#202d27; color:#fff; }
.cs-end h2 { max-width:18ch; }
.cs-end p { color:#d6dfd6; max-width:63ch; font-size:1.06rem; }
.cs-end .cs-button { margin-top:1rem; }
.cs-footer { padding:2rem 0; background:var(--cs-paper); }
.cs-footer .cs-wrap { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.cs-footer a { font-size:.82rem; text-decoration:none; }
.cs-footer a:hover { text-decoration:underline; }
a:focus-visible { outline:3px solid #bb683e; outline-offset:4px; }
@media(max-width:860px) {
  .cs-hero-text,.cs-intro,.cs-chapter-inner { grid-template-columns:1fr; gap:1.8rem; }
  .cs-chapter:nth-of-type(even) .cs-chapter-inner { direction:ltr; }
  .cs-hero { padding-top:3.8rem; }
  .cs-demo-note { max-width:58ch; }
  .cs-gallery-grid { grid-template-columns:1fr; }
  .cs-gallery-grid img { height:auto; max-height:540px; aspect-ratio: 16 / 10; }
  .cs-nav { padding-block:1rem; align-items:flex-start; }
  .cs-nav-right { gap:.7rem; }
}
@media(max-width:520px) {
  .cs-mark img { width:135px; }
  .cs-nav-right a { font-size:.74rem; }
  .cs-device img { aspect-ratio:390/650; object-position:top center; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .cs-button { transition:none; } }