/* How we work, About and Contact. Everything shared lives in site.css; this file only adds the pieces these three pages use. */
body { display: flex; flex-direction: column; min-height: 100svh; }
main { flex: 1 0 auto; }
.sec { padding-block: var(--sec); }
.sec-ice { background: linear-gradient(to bottom, var(--paper), var(--ice-0)); }
.sec-head { max-width: 62ch; margin-bottom: clamp(18px, 2.6vw, 34px); }
.sec-head p { margin-top: 10px; color: var(--ink-2); text-wrap: pretty; }
.text-link { color: var(--pen-text); font-weight: 600; }
.text-link .ico { display: inline-block; vertical-align: -.2em; margin-left: .15em; }

/* steps: an ordered list with the pen writing in the margin */
.route { border-top: 1px solid var(--ink); }
.route-step { display: grid; grid-template-columns: clamp(62px, 8vw, 118px) minmax(0, 1.55fr) minmax(190px, 1fr); gap: 6px clamp(16px, 3vw, 48px); padding-block: clamp(18px, 2.4vw, 32px); border-bottom: 1px solid var(--line-2); transition: background-color .3s ease; }
.route-step:hover { background: var(--ice-0); }
.route-n { font-family: var(--serif); font-size: clamp(2.75rem, 1.9rem + 2.8vw, 4.75rem); line-height: .92; color: var(--pen); }
.route-step h3, .after h3, .small-on-purpose h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.375rem); line-height: 1.08; }
.route-body p { margin-top: 8px; max-width: 60ch; color: var(--ink-2); text-wrap: pretty; }
.route-side { position: relative; display: flex; gap: 8px; align-items: flex-start; padding-top: 6px; }
.route-step:nth-child(odd) .note { rotate: -1.6deg; }
.route-step:nth-child(even) .note { rotate: 1.1deg; }
.route-side .hand { flex: none; margin-top: 4px; }
.after { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(16px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); align-items: start; }
.after p { margin-top: 8px; color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }

/* what a brand can check */
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); }
.check-col > .note { margin-bottom: 8px; rotate: -1.3deg; width: fit-content; }
.check-col:nth-child(2) > .note { rotate: .9deg; }
.check-col li { padding-block: 12px; border-top: 1px solid var(--line-2); }
.check-col b { display: block; font-weight: 600; font-size: 1.125rem; line-height: 1.25; }
.check-col li a { color: var(--pen-text); }
.check-col li span { display: block; margin-top: 3px; font-size: 1rem; line-height: 1.38; color: var(--ink-2); text-wrap: pretty; }

/* paper: ruled, one fine pink margin line, the pen on top */
.sheet { --rule: 2.125rem; position: relative; padding: var(--rule) clamp(16px, 3vw, 40px) var(--rule) clamp(40px, 5vw, 72px); background-color: var(--white); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), #DCEBF6 calc(var(--rule) - 1px) var(--rule)); box-shadow: var(--lift); transition: rotate .35s ease; }
.sheet::before { content: ""; position: absolute; inset-block: 0; left: clamp(28px, 3.6vw, 52px); width: 1px; background: var(--gum); }
.sheet p { font-family: var(--hand); font-weight: 600; font-size: clamp(1.5rem, 1.32rem + .55vw, 1.875rem); line-height: var(--rule); color: var(--pen-text); }
.sheet p + p { margin-top: var(--rule); }
.sheet .blank { color: var(--mut); }
@media (min-width: 761px) { .sheet-tilt { rotate: -.6deg; } .sheet-tilt:hover { rotate: 0deg; } }

/* the monthly page, shown empty */
.monthly-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 4vw, 56px); align-items: center; margin-top: clamp(26px, 3.4vw, 46px); }
.monthly { background: var(--white); box-shadow: var(--lift); padding: clamp(14px, 2vw, 26px); }
.monthly table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.monthly caption { text-align: left; font-family: var(--serif); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.1; padding-bottom: 10px; }
.monthly th, .monthly td { padding: 9px 8px 9px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; }
.monthly thead th { font-family: var(--mono); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--mut); border-top: 1px solid var(--ink); }
.monthly td { font-family: var(--mono); color: var(--mut); }
.monthly-note .note { rotate: -1.4deg; width: fit-content; }
.monthly-note .hand { margin-bottom: 4px; }
.monthly-note p + p { margin-top: 10px; color: var(--ink-2); font-size: 1rem; }

/* three folders with the real terms inside */
.folders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: start; }
.folder { position: relative; margin-top: 38px; padding: 12px; background: var(--ice); border-radius: 0 8px 8px 8px; }
.folder-tab { position: absolute; left: 0; bottom: 100%; display: flex; align-items: center; min-width: 52%; height: 38px; padding: 4px 18px 0 14px; background: var(--ice); border-radius: 8px 12px 0 0; font-family: var(--hand); font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--pen-text); }
.folder-paper { padding: clamp(12px, 1.5vw, 20px); background: var(--white); border-top: 2px solid var(--gum); transition: translate .3s ease, box-shadow .3s ease; }
.folder:hover .folder-paper { translate: 0 -3px; box-shadow: 0 12px 24px -18px rgba(18, 38, 58, .4); }
.folder-paper h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + .7vw, 2rem); line-height: 1.08; }
.folder-terms { margin-top: 10px; }
.folder-terms > div { padding-block: 9px; border-top: 1px solid var(--line); }
.folder-terms dt { font-family: var(--hand); font-weight: 600; font-size: 1.3125rem; line-height: 1.1; color: var(--pen-text); }
.folder-terms dd { margin-top: 1px; font-size: 1rem; line-height: 1.38; text-wrap: pretty; }
.folder-terms a { color: var(--pen-text); }
.terms-foot { margin-top: clamp(16px, 2vw, 26px); max-width: 66ch; color: var(--ink-2); text-wrap: pretty; }
.big-no { display: block; width: fit-content; margin-top: 8px; font-family: var(--hand); font-weight: 600; font-size: clamp(1.625rem, 1.4rem + .5vw, 2rem); line-height: 1.05; color: var(--pen-text); rotate: -1deg; white-space: nowrap; }

/* about */
.note-wrap { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(190px, 1fr); gap: clamp(22px, 4.5vw, 72px); align-items: start; }
.no-photo { display: grid; place-items: center; aspect-ratio: 4 / 5; max-width: 260px; padding: 14px; border: 1.5px dashed var(--line-2); text-align: center; rotate: 1.4deg; transition: rotate .35s ease; }
.no-photo:hover { rotate: 0deg; }
.no-photo .note { color: var(--mut); }
.who-name { margin-top: 12px; max-width: 260px; }
.who-name b { display: block; font-weight: 600; font-size: 1.125rem; line-height: 1.25; }
.who-name a { color: var(--pen-text); font-size: .9375rem; }
.not-yet { border-top: 1px solid var(--ink); }
.not-yet li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 4px clamp(16px, 3vw, 44px); align-items: baseline; padding-block: clamp(10px, 1.3vw, 16px); border-bottom: 1px solid var(--line-2); }
.not-yet s { font-family: var(--serif); font-size: clamp(1.375rem, 1.15rem + .9vw, 2.125rem); line-height: 1.12; color: var(--mut); text-decoration-color: var(--gum); text-decoration-thickness: 2px; }
.not-yet span { color: var(--ink-2); text-wrap: pretty; }
.record { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(22px, 4.5vw, 72px); align-items: start; }
.record .terms { background: var(--white); padding: clamp(12px, 1.6vw, 22px); box-shadow: var(--lift); }
.record .terms > div:first-child { border-top: 0; }
.small-on-purpose p { margin-top: 8px; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.small-on-purpose ul { margin-top: 8px; }
.small-on-purpose li { padding-block: 5px; border-top: 1px solid var(--line); font-size: 1rem; }
.small-on-purpose .lab-hand { margin-top: 18px; color: var(--pen-text); }

/* contact */
.mail-block { padding-block: clamp(18px, 3vw, 42px) var(--sec); }
.mail-big { display: inline-block; margin-top: 4px; font-family: var(--serif); font-size: clamp(2.125rem, .9rem + 5.6vw, 6.25rem); line-height: 1.04; letter-spacing: -.012em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gum); text-decoration-thickness: 2px; text-underline-offset: .12em; overflow-wrap: anywhere; transition: color .2s ease; }
.mail-big:hover { color: var(--pen-text); }
.mail-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.mail-note .note { rotate: -1.2deg; }
.mail-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(18px, 3vw, 44px); margin-top: clamp(20px, 3vw, 38px); }
.mail-more > div { padding-top: 10px; border-top: 1px solid var(--line-2); }
.mail-more p + p { margin-top: 4px; font-size: 1rem; line-height: 1.4; text-wrap: pretty; }
.mail-more a { color: var(--pen-text); overflow-wrap: anywhere; }
.send-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(22px, 4.5vw, 72px); align-items: start; }
.send-wrap .ticks { margin-top: 14px; }
.send-wrap .ticks li { font-size: 1.0625rem; padding-bottom: 11px; }
.send-side > .note { margin-bottom: 8px; rotate: -1deg; width: fit-content; }
.quiet { margin-top: clamp(10px, 1.4vw, 18px); max-width: 66ch; color: var(--ink-2); text-wrap: pretty; }
.quiet a { color: var(--pen-text); }

@media (max-width: 1000px) {
  .folders, .check-grid { grid-template-columns: minmax(0, 1fr); }
  .check-grid { gap: 22px; }
  .folder-tab { min-width: 42%; }
}
@media (max-width: 760px) {
  .route-step { grid-template-columns: 50px minmax(0, 1fr); }
  .route-side { grid-column: 2; padding-top: 2px; }
  .route-side .hand { display: none; }
  .route-n { font-size: 2.5rem; }
  .after, .monthly-wrap, .note-wrap, .record, .send-wrap, .mail-more { grid-template-columns: minmax(0, 1fr); }
  .monthly-wrap { gap: 12px; }
  .monthly-note .hand { display: none; }
  .monthly table { font-size: .875rem; }
  .monthly thead th { font-size: .625rem; letter-spacing: 0; padding-right: 4px; }
  .no-photo { aspect-ratio: auto; max-width: none; padding-block: 18px; rotate: 0deg; }
  .who-name { max-width: none; }
  .not-yet li { grid-template-columns: minmax(0, 1fr); }
  .mail-note .hand { display: none; }
}
@media print { .sheet, .folder, .no-photo { rotate: 0deg; box-shadow: none; } }

/* pieces these two pages use from the many-page stylesheet; the head keeps this look's pale ground */
.pen-gum .pen-svg { stroke: var(--gum); }
.page-head { position: relative; overflow: clip; isolation: isolate; background: linear-gradient(to bottom, var(--ice), var(--paper)); padding-block: clamp(26px, 5vw, 72px) clamp(20px, 3vw, 44px); }
.page-head img.page-cloud { position: absolute; right: -6%; top: 6%; z-index: -1; width: min(70%, 720px); height: auto; opacity: .92; }
.page-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem); line-height: 1; letter-spacing: -.012em; }
.page-head p.lead { max-width: 56ch; margin-top: 12px; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.38; color: var(--ink); text-wrap: pretty; }
.page-head .note { margin-top: 8px; color: var(--ink); width: fit-content; rotate: -1.4deg; }
.next-page { padding-block: clamp(20px, 3vw, 40px); background: var(--ice-0); }
.next-page .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
.next-page p { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1.08; }
.hand { display: block; overflow: visible; fill: none; stroke: var(--pen-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; pointer-events: none; }

/* Round 3 (Bulut 8 Nov 13:20): white and a faint cool grey with a dot grid instead of flat light blue, as on the home page */
.sec-ice, .page-head, .next-page { background-color: var(--wash, #F4F6F9); background-image: radial-gradient(rgba(18, 38, 58, .09) 1px, transparent 1.4px); background-size: 22px 22px; }
.page-head { border-bottom: 1px solid rgba(18, 38, 58, .12); }
.route-step:hover { background: #F4F6F9; }
.folder, .folder-tab { background: #F4F6F9; }
/* Round 4: the inner pages get the same blueprint blue at the top and a deep closing band, so they stop looking plain. */
.page-head { background-color: #EEF6FD;
  background-image: radial-gradient(60% 90% at 88% 0%, rgba(91, 184, 255, .24), transparent 70%),
    linear-gradient(rgba(28, 111, 214, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 111, 214, .075) 1px, transparent 1px),
    linear-gradient(rgba(28, 111, 214, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 111, 214, .035) 1px, transparent 1px);
  background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px; }
.sec-ice { background-color: #F3F8FE; background-image: radial-gradient(rgba(28, 111, 214, .16) 1px, transparent 1.5px); background-size: 22px 22px; }
.next-page { color: #E9F2FC; background: radial-gradient(70% 90% at 92% 0%, rgba(91, 184, 255, .38), transparent 62%), linear-gradient(160deg, #0B2340, #12406E 58%, #0E2C4F); }
.next-page a { color: #fff; }
/* Round 5: the about page lists what brands can rely on, in ink (the struck-through "not yet" list is gone) */
.not-yet b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 1.15rem + .9vw, 2.125rem); line-height: 1.12; color: var(--ink); }
@media (max-width: 759px) { .about-portrait { max-width: none; rotate: 0deg; } }