/* ============================================================
   CONCEPTO P — THE FRONT DOOR, WHITE (atelier.js)
   The house's white paper. CORREO in the glossy black vinyl. A cyanotype
   developing on its mat. One line to write on, and the word that sends it.
   White water. (no warm ground and no button; the page is white,
   and every action is a word the hand answers.)
   ============================================================ */
html:has(body.atelier-on),
body.atelier-on,
body.atelier-on #app{
  background:#FFFFFF;
  overflow-x:hidden;
}
body.atelier-on{ overflow-y:auto; }
body.atelier-on #app{ overflow:visible; }
body.atelier-on #nav{ color:#1A1918; }
body.atelier-on #nav::before{ display:none !important; }
body.atelier-on #nav .nav-lang{ color:#1A1918; opacity:.7; }

.at{
  --paper:#FFFFFF; --ink:#141413; --ink-2:rgba(20,20,19,.62); --hair:rgba(20,20,19,.28);
  position:relative; min-height:100vh; min-height:100svh; color:var(--ink);
  display:flex; flex-direction:column;
}
/* the white paper, and a breath of its fibre: no pool of lamp and no shade on the page itself */
.at-ground{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .08  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--paper);
}

.at-sheet{
  position:relative; z-index:1; flex:1;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center;
  gap:clamp(32px, 6vw, 110px);
  width:min(1240px, 100%); margin:0 auto; box-sizing:border-box;
  padding:calc(var(--nav-h, 72px) + 2vh) clamp(24px, 5vw, 72px) clamp(56px, 8vh, 96px);
}

/* ---------- the print, developing ---------- */
.at-print{ margin:0; justify-self:end; width:min(100%, 440px); }
.at-print-sheet{
  position:relative; background:#FBFAF6; padding:clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(30px, 3.2vw, 44px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(40,34,26,.10), 0 26px 50px -24px rgba(40,34,26,.32);
  transform:translateY(14px); opacity:0;
  transition:transform 1.4s var(--settle, cubic-bezier(.2,.7,.1,1)), opacity 1s var(--settle, ease);
}
.at.is-in .at-print-sheet{ transform:none; opacity:1; }
.at-print-img{
  display:block; width:100%; height:auto; aspect-ratio:760 / 1036; object-fit:cover; background:#F7F6F1;
  filter:brightness(2.6) contrast(.32) saturate(0) blur(.6px);
  transition:filter 3.6s var(--breath) .5s;
}
.at.is-developed .at-print-img{ filter:none; }
/* the water running off the sheet as it develops: one wet sheen that drains down */
.at-print-wet{
  position:absolute; left:clamp(14px, 1.6vw, 22px); right:clamp(14px, 1.6vw, 22px); top:clamp(14px, 1.6vw, 22px);
  height:calc(100% - clamp(44px, 4.8vw, 66px)); pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 46%, rgba(220,232,246,.25) 54%, rgba(255,255,255,0) 100%);
  background-size:100% 260%; background-position:0 0;
}
.at.is-developed .at-print-wet{ animation:at-wet 3.8s var(--breath) .4s 1 both; }
@keyframes at-wet{ 0%{ opacity:0; background-position:0 0; } 15%{ opacity:1; } 85%{ opacity:.6; } 100%{ opacity:0; background-position:0 100%; } }

/* ---------- the words ---------- */
.at-words{ justify-self:start; max-width:520px; }
.at-word{
  margin:0; font-family:var(--display); font-weight:400; font-style:normal;
  font-size:clamp(84px, 10.4vw, 188px); line-height:.92; letter-spacing:-.025em;
  color:var(--ink); -webkit-text-fill-color:var(--ink); filter:url(#cp-vinyl);
  padding-bottom:.06em;
}
.at-lede{
  margin:clamp(14px, 2vh, 26px) 0 0; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(22px, 1.9vw, 30px); line-height:1.25; color:var(--ink);
  opacity:0; transform:translateY(8px);
  transition:opacity 1s var(--settle, ease) 1.2s, transform 1.2s var(--settle, ease) 1.2s;
}
.at.is-in .at-lede{ opacity:1; transform:none; }

.at-form{
  margin:clamp(26px, 4vh, 44px) 0 0; display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  opacity:0; transform:translateY(8px);
  transition:opacity 1s var(--settle, ease) 1.5s, transform 1.2s var(--settle, ease) 1.5s;
}
.at.is-in .at-form{ opacity:1; transform:none; }
.at-honey{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; opacity:0; }
.at-line{ display:block; width:min(420px, 100%); border-bottom:1px solid var(--hair); transition:border-color .4s ease; }
.at-line:focus-within{ border-bottom-color:var(--ink); }
.at-input{
  width:100%; box-sizing:border-box; border:0; outline:0; background:transparent; padding:10px 0 9px;
  font-family:var(--display); font-style:italic; font-size:max(16px, clamp(20px, 1.6vw, 24px)); color:var(--ink);
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.at-input::placeholder{ color:var(--ink-2); opacity:.75; }

/* the word that sends: a word in the reading voice, nothing round it; the hand answers it (hand.js). While the
   letter is on its way it rests (disabled, quieter), and nothing pulses */
.at-send{
  position:relative; padding:10px 0 6px; border:0; background:none; cursor:pointer;
  font-family:var(--display); font-style:italic; font-size:clamp(21px, 1.7vw, 25px); letter-spacing:.005em;
  color:var(--ink); -webkit-tap-highlight-color:transparent;
}
.at.is-sending .at-send{ pointer-events:none; }
.at-said{ margin:-8px 0 0; min-height:1.3em; font-family:var(--display); font-style:italic; font-size:17px; color:#7A2E1E; }

/* ---------- after ---------- */
.at-done{ display:none; }
.at.is-done .at-lede, .at.is-done .at-form{ display:none; }
.at.is-done .at-done{ display:block; margin-top:clamp(18px, 3vh, 34px); }
.at-thanks{
  margin:0; font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(52px, 5.6vw, 96px); line-height:1; letter-spacing:-.015em;
  color:var(--ink); -webkit-text-fill-color:var(--ink); filter:url(#cp-vinyl);
}
.at-after{ margin:16px 0 0; max-width:24em; font-family:var(--display); font-style:italic; font-size:clamp(18px, 1.5vw, 22px); line-height:1.4; color:var(--ink-2); text-wrap:balance; }
.at-share{
  margin:26px 0 0; padding:8px 0 5px; border:0; background:none; cursor:pointer;
  font-family:var(--display); font-style:italic; font-size:clamp(19px, 1.5vw, 22px); color:var(--ink);
}
.at.is-preview .at-share{ display:none; }

/* ---------- the white water ---------- */
.at-water{
  position:fixed; left:0; right:0; top:0; height:118vh; z-index:60; pointer-events:none;
  transform:translateY(102vh); will-change:transform;
}
.at-water-body{ position:absolute; left:0; right:0; top:58px; bottom:0; background:#FDFCF9; }
.at-water-crest{ position:absolute; left:-2%; width:104%; top:0; height:64px; fill:#FDFCF9; filter:drop-shadow(0 -6px 10px rgba(60,70,90,.16)); }
.at.is-washing .at-water{ transform:translateY(-12vh); transition:transform .85s var(--breath); }
.at.is-drained .at-water{ transform:translateY(-130vh); transition:transform 1s var(--lift); }

/* ---------- members, at the foot ---------- */
.at-foot{ position:relative; z-index:1; display:flex; justify-content:flex-end; padding:0 clamp(24px, 5vw, 72px) calc(22px + env(safe-area-inset-bottom)); }
.at-mem{ border:0; background:none; cursor:pointer; padding:8px 0; font-family:var(--display); font-style:italic; font-size:15px; color:var(--ink-2); }
.at-gate{ display:flex; align-items:baseline; gap:12px; }
.at-gate[hidden]{ display:none; }
.at-key{ width:180px; border:0; border-bottom:1px solid var(--hair); background:transparent; padding:6px 0; font-family:var(--display); font-style:italic; font-size:16px; color:var(--ink); outline:0; }
.at-key-note{ font-family:var(--display); font-style:italic; font-size:14px; color:var(--ink-2); }

/* ---------- a phone: the word, the print, the line, the word that sends, one under the other ---------- */
@media (max-width:759px){
  .at-sheet{ grid-template-columns:1fr; gap:0; justify-items:center; text-align:center;
    padding:calc(var(--nav-h, 64px) + 4px) 22px 28px; align-content:start; }
  .at-words{ display:contents; }
  .at-word{ order:1; font-size:clamp(76px, 25vw, 112px); }
  .at-print{ order:2; justify-self:center; width:min(64vw, 300px); margin-top:clamp(14px, 2.4vh, 24px); }
  .at-lede{ order:3; margin-top:clamp(20px, 3vh, 30px); font-size:23px; }
  .at-form{ order:4; align-items:center; margin-top:clamp(14px, 2vh, 22px); gap:18px; width:100%; }
  .at-line{ width:min(340px, 100%); }
  .at-input{ text-align:center; }
  .at-done{ order:3; }
  .at.is-done .at-done{ text-align:center; }
  .at-after{ margin-left:auto; margin-right:auto; }
  .at-foot{ justify-content:center; }
}
@media (max-width:759px) and (max-height:700px){
  .at-print{ width:min(50vw, 220px); }
  .at-word{ font-size:clamp(64px, 21vw, 92px); }
}

@media (prefers-reduced-motion: reduce){
  .at-print-sheet, .at-lede, .at-form{ transition:none; opacity:1; transform:none; }
  .at-print-img{ transition:none; filter:none; }
  .at-print-wet{ display:none; }
  .at-water{ display:none; }
}