@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ==========================================================================
   PortraitKart — shared stylesheet
   Supporting pages: Shipping · Refund · Privacy · Terms · Contact
   Design system per DESIGN-SPEC-supporting-pages.md v1.0
   ========================================================================== */

/* 2. Colour tokens ------------------------------------------------------- */

:root {
  /* Paper — backgrounds */
  --paper:        #FAF8F4;
  --paper-deep:   #F1EDE6;
  --paper-edge:   #E4E0D8;

  /* Graphite — text and structure */
  --graphite-900: #17161A;
  --graphite-700: #35333B;
  --graphite-500: #5A5761;
  --graphite-300: #9C98A2;

  /* Action — the only saturated colour on the site */
  --wa:           #25D366;
  --wa-press:     #1EB855;

  /* Support */
  --focus:        #17161A;
  --warn:         #8A5A00;

  /* 4. Spacing scale — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* Radius — small reads as paper and print */
  --r-sm: 4px;  /* inputs, buttons, small elements */
  --r-md: 6px;  /* cards and callouts */
  --r-pill: 999px;
}

/* Reset ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, p, ul, ol, li, figure, table, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img { max-width: 100%; height: auto; display: block; }

/* 3. Typography ---------------------------------------------------------- */

body {
  background: var(--paper);
  color: var(--graphite-700);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;   /* 17px — read by anxious people and by 55-year-olds */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;

  /* 5. Motion — page load is the only entrance animation on these pages */
  animation: page-in 240ms ease-out both;
}

@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

h1, h2 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--graphite-900);
  font-weight: 600;
}

.page-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h3 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--graphite-900);
}

h1, h2, h3 { scroll-margin-top: var(--s-9); }

.meta {
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--graphite-500);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--graphite-500);
}

strong, b { font-weight: 600; color: var(--graphite-900); }

/* Links ------------------------------------------------------------------ */

a {
  color: var(--graphite-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 150ms ease-out;
}

a:hover { text-decoration-thickness: 2px; }

/* Focus — instant, never animated */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

/* 4. Grain --------------------------------------------------------------- */

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 6. Shared page template ------------------------------------------------ */

.container {
  max-width: var(--container, 1120px);
  margin-inline: auto;
  padding-inline: var(--s-5);          /* 24px mobile gutter */
}

/* 68ch is non-negotiable on legal pages. Centring it is what stops a wide
   screen dumping all the leftover space on the right — the column stays the
   same width, it just sits in the middle of the page instead of at the edge. */
.measure { max-width: 68ch; margin-inline: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--graphite-900);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  z-index: 10000;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--s-5);
  top: var(--s-2);
}

/* Header — logo left, back link right. No nav, no CTA. */

.site-header {
  height: 72px;
  display: flex;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-edge);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
}

.wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--graphite-900);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wordmark:hover { text-decoration: underline; text-underline-offset: 4px; }

.back-link {
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--graphite-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.back-link:hover { color: var(--graphite-900); text-decoration: underline; text-underline-offset: 3px; }

/* Page head block */

main { padding-block: var(--s-7) var(--s-9); }

.page-head { margin-bottom: var(--s-7); }
.page-head .page-title { margin-bottom: var(--s-3); }
.page-head .lede {
  margin-top: var(--s-4);
  font-size: 1.0625rem;
  color: var(--graphite-700);
}

.rule {
  border: 0;
  border-top: 1px solid var(--paper-edge);
  margin-block: var(--s-5);
}

/* Body content */

.policy > section { margin-bottom: var(--s-7); }

.policy h2 { margin-bottom: var(--s-4); }
.policy h3 { margin-top: var(--s-5); margin-bottom: var(--s-2); }
.policy p { margin-bottom: var(--s-4); }
.policy p:last-child { margin-bottom: 0; }

.policy ul.list, .policy ol.list {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-5);
}
.policy ul.list { list-style: disc; }
.policy ol.list { list-style: decimal; }
.policy .list li { margin-bottom: var(--s-2); padding-left: var(--s-1); }
.policy .list li:last-child { margin-bottom: 0; }

/* Definition-style blocks (Contact page) */

.facts { margin-bottom: var(--s-6); }
.facts dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--graphite-500);
  margin-bottom: var(--s-2);
}
.facts dd { margin-bottom: var(--s-5); color: var(--graphite-700); }
.facts dd:last-child { margin-bottom: 0; }
.facts dd strong { display: block; }

.contact-cols { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
.contact-cols > section { margin-bottom: var(--s-5); }

code {
  font-family: ui-monospace, 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
  font-size: 0.9375em;
  background: var(--paper-deep);
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-sm);
  padding: 1px var(--s-1);
}

/* On this page — Terms & Privacy only */

.toc {
  background: var(--paper-deep);
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-7);
}
.toc .eyebrow { margin-bottom: var(--s-3); }
.toc ol {
  list-style: none;
  columns: 2;
  column-gap: var(--s-6);
}
.toc li { margin-bottom: var(--s-1); break-inside: avoid; }
.toc a {
  display: inline-block;
  padding-block: var(--s-1);
  font-size: 0.9375rem;
  color: var(--graphite-700);
  text-decoration-color: var(--paper-edge);
}
.toc a:hover { color: var(--graphite-900); text-decoration-color: currentColor; }

@media (max-width: 599px) {
  .toc ol { columns: 1; }
  .toc a { padding-block: var(--s-2); }   /* keeps tap targets comfortable */
}

/* Callout — paper-deep, 6px radius, 3px left border */

.callout {
  background: var(--paper-deep);
  border-radius: var(--r-md);
  border-left: 3px solid var(--graphite-900);
  padding: var(--s-5);
  margin-block: var(--s-6);
}
.callout p { margin-bottom: 0; color: var(--graphite-900); }
.callout .eyebrow { margin-bottom: var(--s-2); }

.callout--warn { border-left-color: var(--warn); }
.callout--warn .eyebrow { color: var(--warn); }

/* Tables — hairlines and paper-deep stripes, no shadows */

.table-wrap { overflow-x: auto; margin-bottom: var(--s-5); }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 22rem;
  font-size: 1rem;
}
caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--graphite-500);
  padding-bottom: var(--s-2);
}
th, td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--paper-edge);
  vertical-align: top;
}
thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--graphite-500);
  border-bottom: 1px solid var(--graphite-300);
}
tbody tr:nth-child(even) { background: var(--paper-deep); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.total td { font-weight: 600; color: var(--graphite-900); background: var(--paper-deep); }

/* Pending facts — deliberately visible so they cannot ship unnoticed */

.pending {
  background: #F6ECD8;
  border-bottom: 1px dashed var(--warn);
  color: var(--warn);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 1px var(--s-2);
  border-radius: var(--r-sm);
}

/* CTA — one per page, at the bottom only ---------------------------------- */

.page-cta {
  border-top: 1px solid var(--paper-edge);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
}
.page-cta h2 { margin-bottom: var(--s-3); }
.page-cta p { margin-bottom: var(--s-5); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border: 0;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}

/* Green ground, near-black text. Never white-on-green. */
.btn-wa {
  background: var(--wa);
  color: var(--graphite-900);
}
.btn-wa:hover {
  background: var(--wa-press);
  transform: translateY(-1px);
}
.btn-wa:active {
  transform: translateY(0) scale(.99);
  transition-duration: 90ms;
}

.btn .icon { width: 20px; height: 20px; flex: none; fill: currentColor; }

.cta-note {
  margin-top: var(--s-3);
  font-size: 0.875rem;
  color: var(--graphite-500);
}

/* Back to top — bottom-left, never overlaps the WhatsApp pill ------------- */

.to-top {
  position: fixed;
  left: var(--s-5);
  bottom: var(--s-5);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-sm);
  color: var(--graphite-900);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 200ms ease-out;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--paper-deep); }

/* Footer — identical on all six pages ------------------------------------- */

.site-footer {
  background: var(--paper-deep);
  border-top: 1px solid var(--paper-edge);
  padding-block: var(--s-8) var(--s-6);
  font-size: 0.9375rem;
  color: var(--graphite-700);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}

.footer-col h2 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--graphite-500);
  margin-bottom: var(--s-3);
}

.footer-col p { margin-bottom: var(--s-3); }
.footer-col p:last-child { margin-bottom: 0; }

.footer-about {
  margin-top: var(--s-4);
  max-width: 42ch;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--graphite-500);
}

.footer-links li { margin-bottom: 0; }
.footer-links a {
  display: inline-block;
  padding-block: var(--s-1);
  color: var(--graphite-700);
  text-decoration-color: var(--paper-edge);
}

/* Tight on a mouse, but a finger still gets the 44px target the spec requires. */
@media (pointer: coarse), (hover: none) {
  .footer-links a { padding-block: var(--s-2); min-height: 44px; }
}
.footer-links a:hover { color: var(--graphite-900); text-decoration-color: currentColor; }

.footer-legal-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--graphite-900);
  margin-bottom: var(--s-2);
}

.footer-bottom {
  border-top: 1px solid var(--paper-edge);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--graphite-500);
}

/* 6. Breakpoints — 375 · 768 · 1024 · 1440 -------------------------------- */

@media (min-width: 768px) {
  .container { padding-inline: var(--s-7); }   /* 48px desktop gutter */
  main { padding-block: var(--s-8) var(--s-10); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-7); }
  .contact-cols { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}

@media (min-width: 1024px) {
  .page-head { margin-bottom: var(--s-8); }
  .policy > section { margin-bottom: var(--s-8); }
}

/* 5. Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print — policy pages get printed and filed ------------------------------ */

@media print {
  .grain, .to-top, .page-cta, .back-link, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .container { max-width: none; padding-inline: 0; }
  a { text-decoration: none; color: #000; }
}