/* ==========================================================
   ISLADONA — Additional CSS
   Paste all of this into: Appearance → Editor → Styles → ⋮ → Additional CSS
   Fonts: Bodoni Moda (headlines, logo) + DM Sans (text)
   ========================================================== */

/* ---------- 1. Colours ---------- */
:root{
  --isl-navy:#1D2B44;
  --isl-navy-2:#2E3E5C;
  --isl-stone:#F1EDE7;
  --isl-ivory:#FBF9F6;
  --isl-ink:#26324A;
  --isl-soft:#4B5366;
  --isl-label:#5E6A82;
  --isl-line:#D9D2C9;
  --isl-mist:#C7CEDB;
  --isl-mist-2:#AEB8CC;
  --isl-serif:'Bodoni Moda', Didot, 'Times New Roman', serif;
  --isl-sans:'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --isl-gutter:clamp(24px, 6.7vw, 96px);
}

/* ---------- 2. Whole site ---------- */
body{
  background:var(--isl-stone);
  color:var(--isl-ink);
  font-family:var(--isl-sans);
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,
.wp-block-post-title,
.wp-block-site-title{
  font-family:var(--isl-serif);
  font-weight:400;
  color:var(--isl-ink);
  letter-spacing:normal;
  text-wrap:balance;
}
a{color:var(--isl-navy)}
a:hover{color:#141F33}
::selection{background:var(--isl-navy);color:var(--isl-ivory)}

/* Remove gaps the theme adds around the header and footer */
.wp-site-blocks{padding-top:0;padding-bottom:0}
.wp-site-blocks > header,
.wp-site-blocks > footer,
.wp-site-blocks > main{margin-block-start:0}

/* Lets our sections run edge to edge, whatever box they sit in */
.wp-site-blocks .isl-full,
.editor-styles-wrapper .isl-full,
.isl-full{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  position:static !important;
  left:auto !important;
  box-sizing:border-box;
}
.isl-full *{box-sizing:border-box}
/* Remove padding/colour from any box that holds one of our sections */
.wp-block-template-part:has(.isl-full),
.wp-block-group:has(> .isl-full),
.wp-block-group:has(> .wp-block-template-part > .isl-full){
  padding:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  background:transparent !important;
  max-width:none !important;
  border:0 !important;
}

/* Small spaced capitals used across the site */
.isl-label{
  font-family:var(--isl-sans);
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--isl-label);
}

/* ---------- 3. Header ---------- */
.isl-header{background:var(--isl-navy);padding:0 var(--isl-gutter);color:var(--isl-mist)}
.isl-topbar{
  display:flex;justify-content:space-between;align-items:center;
  min-height:56px;border-bottom:1px solid rgba(251,249,246,.18);
  font-family:var(--isl-sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
}
.isl-topbar a{text-decoration:none;color:var(--isl-mist)}
.isl-topbar a:hover{color:#fff}
.isl-topbar-left{display:flex;gap:32px;align-items:center}
.isl-topbar .isl-cta{color:var(--isl-ivory);border-bottom:1px solid var(--isl-ivory);padding-bottom:3px}
.isl-topnav{display:flex;gap:40px;letter-spacing:.26em}
.isl-topnav a{color:var(--isl-ivory)}
.isl-mast{display:flex;flex-direction:column;align-items:center;gap:18px;padding:56px 0 52px;text-decoration:none}
.isl-wordmark{
  font-family:var(--isl-serif);font-weight:400;
  font-size:clamp(44px,8.9vw,128px);line-height:1;
  letter-spacing:.14em;padding-left:.14em;color:var(--isl-ivory);
}
.isl-tagline{font-family:var(--isl-serif);font-size:19px;letter-spacing:.04em;color:#E3E7EF}
.isl-mobile-nav{display:none}

/* ---------- 4. Feature story (Query Loop with class isl-feature) ---------- */
.isl-feature{padding:96px var(--isl-gutter) 104px;background:var(--isl-stone)}
.isl-feature .wp-block-post-template{margin:0;padding:0;list-style:none}
.isl-feature .wp-block-post{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:72px;align-items:center;
}
.isl-feature .wp-block-post-featured-image{margin:0;aspect-ratio:5/4;overflow:hidden;background:#7A6B5D}
.isl-feature .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.isl-feature .isl-feature-text{display:flex;flex-direction:column;gap:22px}
.isl-feature .wp-block-post-title{font-size:clamp(34px,3.8vw,54px);line-height:1.14;margin:0}
.isl-feature .wp-block-post-title a{text-decoration:none;color:var(--isl-ink)}
.isl-feature .wp-block-post-excerpt{font-size:18px;line-height:1.75;color:var(--isl-soft);max-width:480px}
.isl-feature .wp-block-post-excerpt__more-link,
.isl-feature .wp-block-read-more{
  display:inline-block;margin-top:8px;padding:14px 2px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--isl-navy);text-decoration:none;border-bottom:1px solid var(--isl-navy);
}

/* Category + date line (used in feature and story grid) */
.isl-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.wp-block-post-terms,
.wp-block-post-date{
  font-family:var(--isl-sans);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--isl-label);margin:0;
}
.wp-block-post-terms a{color:var(--isl-navy);text-decoration:none}

/* ---------- 5. "From the magazine" ---------- */
.isl-section-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-top:1px solid var(--isl-navy);padding-top:24px;margin:0 0 40px;
}
.isl-section-head h2{font-size:clamp(27px,2.8vw,40px);margin:0}
.isl-section-head a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--isl-navy)}
.isl-stories-wrap{padding:0 var(--isl-gutter) 120px;background:var(--isl-stone)}
.isl-stories .wp-block-post-template{margin:0;padding:0;list-style:none;gap:32px}
.isl-stories .wp-block-post{display:flex;flex-direction:column;gap:14px}
.isl-stories .wp-block-post-featured-image{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--isl-navy)}
.isl-stories .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.isl-stories .wp-block-post-title{font-size:28px;line-height:1.2;margin:0}
.isl-stories .wp-block-post-title a{text-decoration:none;color:var(--isl-ink)}
.isl-stories .wp-block-post-terms,
.isl-stories .wp-block-post-date{font-size:11px}

/* ---------- 6. Philosophy band ---------- */
.isl-philosophy{
  background:var(--isl-navy);padding:128px var(--isl-gutter);
  display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;
}
.isl-philosophy .isl-label{color:var(--isl-mist-2);letter-spacing:.3em}
.isl-philosophy p.isl-quote{
  margin:0;font-family:var(--isl-serif);font-style:italic;
  font-size:clamp(28px,3.2vw,46px);line-height:1.3;color:var(--isl-ivory);max-width:980px;
}
.isl-philosophy a{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  color:var(--isl-ivory);border-bottom:1px solid var(--isl-ivory);padding:12px 2px;
}

/* ---------- 7. Studio ISLADONA band ---------- */
.isl-studio{background:var(--isl-stone);padding:120px var(--isl-gutter)}
.isl-studio-inner{
  border-top:1px solid var(--isl-navy);border-bottom:1px solid var(--isl-navy);
  padding:56px 0;display:grid;grid-template-columns:300px minmax(0,1fr) auto;gap:56px;align-items:center;
}
.isl-studio-mark{display:flex;flex-direction:column;gap:10px}
.isl-studio-mark small{font-size:11px;letter-spacing:.6em;color:var(--isl-label)}
.isl-studio-mark b{font-family:var(--isl-serif);font-weight:400;font-size:40px;letter-spacing:.12em;line-height:1;color:var(--isl-ink)}
.isl-studio p{margin:0;font-size:17px;line-height:1.75;color:var(--isl-soft);max-width:560px}
.isl-btn{
  display:inline-block;background:var(--isl-navy);color:var(--isl-ivory) !important;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  padding:18px 28px;white-space:nowrap;
}
.isl-btn:hover{background:#141F33}

/* ---------- 8. Newsletter ---------- */
.isl-newsletter{
  background:var(--isl-navy);padding:112px var(--isl-gutter);
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;color:var(--isl-mist);
}
.isl-newsletter .isl-label{color:var(--isl-mist-2);letter-spacing:.3em}
.isl-newsletter h2{font-size:clamp(34px,3.6vw,52px);line-height:1.1;color:var(--isl-ivory);margin:0}
.isl-newsletter p{margin:0;font-size:17px;color:var(--isl-mist)}
.isl-newsletter input[type="email"],
.isl-newsletter input[type="text"]{
  background:transparent !important;border:0 !important;border-bottom:1px solid var(--isl-ivory) !important;
  border-radius:0 !important;color:var(--isl-ivory) !important;font-family:var(--isl-sans) !important;
  font-size:16px !important;padding:16px 0 !important;min-width:min(420px,100%);
}
.isl-newsletter input::placeholder{color:var(--isl-mist-2)}
.isl-newsletter button,
.isl-newsletter input[type="submit"]{
  background:var(--isl-ivory) !important;color:var(--isl-navy) !important;border:0 !important;
  border-radius:0 !important;font-family:var(--isl-sans) !important;font-size:12px !important;
  letter-spacing:.24em !important;text-transform:uppercase !important;padding:16px 28px !important;cursor:pointer;
}

/* ---------- 9. Footer ---------- */
.isl-footer{
  background:var(--isl-navy);padding:72px var(--isl-gutter) 48px;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
  border-top:1px solid rgba(251,249,246,.18);
}
.isl-footer-mark{
  font-family:var(--isl-serif);font-size:clamp(44px,8.3vw,120px);line-height:1;
  letter-spacing:.12em;padding-left:.12em;color:var(--isl-ivory);
}
.isl-footer-motto{font-family:var(--isl-serif);font-style:italic;font-size:20px;color:#E3E7EF}
.isl-footer-cols{
  width:100%;margin-top:48px;padding-top:32px;border-top:1px solid rgba(251,249,246,.18);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;text-align:left;
}
.isl-footer-cols div{display:flex;flex-direction:column;gap:12px}
.isl-footer-cols span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--isl-mist-2)}
.isl-footer-cols a{text-decoration:none;color:var(--isl-ivory);font-size:15px}
.isl-footer-legal{
  width:100%;margin-top:40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8E9AB2;
}
.isl-footer-legal a{color:#8E9AB2;text-decoration:none;margin-left:28px}
.isl-footer-legal a:first-child{margin-left:0}

/* ---------- 10. Tablet ---------- */
@media (max-width:1000px){
  .isl-feature .wp-block-post{grid-template-columns:1fr;gap:32px}
  .isl-studio-inner{grid-template-columns:1fr;gap:20px}
  .isl-studio-inner .isl-btn{justify-self:start}
  .isl-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 11. Phone ---------- */
@media (max-width:720px){
  .isl-topbar{min-height:48px;font-size:10px;letter-spacing:.2em}
  .isl-topbar-left{gap:20px}
  .isl-topnav{display:none}
  .isl-mast{padding:30px 0 20px;gap:12px}
  .isl-tagline{font-size:13px}
  .isl-mobile-nav{
    display:flex;justify-content:space-between;padding:6px 0;
    border-top:1px solid rgba(251,249,246,.18);
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  }
  .isl-mobile-nav a{color:var(--isl-ivory);text-decoration:none;padding:12px 0}
  .isl-feature{padding:32px var(--isl-gutter) 56px}
  .isl-feature .wp-block-post-excerpt{font-size:16px}
  .isl-stories-wrap{padding-bottom:72px}
  .isl-section-head{margin-bottom:28px;padding-top:18px}
  .isl-stories .wp-block-post-template{grid-template-columns:1fr !important;gap:40px}
  .isl-stories .wp-block-post-title{font-size:23px}
  .isl-philosophy{padding:80px 28px;gap:22px}
  .isl-studio{padding:72px var(--isl-gutter)}
  .isl-studio-inner{padding:36px 0}
  .isl-studio-mark b{font-size:30px}
  .isl-studio p{font-size:15px}
  .isl-newsletter{padding:72px var(--isl-gutter);gap:16px}
  .isl-newsletter input[type="email"],
  .isl-newsletter button{width:100%}
  .isl-footer{padding:48px var(--isl-gutter) 36px;gap:12px}
  .isl-footer-motto{font-size:15px}
  .isl-footer-cols{gap:28px 16px;margin-top:24px;padding-top:24px}
  .isl-footer-cols a{font-size:14px}
  .isl-footer-legal{justify-content:center;text-align:center;font-size:9px}
}

/* ---------- 12. Priority fixes (keep theme styles from overriding ours) ---------- */
.isl-header, .isl-header *,
.isl-footer, .isl-footer *,
.isl-philosophy, .isl-philosophy *,
.isl-studio, .isl-studio *,
.isl-newsletter, .isl-newsletter *,
.isl-section-head, .isl-section-head *{
  font-family:var(--isl-sans) !important;
}
.isl-wordmark, .isl-tagline,
.isl-footer-mark, .isl-footer-motto,
.isl-philosophy .isl-quote,
.isl-studio-mark b,
.isl-section-head h2,
.isl-newsletter h2{
  font-family:var(--isl-serif) !important;
}
.isl-header a, .isl-topnav a, .isl-mobile-nav a{color:var(--isl-ivory) !important;text-decoration:none !important}
.isl-topbar-left a{color:var(--isl-mist) !important}
.isl-topbar-left .isl-cta{color:var(--isl-ivory) !important}
.isl-footer-cols a{color:var(--isl-ivory) !important;text-decoration:none !important}
.isl-footer-cols a:hover{color:#fff !important}
.isl-footer-cols span{color:var(--isl-mist-2) !important}
.isl-footer-legal, .isl-footer-legal a{color:#8E9AB2 !important;text-decoration:none !important}
.isl-footer-mark{color:var(--isl-ivory) !important}
.isl-footer-motto{color:#E3E7EF !important}
.isl-philosophy a{color:var(--isl-ivory) !important}

/* ---------- 13. Homepage sections: full width inside ---------- */
.isl-full.is-layout-constrained > *,
.isl-full .is-layout-constrained > *,
.isl-full .is-layout-flow > *{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ---------- 14. Homepage (Custom HTML version) ---------- */
.islh, .islh *{font-family:var(--isl-sans) !important;box-sizing:border-box}
.islh h1, .islh h2, .islh h3, .islh h1 a, .islh h2 a, .islh h3 a, .islh-philosophy p, .islh-studio-mark b{font-family:var(--isl-serif) !important;font-weight:400 !important}
.islh a{text-decoration:none !important}
.islh img{display:block;width:100%;height:100%;object-fit:cover}

.islh-feature{background:var(--isl-stone);padding:96px var(--isl-gutter) 104px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:72px;align-items:center}
.islh-feature-img{display:block;aspect-ratio:5/4;overflow:hidden;background:#7A6B5D}
.islh-feature-text{display:flex;flex-direction:column;gap:22px}
.islh-feature h1{margin:0;font-size:clamp(34px,3.8vw,54px);line-height:1.14;color:var(--isl-ink)}
.islh-feature h1 a{color:var(--isl-ink) !important}
.islh-feature-text p{margin:0;font-size:18px;line-height:1.75;color:var(--isl-soft);max-width:480px}
.islh-more{align-self:flex-start;margin-top:8px;padding:14px 2px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--isl-navy) !important;border-bottom:1px solid var(--isl-navy)}

.islh-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--isl-label)}
.islh-meta a{color:var(--isl-navy) !important}
.islh-meta i{font-style:normal;color:#B9BFCB}

.islh-stories{background:var(--isl-stone);padding:0 var(--isl-gutter) 120px}
.islh-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--isl-navy);padding-top:24px;margin-bottom:40px}
.islh-head h2{margin:0;font-size:clamp(27px,2.8vw,40px);color:var(--isl-ink)}
.islh-head a{white-space:nowrap;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--isl-navy) !important}
.islh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.islh-grid:has(> article:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.islh-grid article{display:flex;flex-direction:column;gap:14px}
.islh-img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--isl-navy)}
.islh-grid .islh-meta{font-size:11px}
.islh-grid h3{margin:0;font-size:28px;line-height:1.2}
.islh-grid h3 a{color:var(--isl-ink) !important}

.islh-philosophy{background:var(--isl-navy);padding:128px var(--isl-gutter);display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.islh-label{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--isl-mist-2)}
.islh-philosophy p{margin:0;font-style:italic;font-size:clamp(28px,3.2vw,46px);line-height:1.3;color:var(--isl-ivory);max-width:980px}
.islh-philosophy a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--isl-ivory) !important;border-bottom:1px solid var(--isl-ivory);padding:12px 2px}

.islh-studio{background:var(--isl-stone);padding:120px var(--isl-gutter)}
.islh-studio-inner{border-top:1px solid var(--isl-navy);border-bottom:1px solid var(--isl-navy);padding:56px 0;display:grid;grid-template-columns:300px minmax(0,1fr) auto;gap:56px;align-items:center}
.islh-studio-mark{display:flex;flex-direction:column;gap:10px}
.islh-studio-mark small{font-size:11px;letter-spacing:.6em;color:var(--isl-label)}
.islh-studio-mark b{font-size:40px;letter-spacing:.12em;line-height:1;color:var(--isl-ink)}
.islh-studio p{margin:0;font-size:17px;line-height:1.75;color:var(--isl-soft);max-width:560px}
.islh-btn{display:inline-block;background:var(--isl-navy);color:var(--isl-ivory) !important;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:18px 28px;white-space:nowrap}

.islh-news-text{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.islh-news-text *{font-family:var(--isl-sans) !important}
.islh-news-text h2{margin:0;font-family:var(--isl-serif) !important;font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1.1;color:var(--isl-ivory)}
.islh-news-text p{margin:0;font-size:17px;color:var(--isl-mist)}
.isl-newsletter form{margin-top:12px;width:min(560px,100%)}

@media (max-width:1000px){
  .islh-feature{grid-template-columns:1fr;gap:32px}
  .islh-studio-inner{grid-template-columns:1fr;gap:20px}
  .islh-studio-inner .islh-btn{justify-self:start}
}
@media (max-width:720px){
  .islh-feature{padding:32px var(--isl-gutter) 56px;gap:24px}
  .islh-feature-text{gap:18px}
  .islh-feature-text p{font-size:16px}
  .islh-meta{font-size:11px;letter-spacing:.2em}
  .islh-stories{padding-bottom:72px}
  .islh-head{padding-top:18px;margin-bottom:28px}
  .islh-grid,.islh-grid:has(> article:nth-child(2):last-child){grid-template-columns:1fr;gap:40px}
  .islh-img{aspect-ratio:4/3}
  .islh-grid h3{font-size:23px}
  .islh-philosophy{padding:80px 28px;gap:22px}
  .islh-studio{padding:72px var(--isl-gutter)}
  .islh-studio-inner{padding:36px 0}
  .islh-studio-mark b{font-size:30px}
  .islh-studio p{font-size:15px}
}