/* bondena.com — look A, the app's own room (his "ok", SESSION-STATE decision 158): the app's ground, cream and amber (Theme.swift),
   its serif stood in by Newsreader, served from this site. One file for every page. */
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --ground:#2A140D; --deep:#1B0C07; --raise:#3A1D13; --edge:#5A3526;
  --cream:#F6EBD2; --sand:#CDB9A0; --dust:#A8917C; --amber:#F5C85A;
  --hair:rgba(246,235,210,.12);
  --serif:"Newsreader",ui-serif,"New York",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ground)}
body{margin:0;min-height:100dvh;background:var(--ground);color:var(--sand);font:400 16.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
main{max-width:480px;margin:0 auto;padding-bottom:calc(36px + env(safe-area-inset-bottom))}
a{color:var(--cream);text-decoration-color:var(--amber);text-underline-offset:3px}
strong{color:var(--cream);font-weight:600}
.wordmark{font:500 13px/1 var(--serif);letter-spacing:.3em;color:var(--cream);text-decoration:none}

/* the first screen: the two-people photo fades into the ground */
.top{position:relative;height:236px;margin:0;overflow:hidden}
.top img{position:absolute;left:0;top:0;width:100%;height:119%;object-fit:cover;object-position:36% 50%}   /* 119%: the photo's own lighter strip along its bottom edge falls outside the box */
.top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,20,13,.4) 0%,rgba(42,20,13,0) 30%,rgba(42,20,13,0) 46%,rgba(42,20,13,.46) 72%,rgba(42,20,13,.86) 88%,var(--ground) 97%)}
.top .wordmark{position:absolute;z-index:1;left:24px;top:calc(20px + env(safe-area-inset-top));margin:0}
.wrap{padding:0 24px}
h1{margin:2px 0 14px;font:500 clamp(31px,9.5vw,42px)/1.08 var(--serif);letter-spacing:-.012em;color:var(--cream)}
.sub{margin:0;font-size:16.5px;line-height:1.52;color:var(--sand);text-wrap:pretty}
.join{margin:20px -2px 0;min-height:132px}
.join iframe{display:block;width:100%;height:132px;border:0;color-scheme:normal}   /* the frame's scheme must match Tally's own page, or the browser paints it opaque white (Loftling's site/README.md, its S38 trap) */
.join .done{margin:0;padding:28px 2px;font:500 22px/1.25 var(--serif);color:var(--cream)}
.consent{margin:-6px 0 0;font-size:13.5px;line-height:1.45;color:var(--sand)}

section{margin-top:60px}
h2{margin:0 0 18px;font:500 28px/1.14 var(--serif);letter-spacing:-.008em;color:var(--cream);text-wrap:balance}
.plain{margin:18px 0 0;font-size:16px;line-height:1.55;color:var(--sand);text-wrap:pretty}

/* the lines, as the app's card draws them: a label, the name, the line over one of the app's photos; swiped sideways */
.cards{list-style:none;margin:0;padding:0 24px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.cards::after{content:"";flex:0 0 12px}
.cards li{position:relative;flex:0 0 84%;aspect-ratio:4/5;border-radius:26px;overflow:hidden;scroll-snap-align:start;background:var(--deep)}
.cards img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@supports not (aspect-ratio:1){.cards li{height:104vw;max-height:520px}}   /* iPhones before iOS 15 */
.cards li::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,7,3,.66) 0%,rgba(18,7,3,.58) 28%,rgba(18,7,3,.6) 64%,rgba(18,7,3,.78) 100%)}
.cards .in{position:absolute;inset:0;z-index:1;padding:22px 22px 24px;display:flex;flex-direction:column}
.cards .lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cards .label{font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#E2D3BC;white-space:nowrap}
.cards .wordmark{font-size:11.5px;letter-spacing:.28em;color:#E2D3BC}
.cards .line{margin:auto 0;font:400 24px/1.26 var(--serif);color:var(--cream);text-align:center;text-wrap:balance}

.device{margin:30px auto 0;width:72%}
.device .frame{border-radius:36px;padding:7px;background:#0E0705;box-shadow:0 0 0 1px var(--raise),0 30px 60px -30px rgba(0,0,0,.85)}
.device img{display:block;width:100%;height:auto;border-radius:29px}
.device figcaption{margin-top:14px;font-size:13px;line-height:1.4;color:var(--dust);text-align:center}

.points{list-style:none;margin:0;padding:0}
.points li{padding:15px 0;border-top:1px solid var(--hair);font-size:16px;line-height:1.52;color:var(--sand);text-wrap:pretty}
.points li:last-child{border-bottom:1px solid var(--hair)}
.points .shot{display:block;width:100%;height:auto;margin:16px 0 4px;padding:12px 10px 8px;border:1px solid var(--hair);border-radius:18px}   /* the app's own picture of a reminder; the frame says it is a picture, since its ground is the page's (Loftling's lesson, its site.md:100-102) */
.panel{margin:0 12px;padding:28px 20px 10px;border-radius:26px;background:#33190F}
.panel .points li:first-child{border-top:0;padding-top:4px}
.panel .points li:last-child{border-bottom:0}
.making{display:inline-block;margin:0 3px 0 1px;padding:2px 9px 3px;border-radius:999px;border:1px solid var(--edge);font-size:11.5px;line-height:1.3;font-weight:600;letter-spacing:.02em;color:var(--sand);white-space:nowrap;vertical-align:1.5px}

/* the hard nights: one of the app's rainy rooms, faded into the ground above and below */
.band{position:relative;height:190px;margin:0 0 -34px}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ground) 0%,rgba(42,20,13,.18) 38%,rgba(42,20,13,.3) 60%,var(--ground) 100%)}
.nights h2{position:relative}
.moments{margin:0 0 18px;font:400 20px/1.34 var(--serif);color:var(--cream);text-wrap:balance}

.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:15px 34px 15px 0;font-size:16px;line-height:1.38;font-weight:600;color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:10px;font:400 24px/1.3 var(--sans);color:var(--amber)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
.faq p{margin:0;padding:0 0 17px;font-size:15.5px;line-height:1.56;color:var(--sand);text-wrap:pretty}
.faq em{font-style:normal;font-weight:600;color:var(--cream)}

.again{margin-top:56px}
.again h2{font-size:clamp(29px,8.8vw,38px);line-height:1.08;margin-bottom:0}
footer{margin:44px 24px 0;padding-top:18px;border-top:1px solid var(--hair);font-size:13px;line-height:1.9;color:var(--dust)}
footer a{color:var(--dust);text-decoration-color:var(--edge)}
footer .nb{white-space:nowrap}

/* Privacy, Terms and the not-found page */
.doc{padding:calc(22px + env(safe-area-inset-top)) 24px 0}
.doc .wordmark{display:inline-block;margin:0 0 44px}
.doc h1{font-size:36px;margin:0 0 8px}
.doc .updated{margin:0 0 30px;font-size:13px;color:var(--dust)}
.doc h2{margin:34px 0 10px;font:500 22px/1.2 var(--serif);color:var(--cream)}
.doc p,.doc li{font-size:15.5px;line-height:1.62;color:var(--sand)}
.doc p{margin:0 0 13px}
.doc ul{margin:0 0 13px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.doc .back{display:inline-block;margin-top:30px;font-size:14.5px}
.doc + footer,.doc footer{margin-left:0;margin-right:0}

@media (min-width:640px){
  main{padding-top:28px}
  .top{height:270px;border-radius:26px}
  .cards li{flex-basis:78%}
}

/* A wide screen (a laptop, a desktop): two columns. The first screen holds the words and the form beside the app's own screen; the
   three cards stand side by side; the everyday part and the hard nights share a row. The page's order in the file is unchanged. */
@media (min-width:1000px){
  body{font-size:17px}
  main{max-width:1160px;padding:36px 40px 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px;align-items:start}
  main > *{grid-column:1 / -1}
  .wrap{padding:0}
  .first{grid-column:1;grid-row:1}
  .top{height:300px}
  .top .wordmark{left:28px;top:26px}
  h1{font-size:clamp(44px,4.4vw,58px);margin-top:10px}   /* at 1024 points 58px broke the headline into three rows */
  .sub{font-size:18px}
  .join{max-width:440px}
  h2{font-size:36px}

  .lines,.lines > .wrap{display:contents}                 /* its parts become rows of the page's own grid */
  .lines .device{grid-column:2;grid-row:1;align-self:center;width:min(330px,74%);margin:0 auto}
  .lines h2,.lines .cards,.lines .plain{grid-column:1 / -1}   /* they are not main's own children, so `main > *` does not reach them (the first wide render put the cards in one column) */
  .lines h2{margin:104px 0 28px;text-align:center}
  .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:0;overflow:visible;width:100%}
  .cards::after{content:none}
  .cards li{aspect-ratio:4/5}
  .cards .line{font-size:25px}
  .lines .plain{max-width:660px;margin:30px auto 0;text-align:center;font-size:18px}

  .days{grid-column:1;margin-top:104px}
  .nights{grid-column:2;margin-top:104px}
  .nights .band{height:210px;border-radius:26px;overflow:hidden;margin-bottom:-40px}
  .nights .band::after{background:linear-gradient(180deg,rgba(42,20,13,.12) 0%,rgba(42,20,13,.2) 50%,var(--ground) 100%)}
  .nights h2{padding-top:0}

  .catches{margin-top:96px}
  .panel{margin:0;padding:44px 48px 30px}
  .panel .points{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .panel .points li,.panel .points li:first-child{border-top:1px solid var(--hair);padding-top:18px}
  .panel .points li:nth-child(-n+2){border-top:0;padding-top:4px}
  .panel .points li:last-child{border-bottom:0}

  .questions{margin-top:96px;width:100%;max-width:760px;justify-self:center}
  .again{margin-top:88px;width:100%;max-width:520px;justify-self:center}
  footer{margin:64px 0 0;text-align:center}
  .doc{max-width:720px;justify-self:center;padding-top:20px}
}