/* ========================================================================
   POSTCARD GUESTBOOK: STYLES
   Everything is scoped to .jt-pc (the embeds) and .jt-pc-dialog (the
   composer and the postcard viewer), so nothing here reaches the rest of
   the site.
   The postcard artwork is shown whole, at its own 3:2 proportions.
   ======================================================================== */
.jt-pc,.jt-pc-dialog{
  --jt-pc-paper:#EFEDE5;
  --jt-pc-paper-2:#E4E1D6;
  --jt-pc-ink:#1A1A17;
  --jt-pc-ink-soft:#5A5850;
  --jt-pc-line:rgba(26,26,23,.18);
  --jt-pc-red:#C72B1E;
  --jt-pc-red-dark:#A3221A;
  --jt-pc-teal:#043E50;
  --jt-pc-green:#02251D;
  --jt-pc-yellow:#F4B54C;
  --jt-pc-sans:"GT Flexa Standard","Gt Flexa Standard","GT Flexa",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --jt-pc-mono:"GT Flexa Mono","Gt Flexa Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --jt-pc-ease:cubic-bezier(.22,1,.36,1);
  font-family:var(--jt-pc-sans);
  -webkit-font-smoothing:antialiased;
}
.jt-pc *,.jt-pc *::before,.jt-pc *::after,
.jt-pc-dialog *,.jt-pc-dialog *::before,.jt-pc-dialog *::after{box-sizing:border-box;}
/* resets use :where() so they never outrank the component's own spacing */
:where(.jt-pc,.jt-pc-dialog) :where(p,h1,h2,h3,ul,li,fieldset,legend){margin:0;padding:0;}
:where(.jt-pc,.jt-pc-dialog) :where(ul){list-style:none;}
:where(.jt-pc,.jt-pc-dialog) :where(img){display:block;max-width:100%;border:0;vertical-align:top;}
.jt-pc button,.jt-pc-dialog button,.jt-pc-dialog input,.jt-pc-dialog textarea{font:inherit;color:inherit;}
.jt-pc [hidden],.jt-pc-dialog [hidden]{display:none !important;}
.jt-pc-vh{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- shared buttons ---------- */
.jt-pc-btn{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:48px;padding:.85em 1.4em;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--jt-pc-red);color:var(--jt-pc-paper) !important;
  font-family:var(--jt-pc-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;
  transition:background-color .2s ease;
}
.jt-pc-btn:hover{background:var(--jt-pc-red-dark);}
.jt-pc-btn[disabled]{opacity:.6;cursor:progress;}
.jt-pc-btn--ghost{background:transparent;color:inherit !important;box-shadow:inset 0 0 0 1px currentColor;}
.jt-pc-btn--ghost:hover{background:rgba(127,127,127,.12);}
.jt-pc-btn--sm{min-height:44px;padding:.6em 1.1em;font-size:.72rem;}
.jt-pc a:focus-visible,.jt-pc button:focus-visible,
.jt-pc-dialog a:focus-visible,.jt-pc-dialog button:focus-visible,
.jt-pc-dialog input:focus-visible,.jt-pc-dialog textarea:focus-visible{
  outline:2px solid var(--jt-pc-focus,var(--jt-pc-red));outline-offset:3px;
}

/* ========================================================================
   THE POSTCARD ITSELF (composer preview, wall, viewer)
   Positions and sizes are percentages of the card, so a postcard looks
   the same at every size.
   ======================================================================== */
.jt-pc-card{
  position:relative;display:block;aspect-ratio:3/2;width:100%;overflow:hidden;
  container-type:inline-size;
  background:#D9D2C8;
  box-shadow:0 1px 2px rgba(26,26,23,.18),0 10px 24px rgba(26,26,23,.14);
}
.jt-pc-card__art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.jt-pc-sticker{
  position:absolute;left:var(--x);top:var(--y);width:calc(var(--w) * var(--s));height:auto;
  transform:translate(-50%,-50%) rotate(var(--r));transform-origin:50% 50%;
  pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(26,26,23,.28)) drop-shadow(0 3px 6px rgba(26,26,23,.12));
}
.jt-pc-sticker img{width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;user-select:none;}

/* back of the card: the message on the left, a sign-off (name, then
   location) on the right, lined up with the top of the message */
.jt-pc-back__msg{
  position:absolute;left:13.6%;top:38%;width:34.5%;height:48%;overflow:hidden;
  font-family:var(--jt-pc-sans);color:var(--jt-pc-ink);line-height:1.38;letter-spacing:-.005em;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;
}
.jt-pc-back__line{
  position:absolute;left:56.2%;width:29.6%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:var(--jt-pc-ink);line-height:1.15;
}
.jt-pc-back__name{top:39.5%;font-family:var(--jt-pc-sans);font-weight:500;font-size:2.15cqw;}
.jt-pc-back__place{top:44.6%;font-family:var(--jt-pc-mono);font-size:1.5cqw;letter-spacing:.08em;text-transform:uppercase;}
.jt-pc-back__empty{color:#8A857B;}

/* ========================================================================
   HOMEPAGE ENTRY: a postcard near "Let's chat"
   ======================================================================== */
.jt-pc-entry{display:flex;flex-direction:column;align-items:center;gap:18px;margin-block:clamp(28px,4vw,48px);text-align:center;}
.jt-pc-entry__open{
  -webkit-appearance:none;appearance:none;display:block;position:relative;width:min(340px,78vw);padding:0;border:0;background:none;cursor:pointer;
  transform:rotate(-3deg);transition:transform .35s var(--jt-pc-ease);
}
.jt-pc-entry__open:hover,.jt-pc-entry__open:focus-visible{transform:rotate(-1deg) translateY(-4px);}
.jt-pc-entry__open .jt-pc-card{box-shadow:0 2px 3px rgba(0,0,0,.22),0 16px 32px rgba(0,0,0,.22);}
.jt-pc-entry__label{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%) rotate(3deg);white-space:nowrap;pointer-events:none;}
.jt-pc-entry__links{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;}
.jt-pc-link{
  display:inline-flex;align-items:center;min-height:44px;gap:.4em;color:inherit !important;
  font-family:var(--jt-pc-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.3em;
}
.jt-pc-link:hover{text-decoration-thickness:2px;}
/* the homepage's dark state: a lighter focus ring that reads on #333 */
html.jt-hp-dark .jt-pc-entry{--jt-pc-focus:#FFA79A;}

/* ========================================================================
   /POSTCARDS PAGE + WALL
   ======================================================================== */
.jt-pc-page{
  background:var(--jt-pc-paper);color:var(--jt-pc-ink);
  padding:clamp(40px,7vw,88px) clamp(20px,5vw,48px) clamp(56px,8vw,104px);
}
.jt-pc-page__in{max-width:1160px;margin-inline:auto;}
.jt-pc-eyebrow{font-family:var(--jt-pc-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jt-pc-red);}
.jt-pc-page h1{
  margin-top:.45em;font-size:clamp(2.6rem,7.5vw,5.25rem);line-height:.96;letter-spacing:-.035em;font-weight:500;text-wrap:balance;
}
.jt-pc-page__intro{margin-top:1em;max-width:46ch;font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.5;color:var(--jt-pc-ink-soft);}
.jt-pc-page__cta{margin-top:1.6em;}

.jt-pc-wall{margin-top:clamp(40px,6vw,72px);}
.jt-pc-wall__note{
  padding:14px 18px;border:1px dashed var(--jt-pc-line);border-radius:14px;margin-bottom:28px;
  font-size:.95rem;line-height:1.5;color:var(--jt-pc-ink-soft);max-width:62ch;
}
.jt-pc-wall__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(28px,4vw,52px) clamp(24px,3.5vw,44px);}
.jt-pc-item{
  -webkit-appearance:none;appearance:none;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;
  transition:transform .35s var(--jt-pc-ease);
}
.jt-pc-item__from{
  display:block;margin-top:14px;font-family:var(--jt-pc-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--jt-pc-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jt-pc-item__tag{
  display:inline-block;margin-left:.6em;padding:.2em .6em;border-radius:999px;background:var(--jt-pc-yellow);color:var(--jt-pc-ink);
}
/* a loose scrapbook on wider screens: gentle tilts, never overlapping */
@media (min-width:768px){
  .jt-pc-wall__list > li:nth-child(6n+1) .jt-pc-item{transform:rotate(-2.2deg);}
  .jt-pc-wall__list > li:nth-child(6n+2) .jt-pc-item{transform:rotate(1.6deg) translateY(14px);}
  .jt-pc-wall__list > li:nth-child(6n+3) .jt-pc-item{transform:rotate(-.9deg) translateY(-6px);}
  .jt-pc-wall__list > li:nth-child(6n+4) .jt-pc-item{transform:rotate(2.3deg) translateY(6px);}
  .jt-pc-wall__list > li:nth-child(6n+5) .jt-pc-item{transform:rotate(-1.7deg) translateY(16px);}
  .jt-pc-wall__list > li:nth-child(6n+6) .jt-pc-item{transform:rotate(.8deg);}
  .jt-pc-wall__list > li .jt-pc-item:hover,
  .jt-pc-wall__list > li .jt-pc-item:focus-visible{transform:rotate(0) translateY(-6px);}
}
.jt-pc-wall__empty{
  display:grid;gap:14px;justify-items:start;padding:clamp(28px,4vw,44px);
  border:1px dashed var(--jt-pc-line);border-radius:20px;max-width:640px;
}
.jt-pc-wall__empty h2{font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.1;letter-spacing:-.02em;font-weight:500;}
.jt-pc-wall__empty p{color:var(--jt-pc-ink-soft);line-height:1.5;}
.jt-pc-wall__more{margin-top:clamp(36px,5vw,56px);display:flex;justify-content:center;}
.jt-pc-wall__status{margin-top:16px;color:var(--jt-pc-ink-soft);}
.jt-pc-skel{aspect-ratio:3/2;background:linear-gradient(100deg,#E4E1D6 30%,#ECE9E0 50%,#E4E1D6 70%);background-size:300% 100%;animation:jt-pc-shimmer 1.4s linear infinite;}
@keyframes jt-pc-shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ========================================================================
   DIALOGS (composer + viewer)
   ======================================================================== */
.jt-pc-dialog{
  width:min(1120px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);
  margin:auto;padding:0;border:0;border-radius:22px;
  background:var(--jt-pc-paper);color:var(--jt-pc-ink);
  box-shadow:0 24px 64px rgba(0,0,0,.32);overflow:hidden;
}
.jt-pc-dialog::backdrop{background:rgba(26,26,23,.62);}
.jt-pc-dialog[open]{display:flex;flex-direction:column;animation:jt-pc-in .32s var(--jt-pc-ease);}
@keyframes jt-pc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.jt-pc-lock{overflow:hidden;}
.jt-pc-dialog__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 14px 14px clamp(18px,3vw,28px);border-bottom:1px solid var(--jt-pc-line);flex:none;
}
.jt-pc-dialog__title{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:500;letter-spacing:-.015em;line-height:1.2;}
.jt-pc-dialog__title:focus{outline:none;}
.jt-pc-dialog__title:focus-visible{outline:2px solid var(--jt-pc-red);outline-offset:4px;border-radius:4px;}
.jt-pc-x{
  -webkit-appearance:none;appearance:none;flex:none;width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:999px;background:transparent;cursor:pointer;
}
.jt-pc-x:hover{background:rgba(26,26,23,.08);}
.jt-pc-dialog__body{overflow:auto;overscroll-behavior:contain;padding:clamp(18px,3vw,28px);flex:1 1 auto;}

/* composer: preview on the left, form on the right; stacked on small screens */
.jt-pc-compose{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:1fr;align-items:start;}
@media (min-width:900px){ .jt-pc-compose{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);} }
.jt-pc-stage{display:grid;gap:14px;min-width:0;}
@media (min-width:900px){ .jt-pc-stage{position:sticky;top:0;} }

.jt-pc-faces{display:inline-flex;padding:4px;gap:4px;border-radius:999px;background:var(--jt-pc-paper-2);justify-self:start;}
.jt-pc-faces button{
  -webkit-appearance:none;appearance:none;min-height:40px;padding:.5em 1.15em;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--jt-pc-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jt-pc-ink-soft);
}
.jt-pc-faces button[aria-pressed="true"]{background:var(--jt-pc-ink);color:var(--jt-pc-paper);}

.jt-pc-face{transition:opacity .25s ease;}
.jt-pc-face[hidden]{display:none !important;}

/* placed stickers in the composer can be grabbed and selected */
.jt-pc-card--edit .jt-pc-sticker{
  -webkit-appearance:none;appearance:none;padding:0;border:0;background:none;
  pointer-events:auto;cursor:grab;touch-action:none;
}
.jt-pc-card--edit .jt-pc-sticker:active{cursor:grabbing;}
.jt-pc-card--edit .jt-pc-sticker[aria-pressed="true"]{outline:2px dashed var(--jt-pc-red);outline-offset:4px;border-radius:6px;}
.jt-pc-card--edit .jt-pc-sticker:focus-visible{outline:2px solid var(--jt-pc-red);outline-offset:4px;border-radius:6px;}

.jt-pc-label{display:block;font-family:var(--jt-pc-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--jt-pc-ink);}
.jt-pc-hint{font-size:.9rem;line-height:1.5;color:var(--jt-pc-ink-soft);}
.jt-pc-tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.jt-pc-tray button{
  -webkit-appearance:none;appearance:none;width:60px;height:60px;padding:7px;border:1px dashed var(--jt-pc-line);border-radius:14px;
  background:#fff8;cursor:pointer;display:grid;place-items:center;transition:transform .2s var(--jt-pc-ease),border-color .2s ease;
}
.jt-pc-tray button:hover{transform:translateY(-2px) rotate(-3deg);border-color:var(--jt-pc-red);}
.jt-pc-tray button[disabled]{opacity:.4;cursor:not-allowed;transform:none;}
.jt-pc-tray img{width:100%;height:100%;object-fit:contain;}
.jt-pc-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center;}
.jt-pc-tools[hidden]{display:none !important;}
.jt-pc-tool{
  -webkit-appearance:none;appearance:none;min-width:44px;height:44px;padding:0 10px;display:inline-grid;place-items:center;
  border:1px solid var(--jt-pc-line);border-radius:12px;background:#fff8;cursor:pointer;
  font-family:var(--jt-pc-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
}
.jt-pc-tool:hover{border-color:var(--jt-pc-ink);}
.jt-pc-tool--remove{color:var(--jt-pc-red);}
.jt-pc-tool svg{width:18px;height:18px;}

/* form */
.jt-pc-form{display:grid;gap:18px;min-width:0;}
.jt-pc-field{display:grid;gap:7px;}
.jt-pc-field__opt{font-family:var(--jt-pc-sans);text-transform:none;letter-spacing:0;font-size:.85rem;color:var(--jt-pc-ink-soft);}
.jt-pc-input{
  width:100%;min-height:48px;padding:.7em .9em;border:1px solid rgba(26,26,23,.45);border-radius:12px;background:#FBFAF6;
  font-family:var(--jt-pc-sans);font-size:1rem;line-height:1.4;color:var(--jt-pc-ink);
}
textarea.jt-pc-input{min-height:9.5em;resize:vertical;}
.jt-pc-input[aria-invalid="true"]{border-color:var(--jt-pc-red);box-shadow:0 0 0 1px var(--jt-pc-red);}
.jt-pc-count{justify-self:end;font-family:var(--jt-pc-mono);font-size:.72rem;letter-spacing:.06em;color:var(--jt-pc-ink-soft);font-variant-numeric:tabular-nums;}
.jt-pc-err{font-size:.9rem;line-height:1.4;color:var(--jt-pc-red);font-weight:500;}
.jt-pc-err:empty{display:none;}
.jt-pc-public{
  padding:14px 16px;border-radius:14px;background:var(--jt-pc-paper-2);font-size:.95rem;line-height:1.5;
}
.jt-pc-check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer;font-size:.98rem;line-height:1.45;}
.jt-pc-check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--jt-pc-red);cursor:pointer;}
.jt-pc-turnstile:empty{display:none;}
.jt-pc-status{padding:12px 14px;border-radius:12px;font-size:.95rem;line-height:1.45;}
.jt-pc-status:empty{display:none;}
.jt-pc-status--error{background:#F6DCD7;color:#7A150D;}
.jt-pc-status--info{background:var(--jt-pc-paper-2);color:var(--jt-pc-ink);}
.jt-pc-submit{justify-self:start;}

/* success */
.jt-pc-done{display:grid;gap:18px;max-width:640px;margin-inline:auto;text-align:center;justify-items:center;padding-block:8px 12px;}
.jt-pc-done .jt-pc-card{width:min(420px,100%);transform:rotate(-2deg);}
.jt-pc-done__msg{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.35;letter-spacing:-.015em;font-weight:500;max-width:30ch;}
.jt-pc-done__msg:focus{outline:none;}
.jt-pc-done__preview{font-size:.92rem;color:var(--jt-pc-ink-soft);max-width:44ch;}

/* viewer */
.jt-pc-view{display:grid;gap:16px;max-width:820px;margin-inline:auto;}
.jt-pc-view__meta{font-family:var(--jt-pc-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--jt-pc-ink-soft);}
.jt-pc-view__text{padding-top:6px;border-top:1px solid var(--jt-pc-line);}
.jt-pc-view__text p{margin-top:8px;font-size:1.05rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;max-width:62ch;}

@media (max-width:599px){
  .jt-pc-dialog{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;}
  .jt-pc-dialog__body{padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));}
  .jt-pc-submit{justify-self:stretch;}
}

@media (prefers-reduced-motion:reduce){
  .jt-pc *,.jt-pc-dialog,.jt-pc-dialog *{transition:none !important;animation:none !important;}
  .jt-pc-entry__open:hover,.jt-pc-entry__open:focus-visible{transform:rotate(-3deg);}
  .jt-pc-wall__list > li .jt-pc-item:hover,
  .jt-pc-wall__list > li .jt-pc-item:focus-visible{transform:none;}
  .jt-pc-skel{background:#E4E1D6;}
}