/* Home-only; loads after style.css */
:root{
  --accent: #FADADD;
  --ink: #222;
}

/* tighten header tagline slightly */
.tagline{
  margin: .25rem 0 .25rem;
  font-family: "VT323", monospace;
  font-size: 20px;
  opacity: .95;
}

/* ===== Hero / Portal ===== */
.portal{
  position: relative;
  max-width: 1100px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
}
.portal-inner{
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 1.75rem 1.25rem;
  text-align: center;
  /* soft CRT vibe */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px);
}
.kicker{
  font-family: "VT323", monospace;
  font-size: 20px;
  margin: 0 0 .25rem;
  letter-spacing: .3px;
}
.headline{
  margin: 0;
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: clamp(18px, 3.8vw, 34px);
  line-height: 1.25;
  letter-spacing: .4px;
}
.sub{
  margin: .6rem 0 0;
  color: #555;
  font-family: "VT323", monospace;
  font-size: 20px;
}

/* ===== Doors grid ===== */
.doors{
  max-width: 1100px;
  margin: 1.25rem auto 0;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .doors{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 580px){
  .doors{ grid-template-columns: 1fr; }
}

/* Door tile */
.door{
  display: grid;
  gap: .35rem;
  text-decoration: none;
  color: inherit;
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 8px;
  padding: 14px 14px 16px;
  box-shadow: 6px 6px 0 var(--ink);
  transform: translate(0,0);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  position: relative;
  overflow: hidden;
}
.door:hover{
  transform: translate(-3px,-3px);
  box-shadow: 9px 9px 0 var(--ink);
}
.door-emoji{
  font-size: 28px;
  line-height: 1;
  width: max-content;
  background: #fff5f7;
  border: 2px solid #fabfc5;
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 2px 2px 0 var(--ink);
}
.door-title{
  font-weight: 800;
  font-size: 1.05rem;
}
.door-sub{
  color: #666;
  font-size: .95rem;
}

/* subtle sparkle confetti inside doors on hover */
.door::after{
  content: '✧ ✦ ★ ✺';
  position: absolute;
  right: 8px; bottom: 6px;
  font-family: "VT323", monospace;
  font-size: 14px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.door:hover::after{ opacity: .9; transform: translateY(0); }

/* door color hints */
.door--sew .door-emoji{ background:#fff6fb; border-color:#f7cbe0; }
.door--photo .door-emoji{ background:#f7fbff; border-color:#bcdcff; }
.door--contact .door-emoji{ background:#fffdf3; border-color:#f7e1a1; }

/* ===== Contact ===== */
.contact{
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 0 1rem 2rem;
  text-align: center;
}
.contact h3{
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: 18px;
  margin: .25rem 0 .75rem;
}

/* keep email obfuscation from your global CSS */
.email-line{ font-weight: 600; }

/* footer spacing tweak on home */
footer{ margin-top: 1.25rem; }

/* Home: hide header tabs (we have doors instead) */
.home header nav {
  display: none;
}
/* ===== Slim ribbon hero ===== */
.portal{
  max-width: 1100px;
  margin: 1rem auto .5rem;
  padding: 0 1rem;
  text-align: center;
}
.portal-inner{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;             /* pill */
  box-shadow: 4px 4px 0 var(--ink);
  background-image: none;           /* remove CRT lines */
}
.kicker{ 
  font-family: "VT323", monospace; 
  font-size: 18px; margin: 0; letter-spacing: .3px; 
}
.headline{
  font-family: "VT323", monospace;
  font-size: 18px; line-height: 1.2; letter-spacing: .3px;
  margin: 0;
}
.sub{ display: none; }              /* trim the extra line */

/* bring doors a bit closer */
.doors{ margin-top: .75rem; }

/* loads after style.css, only on home */

/* hide header tabs on home (doors replace them) */
.home header nav { display: none; }

/* tagline tweak */
.tagline{
  margin: .25rem 0 .25rem;
  font-family: "VT323", monospace;
  font-size: 20px;
  opacity: .95;
}

/* ===== Hero with cat sticker ===== */
.portal{
  position: relative;
  max-width: 1100px;
  margin: 1.25rem auto .75rem;
  padding: 0 1rem;
}
.portal-inner{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 2px solid #111;
  border-radius: 10px;
  box-shadow: 8px 8px 0 #111;
  padding: 14px 16px;
}
@media (max-width: 640px){
  .portal-inner{ grid-template-columns: 1fr; text-align: center; }
  .sticker{ justify-self: center; }
}

/* “sticker” frame */
.sticker{
  position: relative;
  width: 120px; aspect-ratio: 1;
  background: #fff;
  border: 2px solid #111;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 6px 6px 0 #111;
  transform: rotate(-3deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sticker:hover{ transform: rotate(0deg) translateY(-2px); box-shadow: 8px 8px 0 #111; }
.sticker img{
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 10px; display: block;
}
/* little “tape” */
.sticker::before{
  content:""; position:absolute; left:50%; top:-14px; transform:translateX(-50%) rotate(-2deg);
  width: 46px; height: 12px; background: #fff;
  border: 2px solid #111; border-bottom: 0; border-radius: 6px 6px 0 0;
  box-shadow: 2px 2px 0 #111;
}
/* scribble caption */
.scribble{
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  font-family: "VT323", monospace; font-size: 14px; background:#fff;
  border: 2px solid #111; border-top: 0; padding: 0 6px; line-height: 18px;
  border-radius: 0 0 6px 6px;
}

/* hero copy */
.kicker{
  margin: 0 0 .2rem;
  font-family: "VT323", monospace; font-size: 20px; letter-spacing: .3px;
}
.headline{
  margin: 0;
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: clamp(18px, 3.6vw, 32px);
  line-height: 1.25;
  letter-spacing: .4px;
}
.sub{ margin: .55rem 0 0; color: #555; font-family: "VT323", monospace; font-size: 20px; }

/* ===== Doors ===== */
.doors{
  max-width: 1100px; margin: .75rem auto 0; padding: 0 1rem;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
@media (max-width: 900px){ .doors{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px){ .doors{ grid-template-columns: 1fr; } }

.door{
  display: grid; gap: .35rem; text-decoration: none; color: inherit;
  border: 2px solid #111; background: #fff; border-radius: 8px;
  padding: 14px 14px 16px; box-shadow: 6px 6px 0 #111;
  transform: translate(0,0);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  position: relative; overflow: hidden;
}
.door:hover{ transform: translate(-3px,-3px); box-shadow: 9px 9px 0 #111; }

.door-emoji{
  font-size: 28px; line-height: 1; width: max-content;
  background: #fff5f7; border: 2px solid #fabfc5; border-radius: 6px;
  padding: 6px 8px; box-shadow: 2px 2px 0 #111;
}
.door-title{ font-weight: 800; font-size: 1.05rem; }
.door-sub{ color: #666; font-size: .95rem; }

/* sparkle hint on hover */
.door::after{
  content: '✧ ✦ ★ ✺'; position: absolute; right: 8px; bottom: 6px;
  font-family: "VT323", monospace; font-size: 14px; opacity: 0; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.door:hover::after{ opacity: .9; transform: translateY(0); }

.door--sew .door-emoji{ background:#fff6fb; border-color:#f7cbe0; }
.door--photo .door-emoji{ background:#f7fbff; border-color:#bcdcff; }
.door--contact .door-emoji{ background:#fffdf3; border-color:#f7e1a1; }

/* ===== Contact ===== */
.contact{ max-width:1100px; margin: 1.75rem auto 0; padding: 0 1rem 2rem; text-align:center; }
.contact h3{ font-family:"Press Start 2P",system-ui,sans-serif; font-size:18px; margin:.25rem 0 .75rem; }

/* === Make the picture bigger, make the text lighter === */

/* Give the image column more real estate */
.portal-inner{
  grid-template-columns: minmax(160px, clamp(180px, 28vw, 260px)) 1fr;
  align-items: center;
}

/* Scale the sticker up responsively */
.sticker{
  width: clamp(160px, 28vw, 260px);
  aspect-ratio: 1;
}
/* scale the “tape” + scribble with the sticker */
.sticker::before{
  width: 38%;              /* percent of sticker width */
  height: 12px;
  top: -10px;
}
.scribble{
  bottom: -10px;
  font-size: clamp(12px, 1.2vw, 16px);
}

/* So the text never looks like a big block */
.portal-copy{ max-width: 38ch; }

/* Smaller headline; remove the extra lines for a cleaner look */
.kicker{ display: none; }
.sub{ display: none; }
.headline{
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.25;
  margin: 0;
}

/* On small screens, stack and keep the big photo centered */
@media (max-width: 640px){
  .portal-inner{ grid-template-columns: 1fr; text-align: center; }
  .sticker{ justify-self: center; }
}

/* === Centered hero: cat sticker is the main event === */
.portal--centered .portal-inner{
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid #111;
  border-radius: 12px;
  box-shadow: 8px 8px 0 #111;
  padding: 16px;
  max-width: 680px;
  margin: 1.25rem auto .75rem;
}

/* Big, circular sticker */
.sticker{
  position: relative;
  width: clamp(200px, 36vw, 320px);
  aspect-ratio: 1;
  background: #fff;
  border: 2px solid #111;
  border-radius: 999px;
  padding: 8px;
  box-shadow: 6px 6px 0 #111;
  transform: rotate(-2deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sticker:hover{ transform: rotate(0deg) translateY(-2px); box-shadow: 8px 8px 0 #111; }
.sticker img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}
/* little tape + scribble tab */
.sticker::before{
  content:"";
  position:absolute; left:50%; top:-12px; transform:translateX(-50%) rotate(-2deg);
  width: 44%; height: 12px; background: #fff;
  border: 2px solid #111; border-bottom: 0; border-radius: 8px 8px 0 0;
  box-shadow: 2px 2px 0 #111;
}
.scribble{
  position:absolute; bottom:-12px; left:50%; transform:translateX(-50%) rotate(-2deg);
  font-family:"VT323", monospace; font-size: 14px; line-height: 18px;
  background:#fff; border:2px solid #111; border-top:0; padding:0 8px; border-radius:0 0 8px 8px;
}

/* === Speech bubble === */
.bubble{
  position: absolute;
  right: -14px;                /* anchor to the right of the sticker */
  top: 10%;
  transform: translateX(100%) rotate(-1.5deg);
  max-width: 18ch;
  background:#fff;
  border:2px solid #111;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #111;
  padding: 8px 10px;
  font-family: "VT323", monospace;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.2;
  color: #222;
}
.bubble::after{                 /* pointer tail */
  content:"";
  position:absolute;
  left: -10px; top: 18px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #111;     /* outline */
}
.bubble::before{                /* inner white fill to create outlined tail */
  content:"";
  position:absolute;
  left: -8px; top: 18px;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 9px solid #fff;      /* fill */
}

/* Mobile: place bubble under the photo, centered */
@media (max-width: 720px){
  .bubble{
    position: static;
    transform: none;
    margin: 10px auto 0;
    display: inline-block;
  }
  .bubble::after,
  .bubble::before{ display:none; }
}

/* === Split hero: square photo left, stacked options right === */
.portal--split .portal-inner{
  background:#fff;
  border:2px solid #111;
  border-radius:12px;
  box-shadow:8px 8px 0 #111;
  padding:16px;
}
.portal-inner--split{
  display:grid;
  grid-template-columns: clamp(220px, 32vw, 320px) 1fr;
  gap:18px;
  align-items:center;
}

/* Left: square sticker (no round mask) */
.sticker.sticker--square{
  position:relative;
  width: clamp(200px, 32vw, 300px);
  aspect-ratio: 1;
  background:#fff;
  border:2px solid #111;
  border-radius:12px;               /* keep it square with soft corners */
  padding:8px;
  box-shadow:6px 6px 0 #111;
  transform: rotate(-2deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sticker.sticker--square:hover{
  transform: rotate(0deg) translateY(-2px);
  box-shadow:8px 8px 0 #111;
}
.sticker.sticker--square img{
  width:100%; height:100%; display:block;
  object-fit: cover;
  border-radius:8px;
}
/* tape + scribble tab */
.sticker.sticker--square::before{
  content:"";
  position:absolute; left:50%; top:-12px; transform:translateX(-50%) rotate(-2deg);
  width:44%; height:12px; background:#fff;
  border:2px solid #111; border-bottom:0; border-radius:8px 8px 0 0;
  box-shadow:2px 2px 0 #111;
}
.scribble{
  position:absolute; bottom:-12px; left:50%; transform:translateX(-50%) rotate(-2deg);
  font-family:"VT323", monospace; font-size:14px; line-height:18px;
  background:#fff; border:2px solid #111; border-top:0; padding:0 8px;
  border-radius:0 0 8px 8px;
}

/* Speech bubble to the RIGHT of the photo (tail points left) */
.bubble{
  position:absolute;
  left: calc(100% + 10px);
  top: 12%;
  max-width: 20ch;
  background:#fff;
  border:2px solid #111;
  border-radius:10px;
  box-shadow:4px 4px 0 #111;
  padding:8px 10px;
  font-family:"VT323", monospace;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height:1.2;
  transform: rotate(-1.5deg);
  color:#222;
}
.bubble::after{ /* outline tail pointing LEFT */
  content:"";
  position:absolute; left:-10px; top:18px;
  width:0; height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:10px solid #111;
}
.bubble::before{ /* inner white fill tail */
  content:"";
  position:absolute; left:-8px; top:18px;
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:9px solid #fff;
}

/* Right: vertical stack of doors */
.door-stack{
  display:grid;
  gap:12px;
  align-content:start;
}
.door-stack .door{
  min-height: 88px;                /* comfy click-target */
  align-items: start;
}

/* Mobile: stack image on top, then options, bubble drops below */
@media (max-width: 720px){
  .portal-inner--split{ grid-template-columns: 1fr; }
  .sticker.sticker--square{ justify-self:center; }
  .bubble{
    position: static;
    transform: none;
    margin: 10px auto 0;
    display: inline-block;
  }
  .bubble::before,
  .bubble::after{ display:none; }
}



/* ============ Bigger cat, smaller doors, more space between ============ */

/* Layout: larger left column (cat), narrower right column (doors) */
.portal-inner--split{
  max-width: min(1100px, 94vw);
  margin: 1.25rem auto 0;
  display: grid;
  grid-template-columns: clamp(340px, 46vw, 560px)  minmax(220px, 400px);
  column-gap: clamp(18px, 4vw, 56px);            /* pushes doors further right */
  align-items: center;
}

/* Cat sticker: bigger square */
.sticker.sticker--square{
  width: clamp(320px, 46vw, 520px);              /* was smaller */
  aspect-ratio: 1;
}

/* (optional) put the bubble near the doors */
.portal--split .bubble{
  top: -8px;
  left: auto;
  right: calc(-1 * clamp(10px, 2.4vw, 28px));
  max-width: 20ch;
}

/* Right column: keep the stack narrow */
.door-stack{
  width: 100%;
  max-width: 400px;                               /* smaller doors width */
  gap: 10px;
  justify-self: start;                             /* don't stretch */
}

/* Door cards: slimmer */
.door{
  min-height: 56px;                                /* smaller height */
  padding: 8px 10px;                               /* tighter padding */
  border-radius: 8px;
  border: 1.5px solid #111;
  box-shadow: 3px 3px 0 #111;
  display: grid;
  grid-template-columns: 28px 1fr;                 /* emoji | text */
  align-items: center;
  column-gap: 10px;
}

/* Compact text */
.door .door-emoji{ font-size: 18px; line-height: 1; }
.door .door-title{ font-size: 15px; line-height: 1.2; }
.door .door-sub{ font-size: 11px; margin-top: 2px; color:#666; }

/* Mobile: stack vertically again */
@media (max-width: 760px){
  .portal-inner--split{
    grid-template-columns: 1fr;
    column-gap: 16px;
  }
  .sticker.sticker--square{ justify-self: center; }
  .door-stack{ max-width: 480px; justify-self: center; }
  .portal--split .bub }
/* --- Fix door layout: emoji left, text centered across full card --- */
.door{
  display: grid;
  grid-template-columns: 32px 1fr;  /* emoji | everything else */
  align-items: center;
  column-gap: 10px;
}

/* emoji occupies its own narrow column, both rows */
.door .door-emoji{
  grid-column: 1;
  grid-row: 1 / 3;          /* sits left of title & subtitle */
  font-size: 20px;
  line-height: 1;
}

/* title + subtitle span full width of the card */
.door .door-title,
.door .door-sub{
  grid-column: 1 / -1;      /* span both columns */
  width: 100%;
  text-align: center;
}

/* tidy text spacing & wrapping */
.door .door-title{ 
  font-size: 15px;
  line-height: 1.2;
  margin: 0;
}

.door .door-sub{
  font-size: 11px;
  margin: 2px auto 0;
  color: #666;
  max-width: 30ch;          /* keeps a nice single/two-line look */
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* keep the compact card sizing you liked */
.door{
  min-height: 56px;
  padding: 8px 10px;
  border: 1.5px solid #111;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #111;
}

/* Fix door layout: emoji left; title + subtitle stacked and centered on the right */
.door{
  display: grid;
  grid-template-columns: 36px 1fr; /* emoji | text */
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1.5px solid #111;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #111;
}

/* emoji stays in column 1, spans both text rows */
.door .door-emoji{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  font-size: 20px;
  line-height: 1;
}

/* title in column 2, row 1; centered */
.door .door-title{
  grid-column: 2 / 3;
  grid-row: 1;
  justify-self: center;
  text-align: center;
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

/* subtitle in column 2, row 2; centered, tidy width */
.door .door-sub{
  grid-column: 2 / 3;
  grid-row: 2;
  justify-self: center;
  text-align: center;
  margin: 2px 0 0;
  color: #666;
  font-size: 11px;
  max-width: 30ch;   /* adjust for fewer wraps: try 26ch–32ch */
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* === Door scale + typography (final overrides) ========================= */

/* Base (tablet & up) */
.door{
  grid-template-columns: 42px 1fr;   /* wider emoji column */
  min-height: 68px;
  padding: 10px 12px;
  column-gap: 12px;
}
.door .door-emoji{
  font-size: 24px;                   /* bigger icon */
  padding: 8px 10px;                 /* bigger chip */
}
.door .door-title{
  font-size: 16px;                   /* was ~15px */
  line-height: 1.2;
}
.door .door-sub{
  font-size: 12px;                   /* was ~11px */
  margin-top: 3px;
  max-width: 32ch;
}

/* Desktop boost */
@media (min-width: 900px){
  .door{
    grid-template-columns: 52px 1fr;
    min-height: 84px;
    padding: 12px 16px;
    column-gap: 14px;
  }
  .door .door-emoji{
    font-size: 30px;
    padding: 10px 12px;
  }
  .door .door-title{
    font-size: clamp(17px, 1.4vw, 20px);
  }
  .door .door-sub{
    font-size: clamp(12.5px, 1vw, 14px);
  }
}

/* Mobile stays tidy */
@media (max-width: 760px){
  .door{
    grid-template-columns: 38px 1fr;
    min-height: 60px;
    padding: 9px 10px;
  }
  .door .door-emoji{ font-size: 22px; padding: 6px 8px; }
  .door .door-title{ font-size: 15px; }
  .door .door-sub{ font-size: 11.5px; }
}
.ig-link{
  display: inline-block;
  color: #222;
  text-decoration: none;
  background: #fff;
  border: 2px solid #111;
  border-radius: 6px;
  padding: 2px 8px;
  box-shadow: 2px 2px 0 #111;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ig-link:hover,
.ig-link:focus-visible{
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 #111;
  outline: none;
}
/* Smooth anchor scroll everywhere */
html { scroll-behavior: smooth; }

/* Give the target a little breathing room above when scrolled to */
#contact { scroll-margin-top: 16px; }

/* Arrival highlight */
#contact:target,
#contact.flash {
  animation: contactFlash 900ms ease-out;
}

@keyframes contactFlash {
  0%   { background: #fff; box-shadow: 0 0 0 0 rgba(250,218,221,.9), 0 0 0 0 #111; }
  30%  { background: #fff6f8; box-shadow: 0 0 0 10px rgba(250,218,221,.45), 6px 6px 0 #111; }
  100% { background: transparent; box-shadow: none; }
}
/* Bigger tagline under the main heading across the site */
header .tagline{
  font-family: "VT323", monospace;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.15;
  letter-spacing: .3px;
  margin: .35rem 0 .35rem;
}
/* === MOBILE BLEED FIX (paste at end of home.css) ======================= */

/* Never allow a horizontal scrollbar */
html, body { overflow-x: hidden; }

/* Make sure containers can't exceed the viewport */
.portal,
.portal-inner,
.portal-inner--split,
.door-stack { max-width: 100%; }

/* Let the left (image) column be flexible even on desktop */
.portal-inner--split{
  /* flexible image column, flexible doors column */
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  column-gap: clamp(14px, 4vw, 48px);
  width: 100%;
}

/* Prevent grid children from forcing overflow */
.door-stack, .door { min-width: 0; }

/* Bubble defaults shouldn't push layout */
.portal--split .bubble{
  max-width: 20ch;
  right: auto;
  left: calc(100% + 10px);
}

/* Make the sticker respect the viewport width */
.sticker.sticker--square{
  width: clamp(220px, 40vw, 520px);
  max-width: 100%;
}

/* --- Mobile: stack, center, and remove any off-canvas positions --- */
@media (max-width: 900px){
  .portal-inner--split{ 
    grid-template-columns: 1fr !important; 
    column-gap: 16px;
  }

  .sticker.sticker--square{
    width: min(88vw, 360px) !important;
    justify-self: center;
  }

  /* Bubble sits under the photo; no tail */
  .portal--split .bubble{
    position: static !important;
    transform: none !important;
    margin: 10px auto 0 !important;
    max-width: 28ch;
  }
  .portal--split .bubble::before,
  .portal--split .bubble::after{ display: none !important; }

  /* Doors fill the width nicely and won’t overflow */
  .door-stack{
    width: 100%;
    max-width: 520px;
    justify-self: center;
    gap: 12px;
  }
  .door{
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    grid-template-columns: 36px 1fr;   /* emoji | text */
    column-gap: 12px;
  }
  .door .door-emoji{ font-size: 22px; }
  .door .door-title{ font-size: 17px; line-height: 1.2; }
  .door .door-sub{ font-size: 13px; }
}

/* Safety: long subtitles can’t force a wide card */
.door .door-sub{
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}

/* === Responsive door width scaling (append at end of home.css) === */

/* Desktop/tablet: grow the right column with screen size */
@media (min-width: 900px){
  .portal-inner--split{
    /* big cat at left, responsive door column at right */
    grid-template-columns: clamp(360px, 44vw, 640px) clamp(300px, 32vw, 520px);
    column-gap: clamp(18px, 4vw, 64px);
    max-width: min(1200px, 96vw);
  }

  .door-stack{
    width: 100%;
    max-width: none;          /* let the column width control door width */
  }

  /* Doors scale up smoothly on large screens */
  .door{
    min-height: clamp(64px, 7.5vh, 96px);
    padding: clamp(12px, 1vw, 18px) clamp(14px, 1.2vw, 22px);
    grid-template-columns: clamp(36px, 1.8vw, 44px) 1fr;  /* emoji | text */
    column-gap: clamp(10px, 1vw, 16px);
  }
  .door .door-emoji{ font-size: clamp(22px, 1.6vw, 30px); }
  .door .door-title{ font-size: clamp(18px, 1.3vw, 22px); }
  .door .door-sub{ font-size: clamp(13px, 1vw, 16px); }
}

/* Extra-wide desktops: allow a touch more width, still bounded */
@media (min-width: 1280px){
  .portal-inner--split{
    grid-template-columns: clamp(420px, 44vw, 700px) clamp(340px, 30vw, 580px);
    max-width: 1300px;
  }
}