/* ================================================================
   ORDER: the page a client sees once an order is placed (orderView in views.js).
   Linked after art.css. The opening of a relationship: the piece hung as a work with its
   wall label, a small cut-paper work made for the order, what happens next in plain words,
   the build tracker and the certificate, then the calm paperwork.
   Every text colour here is measured: 4.5:1 or more for body text, 3:1 or more at 24px+,
   and no word sits on a photograph or on the art without a solid backing.
   ================================================================ */
.od {
  --od-cream: var(--art-cream, #f7f3ea);
  --od-deep: var(--art-cream-deep, #efe8d8);
  --od-mat: var(--art-mat, #fbf9f4);
  --od-green: var(--art-green, #134e3a);
  --od-cobalt: var(--art-cobalt, #1e3fa6);
  --od-yellow: var(--art-yellow, #f2c230);
  --od-ink: var(--art-ink, #121212);
  --od-soft: var(--art-ink-soft, #4b4843);   /* 8.2:1 on cream, 7.3:1 on the deep cream */
  --od-hair: rgba(18, 18, 18, .16);
  --od-serif: var(--art-serif, 'Fraunces', Georgia, serif);
  --od-sans: var(--art-sans, 'Inter', system-ui, sans-serif);
  --od-gut: clamp(20px, 4.4vw, 64px);
  font-family: var(--od-sans);
  color: var(--od-ink);
  overflow-x: clip;
}
.od :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.od-in { max-width: 1280px; margin: 0 auto; padding: 0 var(--od-gut); box-sizing: border-box; }

/* labels: sentence case, legible, in the house green (yellow on a dark field) */
.od .od-k { font: 600 14px/1.3 var(--od-sans); letter-spacing: .01em; color: var(--od-green); margin-bottom: 18px; }
.od-h2 { font: 400 clamp(34px, 4vw, 58px)/1.04 var(--od-serif); letter-spacing: -.024em; color: var(--od-ink); }
.od-h3 { font: 400 clamp(26px, 2.6vw, 38px)/1.1 var(--od-serif); letter-spacing: -.018em; }
.od p { font-size: 17px; line-height: 1.6; }

/* buttons: crisp, sentence case, 48px tall */
.od .od-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  font: 600 15px/1.2 var(--od-sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  border: 1px solid var(--od-green); background: var(--od-green); color: var(--od-cream); border-radius: 0;
  transition: background-color var(--art-calm, .35s) ease, color var(--art-calm, .35s) ease, border-color var(--art-calm, .35s) ease;
}
.od .od-btn:hover { background: var(--od-ink); border-color: var(--od-ink); color: var(--od-cream); }
.od .od-btn-light { background: var(--od-cream); border-color: var(--od-cream); color: var(--od-ink); }
.od .od-btn-light:hover { background: var(--od-yellow); border-color: var(--od-yellow); color: var(--od-ink); }
.od .od-btn-line { background: transparent; border-color: var(--od-cream); color: var(--od-cream); }
.od .od-btn-line:hover { background: var(--od-cream); border-color: var(--od-cream); color: var(--od-ink); }
.od .od-a { color: var(--od-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.od .od-a:hover { color: var(--od-cobalt); text-decoration-thickness: 2px; }
.od :is(.od-gift, .od-advisor) :focus-visible { outline-color: var(--od-yellow); }

/* ---------------- 1 the opening: thank you, and the piece hung as a work ---------------- */
.od-open {
  max-width: 1280px; margin: 0 auto; box-sizing: border-box;
  padding: clamp(36px, 4.4vw, 72px) var(--od-gut) clamp(72px, 8vw, 128px);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: clamp(40px, 6vw, 112px); align-items: center;
}
.od-open-copy { display: flex; flex-direction: column; gap: 22px; }
.od-open-copy .od-k { margin-bottom: 0; }
.od .od-h1 { font: 400 clamp(52px, 7.2vw, 116px)/.96 var(--od-serif); letter-spacing: -.034em; color: var(--od-ink); }
.od .od-h1b { font: 400 clamp(26px, 2.7vw, 40px)/1.16 var(--od-serif); letter-spacing: -.016em; color: var(--od-ink); max-width: 20ch; }
.od .od-lede { font-size: 18px; color: var(--od-soft); max-width: 46ch; }
.od .od-when { display: inline-flex; flex-direction: column; gap: 4px; align-self: flex-start; margin-top: 8px; padding-top: 14px; border-top: 4px solid var(--od-yellow); }
.od-when span { font: 600 14px/1.3 var(--od-sans); color: var(--od-green); }
.od-when b { font: 400 clamp(24px, 2.2vw, 30px)/1.15 var(--od-serif); letter-spacing: -.012em; color: var(--od-ink); }

.od-work { position: relative; isolation: isolate; max-width: 430px; justify-self: end; width: 100%; }
/* two flat cut-outs behind the frame: the sun, and a frond in the covering's own colour */
.od-cut { position: absolute; z-index: -1; pointer-events: none; display: block; }
.od-cut svg { display: block; width: 100%; height: auto; }
.od-cut-sun { width: 34%; right: -12%; top: -7%; }
.od-cut-frond { width: 64%; left: -40%; top: 34%; transform: rotate(-18deg); }
.od-frame {
  background: var(--od-mat); padding: clamp(16px, 2.4vw, 36px);
  box-shadow: 0 0 0 1px rgba(18, 18, 18, .06), 0 40px 80px -48px rgba(18, 18, 18, .5);
}
.od-photo { position: relative; aspect-ratio: 5 / 6; overflow: hidden; background: var(--od-deep); }
.od-photo > .od-photo-art, .od-photo > .od-photo-art > svg, .od-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.od-photo > img { object-fit: cover; object-position: 50% 62%; }
/* the wall label: on the mat, never on the photograph */
.od-label {
  display: flex; flex-direction: column; gap: 3px; margin-top: 18px; padding: 18px 20px 18px;
  background: var(--od-mat); box-shadow: 0 0 0 1px rgba(18, 18, 18, .06); max-width: 380px;
}
.od-label span { font-size: 15px; line-height: 1.5; color: var(--od-soft); }
.od-label .od-label-name { font: 400 26px/1.15 var(--od-serif); letter-spacing: -.012em; color: var(--od-ink); margin-bottom: 6px; }
.od-label .od-label-cov { display: inline-flex; align-items: center; gap: 10px; color: var(--od-ink); font-weight: 500; }
.od-label-cov i { flex: none; width: 16px; height: 16px; box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .25); }
.od-label .od-label-made { color: var(--od-cobalt); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .od-open-copy > *, .od-work { animation: od-rise 1s var(--art-ease, ease) both; }
  .od-open-copy > :nth-child(2) { animation-delay: .08s; }
  .od-open-copy > :nth-child(3) { animation-delay: .18s; }
  .od-open-copy > :nth-child(n+4) { animation-delay: .28s; }
  .od-work { animation-delay: .2s; animation-duration: 1.3s; }
}
@keyframes od-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------- 2 a small work for today, on the house green ---------------- */
.od-gift { background: var(--od-green); color: var(--od-cream); }
.od-gift-in {
  max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: clamp(64px, 8vw, 120px) var(--od-gut);
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: clamp(40px, 7vw, 120px); align-items: center;
}
.od-gift-mat { background: var(--od-mat); padding: clamp(14px, 1.8vw, 24px); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .55); }
.od-gift-mat svg { display: block; width: 100%; height: auto; }
.od-gift-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 560px; }
.od-gift .od-k { color: var(--od-yellow); margin-bottom: 0; }           /* 5.6:1 on the green */
.od-gift .od-h2 { color: var(--od-cream); }                               /* 8.7:1 */
.od-gift p { color: var(--od-cream); font-size: 18px; }
.od-gift .od-btn { margin-top: 6px; }

/* ---------------- 3 what happens next ---------------- */
.od-next { padding: clamp(80px, 9vw, 136px) 0 clamp(40px, 5vw, 72px); }
.od-steps { list-style: none; padding: 0; margin-top: clamp(36px, 4vw, 56px) !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); counter-reset: none; }
.od-steps > li { border-top: 2px solid var(--od-ink); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.od-steps > li > div { display: flex; flex-direction: column; gap: 8px; }
.od-n { font: 400 clamp(44px, 4.2vw, 64px)/1 var(--od-serif); color: var(--od-cobalt); letter-spacing: -.03em; }
.od-steps h3 { font: 600 19px/1.3 var(--od-sans); color: var(--od-ink); letter-spacing: -.004em; }
.od-steps .od-date { font: 600 15px/1.4 var(--od-sans); color: var(--od-green); }
.od-steps p:not(.od-date) { font-size: 16px; color: var(--od-soft); }

/* the advisor: a person, on a flat cobalt sheet */
.od-advisor {
  position: relative; overflow: hidden; isolation: isolate; margin-top: clamp(56px, 6vw, 88px);
  background: var(--od-cobalt); color: var(--od-cream);
  padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: end;
}
.od-advisor::after { content: ""; position: absolute; z-index: -1; width: 150px; aspect-ratio: 1; border-radius: 50%; background: var(--od-yellow); right: -44px; top: -52px; }
.od-advisor .od-k { color: var(--od-cream); }                              /* 7.9:1 on cobalt */
.od-advisor .od-h3 { color: var(--od-cream); margin-bottom: 14px; }
.od-advisor p { color: var(--od-cream); max-width: 60ch; }
.od-advisor b { font-weight: 600; overflow-wrap: anywhere; }
.od-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------- 4 the build tracker, made readable ---------------- */
.od-track > .jn-track { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: clamp(56px, 6vw, 96px) var(--od-gut) 0 !important; }
.od .jn-track .kicker, .od .ms-prov .kicker {
  font: 600 14px/1.3 var(--od-sans) !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--od-green) !important;
}
.od .jn-track-head h2 { font-family: var(--od-serif); font-weight: 400; font-size: clamp(34px, 4vw, 58px); }
.od .jn-sub { font-size: 17px; line-height: 1.6; color: var(--od-soft); margin-top: 14px; }
.od .sp-note { font-size: 15px; color: var(--od-green); }
.od .jn-st { grid-template-columns: 36px minmax(0, 1fr); gap: 20px; padding-bottom: 30px; }
.od .jn-st::before { left: 17px; top: 36px; background: #8a8478; }
.od .jn-st.is-done::before { background: var(--od-green); }
.od .jn-dot {
  width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid #8a8478; background: var(--od-cream);
  font: 600 15px/1 var(--od-sans); color: var(--od-soft);
}
.od .jn-dot i { font-style: normal; }
.od .jn-st.is-done .jn-dot { background: var(--od-green); border-color: var(--od-green); color: var(--od-cream); }
.od .jn-st.is-done .jn-dot::after { content: none; }
.od .jn-st.is-now .jn-dot { background: var(--od-cobalt); border-color: var(--od-cobalt); color: var(--od-cream); }
.od .jn-st h3 { font: 600 18px/1.3 var(--od-sans); color: var(--od-ink); }
.od .jn-st.is-next h3 { color: var(--od-soft); font-weight: 600; }
.od .jn-st-date { font-size: 15px; color: var(--od-soft); }
.od .jn-st.is-now .jn-st-date { color: var(--od-cobalt); }
.od .jn-st p { font-size: 16px; line-height: 1.6; color: var(--od-soft); }
.od .jn-st.is-now p { color: var(--od-ink); }
.od .jn-st.is-now .jn-st-body { background: var(--od-mat); }
.od .jn-st-k { font: 600 14px/1.3 var(--od-sans) !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--od-cobalt) !important; }
.od .jn-crew { font-size: 16px; }
.od .jn-crew li { color: var(--od-ink); }
.od .jn-review { font-size: 16px; color: var(--od-soft); }
.od .jn-review a { color: var(--od-ink); }
.od .jn-photo a { color: var(--od-ink); font-weight: 600; }
.od .jn-box { background: var(--od-mat); border-color: var(--od-hair); }
.od .jn-box p { font-size: 16px; color: var(--od-ink); }
.od .jn-window { border-top: 4px solid var(--od-yellow); }
.od .jn-big { font-family: var(--od-serif); font-weight: 400; }
/* a workshop's photo record on a stage */
.od .sp-badge { font: 600 14px/1 var(--od-sans); letter-spacing: .01em; text-transform: none; padding: 7px 10px; background: var(--od-green); color: var(--od-cream); }
.od .sp-rec:not(.is-pass) .sp-badge { background: var(--od-yellow); color: var(--od-ink); }
.od .sp-when { font-size: 15px; color: var(--od-ink); }
.od .sp-body { font-size: 15px; color: var(--od-ink); }
.od .sp-fine { font-size: 14px; color: var(--od-soft); }

/* ---------------- 5 the certificate of provenance: a keepsake ---------------- */
.od-prov > .ms-prov { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: clamp(64px, 7vw, 112px) var(--od-gut) 0 !important; }
.od .ms-prov-card { background: var(--od-mat); border: 1px solid var(--od-hair); grid-template-columns: 240px minmax(0, 1fr); }
.od .ms-prov-mark { background: var(--od-green); }
.od .ms-prov-b { padding: clamp(24px, 3.4vw, 48px); }
.od .ms-prov-b .section-title { font-family: var(--od-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); color: var(--od-ink); }
.od .ms-prov-lede { font-size: 16px; color: var(--od-soft); }
.od .ms-prov-list li { background: var(--od-cream); border-color: var(--od-hair); padding: 16px 18px; }
.od .ms-prov-no { font-size: 16px; color: var(--od-green); }
.od .ms-prov-what { font-size: 15px; color: var(--od-soft); }
.od .ms-prov-what b { font-size: 16px; color: var(--od-ink); }
.od .ms-prov-open { font: 600 15px/1.2 var(--od-sans); min-height: 48px; padding: 0 18px; background: var(--od-ink); color: var(--od-cream); }
.od .ms-prov-open:hover { background: var(--od-green); }

/* ---------------- 6 the paperwork, calm ---------------- */
.od-facts { background: var(--od-deep); margin-top: clamp(80px, 9vw, 136px); padding: clamp(64px, 7vw, 112px) 0; }
.od-facts-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); margin-top: clamp(28px, 3vw, 44px); align-items: start; }
.od-sheet, .od-card { background: var(--od-mat); border: 1px solid var(--od-hair); padding: clamp(22px, 3vw, 36px); box-sizing: border-box; }
.od-side { display: grid; gap: clamp(24px, 3vw, 40px); }
.od-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--od-hair); }
.od-dl dt { font-size: 16px; line-height: 1.45; color: var(--od-soft); }
.od-dl dd { font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--od-ink); text-align: right; white-space: nowrap; }
.od-dl .od-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; letter-spacing: .02em; }
.od-lines { list-style: none; padding: 0; margin: 8px 0 !important; }
.od-lines li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--od-hair); }
.od-line-sw { width: 22px; height: 22px; margin-top: 2px; box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .25); }
.od-line-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.od-line-what b { font: 400 22px/1.2 var(--od-serif); color: var(--od-ink); }
.od-line-what span { font-size: 15px; line-height: 1.5; color: var(--od-soft); }
.od-line-what .od-line-made { color: var(--od-cobalt); font-weight: 600; }
.od-line-p { font-size: 16px; font-weight: 600; white-space: nowrap; }
.od-sums > div:last-child { border-bottom: 0; }
.od-sums .od-total { border-top: 2px solid var(--od-ink); border-bottom-color: var(--od-hair); margin-top: 6px; padding: 16px 0; }
.od-sums .od-total :is(dt, dd) { font: 400 28px/1.1 var(--od-serif); color: var(--od-ink); }
.od-sums dt { white-space: normal; }
.od .od-fine { font-size: 15px; line-height: 1.6; color: var(--od-soft); margin-top: 14px; }
.od-card h3 { font: 600 18px/1.3 var(--od-sans); color: var(--od-ink); margin-bottom: 12px; }
.od-card p { font-size: 16px; color: var(--od-ink); }
.od-card p + p { margin-top: 12px; }
.od-links { list-style: none; padding: 0; margin-top: 16px !important; display: grid; gap: 4px; }
.od-links .od-a, .od-card .od-a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; }

/* ---------------- 7 one quiet suggestion, below the fold ---------------- */
.od-more { padding: clamp(80px, 9vw, 128px) 0 clamp(80px, 9vw, 128px); }
.od-more-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 40px; align-items: center; }
.od-more-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 30ch; }
.od-more-copy .od-k { margin-bottom: 0; }
.od .od-more-card { display: grid; grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; margin: 0; }

/* ---------------- a narrower screen ---------------- */
@media (max-width: 1100px) {
  .od-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 900px) {
  .od-open { grid-template-columns: minmax(0, 1fr); row-gap: 48px; padding-top: 32px; }
  .od-work { justify-self: start; max-width: 520px; }
  .od-gift-in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .od-gift-art { max-width: 360px; width: 100%; }
  .od-advisor { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .od-facts-grid { grid-template-columns: minmax(0, 1fr); }
  .od-more-in { grid-template-columns: minmax(0, 1fr); }
  .od .ms-prov-card { grid-template-columns: minmax(0, 1fr); }
  .od .ms-prov-list li { grid-template-columns: minmax(0, 1fr); }
  .od .ms-prov-open { justify-self: start; }
}
@media (max-width: 600px) {
  .od-steps { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .od .od-h1 { font-size: clamp(48px, 14vw, 64px); }
  .od .od-lede, .od-gift p { font-size: 17px; }
  .od-cut-sun { right: -4%; }
  .od-cut-frond { left: -10%; width: 48%; }
  .od-acts { flex-direction: column; align-items: stretch; }
  .od-dl dd { white-space: normal; }
  .od-lines li { grid-template-columns: 22px minmax(0, 1fr); }
  .od-line-p { grid-column: 2; }
}
@media print {
  .od-gift, .od-more, .od-cut, .od-advisor::after { display: none !important; }
}

/* the house frieze opens pages that start on paper; this page opens on its own cut-outs */
.page > .fv-frieze:has(~ .od) { display: none !important; }
.od .od-a { font-size: 16px; }
.od .od-a .brand-word { display: inline; text-decoration: inherit; }
/* the one suggested piece: its small print at a readable size on this page */
.od .p-card .meta :is(.lead, .from, .p-note) { font-size: 14px !important; }
.od .p-card .meta .from { color: var(--od-soft) !important; }

/* the printable certificate (opened from this page): labels and note at a readable size */
.ms-cert .ms-cert-dl dt { font-size: 14px; letter-spacing: .01em; text-transform: none; color: #4b4843; }
.ms-cert .ms-cert-note { font-size: 15px; line-height: 1.6; color: #2b2925; }
.ms-cert .ms-cert-top p { font-size: 15px; letter-spacing: .02em; text-transform: none; }
.ms-cert .ms-cert-page footer { font-size: 14px; color: #4b4843; }