/* The page is the recipe box: each section is a ruled index card on the
   box's painted-tin color, typed on a typewriter. Rhythm unit: 28px. */
:root {
  --tin: #2f5d55;
  --tin-dark: #234740;
  --card: #fffdf6;
  --rule: #b9cfe6;
  --red: #e2878a;
  --manila: #ead7a0;
  --manila-dark: #d8c182;
  --ink: #26241f;
  --ink-soft: #6b665c;
  --link: #2a5b9a;
  --L: 28px;
  --type: "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; }

body { margin: 0; background: var(--tin); color: var(--ink); font: 17px/var(--L) var(--type); }

.mock-banner { background: #fff4c2; color: #5a4a00; font: 14px/1.4 system-ui, sans-serif; text-align: center; padding: 6px 16px; }

.wrap { max-width: 780px; margin: 0 auto; padding: 48px 16px 64px; }

a { color: var(--link); }
p { margin: 0 0 var(--L); }
strong { font-weight: 700; }

h1, h2, h3 { font-family: var(--type); font-weight: 700; margin: 0; }
h1 { font-size: 34px; line-height: calc(var(--L) * 2); }
h2 { font-size: 24px; line-height: calc(var(--L) * 2); }
h3 { font-size: 17px; line-height: var(--L); }

/* Index cards */
.intro, .wrap > section {
  position: relative; background-color: var(--card);
  padding: var(--L) 36px var(--L);
  margin-bottom: 40px; border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.25);
  /* red header line, blank header band, blue rules */
  --head: calc(var(--L) * 3);
  background-image:
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--card), var(--card)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--L) - 5px), var(--rule) calc(var(--L) - 5px) calc(var(--L) - 4px), transparent calc(var(--L) - 4px) var(--L));
  background-size: 100% 2px, 100% var(--head), 100% 100%;
  background-position: 0 calc(var(--head) - 5px), 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* Intro + taped photo */
.intro { padding-right: 300px; }
.intro-photo {
  position: absolute; top: 34px; right: 30px; width: 236px; aspect-ratio: 4 / 5; margin: 0;
  background: #fff; padding: 9px 9px 34px; transform: rotate(3deg);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.intro-photo::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(236, 222, 180, .8); box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-missing { display: none; }
.intro-photo.missing img { display: none; }
.intro-photo.missing .photo-missing {
  display: grid; place-content: center; text-align: center; height: 100%;
  background: #eee9dc; color: var(--ink-soft); font: 14px/1.5 var(--type);
}
.photo-missing small { font-size: 12px; }
.sig { margin: 0; }

/* The two ideas */
.ideas { padding-left: 28px; margin: 0 0 var(--L); }
.ideas li { padding-left: 6px; }
.ideas li + li { margin-top: var(--L); }

/* Divider tabs sticking up out of the box */
.make { margin-top: 84px; }
.tabs { position: absolute; left: 24px; bottom: 100%; display: flex; gap: 6px; }
.tabs button {
  font: 700 16px/1 var(--type); color: var(--ink); cursor: pointer;
  background: var(--manila-dark); border: 0; border-radius: 10px 10px 0 0;
  padding: 12px 18px 10px;
}
.tabs button[aria-selected="true"] { background: var(--card); }

/* Forms */
.composer { display: grid; gap: 36px; grid-template-columns: 1fr 340px; align-items: start; }
.fields { display: grid; gap: 18px; }
.field { display: grid; gap: 4px; }
.field > span { font: 700 15px/1.3 var(--type); }
.field > span.hint { font: italic 15px/1.4 var(--type); color: var(--ink-soft); }
.opt { font-weight: 400; color: var(--ink-soft); }
.signer { max-width: 300px; }
textarea, input[type="text"], input[type="email"] {
  font: 17px/var(--L) var(--type); color: var(--ink); width: 100%;
  background: #fff; border: 1px solid #c9c2b2; border-radius: 2px; padding: 6px 10px;
}
textarea {
  resize: vertical; padding: 0 10px;
  background: #fff repeating-linear-gradient(to bottom, transparent 0 calc(var(--L) - 1px), var(--rule) calc(var(--L) - 1px) var(--L));
  background-attachment: local;
}
textarea:focus, input:focus { outline: 2px solid var(--tin); outline-offset: 0; }

button.primary, button.secondary {
  font: 700 16px/1 var(--type); padding: 12px 20px; cursor: pointer; justify-self: start; border-radius: 2px;
}
button.primary { background: var(--tin); color: #fff; border: 2px solid var(--tin); }
button.primary:hover { background: var(--tin-dark); }
button.secondary { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.saved { margin: 14px 0 0; color: #2f6b2f; font-style: italic; }

/* Printed-card preview */
.preview { position: sticky; top: 20px; }
.card {
  width: 100%; aspect-ratio: 7 / 5; position: relative; overflow: hidden; container-type: inline-size;
  background: #fff; border: 1px solid #ddd6c6; box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.face { position: absolute; inset: 0; }
.back { padding: 6cqw 7cqw; display: flex; flex-direction: column; }
.note-text { margin: 0; font: 2.8cqw/1.45 Georgia, serif; white-space: pre-wrap; overflow: hidden; flex: 1; }
.note-text .placeholder { color: #aaa; font-style: italic; }
.from { margin: 2cqw 0 0; font: italic 2.8cqw/1.3 Georgia, serif; text-align: right; }
.preview-cap { text-align: center; font: italic 14px/1 var(--type); color: var(--ink-soft); margin: 12px 0 0; }

.your-cards { margin-top: var(--L); }
.your-cards ul { padding-left: 24px; margin: 0 0 16px; }

/* Mail panel */
.mail-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; margin-bottom: var(--L); }
.spec { padding-left: 22px; margin: 0; }
address { font-style: normal; font-size: 19px; margin-bottom: var(--L); font-weight: 700; }
.placeholder-addr { color: #a39d90; font-weight: 400; }

/* Suggest */
.suggest-form { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: end; }
.suggest-form .wide { grid-column: 1 / -1; }

.foot { color: #d9e6e2; padding: 8px 4px 0; }
.foot p { margin: 0 0 6px; }

@media (max-width: 760px) {
  .wrap { padding-top: 32px; }
  .intro, .wrap > section { padding-left: 20px; padding-right: 20px; transform: none; }
  .intro { padding-right: 20px; }
  .intro-photo { position: relative; top: auto; right: auto; float: right; width: 120px; padding: 5px 5px 18px; margin: 4px -4px 8px 14px; }
  .intro-photo::before { width: 60px; height: 18px; top: -9px; }
  .composer, .mail-grid, .suggest-form { grid-template-columns: 1fr; }
  .preview { position: static; }
  .tabs { left: 12px; }
  .tabs button { padding: 10px 12px 8px; font-size: 15px; }
}

/* Wired-up bits */
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.error { margin: 14px 0 0; color: #a12a22; }
.editing { margin: 0; font-style: italic; color: var(--ink-soft); }
.your-cards li { margin-bottom: 6px; }
button:disabled { opacity: .6; cursor: default; }
.gate { margin-top: 40px; }
.gate .fields { max-width: 360px; }