/* ==========================================================================
   home.css — brlefebvre.ca root: the public front door to the whole
   practice, not any single story. Self-contained, lean, own tokens
   shared with the other doorway pages by hand rather than by import.
   ========================================================================== */

:root{
  --ink:#1B2430;
  --ink-soft:#3A4655;
  --page:#E9E2D0;
  --page-deep:#DED5BF;
  --rule:#C4B99F;
  --stamp:#B33A2B;
  --pencil:#6E6B60;
  --deep:#141B24;
  --deep-2:#1E2833;
  --measure:34rem;
  --tap:44px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--deep);
  color:#D6DDE4;
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:1.14rem;
  line-height:1.65;
}
img{max-width:100%;display:block;height:auto}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.4rem}
a{color:#E8907F}
a:hover,a:focus{color:#F2AE9C}

header.top{padding:3rem 0 2.2rem}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stamp);margin:0 0 1.1rem;
}

.card{background:var(--page);color:var(--ink);border:1px solid var(--ink);padding:2.1rem 1.6rem 1.9rem;margin:0 0 2.4rem}
.card h1{
  font-family:"Bitter",Georgia,serif;font-weight:800;
  font-size:clamp(2.1rem,10vw,2.9rem);letter-spacing:-.02em;line-height:1.02;margin:0 0 1rem;
}
.card hr{border:0;border-top:2px solid var(--ink);margin:0 0 1.1rem}
.card .sub{font-family:"Newsreader",serif;font-style:italic;font-size:1.28rem;color:var(--ink-soft);margin:0;line-height:1.4}

.prose{padding:0 0 1rem}
.prose p{margin:0 0 1.15rem;font-size:1.08rem;line-height:1.7;color:#C4CDD6}
.prose p:last-child{margin-bottom:0}

/* ---------------------------------------------------- personal gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:2.2rem 0}
.gallery figure{margin:0}
.gallery img{border:1px solid #39454F;aspect-ratio:4/5;object-fit:cover}
.gallery figcaption{
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.06em;
  color:#7C8998;text-align:center;margin-top:.4rem;
}

.doors{margin:2.2rem 0 2.4rem;display:grid;gap:.9rem}
.door{
  display:block;border:1.5px solid #3C4A57;border-left:4px solid var(--stamp);
  background:var(--deep-2);text-decoration:none;min-height:var(--tap);
  transition:border-color .15s ease,background .15s ease;overflow:hidden;
}
.door:hover,.door:focus{background:#243040;border-left-color:#E8907F}
.door .dimg{aspect-ratio:16/8;object-fit:cover;border:0}
.door .dbody{padding:1.1rem 1.25rem}
.door .dk{display:block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--stamp);margin-bottom:.4rem}
.door .dt{display:block;font-family:"Bitter",Georgia,serif;font-weight:700;font-size:1.18rem;color:#fff;margin-bottom:.3rem;line-height:1.25}
.door .dd{display:block;font-family:"Newsreader",serif;font-size:.98rem;color:#9EAAB6;line-height:1.5}
.door .arrow{color:var(--stamp);font-family:"IBM Plex Mono",monospace}

.private-note{
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;line-height:1.7;color:#7C8998;
  text-align:center;margin:0 0 2.4rem;padding:1rem 1.1rem;border:1px dashed #39454F;
}

.more{
  font-family:"Newsreader",serif;font-style:italic;font-size:1.02rem;
  color:#9EAAB6;text-align:center;margin:0 0 2.4rem;
}

.signoff{border-top:1px solid #39454F;padding-top:1.6rem;margin-top:2rem;font-family:"Newsreader",serif;font-style:italic;color:#9EAAB6;font-size:1.05rem}
.signoff b{font-style:normal;color:#D6DDE4}

footer{
  text-align:center;padding:2.6rem 1.4rem 3.2rem;
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:#5C6975;line-height:2;
}
footer a{color:#7C8998}

@media (max-width:480px){
  .gallery{grid-template-columns:1fr 1fr;grid-auto-flow:row}
  .gallery figure:nth-child(3){grid-column:1 / span 2}
  .gallery figure:nth-child(3) img{aspect-ratio:16/9}
}
@media (min-width:560px){
  body{font-size:1.19rem}
  header.top{padding-top:4rem}
  .card{padding:2.6rem 2.2rem 2.2rem}
}