/* ITINWorks — shared layout & component styles */
:root{--cream:#FAF7F2;--earth:#C4833A;--deep:#1A2B2F;--sage:#6B8C7A;--rust:#B54E2A;--gold:#D4A843;--mist:#E8EEE9;--w90:rgba(255,255,255,.9);--w85:rgba(255,255,255,.85);--w80:rgba(255,255,255,.8);--w65:rgba(255,255,255,.65);--w55:rgba(255,255,255,.55);--w50:rgba(255,255,255,.5);--w40:rgba(255,255,255,.4);--w35:rgba(255,255,255,.35);--w30:rgba(255,255,255,.3);--w20:rgba(255,255,255,.2);--w10:rgba(255,255,255,.1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--deep);overflow-x:hidden;line-height:1.6}
a{color:inherit}

/* NAV */
nav{background:var(--deep);padding:20px 60px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
.nav-logo{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--gold);letter-spacing:.08em;text-decoration:none}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{color:rgba(255,255,255,.55);text-decoration:none;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.lang-switch{font-size:.78rem;color:rgba(255,255,255,.4);text-decoration:none;letter-spacing:.06em}
.lang-switch:hover{color:var(--gold)}

/* HERO */
.page-hero{background:var(--deep);padding:80px 60px 72px;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:60px;background:var(--cream);clip-path:ellipse(55% 100% at 50% 100%)}
.breadcrumb{font-size:.78rem;color:rgba(255,255,255,.35);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px}
.breadcrumb a{color:rgba(255,255,255,.35);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{margin:0 8px}
.page-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.7rem,6vw,3.4rem);color:#fff;line-height:1.1;max-width:720px;margin-bottom:20px}
.page-hero h1 em{color:var(--gold);font-style:italic}
.page-hero .subtitle{font-size:1rem;color:rgba(255,255,255,.6);max-width:600px;line-height:1.7}
.meta-row{display:flex;gap:24px;margin-top:28px;flex-wrap:wrap}
.meta-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);font-size:.78rem;padding:6px 14px;letter-spacing:.05em}

/* CONTENT LAYOUT */
.content-wrap{max-width:1100px;margin:0 auto;padding:72px 60px;display:grid;grid-template-columns:1fr 300px;gap:72px;align-items:start}
.page-meta{font-size:.82rem;color:#6a7a7e;margin:0 0 28px;padding-bottom:18px;border-bottom:1px solid rgba(26,43,47,.08)}

/* MAIN CONTENT TYPOGRAPHY */
.main-content h2{font-family:'Playfair Display',serif;font-size:1.9rem;color:var(--deep);line-height:1.2;margin-bottom:18px;padding-top:48px}
.main-content h2:first-of-type{padding-top:0}
.main-content h3{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--deep);margin:36px 0 14px}
.main-content p{font-size:.97rem;color:#3d4f53;line-height:1.8;margin-bottom:18px}
.main-content a{color:var(--rust);text-decoration:underline;text-underline-offset:3px}
.main-content ul,.main-content ol{margin:16px 0 24px 20px;display:flex;flex-direction:column;gap:8px}
.main-content li{font-size:.95rem;color:#3d4f53;line-height:1.7}
.section-divider{border:none;border-top:1px solid #dde8ea;margin:48px 0}

/* CALLOUT BOXES */
.definition-box{background:#fff;border-left:4px solid var(--earth);padding:22px 24px;margin:24px 0 32px}
.def-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--earth);font-weight:500;margin-bottom:8px}
.definition-box p:not(.def-label){font-size:.93rem;color:#3d4f53;line-height:1.75}
.verified-box{background:var(--mist);border:1px solid #c8d8ca;padding:22px 24px;margin:24px 0}
.v-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sage);font-weight:500;margin-bottom:8px}
.verified-box p:not(.v-label){font-size:.93rem;color:#3d4f53;line-height:1.75}
.warning-box{background:#fff9f0;border:1px solid #e8c880;padding:22px 24px;margin:24px 0}
.warn-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--earth);font-weight:500;margin-bottom:8px}
.warning-box p:not(.warn-label){font-size:.93rem;color:#3d4f53;line-height:1.75}
.tip-box{background:var(--deep);padding:22px 24px;margin:24px 0}
.tip-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-weight:500;margin-bottom:8px}
.tip-box p:not(.tip-label){font-size:.93rem;color:rgba(255,255,255,.7);line-height:1.75}

/* SIDEBAR */
.sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:88px}
.sidebar-card{background:#fff;border:1px solid #dde8ea;padding:24px}
.sidebar-card.light{background:var(--mist);border-color:#c8d8ca}
.sidebar-card h4{font-family:'Playfair Display',serif;font-size:1rem;color:var(--deep);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e8eef0}
.sidebar-toc{list-style:none;display:flex;flex-direction:column;gap:0}
.sidebar-toc li{border-bottom:1px solid #eef2f3}
.sidebar-toc li:last-child{border-bottom:none}
.sidebar-toc a{display:block;padding:10px 0;font-size:.85rem;color:#4a5e62;text-decoration:none;transition:color .2s}
.sidebar-toc a:hover{color:var(--earth)}
.sidebar-links{list-style:none;display:flex;flex-direction:column;gap:8px}
.sidebar-links a{font-size:.85rem;color:var(--earth);text-decoration:none}
.sidebar-links a:hover{text-decoration:underline}
.related-article{background:var(--deep);padding:22px;text-decoration:none;display:block;transition:background .2s}
.related-article:hover{background:#243438}
.related-article .nav-label{font-size:.72rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.related-article h4{font-family:'Playfair Display',serif;font-size:1rem;color:#fff;line-height:1.3}

/* FOOTER */
footer{background:var(--deep);padding:48px 60px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.06)}
.footer-logo{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--gold)}
.footer-note{font-size:.78rem;color:rgba(255,255,255,.3);max-width:380px;line-height:1.6;text-align:center}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{color:rgba(255,255,255,.35);text-decoration:none;font-size:.78rem;transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.8)}
.footer-copy{flex:0 0 100%;text-align:center;font-size:.72rem;color:rgba(255,255,255,.22);padding-top:14px;margin-top:4px}

/* RESPONSIVE */
@media(max-width:900px){
  nav{padding:20px 32px}
  .content-wrap{grid-template-columns:1fr;padding:48px 32px;gap:48px}
  .sidebar{position:static}
  .page-hero{padding:60px 32px 72px}
  footer{flex-direction:column;gap:24px;text-align:center;padding:40px 32px}
}
@media(max-width:600px){
  nav{padding:18px 20px}
  .content-wrap{padding:36px 20px}
  .page-hero{padding:48px 20px 96px}
  footer{padding:36px 20px}
}