/* Tiny houses page. Builds on home.css (épure strokes, frames, lightbox, section heads). */

.tiny-hero { position: relative; padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem)) 0 clamp(3rem, 7vw, 6rem); background: radial-gradient(60% 55% at 90% 15%, rgba(255, 90, 31, .13), transparent 70%), var(--charbon); }
.tiny-hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.tiny-hero__txt { display: grid; gap: 1.4rem; justify-items: start; }
.tiny-hero__txt .h2 { font-size: clamp(2.8rem, 6.6vw, 6.5rem); }
.tiny-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.crumbs { display: flex; gap: .55rem; font-size: .8rem; color: var(--cendre); }
.crumbs a { color: var(--cendre); text-underline-offset: .2em; }
.crumbs a:hover { color: var(--ambre); }
.crumbs [aria-current] { color: var(--os); }

.tiny-sheet { position: relative; }
.tiny-sheet__panel {
  position: relative; padding: clamp(1.75rem, 3.5vw, 3rem) clamp(.75rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--line-strong); background-color: var(--brule);
  background-image: linear-gradient(rgba(239, 230, 218, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 230, 218, .05) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem; background-position: -1px -1px;
}
.tiny-sheet__note { position: absolute; top: 0; right: .75rem; z-index: 3; transform: translateY(-55%); padding: 0 .55rem; background: var(--brule); font-size: .625rem; font-weight: 600; font-stretch: 88%; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; color: var(--cendre); }
.tiny-sheet .epure { width: 100%; --step: .09s; }
.tiny-sheet__cap { margin-top: .8rem; font-size: .8rem; color: var(--cendre); }
.epure .tf--wall { fill: #C8986A; fill-opacity: .2; }
.epure .tf--door { fill: #2E4A3A; }
.epure .tf--steel { fill: #8D949A; fill-opacity: .55; }
.epure .tf--com { fill-opacity: .8; }
.js .tdraw:not(.is-on) .epure [pathLength] { stroke-dashoffset: 1.02; transition: none; }
.js .tdraw:not(.is-on) .epure :is(.c--axis, .h, .dl, .dt, .ld, .ldot, .tbg, .t, .tf) { opacity: 0; transition: none; }
.tdraw .epure .tf { transition-delay: calc(1.1s + var(--i, 0) * .12s); }
.tdraw.is-on .epure .c { stroke-opacity: .4; transition-delay: calc(var(--i, 0) * var(--step)), calc(var(--i, 0) * var(--step)), 2.2s; transition-duration: var(--t, .6s), .45s, 1s; }

@media (min-width: 1000px) {
  .tiny-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* Uses */
.uses { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.use { display: grid; align-content: start; gap: .7rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); background: var(--charbon); min-height: 14rem; }
.use__no { font-family: var(--ff-d); font-style: italic; font-weight: 340; font-size: 1.1rem; color: var(--braise); }
.use h3 { font-family: var(--ff-d); font-weight: 360; font-size: clamp(1.6rem, 2.2vw, 2.15rem); letter-spacing: -.02em; line-height: 1.05; }
.use p { font-size: .97rem; line-height: 1.5; color: #D5CABC; }
.use .link { justify-self: start; margin-top: .3rem; }
.use--hot { background: radial-gradient(90% 80% at 100% 100%, rgba(255, 90, 31, .2), transparent 70%), var(--brule); }
@media (min-width: 700px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The tiny pub */
.tiny-pub { background: var(--brule); }
.pub__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.pub__txt { display: grid; gap: 1.4rem; align-content: start; }
.pub__txt .h2 { font-size: clamp(2.3rem, 4.8vw, 4.75rem); }
.pub__txt p:not(.label) { max-width: 36rem; color: #DDD2C4; }
.pub__txt .pub__note { font-size: .82rem; color: var(--cendre); padding-left: .9rem; border-left: 2px solid var(--line-strong); }
.pub__pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; align-content: start; }
.pub__pic { height: auto; width: 100%; aspect-ratio: 2 / 3; max-width: none; }
.pub__pic--wide { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.pub__pic .frame__z, .bstep__media .frame__z { opacity: 1; }
@media (min-width: 1000px) {
  .pub__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .pub__txt { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* Build steps */
.build { display: grid; gap: clamp(2rem, 4vw, 3rem) var(--gap); }
.bstep { display: grid; gap: .6rem; align-content: start; }
.bstep__media { position: relative; display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brule); }
.bstep__media img, .bstep__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bstep__no { margin-top: .6rem; font-family: var(--ff-d); font-style: italic; font-weight: 340; font-size: 1.1rem; color: var(--braise); }
.bstep h3 { font-family: var(--ff-d); font-weight: 360; font-size: clamp(1.45rem, 2vw, 1.9rem); letter-spacing: -.02em; line-height: 1.05; }
.bstep p { font-size: .97rem; line-height: 1.5; color: #D5CABC; max-width: 30rem; }
@media (min-width: 700px) { .build { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .build { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tiny-end { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(1.5rem, 3.5vw, 3rem); border: 1px solid var(--line); background: radial-gradient(60% 120% at 100% 100%, rgba(255, 90, 31, .16), transparent 70%), var(--brule); }
.tiny-end p { flex: 1 1 100%; font-family: var(--ff-d); font-weight: 350; font-size: clamp(1.6rem, 2.6vw, 2.5rem); letter-spacing: -.02em; line-height: 1.08; }

@media (max-width: 699px) {
  .tiny-sheet .epure .t { font-size: 30px; letter-spacing: .08em; }
  .tiny-sheet .epure .tbg { transform: scale(1.5); transform-box: fill-box; transform-origin: center; }
  .tiny-sheet__panel { padding-inline: .25rem; }
}