@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

:root {
  --brand-paper: #faf8f4;
  --brand-white: #fffefa;
  --brand-stone: #f0ece5;
  --brand-ink: #282722;
  --brand-muted: #625e54;
  --brand-olive: #40473b;
  --brand-rule: #ddd6cc;
  --brand-focus: #626d52;
  --brand-radius: 12px;
  --serif: "Instrument Serif", Georgia, serif;
}

.studio, .studio-editor {
  --site-bg: var(--brand-paper);
  --site-ink: var(--brand-ink);
  --site-muted: var(--brand-muted);
  --site-line: var(--brand-rule);
  --site-accent: var(--brand-olive);
  background: var(--brand-paper);
  color: var(--brand-ink);
}
:is(.studio,.studio-editor,.occasion-page,.invitation-page) :is(a,button,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 4px;
}
:is(.site-header,.site-footer,.bar,footer) .brand span { color: #817961; }
.site-header nav a, .site-footer nav a { font-size: .875rem; }
.site-hero { padding-block: clamp(2rem,5vw,5rem); }
.site-hero h1 { font-size: clamp(3.9rem,9vw,8.4rem); letter-spacing: -.035em; line-height: .86; }
.site-hero-copy p { font-size: 1rem; }
.site-hero .site-button { margin-top: 1.4rem; border-radius: 7px; }
.site-button:hover, .site-custom #custom-form .studio-primary:hover { background: #30362c; }
.hero-preview {
  position: relative;
  display: block;
  border-radius: var(--brand-radius);
  overflow: hidden;
  padding: 0;
  box-shadow: 0 14px 35px #302b2020;
}
.hero-preview img { display: block; width: 100%; aspect-ratio: 3/2; height: auto; object-fit: cover; transition: transform .45s ease; }
.hero-preview:hover img { transform: scale(1.025); }
.hero-preview-label { position: absolute; inset: auto .75rem .75rem auto; padding: .3rem .85rem; background: var(--brand-white); border-radius: 7px; color: var(--brand-ink); }
.studio :is(.collection#templates,.collection#occasions) { padding-block: clamp(2rem,4vw,4rem); }
.studio .collection-heading { margin-bottom: 1.2rem; }
.studio :is(.template-art,.occasion-card img) { border-radius: var(--brand-radius); }
.studio .template-card .design-description { font-size: .9rem; line-height: 1.45; }
.studio .template-card .art-link { min-height: 44px; }
.studio .template-card .use-design { display: inline-flex; min-height: 44px; align-items: center; }
.studio .template-card .mini-card { box-shadow: 0 8px 24px #261a2540; }
.studio .custom-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding-block: clamp(2rem,4vw,3rem); }
.site-custom #custom-form { background: var(--brand-white); padding: clamp(1.1rem,3vw,2rem); border: 1px solid var(--brand-rule); border-radius: var(--brand-radius); }
.site-custom #custom-form :is(input,textarea) { border-color: #a89d8e; min-height: 44px; }

.studio-editor .bar,.studio-editor footer,.occasion-page .bar,.occasion-page footer,.invitation-page .bar,.invitation-page footer {
  background: var(--brand-paper);
  border-bottom: 1px solid var(--brand-rule);
  color: var(--brand-ink);
}
.studio-editor footer,.occasion-page footer,.invitation-page footer { border-top: 1px solid var(--brand-rule); border-bottom: 0; }
:is(.studio-editor,.occasion-page,.invitation-page) .bar-link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline; text-underline-offset: .24em; }
:is(.studio-editor,.occasion-page) .editor { padding-block: clamp(2rem,5vw,4.3rem); }
.editor h1 { font-size: clamp(3.35rem,8vw,6rem); margin-top: 0; }
.editor > p { max-width: 48ch; color: var(--brand-muted); }
:is(.studio-editor,.occasion-page) .editor fieldset {
  background: var(--brand-white);
  border: 1px solid var(--brand-rule);
  border-radius: var(--brand-radius);
  padding: 1.15rem;
}
.editor legend { color: var(--brand-ink); font-size: 1.65rem; }
.editor .editor-fields { gap: 1rem; }
.editor :is(input,select,textarea) { min-height: 44px; background: var(--brand-white); border-color: #a89d8e; border-radius: 7px; font-size: 1rem; }
.editor label { font-size: .9rem; }
.editor small { color: var(--brand-muted); font-weight: 400; }
.editor details { border: 1px solid var(--brand-rule); border-radius: var(--brand-radius); background: var(--brand-white); }
.editor summary { padding: .8rem 1.1rem; min-height: 44px; cursor: pointer; font-weight: 600; }
.editor details fieldset { border: 0; margin: 0; }
:is(.studio-editor,.occasion-page) .editor .button { background: var(--brand-olive); color: var(--brand-white); min-height: 46px; border-radius: 7px; }
.preview-jump { display: inline-flex; min-height: 44px; align-items: center; margin-top: .45rem; text-underline-offset: .24em; }
.preview-panel { background: var(--brand-stone); padding: 1rem; border-radius: var(--brand-radius); }
.preview-panel iframe { border-radius: 7px; border: 1px solid var(--brand-rule); height: clamp(430px,68vh,620px); }
.preview-panel h2 { margin: 0 0 .75rem; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .75rem; }
.preview-heading h2 { margin: 0; }
.preview-heading button, #full-preview, #close-preview { min-height: 44px; color: var(--brand-olive); text-decoration: underline; text-underline-offset: .23em; border: 0; }
.preview-heading button:disabled, #full-preview:disabled { opacity: .55; }
.occasion-page .occasion-hero { background: var(--brand-stone); min-height: 0; }
.occasion-page .occasion-copy { color: var(--brand-ink); border: 0; }
.occasion-page[data-occasion=graduation] .occasion-copy h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -.04em; }
.occasion-page .occasion-copy .button { background: var(--brand-olive); color: var(--brand-white); min-height: 46px; border-radius: 7px; }
.occasion-page .occasion-details { background: var(--brand-white); border-radius: var(--brand-radius); margin-block: 1rem; }
.occasion-page .occasion-copy h1 { font-size: clamp(3.3rem,8vw,6.5rem); }
.invitation-page .events article { border-radius: 0; }
.invitation-page .rsvp input,.invitation-page .rsvp select { min-height: 44px; font-size: 1rem; }
.invitation-page .chapter-controls button,.invitation-page .rsvp .button,.invitation-page .opening-action { border-radius: 7px; }

@media(max-width: 540px) {
  .site-shell { width: calc(100% - 2rem); }
  .site-hero h1 { font-size: clamp(3.4rem,12.5vw,5rem); }
  .site-hero { gap: 1.45rem; }
  .studio .occasion-grid { grid-template-columns: 1fr; gap: .7rem; }
  .studio .occasion-card { display: grid; grid-template-columns: 80px minmax(0,1fr); align-items: center; gap: .9rem; }
  .studio .occasion-card h3 { font-size: 1.5rem; margin: 0; }
  .editor .editor-fields { grid-template-columns: 1fr; }
}
@media(min-width: 740px) {
  .site-hero { grid-template-columns: .9fr 1fr; }
  .studio-editor .preview-panel { position: sticky; top: 1rem; }
  .preview-jump { display: none; }
}
@media(prefers-reduced-motion:no-preference) {
  @supports (animation-timeline: view()) {
    .studio .occasion-card { animation: lift-in linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
  }
}
@keyframes lift-in { from { opacity: .75; transform: translateY(8px); } }
@media(prefers-reduced-motion:reduce) { .hero-preview img { transition: none; } }

#full-preview-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--brand-paper);
  color: var(--brand-ink);
}
#full-preview-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr); }
body:has(#full-preview-dialog[open]) { overflow: hidden; }
.full-preview-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 1rem;
  padding: max(.25rem,env(safe-area-inset-top)) 1rem .25rem;
  border-bottom: 1px solid var(--brand-rule);
}
.full-preview-heading h2 { margin: 0; font-size: 1.55rem; }
#full-preview-frame { width: 100%; height: 100%; display: block; border: 0; }