/* One palette for the whole site. Gold is the family accent; green belongs to Ronen and blue to Kaius. */
:root{--paper:#faf8f0;--surface:#fffdf7;--ink:#293b36;--muted:#5b6660;--line:#dedccd;--gold:#b88832;--coral:#af523d;--green:#3c613c;--green-deep:#2a4a2b;--green-soft:#edf2e4;--green-line:#d1dbc2;--green-text:#4f5f4a;--blue:#3d5f8f;--blue-deep:#2e4a72;--blue-soft:#eaeff8;--blue-line:#d2dbeb;--blue-text:#4c5d79;--serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,'Segoe UI',sans-serif;--r-card:16px;--r-media:10px;--r-button:10px;--ease:cubic-bezier(.2,.7,.2,1);--speed:200ms;--shadow:0 12px 28px rgba(41,59,54,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin-top:0;text-wrap:balance}
p{margin-top:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:5px;border-radius:4px}
[hidden]{display:none!important}
.skip{position:absolute;left:20px;top:-100px;background:var(--surface);padding:10px;z-index:10}
.skip:focus{top:10px}

/* Chrome */
body>header,main,footer{max-width:1080px;margin:auto}
body>header{min-height:80px;padding:18px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font:28px/1 var(--serif);letter-spacing:-1px}
.brand-icon{background:var(--ink);color:var(--paper);width:40px;height:44px;text-align:center;border-radius:20px 20px 4px 4px;line-height:44px;font-size:24px}
.brand-family{display:block;font:9px/2 var(--sans);letter-spacing:2px}
nav{display:flex;gap:26px;flex-wrap:wrap}
nav a{font-size:14px;padding:6px 0;border-bottom:1px solid transparent;transition:border-color var(--speed) var(--ease)}
nav a:hover,nav a[aria-current]{border-bottom-color:currentColor}
footer{padding:26px 32px;display:flex;gap:22px;align-items:center;border-top:1px solid var(--line)}
footer .brand{margin-right:auto;font-size:24px}
.footer-flower{color:var(--gold);font-size:26px}
footer p,footer>a:last-child{font-size:12px;color:var(--muted);margin:0}
footer>a:last-child{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}

/* Type and shared parts */
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(40px,5.6vw,64px);line-height:1.08;letter-spacing:-1.8px;margin:0 0 18px}
h1 em,h2 em{font-style:italic;color:var(--gold)}
h2{font-size:32px;line-height:1.15;letter-spacing:-.8px;margin-bottom:0}
.star{color:var(--gold)}
.intro{font-size:17px;line-height:1.7;color:var(--muted);max-width:52ch;margin-bottom:26px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--coral);box-shadow:0 8px 20px rgba(175,82,61,.22);color:#fff;border-radius:var(--r-button);padding:14px 22px;font-size:15px;font-weight:600;line-height:1.2;transition:background var(--speed) var(--ease),transform var(--speed) var(--ease)}
.button:hover{background:#95412f}
.button:active{transform:translateY(1px)}
.text-link{font-size:14px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold)}
.small{font-size:12px;color:var(--muted);margin-top:10px}
.empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 28px;color:var(--muted);margin:0}
.notice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 24px}

/* Homepage: the family front door */
.home-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center;padding:44px 32px 36px}
.home-copy .intro{margin-bottom:24px}
.home-photos{display:grid;grid-template-columns:repeat(12,1fr);align-items:start}
.photo{margin:0;padding:10px 10px 12px;border-radius:var(--r-card);box-shadow:var(--shadow);transition:transform 400ms var(--ease)}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-media)}
.photo-ronen{grid-column:1/8;grid-row:1;background:var(--green-soft);border:1px solid var(--green-line);transform:rotate(-2.5deg)}
.photo-kaius{grid-column:6/13;grid-row:1;margin-top:150px;background:var(--blue-soft);border:1px solid var(--blue-line);transform:rotate(2deg);z-index:1}
.photo:hover{transform:rotate(0)}
.right-now{padding:8px 32px 48px}
.right-now h2{padding-top:26px;margin-bottom:16px;border-top:1px solid var(--line)}
.spotlight{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 28px}
.spotlight+.spotlight{margin-top:14px}
.spotlight h3{font-size:26px;letter-spacing:-.5px;margin:0 0 6px}
.spotlight h3 a{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold);transition:color var(--speed) var(--ease)}
.spotlight h3 a:hover{color:var(--green)}
.spotlight p{margin:0;color:var(--muted);max-width:56ch}
.spotlight-ends{margin-top:8px!important;font-size:13px;font-weight:650;color:var(--coral)}
.spotlight-action{text-align:center}
.spotlight-action .small{margin:8px 0 0}
.recent{font-size:14px;color:var(--muted);margin:14px 0 0}
.recent a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}

/* Listings and articles */
.page-heading{padding:56px 32px 28px}
.page-heading h1{font-size:clamp(40px,5.6vw,60px)}
.page-heading .intro{max-width:60ch;margin-bottom:0}
.section{padding:36px 32px 56px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.content-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;transition:border-color var(--speed) var(--ease),transform var(--speed) var(--ease)}
.content-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.content-card h3{font-size:28px;letter-spacing:-.5px;margin:12px 0}
.content-card p{color:var(--muted)}
.content-card .text-link{display:block;margin-top:24px}
.archive-heading{margin:44px 0 20px;font-size:26px}
.article{max-width:760px;margin:auto;padding:52px 32px 72px}
.article>.eyebrow{margin-top:36px}
.article h1{font-size:clamp(38px,5vw,56px)}
.article .intro{margin-bottom:0}
.prose{margin:30px 0}
.prose p{max-width:65ch}

@media(max-width:760px){
  body>header{min-height:72px;padding:16px 20px}
  .brand{font-size:24px}
  .brand-icon{width:34px;height:38px;line-height:38px;font-size:20px}
  .brand-family{font-size:8px}
  nav{gap:16px}
  nav a{font-size:13px}
  h1{font-size:38px;letter-spacing:-1.2px}
  h2{font-size:28px}
  .home-hero{grid-template-columns:1fr;gap:28px;padding:30px 20px 24px}
  .home-photos{grid-template-columns:1fr 1fr;gap:12px}
  .photo-ronen,.photo-kaius{grid-column:auto;grid-row:auto;margin:0;transform:none}
  .photo{padding:8px 8px 10px}
  .right-now{padding:4px 20px 40px}
  .spotlight{grid-template-columns:1fr;gap:18px;padding:22px 20px}
  .spotlight-action{text-align:left}
  .spotlight-action .button{width:100%}
  .page-heading{padding:40px 20px 22px}
  .section{padding:28px 20px 44px}
  .article{padding:40px 20px 56px}
  footer{padding:22px 20px;flex-wrap:wrap}
  footer .brand{width:100%}
}
@media(max-width:360px){body>header{padding:14px 16px;gap:10px}nav{gap:12px}.brand-icon{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}