/* ---------------------------------------------------------------- frames.css
   Jay's own frameworks, which were named in the meeting and the follow-up email
   but appeared on neither page.

   - .chain     an arrow sequence, used twice: the human journey (E1 §7) and the
                Human-Human Network (E1 §8)
   - .fourwords the four words he uses for the real problem (E1 §2)
   - .lockup    "We See You. We Connect You. You Become." (WhatsApp, E1 §18)

   All three are his wording, so they are set as statements rather than as body
   copy, and the type does the work instead of a box. */


/* -------------------------------------------------------------- the chain */

.chain{
  list-style:none;
  margin:clamp(26px,3vw,38px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(9px,1.1vw,14px);
}

.chain li{
  display:flex;
  align-items:center;
  gap:clamp(9px,1.1vw,14px);
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
}

/* the arrow lives between items, never before the first or after the last */
.chain li + li::before{
  content:"\2192";
  color:var(--ochre);
  letter-spacing:0;
  font-size:1.15em;
}

/* the step the sequence is heading towards */
.chain li:last-child{color:var(--ochre)}

.ch-forest .chain li,.ch-night .chain li{color:#D2C7B7}
.ch-forest .chain li:last-child,.ch-night .chain li:last-child{color:#CFA267}


/* ---------------------------------------------------------- the four words */

.fourwords{
  margin:clamp(30px,3.6vw,46px) 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(10px,1.4vw,20px);
  font-family:var(--display);
  font-size:clamp(23px,2.9vw,38px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.fourwords span:last-child{color:var(--ochre)}

.ch-forest .fourwords,.ch-night .fourwords{color:#FBF7F0}


/* ------------------------------------------------------------- the lockup */

.lockup{
  margin:0;
  font-family:var(--display);
  font-size:clamp(26px,3.6vw,48px);
  line-height:1.1;
  letter-spacing:-.024em;
  color:var(--ink);
  max-width:16ch;
}
/* the three phrases sit on one line where there is room, and only stack when
   there is not. Three stacked lines took a screen and a half to say what fits
   comfortably across one. */
.lockup{
  display:flex;
  flex-wrap:wrap;
  gap:.1em .45em;
  max-width:none;
}
.lockup span{display:inline}
.lockup span:last-child{color:var(--ochre)}

.ch-forest .lockup,.ch-night .lockup{color:#FBF7F0}

/* ------------------------------------------------- the welcome and the name
   The India billboards, posters and QR codes in circulation say Lighthouse.
   Somebody scanning one has to know within a second that they are in the right
   place, so the name and the old name lead the page rather than sitting in a
   notice at the bottom. 05-india-page-status.md logged this as absent. */

.welcome-mark{
  display:block;
  margin:0 0 clamp(14px,1.6vw,20px);
}
.welcome-mark .hi{
  display:block;
  font-family:var(--display);
  font-size:clamp(26px,3.2vw,42px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:#F3E7D4;
}
.welcome-mark .aka{
  display:block;
  margin-top:.5em;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#CFA267;
}

/* on a light chapter, should it ever move */
.ch-paper .welcome-mark .hi,.ch-warm .welcome-mark .hi{color:var(--ink)}
.ch-paper .welcome-mark .aka,.ch-warm .welcome-mark .aka{color:var(--ochre)}

/* Jay's four questions, WhatsApp 29 Aug 18:41.

   They arrive one after another and then all four sit together, which is what
   a conversation opening actually looks like, before the set clears and it
   begins again. Each needs its own keyframe rather than one keyframe with
   delays: delays would stagger the exit too, and they should leave together.

   Scattered across the field rather than stacked, so the four occupy the
   space instead of forming a column. All four stay in the DOM for a screen
   reader, and under prefers-reduced-motion they stack and sit still. */

.asks{
  position:relative;
  list-style:none;
  margin:clamp(22px,2.6vw,32px) 0 0;
  padding:0;
  min-height:clamp(190px,21vw,268px);
}

.asks li{
  position:absolute;
  padding:clamp(12px,1.3vw,16px) clamp(17px,1.8vw,23px);
  border:1px solid var(--rule);
  border-radius:20px 20px 20px 5px;
  background:rgba(255,255,255,.86);
  box-shadow:0 16px 30px -22px rgba(42,33,22,.6);
  font-family:var(--display);
  font-size:clamp(16px,1.65vw,21px);
  line-height:1.2;
  letter-spacing:-.014em;
  color:var(--ink);
  white-space:nowrap;
  opacity:0;
}

.asks li::after{
  content:"";
  position:absolute;
  left:-1px;
  bottom:-5px;
  width:12px;
  height:12px;
  background:inherit;
  border-left:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  border-radius:0 0 0 3px;
  transform:skewX(-18deg);
}

/* spread across the field, each arriving in turn */
.asks li:nth-child(1){left:0;                     top:0;   animation:ask-1 17s ease-in-out infinite}
.asks li:nth-child(2){left:clamp(30px,7vw,96px);  top:26%; animation:ask-2 17s ease-in-out infinite}
.asks li:nth-child(3){left:clamp(8px,2vw,26px);   top:53%; animation:ask-3 17s ease-in-out infinite}
.asks li:nth-child(4){left:clamp(38px,9vw,124px); top:79%; animation:ask-4 17s ease-in-out infinite}

.asks li:nth-child(4){border-color:#E7D3B8;background:var(--ochre-2)}

@keyframes ask-1{
  0%,0%    {opacity:0; transform:translateY(12px) scale(.96)}
  3%          {opacity:1; transform:translateY(0) scale(1)}
  70.0%          {opacity:1; transform:translateY(0) scale(1)}
  76.0%,100%  {opacity:0; transform:translateY(-8px) scale(.98)}
}

@keyframes ask-2{
  0%,8%    {opacity:0; transform:translateY(12px) scale(.96)}
  11%          {opacity:1; transform:translateY(0) scale(1)}
  71.5%          {opacity:1; transform:translateY(0) scale(1)}
  77.5%,100%  {opacity:0; transform:translateY(-8px) scale(.98)}
}

@keyframes ask-3{
  0%,16%    {opacity:0; transform:translateY(12px) scale(.96)}
  19%          {opacity:1; transform:translateY(0) scale(1)}
  73.0%          {opacity:1; transform:translateY(0) scale(1)}
  79.0%,100%  {opacity:0; transform:translateY(-8px) scale(.98)}
}

@keyframes ask-4{
  0%,24%    {opacity:0; transform:translateY(12px) scale(.96)}
  27%          {opacity:1; transform:translateY(0) scale(1)}
  74.5%          {opacity:1; transform:translateY(0) scale(1)}
  80.5%,100%  {opacity:0; transform:translateY(-8px) scale(.98)}
}

.ch-forest .asks li,.ch-night .asks li{
  color:#F6F1E8;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
}

@media (prefers-reduced-motion:reduce){
  .asks{position:static;min-height:0;display:grid;gap:10px;justify-items:start}
  .asks li{position:static;opacity:1;animation:none;top:auto;left:auto;white-space:normal}
}

/* --------------------------------------------------------- objections
   Every reason a person talks themselves out of making contact, answered in
   one place instead of scattered across three sections. The worry is set in
   their words and the answer is short, because a long answer reads as a
   defence and confirms the worry rather than settling it. */

.objections{
  list-style:none;
  margin:clamp(30px,3.6vw,46px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media(min-width:820px){ .objections{grid-template-columns:1fr 1fr;column-gap:clamp(34px,4vw,64px)} }

.objections li{
  display:grid;
  gap:8px;
  padding:clamp(18px,2vw,24px) 0;
  border-top:1px solid var(--rule);
}

.objections .worry{
  font-family:var(--display);
  font-size:clamp(19px,2vw,25px);
  line-height:1.18;
  letter-spacing:-.016em;
  color:var(--ink);
}
.objections .answer{
  font-size:clamp(15px,1.4vw,16.5px);
  line-height:1.5;
  color:var(--ink-3);
  max-width:38ch;
}
.objections .answer b{color:var(--ochre);font-weight:400}

.ch-forest .objections .worry,.ch-night .objections .worry{color:#F6F1E8}
.ch-forest .objections .answer,.ch-night .objections .answer{color:#B5A48D}
.ch-forest .objections li,.ch-night .objections li{border-top-color:rgba(255,255,255,.16)}

/* ------------------------------------------------------------------- FAQ
   The objections as questions people actually ask, on native details and
   summary so it opens without JavaScript and answers to the keyboard for
   free.

   An FAQ solves the repetition the previous version had: when the worry is
   the heading, the answer never has to restate it before settling it. And
   closed, the section is six short lines instead of six paragraphs. */

.faq{
  margin:clamp(30px,3.6vw,46px) 0 0;
  border-top:1px solid var(--rule);
}

.faq details{
  border-bottom:1px solid var(--rule);
}

.faq summary{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:clamp(16px,1.8vw,22px) 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-size:clamp(17px,1.75vw,22px);
  line-height:1.25;
  letter-spacing:-.014em;
  color:var(--ink);
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ochre)}
.faq summary:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

/* the marker is drawn rather than typed, so it can turn */
.faq summary::after{
  content:"";
  flex:none;
  margin-left:auto;
  width:13px;
  height:13px;
  align-self:center;
  background:
    linear-gradient(var(--ochre),var(--ochre)) center/100% 1.5px no-repeat,
    linear-gradient(var(--ochre),var(--ochre)) center/1.5px 100% no-repeat;
  transition:transform .35s cubic-bezier(.16,.8,.24,1);
}
.faq details[open] summary::after{transform:rotate(135deg)}

.faq .faq-a{
  margin:0 0 clamp(18px,2vw,24px);
  max-width:52ch;
  font-size:clamp(15px,1.45vw,16.5px);
  line-height:1.55;
  color:var(--ink-3);
  animation:faq-in .4s ease both;
}
.faq .faq-a b{color:var(--ochre);font-weight:400}

@keyframes faq-in{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

.ch-forest .faq summary,.ch-night .faq summary{color:#F6F1E8}
.ch-forest .faq details,.ch-night .faq details{border-bottom-color:rgba(255,255,255,.16)}
.ch-forest .faq,.ch-night .faq{border-top-color:rgba(255,255,255,.16)}

@media (prefers-reduced-motion:reduce){
  .faq summary::after{transition:none}
  .faq .faq-a{animation:none}
}

/* who this is for, said in a line rather than in a grid of faces */
.who-line{
  margin:0 0 14px;
  max-width:44ch;
  font-size:clamp(16px,1.5vw,18px);
  color:var(--ink-3);
}
.who-line b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------- the contact block
   A button is a button and a description is not inside it. The first attempt
   forced pill shapes onto cards holding three stacked lines, which squashed
   the words into columns two characters wide.

   Each row is now a real control with a mark, the action, and an arrow, with
   the sentence explaining it underneath and outside. Walk in is not a link
   yet, so it is a plain block rather than a button that does nothing. */

.contacts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,26px);
}
@media(min-width:680px){ .contacts{grid-template-columns:1fr 1fr} }
@media(min-width:1080px){ .contacts{grid-template-columns:repeat(4,1fr)} }

.c-btn{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:15px 18px;
  border-radius:var(--r);
  border:1.5px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
a.c-btn:hover{background:var(--ochre);border-color:var(--ochre);color:#fff}
a.c-btn:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

.c-btn b{
  font-family:var(--sans);
  font-size:15.5px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
}
.c-ico{
  flex:none;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.c-ico *{vector-effect:non-scaling-stroke}
.c-go{margin-left:auto;font-size:16px;transition:transform .3s cubic-bezier(.16,.8,.24,1)}
a.c-btn:hover .c-go{transform:translateX(4px)}

/* nothing to press yet, so it does not pretend */
.c-btn.is-soon{
  background:transparent;
  color:var(--ink-2);
  border-color:var(--rule);
  border-style:dashed;
}

.c-note{
  margin:10px 2px 0;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-3);
}

@media (prefers-reduced-motion:reduce){
  .c-btn,.c-go{transition:none}
  a.c-btn:hover .c-go{transform:none}
}

/* ------------------------------------------------------- stacked questions
   Restored: these were lost when the .asks block beneath them was rewritten.
   Four questions in one heading set six lines of display type with question
   marks scattered through it, which reads as a paragraph. One carries the
   heading and the rest stack under it, each on its own line. */

.asking{
  list-style:none;
  margin:clamp(16px,1.8vw,22px) 0 0;
  padding:0;
  display:grid;
  gap:clamp(6px,.7vw,10px);
}
.asking li{
  font-family:var(--display);
  font-size:clamp(21px,2.5vw,31px);
  line-height:1.16;
  letter-spacing:-.018em;
  color:var(--ink-3);
}
.asking li:last-child{color:var(--ochre)}
.ch-forest .asking li,.ch-night .asking li{color:#B5A48D}

/* ------------------------------------------------------------ where it is
   An address, set as one. It answers the invitation directly above it, so it
   sits under the heading rather than at the foot of the section, and reads as
   a place rather than as three columns of administrative text. */

.where{
  display:flex;
  gap:clamp(14px,1.6vw,20px);
  align-items:flex-start;
  margin:clamp(24px,2.8vw,34px) 0 clamp(30px,3.6vw,46px);
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px);
  border:1px solid var(--rule);
  border-left:3px solid var(--ochre);
  border-radius:var(--r);
  background:rgba(255,255,255,.62);
  max-width:64ch;
}

.where-pin{
  flex:none;
  width:clamp(22px,2.2vw,27px);
  height:clamp(22px,2.2vw,27px);
  margin-top:2px;
  fill:none;
  stroke:var(--ochre);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.where-pin *{vector-effect:non-scaling-stroke}

.where-body{min-width:0}
.where p{margin:0}

.where-name{
  margin-top:8px !important;
  font-family:var(--display);
  font-size:clamp(20px,2.1vw,27px);
  line-height:1.16;
  letter-spacing:-.018em;
  color:var(--ink);
}
.where-place{
  margin-top:7px !important;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ochre);
}
.where-caveat{
  margin-top:14px !important;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-3);
}

/* the room, described under the photographs of it rather than in the heading
   block above them or in the address beside it */
.shot-note{
  margin:clamp(20px,2.2vw,28px) 0 0;
  max-width:52ch;
  font-size:clamp(16px,1.55vw,18.5px);
  line-height:1.5;
  color:var(--ink-2);
}

/* ------------------------------------------------------- a year from now
   Restored: lost when the "where it is" block above was written with a slice
   that dropped everything after it.

   The future drawn rather than described. Twelve marks for twelve months,
   the early ones low and cool, the last one tall and lit, so the eye reads
   the year passing before the sentence does. The section says nothing
   changes suddenly, so nothing in the drawing does either. */

.year-arc{
  list-style:none;
  margin:0 0 clamp(30px,3.6vw,46px);
  padding:0;
  display:flex;
  align-items:flex-end;
  gap:clamp(5px,.9vw,11px);
  height:clamp(72px,9vw,132px);
}

.year-arc li{
  flex:1 1 0;
  border-radius:100px 100px 3px 3px;
  background:currentColor;
  opacity:.85;
}

.year-arc li:nth-child(1){height:20%;color:#435143}
.year-arc li:nth-child(2){height:26%;color:#485646}
.year-arc li:nth-child(3){height:31%;color:#4E5C4A}
.year-arc li:nth-child(4){height:38%;color:#56634E}
.year-arc li:nth-child(5){height:44%;color:#616B53}
.year-arc li:nth-child(6){height:51%;color:#6E7359}
.year-arc li:nth-child(7){height:58%;color:#7E7B5F}
.year-arc li:nth-child(8){height:66%;color:#918366}
.year-arc li:nth-child(9){height:74%;color:#A68C6B}
.year-arc li:nth-child(10){height:83%;color:#BB9569}
.year-arc li:nth-child(11){height:92%;color:#CFA267}
.year-arc li:nth-child(12){height:100%;color:#E8B96A;opacity:1}

.year-ends{
  display:flex;
  justify-content:space-between;
  margin:-14px 0 clamp(30px,3.6vw,46px);
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#8C7C68;
}
.year-ends span:last-child{color:#E8B96A}

/* the line that follows the governing one, restored: it was dropped when the
   section was rebalanced and only the first of the two survived */
.understand-note{
  margin:0 0 clamp(26px,3vw,40px);
  max-width:34ch;
  font-size:clamp(16px,1.55vw,18.5px);
  line-height:1.5;
  color:var(--ink-2);
}