/* Lattikon — global stylesheet
   Visual language carried from the Anatolian Greeks interior:
   cream paper, charcoal text, bronze accent, deep brown. */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --paper:#FAF7F1;
  --paper-2:#F3EEE4;
  --ink:#2B2622;
  --ink-soft:#5A5048;
  --bronze:#8C6A2A;
  --bronze-deep:#5C4419;
  --line:#E2D9C8;
  --rule:#D8CDB8;
  --max:980px;
  --display:'Epilogue',Georgia,serif;
  --body:'Lora',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---- masthead ---- */
.masthead{padding:34px 0 10px}
.brandline{
  font-family:var(--display);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--bronze);
}
.brandline a{color:inherit;text-decoration:none}
.crumb{margin-top:6px;font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
.crumb a{color:var(--bronze-deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---- hero ---- */
.hero{padding:30px 0 8px;border-top:1px solid var(--rule);margin-top:14px}
.hero h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px,6vw,58px);
  line-height:1.04;
  letter-spacing:-.01em;
  margin:.1em 0 .15em;
}
.hero .sub{
  font-style:italic;
  font-size:clamp(17px,2.4vw,22px);
  color:var(--ink-soft);
  margin:0 0 .7em;
  max-width:34ch;
}
.hero .byline{font-family:var(--display);font-weight:600;letter-spacing:.02em;font-size:18px}
.hero .meta{font-size:14px;color:var(--ink-soft);margin-top:4px;letter-spacing:.01em}
.lede{font-size:19px;margin:18px 0 6px;max-width:62ch}

/* ---- section headings ---- */
h2.sec{
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bronze);
  margin:40px 0 14px;
}
h2.title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,4.5vw,40px);line-height:1.08;margin:.2em 0 .4em;
}
p{margin:0 0 1em}
a{color:var(--bronze-deep)}
.muted{color:var(--ink-soft)}
em.url{font-style:italic;color:var(--bronze-deep)}

/* ---- action cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:8px 0 6px}
.card{
  display:block;text-decoration:none;color:inherit;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 18px 16px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover{border-color:var(--bronze);transform:translateY(-2px);box-shadow:0 8px 22px rgba(92,68,25,.07)}
.card .n{font-family:var(--display);font-size:12px;letter-spacing:.14em;color:var(--bronze);text-transform:uppercase}
.card h3{font-family:var(--display);font-weight:600;font-size:18px;margin:.45em 0 .25em}
.card p{font-size:14.5px;color:var(--ink-soft);margin:0}

/* ---- note panel ---- */
.note{
  background:var(--paper-2);
  border-left:3px solid var(--bronze);
  border-radius:0 8px 8px 0;
  padding:16px 20px;
  font-size:15px;color:var(--ink-soft);
  margin:26px 0;
}
.note strong{color:var(--ink)}

/* ---- body prose blocks ---- */
.prose{max-width:64ch}
.prose h3{font-family:var(--display);font-weight:600;font-size:18px;margin:1.6em 0 .3em}
.prose ul{padding-left:1.1em}
.prose li{margin:.3em 0}
.kv{font-size:15px;color:var(--ink-soft)}
.kv b{color:var(--ink);font-weight:600}

/* ---- forms ---- */
form .row{margin:14px 0}
label{display:block;font-family:var(--display);font-size:13px;letter-spacing:.04em;color:var(--ink);margin-bottom:5px}
label .opt{color:var(--ink-soft);font-weight:400;text-transform:none;letter-spacing:0}
input[type=text],input[type=email],select,textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 12px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(140,106,42,.12)}
textarea{min-height:140px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft)}
.consent input{margin-top:4px}
.btn{
  display:inline-block;cursor:pointer;border:none;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.03em;
  background:var(--bronze-deep);color:#fff;border-radius:8px;padding:12px 22px;
}
.btn:hover{background:var(--bronze)}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}

/* ---- footer ---- */
footer{margin-top:54px;border-top:1px solid var(--rule);padding:22px 0 48px;font-size:13.5px;color:var(--ink-soft)}
footer .fl{font-family:var(--display);letter-spacing:.04em;color:var(--ink)}
footer a{color:var(--bronze-deep);text-decoration:none}

/* ---- umbrella home grid ---- */
.umbrella{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:10px 0}
.umbrella .u{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 16px;text-decoration:none;color:inherit}
.umbrella .u:hover{border-color:var(--bronze)}
.umbrella .u h3{font-family:var(--display);font-weight:600;font-size:16px;margin:0 0 .25em}
.umbrella .u p{font-size:13.5px;color:var(--ink-soft);margin:0}
.feature{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 24px 20px;margin:18px 0}

@media (max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 20px}
}