/* Patta's site: one stylesheet for every page. Patta's own colours, as in the working tool, on a warmer paper (treatment B);
   the layout and type follow the studio's values. Written by tools/build-pages.py; edit there. */
:root {
  --ground: #F7F3EC; --surface: #FFFFFF; --line: #E6DECF; --line-soft: #EFE8DB;
  --ink: #1A1814; --ink-2: #43403A; --ink-3: #706B63;
  --forest: #2C4A3E; --forest-tint: #EDF2EF;
  --terra: #C4603A; --terra-text: #AC5433; --terra-tint: #F9EEE9;
  --label: #7A5A37; --paper-deep: #F3EEE4; --paper-light: #FBF8F2;
  --r-card: 14px; --r-control: 12px; --r-pill: 999px;
  --shadow-rest: 0 1px 2px rgba(26, 24, 20, 0.04);
  --serif: 'Source Serif 4', 'New York', ui-serif, Georgia, serif;
  --serif-gu: 'Noto Serif Gujarati', 'Noto Sans Gujarati', 'Gujarati Sangam MN', 'Nirmala UI', Shruti, serif;
  --sans: system-ui, 'Noto Sans Gujarati', 'Gujarati Sangam MN', 'Nirmala UI', Shruti, sans-serif;
  --curve: cubic-bezier(.25, .1, .25, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.6 var(--sans); min-height: 100vh; display: flex; flex-direction: column; }
html[lang="gu"] body { line-height: 1.7; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; flex: 1; display: flex; flex-direction: column; }

/* the head: the icon at the left, a link home; the wordmark (option 16, a book serif with the Gujarati beside it, a hairline between, no stop) at the right; both ends flush to the column edges (header B). This is the head the holding page has had since 20 October and the owner chose to keep on 30 October 2026 ("the spacing colour everything is good here"): no divider under it, nothing hanging from it */
.head { display: flex; justify-content: space-between; align-items: center; padding-top: 40px; }
.home { position: relative; display: block; padding: 4px; margin: -4px 0 -4px -4px; border-radius: 10px; color: var(--forest); } /* positioned, so the 4 px of padding that reaches past the head is not covered by the content below */
.home:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.mk { display: block; width: 36px; height: 36px; }
.wm { display: inline-flex; align-items: baseline; color: var(--ink); line-height: 1; }
.wm .gu { font-family: 'Noto Sans Gujarati', system-ui, 'Gujarati Sangam MN', 'Nirmala UI', Shruti, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.35; }
.wm .en { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -.0147em; }
.wm a { position: relative; color: inherit; text-decoration: none; transition: color .16s var(--curve); }
.wm a::after { content: ""; position: absolute; inset: -12px -6px; } /* a touch target of 44 high, with no change to what is drawn; the 12 px each side of the hairline keep the two apart */
.wm a:hover { color: var(--forest); }
.wm a:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 2px; }
.wm .hair { align-self: center; width: 1px; height: 18px; background: var(--ink); opacity: .28; margin: 0 12px; }

main { padding: 80px 0 56px; }
main::before { content: ""; display: block; width: 56px; height: 3px; background: #BDA38A; margin: 0 0 30px; }
h1 { font: 500 clamp(30px, 4.6vw, 42px)/1.18 var(--serif); letter-spacing: -.012em; margin: 0; max-width: 640px; text-wrap: balance; }
html[lang="gu"] h1 { font-family: var(--serif-gu); line-height: 1.4; }
.lede { margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 620px; }
html[lang="gu"] .lede { line-height: 1.75; }
.safe { margin: 22px 0 0; max-width: 620px; padding: 2px 0 2px 14px; border-left: 3px solid var(--forest); font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--ink); }
html[lang="gu"] .safe { line-height: 1.75; }
.sample .safe { margin-top: 24px; }
.fine { margin: 22px 0 0; font-size: 15px; color: var(--ink-3); max-width: 620px; }
.fine a { position: relative; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color .16s var(--curve); }
.fine a::after { content: ""; position: absolute; inset: -15px -8px; }
.fine a:hover { text-decoration-color: var(--ink-2); }
.fine a:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 2px; }
.flag { margin: 0 0 28px; max-width: 620px; background: var(--terra-tint); border: 1px solid rgba(196, 96, 58, 0.18); border-radius: var(--r-control); padding: 10px 14px; font-size: 13.5px; color: var(--ink-2); }
.flag b { display: block; font-weight: 600; font-size: 13.5px; color: var(--terra-text); }
.acts { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: var(--r-control); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .18s var(--curve), border-color .18s var(--curve), color .18s var(--curve); }
.btn:hover { background: #DCE8E1; border-color: var(--forest); color: var(--forest); }
.btn:active { background: #CFDFD6; }
.btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* the sample, drawn as the tool draws it */
.sample { margin-top: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-rest); padding: 22px 22px 20px; }
.lab { font-size: 12.5px; font-weight: 600; color: var(--label); margin: 0 0 8px; }
.gap { margin-top: 24px; }
.q { background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; font-size: 15px; }
.first { background: var(--forest-tint); border: 1px solid rgba(44, 74, 62, 0.18); border-radius: var(--r-card); padding: 16px; }
.first .pill { display: inline-block; background: var(--forest); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4; border-radius: var(--r-pill); padding: 4px 12px; }
.first p { margin: 12px 0 0; font-size: 15px; font-weight: 500; line-height: 1.55; }
.opt .kick { font-size: 12.5px; font-weight: 600; color: var(--label); }
.opt h2 { font-size: 16px; font-weight: 600; margin: 2px 0 14px; line-height: 1.4; }
.step { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; }
.num { flex: none; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--forest-tint); color: var(--forest); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 3px; }
.step span.t { font-size: 15px; color: var(--ink-2); }
.grounding { margin-top: 16px; background: var(--paper-light); border: 1px solid var(--line-soft); border-radius: var(--r-control); padding: 14px 16px; display: grid; gap: 14px; }
.pt { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start; font-size: 13.5px; color: var(--ink-2); }
.pt .src { color: var(--ink-3); display: block; margin-top: 2px; font-size: 12.5px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; border-radius: var(--r-pill); padding: 3px 10px; justify-self: start; white-space: nowrap; }
.tag i { width: 6px; height: 6px; border-radius: var(--r-pill); display: block; }
.tag.v { background: var(--forest-tint); color: var(--forest); } .tag.v i { background: var(--forest); }
.tag.c { background: var(--terra-tint); color: var(--terra-text); } .tag.c i { background: var(--terra); }
.cap { margin: 16px 2px 0; font-size: 13.5px; color: var(--ink-3); }
.cap.note { margin-top: 6px; padding-bottom: 8px; }

footer { border-top: 1px solid #D9CDB8; padding: 24px 0 40px; margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; align-items: baseline; }
footer p { margin: 0; font-size: 12.5px; color: var(--ink-3); }
footer .rights { margin-top: 4px; }
.lang { display: inline-flex; gap: 20px; margin-left: auto; font-size: 12.5px; } /* the language links, Gujarati then English as the wordmark reads, at the right of the foot (30 October 2026) */
.lang a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }
footer a { position: relative; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color .16s var(--curve); }
footer a::after { content: ""; position: absolute; inset: -15px -8px; }
footer a:hover { text-decoration-color: var(--ink-2); }
footer a:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } footer a, .fine a, .btn, .lang a, .wm a { transition: none; } }
@media (max-width: 640px) {
  .wrap { padding: 0 16px; } .head { padding-top: 28px; } main { padding: 48px 0 40px; }
  .lede { font-size: 17px; } .sample { padding: 18px 16px 16px; }
  .pt { grid-template-columns: 1fr; gap: 6px; }
}