/* Shared look for the website page and the Instagram slides.
   Palette and decorations come from the La Montagnola website.
   Sizes are variables: the page uses the defaults, slides override them. */
:root{
  --sage:#9CAF88; --sage-dark:#7A8B6F;
  --sole:#D9B977; --sole-dark:#B89B5C;
  --luna:#A3B1BE; --luna-dark:#7D8D9C;
  --cream:#FAF8F5; --bosco:#4A5742; --bosco-deep:#3A4534;
  /* rooms (camere.js): wall colours sampled from the photos */
  --favonio:#d38a65; --libeccio:#2A5360; --libeccio-sole:#B4472D; --scirocco:#A8401F;
  --ink:#1F2421; --ink-soft:#4B5563;
  --serif:"Fraunces",Georgia,serif; --sans:"Karla",system-ui,sans-serif;

  --ground:var(--sage-dark);          /* green background, like the site footer */
  --band:var(--bosco-deep);           /* darker contact band */
  --on-green:var(--cream);
  --on-green-soft:rgba(250,248,245,.84);

  /* default sizes (website) */
  --gap:10px; --row-gap:10px; --radius:12px;
  --day-w:150px; --day-size:14px;
  --t-size:15px; --n-size:20px; --d-size:15px;
  --card-pad:12px 12px 13px 14px; --card-acc:5px;
  --note-size:20px; --note-s-size:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em}
.leaf{display:block}

/* ---------- week: one row per day ---------- */
.week{display:flex;flex-direction:column;gap:var(--row-gap)}
.row{display:grid;grid-template-columns:var(--day-w) 1fr;gap:var(--gap)}
.day{display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--bosco);color:var(--cream);border-radius:var(--radius);
  font-weight:700;font-size:var(--day-size);letter-spacing:.16em;text-transform:uppercase;padding:10px 0 10px .16em}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}

.card{position:relative;border-radius:var(--radius);padding:var(--card-pad);
  border-left:var(--card-acc) solid var(--acc);background:var(--cream);box-shadow:0 1px 2px rgba(30,40,25,.18)}
.card.sole{--acc:var(--sole);--icon:#8A7240}
.card.luna{--acc:var(--luna);--icon:#5E6E7D}
.card .t{font-weight:700;font-size:var(--t-size);letter-spacing:.03em;font-variant-numeric:tabular-nums;color:#39413A;white-space:nowrap}
.card .n{font-family:var(--serif);font-weight:600;font-size:var(--n-size);line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin-top:.28em}
.card .d{font-weight:500;font-size:var(--d-size);color:var(--ink-soft);margin-top:.3em}
.card > .ico{position:absolute;top:.9em;right:.8em;font-size:var(--t-size);color:var(--icon)}

/* empty day: follow-us note, styled like the site's glass card on green */
.note{grid-column:1 / -1;display:flex;flex-direction:column;justify-content:center;gap:.45em;
  border-radius:var(--radius);padding:var(--card-pad);text-decoration:none;color:var(--on-green);
  background:rgba(46,56,41,.38);border:1.5px solid rgba(250,248,245,.22)}
.note-t{font-family:var(--serif);font-weight:600;font-size:var(--note-size);line-height:1.15}
.note-s{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:var(--note-s-size);color:var(--sole)}

/* ---------- decorations from the website ---------- */
/* grass wave along the top edge (site footer) */
.wave-top{position:relative;background:var(--band)}
.wave-top::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 5px);height:20px;background:var(--band);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M0,10 Q30,0 60,10 Q90,20 120,10 L120,20 L0,20 Z'/%3E%3C/svg%3E") bottom/120px 20px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M0,10 Q30,0 60,10 Q90,20 120,10 L120,20 L0,20 Z'/%3E%3C/svg%3E") bottom/120px 20px repeat-x}
/* rolling hills along the top edge (site section dividers) */
.hills-top{position:relative;background:var(--ground)}
.hills-top::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--hills-h,60px);background:var(--ground);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,25 Q180,45 360,30 Q540,15 720,25 Q900,35 1080,20 Q1260,5 1440,30 L1440,60 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,25 Q180,45 360,30 Q540,15 720,25 Q900,35 1080,20 Q1260,5 1440,30 L1440,60 Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
/* faint leaf stems (site contact section) */
.stem{position:absolute;color:#fff;opacity:.13;pointer-events:none}
.stem.flip{transform:scaleX(-1)}

/* ---------- rooms (camere.js): one colour per room, like .sole / .luna ---------- */
.favonio {--room:var(--favonio); --on-room:var(--ink);   --room-acc:var(--bosco)}
.libeccio{--room:var(--libeccio);--on-room:var(--cream); --room-acc:var(--libeccio-sole)}
.scirocco{--room:var(--scirocco);--on-room:var(--cream); --room-acc:#CFDCC0}

/* wind rose (ui.js rosa()): needles in currentColor, the room's wind solid in --room-acc,
   its second half a shade darker */
.rosa{display:block;overflow:visible}
.rosa .anello{fill:none;stroke:currentColor;stroke-width:1;opacity:.4}
.rosa .centro{fill:currentColor;opacity:.5}
.rosa path{fill:currentColor;opacity:.4}
.rosa path.sh{opacity:.22}
.rosa .on path{fill:var(--room-acc);opacity:1}
.rosa .on path.sh{fill:color-mix(in srgb,var(--room-acc) 78%,#000)}
.rosa .n{fill:currentColor;font:700 11px var(--sans);text-anchor:middle;opacity:.75}
/* rosaCamere(): every room on one rose, each needle in its room colour */
.rosa.venti .on path{fill:var(--room)}
.rosa.venti .on path.sh{fill:color-mix(in srgb,var(--room) 78%,#000)}
.rosa .nome{font-family:var(--serif);font-weight:600;font-size:8.6px;fill:currentColor}