@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Calistoga&display=swap");

:root {
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.68);
  --ink-faint: rgba(255, 255, 255, 0.45);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-strong: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.14);
  --accent: #ff9d4d;
  --accent-2: #8ea2ff;
  --radius: 20px;
  --radius-sm: 12px;
  --max-w: 460px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #0b0a0f;
  /* url() layer paints on top once assets/background.png exists; the
     gradient layers behind it are a fallback so the page still looks
     right if that file is missing. */
  background-image:
    url("assets/background.png"),
    radial-gradient(ellipse 120% 55% at 50% 58%, rgba(255, 157, 77, 0.45), rgba(255, 157, 77, 0) 60%),
    radial-gradient(ellipse 140% 60% at 50% 50%, rgba(142, 162, 255, 0.35), rgba(142, 162, 255, 0) 65%),
    radial-gradient(ellipse 100% 45% at 50% 66%, rgba(255, 214, 130, 0.4), rgba(255, 214, 130, 0) 60%),
    linear-gradient(to bottom, #07060a 0%, #14121c 24%, #241f34 38%, transparent 60%),
    linear-gradient(to bottom, transparent 55%, #c96a3f 78%, #f0c98d 90%, #f7ecdd 100%);
  background-size: cover, auto, auto, auto, auto, auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Past phone width, "cover" blows the portrait background image up to
   fill the wider viewport and crops most of its height away, hiding the
   bottom of the gradient. Stretch it to fill the viewport instead so the
   whole composition stays visible edge to edge. */
@media (min-width: 700px) {
  body {
    background-size: 100% 100%, auto, auto, auto, auto, auto;
  }
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px 48px;
}

/* --- Back link (subpages only) --- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-dim);
  text-decoration: none;
}

.back-link svg {
  width: 15px;
  height: 15px;
}

/* --- Hero / page headers --- */
.hero {
  text-align: center;
  padding: 56px 0 9px;
}

.hero-title {
  font-family: "Calistoga", "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 10px;
}

.hero-sub {
  margin: 0 auto;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.page-header {
  padding: 40px 0 8px;
}

.page-title {
  font-family: "Calistoga", "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  margin: 0 0 8px;
}

.page-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 8px;
  max-width: 360px;
}

/* --- Folder nav (home page) --- */
.folder-nav {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 320px;
  margin: 18px auto 40px;
}

.folder-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  padding: 4px;
  border-radius: var(--radius);
  transition: transform 0.15s ease;
}

.folder-row:active {
  transform: scale(0.98);
}

/* Reverse rows keep the icon flush to the same left margin as the text
   rows (via `order`, not row-reverse) so both column types line up into
   a clean two-column staircase instead of one side hugging the right
   edge of the screen. */
.folder-row.reverse .label {
  order: 2;
}

.folder-row.reverse .folder-icon {
  order: 1;
}

.folder-row .label {
  text-align: left;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}

.folder-row .folder-icon {
  flex-shrink: 0;
  width: 104px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  transform: rotate(-7deg);
}

.folder-row.reverse .folder-icon {
  transform: rotate(7deg);
}

/* --- Social row --- */
.social-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
}

.social-row svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink);
}

/* --- Cards (tools / resources) --- */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.empty-state {
  margin-top: 24px;
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
}

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
}

a.card {
  transition: background 0.15s ease, border-color 0.15s ease;
}

a.card:hover {
  background: var(--surface-strong);
  border-color: var(--accent-2);
}

.card-logo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  overflow: hidden;
}

.card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 3px;
}

.card-desc {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.4;
}

.card-arrow {
  flex-shrink: 0;
  opacity: 0.55;
}

/* --- Prompt boxes --- */
.prompt-card {
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px;
}

.prompt-card .card-title {
  margin-bottom: 4px;
}

.prompt-card .card-desc {
  margin-bottom: 12px;
}

.prompt-box {
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 44px 12px 12px;
}

.prompt-box pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-height: 220px;
  overflow-y: auto;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-btn svg {
  width: 15px;
  height: 15px;
}

.copy-btn.is-copied {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Thoughts (details/summary) --- */
.thought {
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}

.thought + .thought {
  margin-top: 12px;
}

.thought summary {
  list-style: none;
  cursor: pointer;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.thought summary::-webkit-details-marker {
  display: none;
}

.thought-heading {
  flex: 1;
}

.thought-date {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 4px;
}

.thought-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 6px;
}

.thought-excerpt {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.45;
}

.thought-chevron {
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform 0.2s ease;
}

.thought[open] .thought-chevron {
  transform: rotate(180deg);
}

.thought-body {
  padding: 0 16px 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
  white-space: pre-line;
}

/* --- Form --- */
.form-card {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-2);
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.checkbox-field input {
  margin-top: 3px;
  width: auto;
  flex-shrink: 0;
}

.checkbox-field label {
  text-transform: none;
  font-size: 13px;
  color: var(--ink-dim);
  letter-spacing: normal;
  font-weight: 400;
}

.submit-btn {
  margin-top: 4px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #1a1109;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.form-status {
  font-size: 13px;
  margin-top: 4px;
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-success {
  color: #8fe1a8;
}

.form-status.is-error {
  color: #ff9c9c;
}

/* --- Footer --- */
.footer {
  text-align: center;
  margin-top: 40px;
}

.footer p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-faint);
}

@media (max-width: 360px) {
  .hero-title {
    font-size: 28px;
  }
  .folder-row .label {
    font-size: 23px;
  }
  .folder-row .folder-icon {
    width: 88px;
  }
}