/* True Story Song — editorial guides & free tool. Extends site + content.css tokens. */
.guide-main{padding:56px 0 40px}
.guide-wrap{max-width:1120px}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 22px}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs a:hover{color:var(--ink);border-color:var(--ink)}
.guide-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:56px;align-items:end;border-bottom:1px solid var(--ink);padding-bottom:36px}
.guide-head h1{font:400 clamp(40px,5.2vw,64px)/1.06 var(--display);letter-spacing:-.015em;margin:0 0 20px;max-width:14em}
.byline{font-size:14px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.byline time{color:var(--ink)}
.guide-figure{margin:0}
.guide-figure img{width:100%;height:auto;border-radius:3px;box-shadow:0 24px 50px -24px rgba(21,60,53,.45)}
.guide-figure figcaption{font-size:13px;color:var(--muted);margin-top:10px}

/* the answer box: first thing an AI or a person should read */
.answer{background:var(--spruce);color:#F2F1EA;border-radius:6px;padding:30px 34px;margin:40px 0 8px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.answer .label{font:400 26px/1 var(--hand);color:var(--brass);transform:rotate(-4deg);margin-top:4px;white-space:nowrap}
.answer p{margin:0;font:400 20px/1.6 var(--serif)}
.answer strong{font-weight:700;color:#fff}

.guide-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:72px;margin-top:48px}
.prose{min-width:0}
.prose h2{font:400 clamp(30px,3.2vw,38px)/1.16 var(--display);margin:56px 0 16px;scroll-margin-top:24px}
.prose h2:first-child{margin-top:0}
.prose h3{font:600 19px/1.35 var(--sans);margin:30px 0 8px}
.prose p,.prose li{font-size:18px;line-height:1.72;max-width:40em}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:8px 0}
.prose a{color:var(--spruce);text-decoration-color:rgba(21,60,53,.35);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--spruce)}
.note{border-left:3px solid var(--brass);padding:4px 0 4px 18px;color:var(--muted);font-size:16px!important}

/* table that survives phones */
.table-scroll{overflow-x:auto;margin:22px 0 8px;border-top:1px solid var(--ink)}
.price-table{width:100%;border-collapse:collapse;font-size:16px;min-width:640px}
.price-table th,.price-table td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.price-table thead th{font:600 13px/1.3 var(--sans);color:var(--muted);text-transform:none;letter-spacing:0}
.price-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.price-table tr.us td{background:rgba(194,154,78,.10)}
.price-table tr.us td:first-child{box-shadow:inset 3px 0 0 var(--brass);padding-left:12px}
.table-note{font-size:14px!important;color:var(--muted)}

/* side rail */
.rail{position:sticky;top:24px;align-self:start}
.rail h2{font:600 13px/1.3 var(--sans);color:var(--muted);margin:0 0 12px}
.rail ol{list-style:none;margin:0 0 30px;padding:0;border-left:1px solid var(--rule)}
.rail li{margin:0}
.rail ol a{display:block;padding:7px 0 7px 16px;font-size:15px;color:var(--ink);text-decoration:none;margin-left:-1px;border-left:1px solid transparent}
.rail ol a:hover{border-color:var(--cranberry);color:var(--cranberry-ink)}
.rail-card{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:22px}
.rail-card p{margin:0 0 14px;font-size:15px;color:var(--muted)}
.rail-card strong{display:block;font:400 22px/1.2 var(--display);color:var(--ink);margin-bottom:6px}
.rail-card .btn{width:100%;justify-content:center;font-size:15px;padding:13px 16px}

/* prompt lists (what-to-write) */
.prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}
.prompt-set{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:22px 24px}
.prompt-set h3{margin:0 0 10px;font:400 24px/1.2 var(--display)}
.prompt-set ul{margin:0;padding-left:18px}
.prompt-set li{font-size:16px!important;line-height:1.55;margin:7px 0}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:22px 0;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.vs div{padding:18px 22px;font-size:16px}
.vs div:first-child{background:#F4F5F1;color:var(--muted)}
.vs div:last-child{background:var(--sheet)}
.vs b{display:block;font:600 13px/1.3 var(--sans);margin-bottom:6px;color:var(--ink)}
.handwritten{font:400 24px/1.1 var(--hand);color:var(--cranberry-ink)}

.sources{border-top:1px solid var(--rule);margin-top:56px;padding-top:22px}
.sources h2{font:600 15px/1.3 var(--sans)!important;margin:0 0 10px!important}
.sources li{font-size:14px!important;color:var(--muted);line-height:1.6!important}
.disclosure{font-size:14px!important;color:var(--muted)}

.guide-end{background:var(--sheet);border-top:1px solid var(--rule);margin-top:72px}
.guide-end .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding-top:56px;padding-bottom:56px}
.guide-end p{font:400 clamp(26px,3vw,36px)/1.2 var(--display);margin:0;max-width:18em}
.more-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.more-guides a{display:block;text-decoration:none;border-top:1px solid var(--ink);padding:16px 0}
.more-guides strong{display:block;font:400 21px/1.25 var(--display)}
.more-guides span{display:block;color:var(--muted);font-size:15px;margin-top:6px}

/* ---------- free lyrics tool ---------- */
.tool-hero{background:var(--spruce);color:#F2F1EA;padding:40px 0 72px;position:relative;overflow:hidden}
.tool-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 13px,var(--spruce-line) 13px 14px) 0 150px/100% 70px no-repeat;pointer-events:none}
.tool-hero .crumbs,.tool-hero .crumbs a{color:#A9B9B2;border-color:rgba(237,240,235,.2)}
.tool-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;position:relative}
.tool-hero h1{font:400 clamp(40px,4.8vw,62px)/1.05 var(--display);margin:0 0 20px;letter-spacing:-.015em}
.tool-hero .lead{color:#C9D4CE;font-size:19px;line-height:1.55;margin:0 0 22px;max-width:30em}
.tool-facts{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15.5px;color:#C9D4CE}
.tool-facts li{display:flex;gap:10px}
.tool-facts li::before{content:"";width:14px;height:8px;border-left:1.8px solid var(--brass);border-bottom:1.8px solid var(--brass);transform:rotate(-45deg);margin-top:6px;flex:none}
.lyric-form{background:var(--sheet);color:var(--ink);border-radius:4px;padding:30px;box-shadow:0 30px 60px -24px rgba(4,20,17,.6)}
.lyric-form fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.lyric-form .full{grid-column:1/-1}
.lyric-form label{display:block;font:600 14px/1.3 var(--sans);margin-bottom:6px}
.lyric-form .hint{font-weight:400;color:var(--muted)}
.lyric-form input,.lyric-form select,.lyric-form textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid #C9D0C8;border-radius:4px;padding:11px 12px}
.lyric-form textarea{min-height:58px;resize:vertical}
.lyric-form input:focus,.lyric-form select:focus,.lyric-form textarea:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:transparent}
.memory-label{font:400 22px/1 var(--hand)!important;color:var(--cranberry-ink);margin-bottom:4px!important}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.form-foot small{color:var(--muted);font-size:13px;max-width:24em}
.result{margin-top:26px;border-top:1px solid var(--rule);padding-top:22px;display:none}
.result.on{display:block}
.result h2{font:italic 400 26px/1.2 var(--serif);margin:0 0 12px}
.result pre{font:400 17px/1.75 var(--serif);white-space:pre-wrap;margin:0 0 18px}
.result .actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-quiet{background:transparent;color:var(--spruce);border:1px solid #9FB0A8}
.form-error{color:var(--cranberry-ink);font-size:15px;margin:14px 0 0}
.tool-body{padding:80px 0 0}

@media (max-width:980px){
  .guide-head,.tool-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .guide-body{grid-template-columns:minmax(0,1fr);gap:40px}
  .rail{position:static;order:-1}
  .rail ol{display:none}
  .more-guides{grid-template-columns:1fr}
}
@media (max-width:640px){
  .guide-main{padding-top:36px}
  .answer{grid-template-columns:1fr;padding:24px;gap:10px}
  .answer p{font-size:18px}
  .prompt-grid,.vs{grid-template-columns:1fr}
  .lyric-form{padding:22px}
  .lyric-form fieldset{grid-template-columns:1fr}
  .prose p,.prose li{font-size:17px}
}

/* added: quoted lyric in prose, guides hub */
.lyric-quote{font:italic 400 21px/1.7 var(--serif);color:var(--spruce);background:var(--sheet);border-left:3px solid var(--cranberry);margin:22px 0;padding:20px 26px}
.lyric-quote em{font-style:normal;font-family:var(--hand);font-size:28px;color:var(--cranberry-ink)}
.hub-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:40px}
.hub-list a{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;text-decoration:none;color:var(--ink);background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:16px}
.hub-list a:hover{border-color:var(--spruce)}
.hub-list img{width:120px;height:150px;object-fit:cover;border-radius:3px}
.hub-list strong{display:block;font:400 24px/1.2 var(--display)}
.hub-list span{display:block;color:var(--muted);font-size:15px;margin-top:8px}
@media(max-width:640px){.hub-list{grid-template-columns:1fr}.hub-list a{grid-template-columns:84px 1fr}.hub-list img{width:84px;height:105px}.lyric-quote{font-size:18px;padding:16px 18px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cf-turnstile{margin-top:18px;min-height:65px}
.result pre[contenteditable]:focus{outline:1px dashed var(--brass);outline-offset:8px}

/* inner pages: the header bar is spruce, so the wordmark must be light (content.css sets it to ink) */
.inner-head .wordmark{color:#F2F1EA}
.tool-hero::before{background-position:0 90px}
@media(max-width:980px){.guide-figure{max-width:300px}.rail h2{display:none}}
@media(max-width:640px){.guide-figure{max-width:220px}.lyric-quote em{font-size:23px}}