/* Loraine Couturier — "The Coast Desk" (BC / Pacific Northwest, bilingual EN/FR) */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,500;0,600;0,700;1,500&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --paper:#F5F3EC;
  --paper-dim:#ECE8DB;
  --forest:#1F3A2E;
  --forest-deep:#142720;
  --fog:#7C8B85;
  --driftwood:#B98B5E;
  --ink:#1B211D;
  --ink-soft:#54594F;
  --ink-faint:#8D9187;
  --line:rgba(27,33,29,.14);
  --white:#FFFFFF;
  --shadow:0 10px 28px rgba(20,39,32,.10);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'Work Sans',sans-serif; background:var(--paper); color:var(--ink);}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
[lang="fr"]{}

/* nav */
.topnav{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:2px solid var(--forest);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:16px; flex-wrap:wrap;}
.nav-logo{font-family:'Spectral',serif; font-weight:600; font-size:1.22rem; text-decoration:none; color:var(--forest);}
.nav-links{display:flex; align-items:center; gap:24px; font-family:'Work Sans',sans-serif; font-size:.86rem; font-weight:500;}
.nav-links a{text-decoration:none; color:var(--ink-soft); border-bottom:2px solid transparent; padding-bottom:3px;}
.nav-links a:hover, .nav-links a.active{color:var(--forest); border-color:var(--driftwood);}
.lang-toggle{
  font-family:'JetBrains Mono',monospace; font-size:.76rem; font-weight:500; letter-spacing:.03em;
  background:var(--forest); color:var(--paper); border:none; border-radius:999px; padding:7px 16px; cursor:pointer;
}
.lang-toggle:hover{background:var(--forest-deep);}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:34px; background:none; border:2px solid var(--forest); border-radius:4px; cursor:pointer;}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--forest); margin:0 auto;}
@media (max-width:820px){
  .nav-toggle{display:flex;}
  .nav-links{position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:2px solid var(--forest); flex-direction:column; align-items:flex-start; gap:0; max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 24px;}
  .nav-links.open{max-height:360px; padding:10px 24px 16px;}
  .nav-links a{width:100%; padding:12px 0; border-bottom:1px solid var(--line);}
  .lang-toggle{margin:12px 0;}
}

/* hero */
.hero{
  position:relative; overflow:hidden; padding:96px 0 72px; border-bottom:2px solid var(--forest);
  background:
    radial-gradient(ellipse at top right, rgba(31,58,46,.06), transparent 55%);
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    repeating-radial-gradient(circle at 82% 18%, transparent 0 26px, rgba(31,58,46,.05) 27px 28px),
    repeating-radial-gradient(circle at 82% 18%, transparent 0 52px, rgba(31,58,46,.04) 53px 54px);
}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center;}
.avatar-ring{width:132px; height:132px; border-radius:50%; border:3px solid var(--forest); display:flex; align-items:center; justify-content:center; background:var(--white); flex-shrink:0;}
.avatar-ring img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
.avatar-mono{font-family:'Spectral',serif; font-size:2.5rem; font-weight:600; color:var(--forest);}
.hero-kicker{font-family:'JetBrains Mono',monospace; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--driftwood); margin:0 0 14px;}
.hero-name{font-family:'Spectral',serif; font-weight:700; font-size:clamp(2.2rem,5.2vw,3.3rem); margin:0 0 16px; line-height:1.05; color:var(--forest-deep);}
.hero-lede{font-size:1.05rem; color:var(--ink-soft); max-width:620px; line-height:1.65; margin:0 0 22px;}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px;}
.tag{font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; border:1.5px solid var(--forest); border-radius:999px; padding:6px 14px; background:var(--white); color:var(--forest-deep);}
.tag.tag-wood{border-color:var(--driftwood); color:#8A5F35;}
@media (max-width:640px){ .hero-inner{grid-template-columns:1fr;} .avatar-ring{width:96px;height:96px;} .avatar-mono{font-size:2rem;} }

/* section shell */
section{padding:80px 0; border-bottom:2px solid var(--line);}
.kicker{font-family:'JetBrains Mono',monospace; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--driftwood); margin:0 0 10px;}
h2{font-family:'Spectral',serif; font-weight:700; font-size:clamp(1.6rem,3.2vw,2.3rem); margin:0 0 18px; color:var(--forest-deep);}
.lede{color:var(--ink-soft); max-width:640px; line-height:1.65; font-size:1.02rem;}

/* BC map card */
.bc-card{
  margin-top:32px; display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:2px solid var(--forest); border-radius:10px; overflow:hidden; background:var(--white);
}
.bc-card-map{
  background:var(--forest); color:var(--paper); padding:36px 30px; position:relative; overflow:hidden;
}
.bc-card-map::before{
  content:''; position:absolute; inset:0; opacity:.16;
  background-image: repeating-radial-gradient(circle at 30% 70%, transparent 0 18px, var(--paper) 19px 20px);
}
.bc-card-map-inner{position:relative; z-index:1;}
.bc-card-map .region{font-family:'Spectral',serif; font-weight:700; font-size:1.6rem; margin-bottom:8px;}
.bc-card-map .sub{font-size:.86rem; color:#C9D4CC; font-family:'JetBrains Mono',monospace;}
.bc-card-body{padding:32px 30px;}
.bc-card-body p{font-size:.95rem; color:var(--ink-soft); line-height:1.65; margin:0;}
@media (max-width:700px){ .bc-card{grid-template-columns:1fr;} }

/* bilingual bridge */
.bridge-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:32px; border:2px solid var(--forest); border-radius:10px; overflow:hidden;}
.bridge-col{padding:30px 28px; background:var(--white);}
.bridge-col:first-child{border-right:2px solid var(--forest);}
.bridge-flag{font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--driftwood); margin-bottom:10px;}
.bridge-col h3{font-family:'Spectral',serif; font-size:1.2rem; margin:0 0 10px; color:var(--forest-deep);}
.bridge-col p{font-size:.92rem; color:var(--ink-soft); line-height:1.6; margin:0;}
@media (max-width:700px){ .bridge-grid{grid-template-columns:1fr;} .bridge-col:first-child{border-right:none; border-bottom:2px solid var(--forest);} }

/* stat strip */
.stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--forest); border:2px solid var(--forest); margin-top:32px;}
.stat-cell{background:var(--paper); padding:28px 20px; text-align:center;}
.stat-cell b{display:block; font-family:'Spectral',serif; font-weight:700; font-size:2.1rem; color:var(--forest-deep);}
.stat-cell span{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-family:'JetBrains Mono',monospace;}
@media (max-width:640px){ .stat-strip{grid-template-columns:1fr;} }

/* root signature */
.sig-list{display:flex; flex-direction:column; margin-top:28px; border-top:1px solid var(--line);}
.sig-row{display:grid; grid-template-columns:220px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); align-items:start;}
.sg-url{font-family:'JetBrains Mono',monospace; font-size:.86rem; color:var(--forest); word-break:break-word;}
.sg-desc{font-size:.94rem; color:var(--ink-soft); line-height:1.55;}
@media (max-width:640px){ .sig-row{grid-template-columns:1fr;} }

/* cta */
.cta-card{margin-top:24px; border:2px solid var(--forest); border-radius:10px; padding:40px; text-align:center; background:var(--white);}
.btn{display:inline-block; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.05em; font-size:.83rem; padding:13px 26px; border-radius:999px; text-decoration:none; border:2px solid var(--forest);}
.btn-solid{background:var(--forest); color:var(--paper);}
.btn-solid:hover{background:var(--forest-deep); border-color:var(--forest-deep);}
.btn-ghost{background:transparent; color:var(--forest);}
.btn-ghost:hover{background:var(--forest); color:var(--paper);}

/* footer */
footer{padding:40px 0; text-align:center; font-size:.82rem; color:var(--ink-faint);}
footer .links{margin-bottom:10px;}
footer .links a{margin:0 10px; text-decoration:none; color:var(--ink-soft);}
footer .links a:hover{color:var(--forest);}

/* shared page bits */
.page-hero{padding:64px 0 48px; border-bottom:2px solid var(--forest);}
.contact-form{max-width:560px; margin-top:24px;}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:6px;}
.form-row input, .form-row textarea{width:100%; border:2px solid var(--forest); border-radius:6px; padding:12px 14px; font-family:'Work Sans',sans-serif; font-size:1rem; background:var(--white); color:var(--ink);}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--driftwood);}
.form-note{font-size:.78rem; color:var(--ink-faint); margin-top:10px;}
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px;}
.contact-card{border:2px solid var(--forest); border-radius:8px; padding:22px;}
.contact-card h3{margin:0 0 8px; font-size:1.05rem; font-family:'Spectral',serif; color:var(--forest-deep);}
.contact-card p{font-size:.88rem; color:var(--ink-soft); margin:0 0 14px;}
@media (max-width:640px){ .contact-grid{grid-template-columns:1fr;} }

.method-list{display:flex; flex-direction:column; margin-top:28px; border-top:1px solid var(--line);}
.method-row{display:grid; grid-template-columns:60px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); align-items:start;}
.method-num{font-family:'Spectral',serif; font-weight:700; font-size:1.6rem; color:var(--driftwood);}
.method-row h3{margin:0 0 6px; font-size:1.05rem; font-family:'Spectral',serif; color:var(--forest-deep);}
.method-row p{margin:0; font-size:.92rem; color:var(--ink-soft); line-height:1.55;}
@media (max-width:640px){ .method-row{grid-template-columns:1fr;} }