/* ==========================================================================
   Dalyan Delights — site stylesheet
   Palette taken from photographs of the Dalyan channel.
   ========================================================================== */
:root{
  --white:#FCFCF8;      /* page */
  --mist:#EEF3EC;       /* soft panels */
  --jade:#7FB6A1;       /* shallow water */
  --jade-d:#2F6B57;     /* labels, links */
  --deep:#173D31;       /* dark panels, buttons */
  --sand:#F0E2C6;       /* dry reeds */
  --coral:#E8734A;      /* accent — the orange life rings on the boats */
  --ink:#152621;

  --d:"Fraunces",Georgia,serif;
  --b:"Figtree",system-ui,-apple-system,sans-serif;
  --shell:min(1180px,90vw);
  --col:min(680px,90vw);
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;overflow-x:hidden;background:var(--white);color:var(--ink);font:400 17px/1.68 var(--b);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.shell{width:var(--shell);margin-inline:auto}
.col{width:var(--col);margin-inline:auto}
h1,h2,h3{font-family:var(--d);font-variation-settings:"SOFT" 60,"WONK" 1;font-weight:500;line-height:1.1;margin:0}
h1 em,h2 em{font-style:italic;color:var(--jade-d)}
.eyebrow{font:700 .7rem/1 var(--b);letter-spacing:.2em;text-transform:uppercase;color:var(--jade-d);margin:0 0 .9rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--deep);color:#fff;padding:.7rem 1.1rem;border-radius:6px}

/* header ------------------------------------------------------------------ */
header{position:sticky;top:0;z-index:30;background:rgba(252,252,248,.9);backdrop-filter:blur(12px)}
header.line{border-bottom:1px solid rgba(21,38,33,.08)}
.bar{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0;gap:1rem}
.mark{text-decoration:none;display:flex;align-items:center}
.mark img{height:110px;width:auto;display:block}
nav{display:flex;gap:1.5rem;font-size:.88rem;font-weight:600;align-items:center}
nav a{text-decoration:none;opacity:.8}
nav a:hover,nav a:focus-visible{opacity:1;color:var(--jade-d)}
.pill{background:var(--deep);color:var(--white);padding:.55rem 1.05rem;border-radius:999px;font:700 .85rem/1 var(--b);text-decoration:none;opacity:1}
@media(max-width:820px){nav a:not(.pill){display:none}}

/* shared bits -------------------------------------------------------------- */
.slot{border-radius:var(--r);background:linear-gradient(140deg,var(--jade),var(--deep));
  display:grid;place-items:center;text-align:center;padding:1.6rem;color:rgba(255,255,255,.9);
  font:700 .74rem/1.6 var(--b);letter-spacing:.13em;text-transform:uppercase}
.btn{display:inline-block;text-decoration:none;font:700 .88rem/1 var(--b);padding:.72rem 1.2rem;
  border-radius:999px;background:var(--deep);color:var(--white);border:2px solid var(--deep);
  transition:background .18s ease,color .18s ease}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--deep)}
.who{display:inline-flex;align-items:center;gap:.5rem;background:var(--mist);border-radius:999px;
  padding:.5rem 1.1rem;font:700 .86rem/1 var(--b);color:var(--jade-d)}
.who b{width:8px;height:8px;border-radius:50%;background:var(--coral)}
section{padding:clamp(3.2rem,7vw,5.5rem) 0}
.head{max-width:34ch;margin-bottom:2.2rem}
.head h2{font-size:clamp(2rem,4.2vw,3rem)}
.head p{margin:.85rem 0 0;color:#3F5A50}
.disc{font-size:.85rem;color:#5B7268;margin-top:1.5rem;max-width:60ch}

/* home: hero --------------------------------------------------------------- */
.hero{padding:clamp(1.5rem,4vw,3rem) 0 0}
.hero h1{font-size:clamp(2.6rem,6.6vw,5rem);max-width:15ch;text-align:center;margin-inline:auto}
.hero .sub{max-width:52ch;margin:1.4rem auto 0;text-align:center;font-size:1.1rem;color:#3F5A50}
.hero .whowrap{display:flex;justify-content:center;margin-top:1.5rem}
.frame{margin-top:clamp(2rem,5vw,3.2rem);border-radius:var(--r);overflow:hidden;position:relative}
.frame img{width:100%;aspect-ratio:16/8;object-fit:cover}
.chips{position:absolute;left:0;right:0;bottom:0;padding:1.2rem;display:flex;gap:.6rem;flex-wrap:wrap;
  background:linear-gradient(to top,rgba(15,35,28,.72),transparent)}
.chip{background:rgba(252,252,248,.92);border-radius:999px;padding:.45rem 1rem;
  font:700 .82rem/1 var(--b);color:var(--deep);text-decoration:none}
.chip:hover,.chip:focus-visible{background:var(--coral);color:#fff}

/* home: cards -------------------------------------------------------------- */
.cards{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--mist);border-radius:var(--r);overflow:hidden;text-decoration:none;
  display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease}
.card:hover,.card:focus-visible{transform:translateY(-5px);box-shadow:0 22px 44px -28px rgba(21,38,33,.6)}
.card .thumb{aspect-ratio:5/4;position:relative;overflow:hidden}
.card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card:nth-child(2) .slot{background:linear-gradient(140deg,var(--sand),var(--coral))}
.card:nth-child(3) .slot{background:linear-gradient(140deg,var(--jade-d),var(--deep))}
.cb{padding:1.3rem 1.4rem 1.6rem}
.card h3{font-size:1.5rem;margin-bottom:.4rem}
.card p{margin:0;font-size:.94rem;color:#3F5A50}
.tag{font:800 .68rem/1 var(--b);letter-spacing:.15em;text-transform:uppercase;color:var(--coral);display:block;margin-bottom:.5rem}

/* home: iztuzu ------------------------------------------------------------- */
.iztuzu{background:linear-gradient(180deg,var(--mist),var(--white))}
.izg{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.izg{grid-template-columns:1.05fr .95fr;align-items:stretch}}
.izphoto{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
@media(min-width:900px){.izphoto{aspect-ratio:auto;min-height:320px}}
.izphoto img{width:100%;height:100%;object-fit:cover;display:block}
.season{display:grid;gap:.75rem;margin-top:1.8rem}
.srow{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline;
  padding-bottom:.75rem;border-bottom:1px solid rgba(21,38,33,.12)}
.srow dt{font:800 .68rem/1.4 var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--jade-d)}
.srow dd{margin:0;font-size:.97rem;color:#3F5A50}
.srow b{color:var(--ink);font-weight:700}
.izlinks{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem;align-items:center}
.ghost{border:1.5px solid var(--jade-d);color:var(--jade-d);background:transparent;
  padding:.62rem 1.1rem;border-radius:999px;font:700 .84rem/1 var(--b);text-decoration:none}
.ghost:hover,.ghost:focus-visible{background:var(--jade-d);color:#fff}
@media(max-width:520px){.srow{grid-template-columns:1fr;gap:.25rem}}

/* home: saturday ----------------------------------------------------------- */
.sat{background:var(--deep);color:#E6EFEA;border-radius:var(--r)}
.satin{padding:clamp(1.8rem,4.5vw,3.4rem)}
.sat h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.8rem);max-width:17ch}
.sat h2 em{color:var(--coral)}
.sat .eyebrow{color:var(--sand)}
.facts{display:grid;gap:1rem;margin-top:2.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.f{background:rgba(252,252,248,.07);border-radius:14px;padding:1.2rem}
.f dt{font:800 .68rem/1 var(--b);letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin-bottom:.5rem}
.f dd{margin:0;font-size:.98rem;color:#DCE8E2}
.f b{color:#fff;font-weight:700}

/* home: plan --------------------------------------------------------------- */
.plan{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.p{background:var(--mist);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column;gap:.6rem}
.p h3{font-size:1.3rem}
.p p{margin:0;font-size:.94rem;color:#3F5A50;flex:1}
.p .btn{align-self:start}

/* home: guide list --------------------------------------------------------- */
.guides{max-width:900px}
.group{margin-bottom:2.2rem}
.grouphead{
  font-family:var(--b);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;
  color:#5b6660;font-weight:700;padding-bottom:.6rem;
  border-bottom:1px solid #e2e0d5;margin-bottom:.25rem}
.g{
  display:flex;align-items:baseline;gap:1.1rem;
  padding:.9rem .25rem;border-bottom:1px solid #e2e0d5;
  text-decoration:none;color:inherit;
  transition:padding-left .16s ease,background .16s ease;position:relative}
.g:hover{padding-left:.75rem;background:rgba(47,107,70,.045)}
.g .t{font-family:var(--d);font-size:1.2rem;font-weight:400;line-height:1.3;flex:1}
.g:hover .t{color:var(--jade-d)}
.g .tag{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:#5b6660;white-space:nowrap;font-weight:700}
.g .arrow{color:var(--jade-d);opacity:0;transition:opacity .16s ease;font-style:normal}
.g:hover .arrow{opacity:1}
/* "Start here" badge */
.g.primary .t::after{
  content:"Start here";font-family:var(--b);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:#c0522a;border:1px solid #c0522a;border-radius:999px;
  padding:2px 7px;margin-left:.75rem;vertical-align:3px;font-weight:700}
/* child (indented sub-articles) */
.g.child{padding-left:1.6rem}
.g.child::before{content:"";position:absolute;left:.4rem;top:1.45rem;width:.6rem;height:1px;background:#e2e0d5}
.g.child:hover{padding-left:2.35rem}
.g.child .t{font-size:1.05rem;color:#5b6660}
.g.child:hover .t{color:var(--jade-d)}

/* tips 3-col grid ---------------------------------------------------------- */
.tips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:1.8rem 0}
.tips-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:700px){.tips-grid.four{grid-template-columns:repeat(2,1fr)}}
.tip-img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;margin-bottom:.9rem}
.tip-img img{width:100%;height:100%;object-fit:cover;display:block}
.tips-grid h4{font-family:var(--d);font-size:1.1rem;font-weight:600;margin:0 0 .45rem;line-height:1.25}
.tips-grid p{margin:0;font-size:.93rem;color:#3F5A50;line-height:1.6}
@media(max-width:600px){.tips-grid{grid-template-columns:1fr}}

/* 2×2 photo grid ----------------------------------------------------------- */
.img-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem;margin:1.8rem 0;border-radius:var(--r);overflow:hidden}
.img-grid-2 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:calc(var(--r) / 2)}
@media(max-width:480px){.img-grid-2{grid-template-columns:1fr}}
/* 3-col photo grid --------------------------------------------------------- */
.img-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin:1.8rem 0;border-radius:var(--r);overflow:hidden}
.img-grid-3 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:calc(var(--r) / 2)}
@media(max-width:540px){.img-grid-3{grid-template-columns:1fr}}

/* article ------------------------------------------------------------------ */
.art{padding:clamp(2rem,5vw,3.5rem) 0 0}
.kicker{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.4rem}
.kicker a,.kicker span{background:var(--mist);border-radius:999px;padding:.4rem 1rem;font:700 .76rem/1 var(--b);color:var(--jade-d);text-decoration:none}
.art h1{font-size:clamp(2.3rem,5.5vw,4rem);text-align:center;max-width:18ch;margin-inline:auto}
.dek{max-width:52ch;margin:1.3rem auto 0;text-align:center;font-size:1.15rem;color:#3F5A50}
.meta{display:flex;gap:.9rem;align-items:center;justify-content:center;margin-top:1.8rem;font-size:.9rem;color:#5B7268;flex-wrap:wrap}
/* Full-bleed hero: breaks out of the shell container to span the full viewport.
   margin-left: calc(50% - 50vw) pulls to the left edge of the viewport from
   any centred shell; overflow-x:hidden on body prevents horizontal scrollbar. */
.lead-img{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  margin-bottom:clamp(2rem,4vw,3rem);
  margin-left:calc(50% - 50vw);
  width:100vw;
  aspect-ratio:16/7;
  border-radius:0;
  overflow:hidden;
}
.lead-img img{width:100%;height:100%;object-fit:cover}
.body{padding:clamp(2.2rem,5vw,3.2rem) 0 0;font-size:18px;line-height:1.75}
.body p{margin:0 0 1.35rem}
.body h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:2.8rem 0 1rem}
.body h3{font-size:1.35rem;margin:2rem 0 .6rem}
.body ul{margin:0 0 1.35rem;padding-left:1.1rem}
.body li{margin-bottom:.55rem}
.hook{font-family:var(--d);font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.4;color:var(--deep);
  border-left:3px solid var(--coral);padding-left:1.3rem;margin:0 0 2rem}
.tip{background:var(--mist);border-radius:16px;padding:1.3rem 1.5rem;margin:0 0 1.6rem}
.tip strong{display:block;font:800 .7rem/1 var(--b);letter-spacing:.15em;text-transform:uppercase;color:var(--jade-d);margin-bottom:.6rem}
.tip p{margin:0;font-size:.98rem}
.costs{width:100%;border-collapse:collapse;margin:0 0 1.8rem;font-size:.98rem}
.costs th{text-align:left;font:800 .7rem/1 var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--jade-d);padding:0 0 .7rem;border-bottom:2px solid var(--mist)}
.costs td{padding:.75rem 0;border-bottom:1px solid var(--mist)}
.costs td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.book{background:var(--deep);color:#E6EFEA;border-radius:var(--r);padding:1.8rem;margin:2.4rem 0}
.book h3{color:#fff;font-size:1.5rem;margin-bottom:.5rem}
.book p{margin:0 0 1.2rem;font-size:.97rem;color:#CFE0D8}
.book .row{display:flex;gap:.7rem;flex-wrap:wrap}
.book .btn{background:var(--coral);border-color:var(--coral);color:#fff}
.book .btn:hover,.book .btn:focus-visible{background:transparent;color:var(--coral)}
.book small{display:block;margin-top:1rem;font-size:.8rem;color:#9FBCB0}
.inline-img{margin:2.2rem 0 0;border-radius:var(--r);overflow:hidden}
.inline-img img{width:100%;max-height:520px;object-fit:cover;display:block}
.inline-cap{font-size:.85rem;color:#5B7268;margin:.65rem 0 2.2rem}
.next{border-top:1px solid rgba(21,38,33,.14);margin-top:3rem;padding-top:2rem}
.next a{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.05rem 1.1rem;border-radius:14px;text-decoration:none;transition:background .18s ease}
.next a:hover,.next a:focus-visible{background:var(--mist)}
.next .n{font-family:var(--d);font-size:1.25rem}
.next .k{font:800 .68rem/1 var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--jade-d)}

/* our story ---------------------------------------------------------------- */
.top{padding:clamp(2.5rem,6vw,4.5rem) 0 0}
.tg{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.tg{grid-template-columns:1.05fr .95fr}}
.top h1{font-size:clamp(2.4rem,5.6vw,4.2rem);max-width:14ch}
.top .dek{margin:1.3rem 0 0;font-size:1.15rem;color:#3F5A50;max-width:44ch;text-align:left}
.portrait{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.portrait img{width:100%;height:100%;object-fit:cover}
.pull{font-family:var(--d);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.35;color:var(--deep);text-align:center;margin:3rem 0;padding:0 1rem}
.pull em{color:var(--coral);font-style:italic}
.numbers{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:2.5rem 0}
.num{background:var(--mist);border-radius:16px;padding:1.4rem}
.num dt{font-family:var(--d);font-size:2.3rem;color:var(--jade-d);line-height:1}
.num dd{margin:.4rem 0 0;font-size:.92rem;color:#3F5A50}
.strip{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:2.5rem 0}
.strip .slot{aspect-ratio:1}
.promise{background:var(--deep);color:#E6EFEA;border-radius:var(--r);padding:clamp(1.8rem,4vw,2.8rem);margin:3rem 0}
.promise h2{color:#fff;margin:0 0 1.2rem;font-size:clamp(1.6rem,3vw,2.2rem)}
.promise ul{margin:0;padding-left:1.1rem}
.promise li{margin-bottom:.75rem;color:#DCE8E2}
.promise b{color:#fff}
.cta{text-align:center;margin:3rem 0 0}

/* footer ------------------------------------------------------------------- */
footer{background:var(--mist);padding:3.5rem 0 2.4rem;margin-top:3rem}
footer h3{font-size:1.9rem;max-width:20ch;margin-bottom:.8rem}
footer p{max-width:52ch;color:#3F5A50}
footer a{color:var(--jade-d);font-weight:600}
.fb{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid rgba(21,38,33,.14);
  font-size:.82rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#5B7268}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}