/* =========================================================
   Unravelled theme — main.css
   Merged from the approved homepage + article design drafts.
   ========================================================= */


  :root{
    --ink:#14171C;
    --ink-2:#1B1F26;
    --paper:#F3EFE4;
    --gold:#C6A15B;
    --jade:#3E5C4E;
    --mist:#7FA8B3;
    --text:#EDE8DC;
    --text-dim:#A9A79C;
    --glass-bg: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.14);
    --radius-lg: 32px;
    --radius-md: 22px;
    --radius-sm: 14px;
    --radius-pill: 999px;
  }
  :root:not([data-theme="light"]){
    color-scheme: dark;
  }
  :root[data-theme="light"]{
    --ink:#F3EFE4;
    --ink-2:#EAE5D8;
    --text:#1B1F26;
    --text-dim:#5A574C;
    --glass-bg: rgba(20,23,28,0.05);
    --glass-border: rgba(20,23,28,0.12);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink);
    color:var(--text);
    font-family:'Manrope',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--gold);color:var(--ink);}
  a{color:inherit;text-decoration:none;}
  img,.ph{max-width:100%;}

  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    line-height:1.05;
    margin:0;
    letter-spacing:-0.01em;
  }

  .wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- NAV ---------- */
  .nav-shell{
    position:sticky;
    top:20px;
    z-index:50;
    padding:0 20px;
    display:flex;
    justify-content:center;
  }
  nav{
    width:100%;
    max-width:1180px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:10px 12px 10px 22px;
    border-radius:var(--radius-pill);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  }
  .brand{
    font-family:'Fraunces',serif;
    font-size:20px;
    font-weight:500;
    letter-spacing:0.01em;
    white-space:nowrap;
  }
  .nav-links{
    display:flex;
    gap:4px;
    list-style:none;
    margin:0;padding:0;
    font-size:14px;
  }
  .nav-links a{
    padding:9px 16px;
    border-radius:var(--radius-pill);
    color:var(--text-dim);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav-links a:hover, .nav-links a.active{
    background:rgba(255,255,255,0.09);
    color:var(--text);
  }
  .nav-cta{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .icon-btn{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    color:var(--text-dim);
  }
  .icon-btn:hover{background:rgba(255,255,255,0.09);color:var(--text);}
  .pill-btn{
    background:var(--gold);
    color:var(--ink);
    padding:10px 20px;
    border-radius:var(--radius-pill);
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
  }

  @media (max-width:760px){
    .nav-links{display:none;}
    .brand{font-size:17px;}
  }

  /* ---------- HERO ---------- */
  .hero-section{
    padding:28px 20px 0;
  }
  .hero{
    position:relative;
    max-width:1240px;
    margin:0 auto;
    border-radius:var(--radius-lg);
    overflow:hidden;
    min-height:640px;
    display:flex;
    align-items:flex-end;
    background:
      radial-gradient(circle at 18% 20%, rgba(255,255,255,0.10), transparent 40%),
      linear-gradient(180deg, rgba(20,23,28,0) 0%, rgba(20,23,28,0.15) 45%, rgba(20,23,28,0.92) 100%),
      linear-gradient(120deg, #0F2A22 0%, #23483A 35%, #1B3B4A 65%, #10222B 100%);
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(ellipse 700px 400px at 75% 15%, rgba(198,161,91,0.18), transparent 60%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 2px, transparent 2px, transparent 14px);
    mix-blend-mode:overlay;
  }
  .hero-content{
    position:relative;
    z-index:2;
    padding:56px 56px 52px;
    max-width:720px;
  }
  .tag-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.22);
    backdrop-filter:blur(10px);
    padding:7px 16px 7px 12px;
    border-radius:var(--radius-pill);
    font-size:13px;
    font-weight:600;
    margin-bottom:22px;
  }
  .tag-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}
  .hero h1{
    font-size:clamp(34px, 5vw, 58px);
    color:#fff;
    margin-bottom:18px;
  }
  .hero p{
    font-size:17px;
    color:rgba(255,255,255,0.78);
    max-width:520px;
    line-height:1.55;
    margin-bottom:26px;
  }
  .byline{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13px;
    color:rgba(255,255,255,0.65);
  }
  .avatar{
    width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,#C6A15B,#7FA8B3);
  }

  /* ---------- ISSUE STRIP ---------- */
  .strip-section{padding:64px 0 8px;}
  .strip-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:22px;
  }
  .strip-head h2{font-size:24px;}
  .strip-head span{font-size:13px;color:var(--text-dim);}
  .issue-scroll{
    display:flex;
    gap:18px;
    overflow-x:auto;
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .issue-scroll::-webkit-scrollbar{display:none;}
  .issue-card{
    flex:0 0 auto;
    width:220px;
  }
  .issue-thumb{
    width:220px;height:290px;
    border-radius:var(--radius-md);
    margin-bottom:14px;
    position:relative;
    overflow:hidden;
  }
  .issue-thumb .num{
    position:absolute;
    bottom:14px;left:14px;
    font-family:'Fraunces',serif;
    font-size:15px;
    color:#fff;
  }
  .issue-card h3{font-size:15px;font-weight:500;margin-bottom:4px;color:var(--text);}
  .issue-card p{font-size:12.5px;color:var(--text-dim);margin:0;}

  /* photo placeholder textures, standing in for real photography */
  .ph-canopy{background:linear-gradient(155deg,#0E2A20,#1F4536 45%,#0B1E18 100%);}
  .ph-reef{background:linear-gradient(155deg,#0B2A38,#1C5568 40%,#0A1E2A 100%);}
  .ph-peak{background:linear-gradient(155deg,#26313B,#4A5D63 40%,#12181D 100%);}
  .ph-market{background:linear-gradient(155deg,#3A2A14,#7A5626 45%,#241708 100%);}
  .ph-ritual{background:linear-gradient(155deg,#331522,#7A3350 45%,#1E0B15 100%);}
  .ph-monsoon{background:linear-gradient(155deg,#101E2E,#2C4E63 45%,#0A1420 100%);}
  .ph-terrace{background:linear-gradient(155deg,#1B2A16,#4C6B33 45%,#0F1A0C 100%);}
  .ph-dusk{background:linear-gradient(155deg,#2A1710,#7A4A24 45%,#160D08 100%);}
  [class*="ph-"]::after{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 55%);
  }
  [class*="ph-"]{position:relative;}

  /* ---------- FEATURE GRID ---------- */
  .grid-section{padding:80px 0 8px;}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:32px;
    gap:20px;
  }
  .section-head h2{font-size:30px;}
  .section-head p{font-size:14px;color:var(--text-dim);max-width:340px;line-height:1.5;margin:0;}

  .feature-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap:24px;
  }
  .big-story{
    border-radius:var(--radius-lg);
    min-height:520px;
    display:flex;
    align-items:flex-end;
    padding:38px;
  }
  .big-story .tag-pill{background:rgba(255,255,255,0.16);}
  .big-story h3{
    font-size:32px;
    color:#fff;
    max-width:440px;
    margin:16px 0 10px;
  }
  .big-story .meta{font-size:12.5px;color:rgba(255,255,255,0.7);}

  .stack{
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .small-story{
    border-radius:var(--radius-lg);
    min-height:248px;
    display:flex;
    align-items:flex-end;
    padding:26px;
  }
  .small-story h3{font-size:20px;color:#fff;max-width:300px;margin:10px 0 6px;}
  .small-story .meta{font-size:12px;color:rgba(255,255,255,0.68);}
  .small-story .tag-pill{padding:5px 12px 5px 10px;font-size:11.5px;margin-bottom:12px;}

  /* ---------- REGION FILTER ---------- */
  .region-section{padding:88px 0 8px;}
  .region-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:40px;
  }
  .region-pill{
    padding:10px 20px;
    border-radius:var(--radius-pill);
    border:1px solid var(--glass-border);
    background:var(--glass-bg);
    font-size:13.5px;
    color:var(--text-dim);
  }
  .region-pill.active{
    background:var(--gold);
    color:var(--ink);
    border-color:var(--gold);
    font-weight:600;
  }

  .story-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .story-card .thumb{
    border-radius:var(--radius-md);
    height:280px;
    margin-bottom:16px;
  }
  .story-card.tall .thumb{height:360px;}
  .story-card .cat{
    font-size:12px;
    color:var(--gold);
    font-weight:600;
    margin-bottom:8px;
  }
  .story-card h3{
    font-size:19px;
    font-weight:500;
    margin-bottom:8px;
  }
  .story-card p{
    font-size:13.5px;
    color:var(--text-dim);
    line-height:1.5;
    margin:0;
  }

  /* ---------- NEWSLETTER ---------- */
  .news-section{padding:96px 20px;}
  .news-panel{
    max-width:900px;
    margin:0 auto;
    border-radius:var(--radius-lg);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(20px);
    padding:64px 60px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .news-panel::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 15% 20%, rgba(198,161,91,0.16), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(127,168,179,0.14), transparent 45%);
  }
  .news-panel > *{position:relative;z-index:2;}
  .news-panel h2{font-size:34px;margin-bottom:14px;}
  .news-panel p{font-size:15px;color:var(--text-dim);max-width:440px;margin:0 auto 30px;line-height:1.6;}
  .news-form{
    display:flex;
    gap:10px;
    max-width:420px;
    margin:0 auto;
  }
  .news-form input{
    flex:1;
    padding:14px 20px;
    border-radius:var(--radius-pill);
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.05);
    color:var(--text);
    font-family:'Manrope',sans-serif;
    font-size:14px;
    outline:none;
  }
  .news-form input::placeholder{color:var(--text-dim);}
  .news-form button{
    background:var(--gold);
    color:var(--ink);
    border:none;
    padding:14px 26px;
    border-radius:var(--radius-pill);
    font-weight:600;
    font-size:14px;
    font-family:'Manrope',sans-serif;
    cursor:pointer;
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:60px 0 40px;
    border-top:1px solid var(--glass-border);
    margin-top:40px;
  }
  .foot-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:32px;
    margin-bottom:48px;
  }
  .foot-grid h4{
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--text-dim);
    margin-bottom:16px;
    font-weight:600;
  }
  .foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .foot-grid a{font-size:13.5px;color:var(--text-dim);}
  .foot-grid a:hover{color:var(--text);}
  .foot-brand .brand{font-size:22px;display:block;margin-bottom:12px;}
  .foot-brand p{font-size:13.5px;color:var(--text-dim);max-width:260px;line-height:1.6;}
  .foot-bottom{
    display:flex;
    justify-content:space-between;
    font-size:12.5px;
    color:var(--text-dim);
    flex-wrap:wrap;
    gap:12px;
  }

  @media (max-width:900px){
    .feature-grid{grid-template-columns:1fr;}
    .story-grid{grid-template-columns:1fr 1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
  

/* ---- Article-only components ---- */
  /* ARTICLE HEADER (pre-image) */
  .article-header{
    max-width:820px;
    margin:56px auto 32px;
    padding:0 24px;
    text-align:center;
  }
  .tag-pill{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--glass-bg);border:1px solid var(--glass-border);
    padding:7px 16px 7px 12px;border-radius:var(--radius-pill);
    font-size:13px;font-weight:600;color:var(--gold);margin-bottom:22px;
  }
  .tag-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}
  .article-header h1{
    font-size:clamp(32px, 4.6vw, 52px);
    margin-bottom:20px;
  }
  .dek{
    font-size:18px;
    color:var(--text-dim);
    max-width:560px;
    margin:0 auto 28px;
    line-height:1.6;
  }
  .byline-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    font-size:13.5px;
    color:var(--text-dim);
  }
  .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#C6A15B,#7FA8B3);}
  .byline-name{color:var(--text);font-weight:600;}
  .byline-sep{opacity:0.5;}

  /* HERO IMAGE */
  .hero-figure{
    max-width:1240px;
    margin:0 auto;
    padding:0 20px;
  }
  .hero-figure img{
    width:100%;
    display:block;
    border-radius:var(--radius-lg);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  }
  .hero-caption{
    display:flex;
    justify-content:space-between;
    font-size:12.5px;
    color:var(--text-dim);
    max-width:1240px;
    margin:14px auto 0;
    padding:0 24px;
  }

  /* ARTICLE BODY */
  .article-body{
    padding:64px 0 40px;
    font-size:18px;
    line-height:1.75;
    color:var(--text);
  }
  .article-body p{margin:0 0 26px;}
  .drop-cap::first-letter{
    font-family:'Fraunces',serif;
    font-size:76px;
    font-weight:500;
    float:left;
    line-height:0.8;
    padding:8px 10px 0 0;
    color:var(--gold);
  }
  .article-body h2{
    font-size:28px;
    margin:52px 0 20px;
  }
  .pull-quote{
    font-family:'Fraunces',serif;
    font-size:29px;
    font-weight:500;
    line-height:1.35;
    color:var(--paper);
    margin:48px 0;
    padding-left:26px;
    border-left:3px solid var(--gold);
  }
  .pull-quote span{
    display:block;
    font-family:'Manrope',sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--text-dim);
    margin-top:14px;
  }

  figure.inline-figure{
    margin:48px -24px;
  }
  figure.inline-figure img{
    width:100%;
    border-radius:var(--radius-md);
    display:block;
  }
  figure.inline-figure figcaption{
    font-size:12.5px;
    color:var(--text-dim);
    margin-top:12px;
    padding:0 24px;
  }

  .stat-glass{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin:48px 0;
    padding:28px;
    border-radius:var(--radius-md);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(16px);
  }
  .stat-item{text-align:center;}
  .stat-item .num{
    font-family:'Fraunces',serif;
    font-size:32px;
    color:var(--gold);
    display:block;
    margin-bottom:6px;
  }
  .stat-item .label{
    font-size:12px;
    color:var(--text-dim);
    line-height:1.4;
  }

  /* TAGS + SHARE */
  .article-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    padding-top:32px;
    margin-top:12px;
    border-top:1px solid var(--glass-border);
  }
  .topic-tags{display:flex;gap:8px;flex-wrap:wrap;}
  .topic-tags a{
    font-size:12.5px;
    padding:8px 14px;
    border-radius:var(--radius-pill);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    color:var(--text-dim);
  }
  .share-row{display:flex;gap:8px;}
  .share-row .icon-btn{background:var(--glass-bg);border:1px solid var(--glass-border);}

  /* AUTHOR CARD */
  .author-card{
    max-width:760px;
    margin:56px auto 0;
    padding:28px 24px;
  }
  .author-inner{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding:26px;
    border-radius:var(--radius-md);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
  }
  .author-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#C6A15B,#7FA8B3);flex-shrink:0;}
  .author-inner h4{font-size:15px;margin-bottom:6px;font-family:'Manrope',sans-serif;font-weight:700;}
  .author-inner p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0;}

  /* RELATED */
  .related-section{padding:80px 0 8px;}
  .section-head{margin-bottom:32px;}
  .section-head h2{font-size:26px;}
  .related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .related-card .thumb{
    border-radius:var(--radius-md);
    height:230px;
    margin-bottom:16px;
    position:relative;
  }
  [class*="ph-"]{position:relative;}
  [class*="ph-"]::after{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 55%);
  }
  .ph-canopy{background:linear-gradient(155deg,#0E2A20,#1F4536 45%,#0B1E18 100%);}
  .ph-reef{background:linear-gradient(155deg,#0B2A38,#1C5568 40%,#0A1E2A 100%);}
  .ph-peak{background:linear-gradient(155deg,#26313B,#4A5D63 40%,#12181D 100%);}
  .related-card .cat{font-size:12px;color:var(--gold);font-weight:600;margin-bottom:8px;}
  .related-card h3{font-size:18px;font-weight:500;margin-bottom:6px;}
  .related-card p{font-size:13px;color:var(--text-dim);margin:0;line-height:1.5;}

  footer{padding:60px 0 40px;border-top:1px solid var(--glass-border);margin-top:60px;}
  .foot-bottom{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);flex-wrap:wrap;gap:12px;padding:0 32px;max-width:1280px;margin:0 auto;}



  /* MOBILE NAV PANEL + SEARCH OVERLAY (theme-only additions) */
  .mobile-panel{
    display:none;
    position:fixed;
    top:90px; left:20px; right:20px;
    z-index:49;
    background:var(--ink-2, var(--ink));
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    padding:18px;
    backdrop-filter:blur(24px);
  }
  .mobile-panel.is-open{display:block;}
  .mobile-nav-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
  .mobile-nav-links a{display:block;padding:14px 10px;color:var(--text);border-bottom:1px solid var(--glass-border);font-size:15px;}
  .mobile-nav-links li:last-child a{border-bottom:none;}

  .search-overlay{
    display:none;
    position:fixed; inset:0;
    z-index:100;
    background:rgba(10,12,15,0.72);
    backdrop-filter:blur(10px);
    align-items:flex-start;
    justify-content:center;
    padding-top:14vh;
  }
  .search-overlay.is-open{display:flex;}
  .search-overlay-form{width:90%;max-width:560px;}
  .search-overlay-form input{
    width:100%;
    padding:20px 26px;
    font-size:22px;
    font-family:'Fraunces',serif;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-pill);
    color:var(--text);
    outline:none;
  }

  @media (min-width:761px){
    .mobile-panel, #unravelled-menu-toggle{display:none;}
  }

  /* WP core / content defaults inside post body */
  .article-body img{max-width:100%;height:auto;border-radius:var(--radius-md);}
  .article-body a{color:var(--gold);text-decoration:underline;}
  .article-body ul, .article-body ol{margin:0 0 26px;padding-left:22px;}
  .article-body blockquote{
    font-family:'Fraunces',serif;
    font-size:22px;
    border-left:3px solid var(--gold);
    padding-left:22px;
    margin:36px 0;
    color:var(--paper, var(--text));
  }
  .wp-caption{max-width:100%;}
  .wp-caption-text{font-size:12.5px;color:var(--text-dim);margin-top:10px;}
  .alignwide{max-width:1000px;margin-left:calc(50% - 500px);}
  .alignfull{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}

  /* Basic comment form styling to match the theme */
  #comments{max-width:760px;margin:0 auto;padding:0 24px;}
  #comments .comment-list{list-style:none;margin:0;padding:0;}
  #comments textarea, #comments input[type="text"], #comments input[type="email"], #comments input[type="url"]{
    width:100%;
    padding:12px 16px;
    border-radius:var(--radius-sm);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    color:var(--text);
    font-family:'Manrope',sans-serif;
    margin-bottom:12px;
  }
  #comments .form-submit input[type="submit"]{
    background:var(--gold);color:var(--ink);border:none;
    padding:12px 24px;border-radius:var(--radius-pill);font-weight:600;cursor:pointer;width:auto;
  }

/* ---- Responsive ---- */

  @media (max-width:900px){
    .feature-grid{grid-template-columns:1fr;}
    .story-grid{grid-template-columns:1fr 1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .related-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .wrap{padding:0 18px;}
    .hero-content{padding:36px 24px 34px;}
    .article-header{padding:0 18px;}
    .article-body{font-size:16.5px;}
    .pull-quote{font-size:23px;}
    figure.inline-figure{margin:40px -18px;}
    .stat-glass{grid-template-columns:1fr;}
    .author-inner{flex-direction:column;}
    .story-grid{grid-template-columns:1fr;}
    .related-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .news-panel{padding:44px 26px;}
    .news-form{flex-direction:column;}
  }