/*
Theme Name: Letters and Applications
Theme URI: https://lettersandapplications.com/
Author: Letters and Applications
Description: Modern letter studio: midnight-indigo hero with a violet glow and a live letter that fills in as you type, Plus Jakarta Sans for the interface, real letter sheets set in Karma inside soft rounded cards, a floating details card, search across every letter, and copy, Word and print on every sample.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lettersandapplications
*/

@font-face { font-family: "Jakarta"; src: url(assets/fonts/jakarta-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Jakarta"; src: url(assets/fonts/anek-devanagari.woff2) format("woff2"); font-weight: 100 800; font-stretch: 75% 125%; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Karma"; src: url(assets/fonts/karma-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Karma"; src: url(assets/fonts/karma-devanagari-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Karma"; src: url(assets/fonts/karma-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Karma"; src: url(assets/fonts/karma-devanagari-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

:root {
	--night: #0e0f2c; --night-2: #1a1b45; --violet: #6c47ff; --violet-2: #5534e6; --violet-l: #efeaff; --glow: #a48bff;
	--coral: #ff7a59; --canvas: #f5f4fb; --card: #ffffff; --ink: #16172e; --slate: #5b5e7a; --line: #e7e5f2;
	--r: 18px; --shadow: 0 1px 2px rgba(22, 23, 46, .06), 0 12px 32px -12px rgba(22, 23, 46, .18);
	--ui: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--letter: "Karma", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16.5px/1.65 var(--ui); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violet-2); text-underline-offset: 3px; }
a:hover { color: var(--violet); }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--ui); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: var(--ink); }
[lang="hi"] { line-height: 1.8; }
[lang="hi"] h1, [lang="hi"] h2, h1[lang="hi"] { letter-spacing: 0; line-height: 1.35; }
.la-wrap { width: min(1200px, 100% - 32px); margin: 0 auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 12px; }

/* header */
.la-top { background: var(--night); color: #fff; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.la-top-in { display: flex; align-items: center; gap: 24px; min-height: 66px; }
.la-logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: none; }
.la-logo span { font: 800 1.18rem/1 var(--ui); letter-spacing: -.02em; }
.la-logo i { font-style: normal; color: var(--glow); }
.la-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-left: auto; align-items: center; }
.la-nav::-webkit-scrollbar { display: none; }
.la-nav a { color: rgba(255, 255, 255, .78); text-decoration: none; white-space: nowrap; padding: 8px 12px; border-radius: 999px; font-size: .93rem; font-weight: 500; }
.la-nav a:hover, .la-nav a[aria-current] { color: #fff; background: rgba(255, 255, 255, .09); }
.la-nav .la-nav-all { background: var(--violet); color: #fff; margin-left: 6px; }
.la-nav .la-nav-all:hover { background: var(--violet-2); }

/* dark band used by the home hero and every page head */
.la-hero, .la-head { background: var(--night); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.la-hero::before, .la-head::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(60% 80% at 85% 10%, rgba(108, 71, 255, .55), transparent 60%), radial-gradient(40% 60% at 10% 100%, rgba(255, 122, 89, .22), transparent 60%); }
.la-hero::after, .la-head::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
	background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 44px 44px;
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.la-head { padding: 34px 0 96px; }
.la-head h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 10px 0 14px; max-width: 24ch; }
.la-crumbs { font-size: .88rem; color: rgba(255, 255, 255, .6); display: flex; flex-wrap: wrap; gap: 8px; }
.la-crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.la-crumbs a:hover { color: #fff; }
.la-head-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.la-head-meta span { font-size: .85rem; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .88); }

/* page body: floating details card + letters, pulled up over the dark band */
.la-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 36px; align-items: start; margin-top: -64px; position: relative; }
.la-side { position: sticky; top: 84px; }
.la-col { min-width: 0; }
.la-intro { background: var(--card); border-radius: var(--r); padding: 22px 26px; box-shadow: var(--shadow); color: var(--slate); font-size: 1.04rem; }
.la-intro p { margin: 0 0 .7em; max-width: 68ch; }
.la-intro p:last-child { margin: 0; }
.la-chips { display: flex; gap: 8px; overflow-x: auto; padding: 18px 2px 6px; scrollbar-width: thin; }
.la-chips a { flex: none; font-size: .88rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; white-space: nowrap; }
.la-chips a:hover { border-color: var(--violet); color: var(--violet-2); }

/* details card */
.la-fill { background: var(--card); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.la-fill-h { font: 800 1.1rem/1.2 var(--ui); letter-spacing: -.02em; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.la-fill-h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 5px var(--violet-l); flex: none; }
.la-fill label { display: block; margin: 0 0 10px; }
.la-fill label span { display: block; font-size: .8rem; font-weight: 600; color: var(--slate); margin-bottom: 4px; }
.la-fill input { width: 100%; font: 500 .98rem/1.3 var(--ui); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfbfe; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.la-fill input:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 4px var(--violet-l); background: #fff; }
.la-fill-more { margin: 2px 0 8px; }
.la-fill-more summary { cursor: pointer; color: var(--violet-2); font-size: .9rem; font-weight: 600; padding: 4px 0 10px; }
.la-fill-note { font-size: .82rem; color: var(--slate); margin: 6px 0 8px; line-height: 1.5; }
.la-clear { background: none; border: 0; padding: 0; color: var(--slate); font: 600 .85rem var(--ui); cursor: pointer; text-decoration: underline; }

/* one letter: a card with a header and the paper inside */
.la-piece { margin: 28px 0 0; scroll-margin-top: 90px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.la-piece-h { padding: 22px 26px 18px; }
.la-kind { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--violet-2); background: var(--violet-l); padding: 3px 10px; border-radius: 999px; }
.la-k-email .la-kind { color: #0b6b5f; background: #def7f1; }
.la-k-notice .la-kind { color: #a23b1d; background: #ffeee8; }
.la-piece h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: 10px 0 6px; }
.la-use { margin: 0; color: var(--slate); max-width: 70ch; }
.la-paper { background: linear-gradient(180deg, #f3f1fb, #eeebf8); padding: 26px 26px 18px; border-top: 1px solid var(--line); }
.la-sheet { background: #fff; font: 400 1.04rem/1.7 var(--letter); color: #1f2030; padding: 44px 52px 48px; border-radius: 6px; max-width: 760px; margin: 0 auto;
	box-shadow: 0 1px 1px rgba(22, 23, 46, .06), 0 18px 40px -18px rgba(22, 23, 46, .35); position: relative; }
.la-sheet > div { margin: 0 0 1.05em; }
.la-sheet .lt-subject { font-weight: 600; }
.la-sheet .lt-body p { margin: 0 0 .9em; }
.la-sheet .lt-closing { margin-top: 1.6em; }
.la-sheet .lt-sign { margin-bottom: 0; }
.la-sheet .lt-cc, .la-sheet .lt-enclosure { font-size: .94rem; color: #454760; }
[lang="hi"] .la-sheet { line-height: 1.9; }
.ph { color: var(--violet-2); background: var(--violet-l); border-radius: 5px; padding: 1px 5px; box-shadow: inset 0 -1.5px 0 rgba(108, 71, 255, .45); cursor: text; transition: background .2s; }
.ph.filled { background: transparent; box-shadow: inset 0 -1.5px 0 rgba(108, 71, 255, .25); padding: 1px 0; }
.ph:focus { outline: 2px solid var(--violet); outline-offset: 1px; background: #fff; }
.ph-static { color: var(--violet-2); }
.la-mail { padding-top: 0; overflow: hidden; }
.la-mail-bar { display: flex; gap: 6px; padding: 13px 0 11px 18px; margin: 0 -52px 16px !important; background: #f6f5fb; border-bottom: 1px solid var(--line); }
.la-mail-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d6ea; }
.la-mail-bar i:first-child { background: #ff7a59; } .la-mail-bar i:nth-child(2) { background: #ffc35a; } .la-mail-bar i:nth-child(3) { background: #3fcf8e; }
.la-mail .lt-to, .la-mail .lt-cc, .la-mail .lt-subject { margin: 0; padding: 7px 0; border-bottom: 1px solid #efedf7; font-family: var(--ui); font-size: .95rem; }
.la-mail .lt-subject + div { margin-top: 1.2em; }
.la-notice { border: 2px solid #1f2030; outline: 1px solid #1f2030; outline-offset: -8px; padding: 34px 42px; }
.la-notice .lt-org, .la-notice .lt-title, .la-notice .lt-heading { text-align: center; margin-bottom: .3em; font-weight: 600; }
.la-notice .lt-title { letter-spacing: .3em; text-decoration: underline; text-underline-offset: 4px; }
.la-notice .lt-heading { margin-bottom: 1em; }
.la-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 2px; max-width: 760px; }
.la-act button { display: inline-flex; align-items: center; gap: 8px; font: 600 .92rem/1 var(--ui); padding: 11px 18px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); transition: transform .12s, box-shadow .12s, background .12s; }
.la-act svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.la-act .la-copy { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 8px 18px -8px rgba(108, 71, 255, .8); }
.la-act button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(22, 23, 46, .45); }
.la-act .la-copy:hover { background: var(--violet-2); }
.la-act .la-copy.done { background: #12a37a; border-color: #12a37a; box-shadow: none; }

/* guides, tips, FAQ */
.la-k-guide, .la-k-list { padding: 26px 30px 24px; }
.la-k-guide h2, .la-k-list h2 { margin-top: 0; }
.la-text { max-width: 72ch; }
.la-text h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; letter-spacing: -.01em; }
.table-scroll { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: 12px; }
.la-text table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.la-text th, .la-text td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.la-text tr:last-child td { border-bottom: 0; }
.la-text th { font-weight: 700; background: #f7f6fc; }
.la-lines { padding-left: 1.2em; }
.la-lines li { margin: 0 0 6px; }
.la-tips { margin-top: 28px; background: var(--night); color: #e8e8f6; border-radius: var(--r); padding: 26px 30px 18px; position: relative; overflow: hidden; }
.la-tips::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(108, 71, 255, .6), transparent 70%); }
.la-tips h2 { color: #fff; font-size: 1.5rem; margin: 0 0 12px; position: relative; }
.la-tips ul { list-style: none; padding: 0; margin: 0; position: relative; }
.la-tips li { padding: 0 0 12px 32px; position: relative; }
.la-tips li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.la-faq { margin-top: 36px; }
.la-faq h2, .la-more h2 { font-size: 1.6rem; }
.la-faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 10px; }
.la-faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; position: relative; }
.la-faq summary::-webkit-details-marker { display: none; }
.la-faq summary::after { content: "+"; position: absolute; right: 16px; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: var(--violet-l); color: var(--violet-2); font: 700 1.1rem/26px var(--ui); text-align: center; transition: transform .2s; }
.la-faq details[open] summary::after { transform: rotate(45deg); }
.la-faq summary h3 { display: inline; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.la-faq details div p { margin: 0; padding: 0 20px 18px; color: var(--slate); }
.la-made { color: var(--slate); font-size: .88rem; margin: 22px 0 0; }
.la-more { margin: 48px 0 10px; }
.la-more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.la-more-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.la-more-list a { font-weight: 700; color: var(--ink); text-decoration: none; }
.la-more-list a::after { content: ""; position: absolute; inset: 0; }
.la-more-list li { position: relative; transition: border-color .15s, transform .15s; }
.la-more-list li:hover { border-color: var(--violet); transform: translateY(-2px); }
.la-more-list span { color: var(--slate); font-size: .82rem; white-space: nowrap; }
.la-ad { margin: 30px 0; text-align: center; }

/* home hero */
.la-hero { padding: 64px 0 80px; }
.la-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.la-hero h1 { color: #fff; font-size: clamp(2.5rem, 5.6vw, 4.4rem); margin: 0 0 18px; letter-spacing: -.04em; line-height: 1.02; }
.la-lead { font-size: 1.15rem; color: rgba(255, 255, 255, .78); max-width: 46ch; margin: 0 0 28px; }
.la-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 6px 8px 6px 16px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); max-width: 520px; }
.la-search svg { width: 20px; height: 20px; fill: none; stroke: var(--slate); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.la-search input { flex: 1; border: 0; font: 500 1.02rem var(--ui); padding: 12px 4px; outline: none; color: var(--ink); background: transparent; min-width: 0; }
.la-results { list-style: none; margin: 10px 0 0; padding: 6px; background: #fff; border-radius: 16px; max-width: 520px; max-height: 330px; overflow: auto; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); }
.la-results li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 12px; border-radius: 10px; position: relative; }
.la-results li:hover { background: var(--violet-l); }
.la-results a { color: var(--ink); font-weight: 700; text-decoration: none; }
.la-results a::after { content: ""; position: absolute; inset: 0; }
.la-results span { grid-column: 1; font-size: .84rem; color: var(--slate); }
.la-results b { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: .8rem; color: var(--violet-2); background: var(--violet-l); padding: 2px 8px; border-radius: 999px; }
.la-hero-demo { position: relative; }
.la-hero-demo .la-fill { position: absolute; left: -40px; bottom: -30px; width: 250px; z-index: 3; padding: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.la-hero-demo .la-fill-note, .la-hero-demo .la-clear, .la-hero-demo .la-fill-more { display: none; }
.la-hero-demo .la-piece { margin: 0 0 0 40px; transform: rotate(1.2deg); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); border: 0; }
.la-hero-demo .la-piece-h, .la-hero-demo .la-act { display: none; }
.la-hero-demo .la-paper { padding: 0; background: none; border: 0; }
.la-hero-demo .la-sheet { font-size: .9rem; padding: 32px 36px 90px; box-shadow: none; }
.la-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.la-cat { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); }
.la-cat-h { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; margin-bottom: 16px; }
.la-cat-i { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--violet), #9a7bff); display: grid; place-items: center; box-shadow: 0 10px 20px -10px rgba(108, 71, 255, .9); }
.la-cat-i svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.la-cat h2 { font-size: 1.25rem; margin: 0; }
.la-cat-h p { margin: 0; font-size: .85rem; color: var(--slate); }
.la-cat-l { display: flex; flex-wrap: wrap; gap: 8px; }
.la-cat-l a { font-size: .9rem; font-weight: 600; padding: 7px 12px; border-radius: 10px; background: #f6f5fb; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.la-cat-l a:hover { background: var(--violet-l); color: var(--violet-2); border-color: rgba(108, 71, 255, .3); }
.la-home .la-faq { max-width: 860px; margin: 56px auto 0; }

/* plain pages */
.la-plain { background: var(--card); padding: 34px 40px 40px; max-width: 860px; margin: 28px 0 40px; border-radius: var(--r); box-shadow: var(--shadow); }
.la-plain h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-top: 0; }
.la-plain .la-crumbs, .la-wrap > .la-crumbs { color: var(--slate); margin-top: 24px; }
.la-wrap > .la-crumbs a { color: var(--violet-2); }

/* footer */
.la-foot { background: var(--night); color: rgba(255, 255, 255, .7); margin-top: 80px; padding: 52px 0 0; font-size: .93rem; }
.la-foot-in { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
.la-foot p { margin: 0 0 10px; }
.la-foot nav p, .la-foot-name { font-weight: 800; color: #fff; letter-spacing: -.01em; }
.la-foot nav a { display: block; color: rgba(255, 255, 255, .7); text-decoration: none; padding: 3px 0; }
.la-foot nav a:hover { color: #fff; }
.la-legal { color: rgba(255, 255, 255, .45); font-size: .84rem; padding: 26px 0 30px; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 32px !important; }

@media (max-width: 1020px) {
	.la-layout { grid-template-columns: 1fr; gap: 0; }
	.la-side { position: static; order: 2; margin-top: 18px; }
	.la-col { display: contents; }
	.la-col > .la-intro { order: 1; }
	.la-col > .la-chips { order: 3; }
	.la-col > *:not(.la-intro):not(.la-chips) { order: 4; }
	.la-fill { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
	.la-fill-h, .la-fill-note, .la-clear, .la-fill-more { grid-column: 1 / -1; }
	.la-hero-in { grid-template-columns: 1fr; }
	.la-hero-demo { margin: 10px 0 30px; }
	.la-hero-demo .la-fill { position: relative; left: auto; bottom: auto; width: auto; margin: -40px 16px 0; display: block; }
	.la-hero-demo .la-piece { margin: 0; }
	.la-cats { grid-template-columns: 1fr 1fr; }
	.la-foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	body { font-size: 16px; }
	.la-top-in { flex-wrap: wrap; gap: 4px; padding: 10px 0 6px; min-height: 0; }
	.la-nav { margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px); }
	.la-head { padding: 22px 0 86px; }
	.la-intro { padding: 18px; }
	.la-piece-h { padding: 18px 18px 14px; }
	.la-paper { padding: 14px 10px 14px; }
	.la-sheet { padding: 24px 20px 28px; font-size: .98rem; }
	.la-mail-bar { margin: 0 -20px 14px !important; }
	.la-notice { padding: 24px 18px; }
	.la-fill { grid-template-columns: 1fr; }
	.la-k-guide, .la-k-list, .la-tips { padding: 20px 18px; }
	.la-cats { grid-template-columns: 1fr; }
	.la-plain { padding: 24px 18px; }
	.la-foot-in { grid-template-columns: 1fr; }
	.la-act button span { font-size: .88rem; }
}
@media print {
	.la-top, .la-foot, .la-side, .la-head, .la-act, .la-ad, .la-more, .la-faq, .la-tips, .la-made, .la-intro, .la-chips, .la-piece-h, .la-k-guide, .la-k-list { display: none !important; }
	body { background: #fff; }
	.la-layout { display: block; margin: 0; }
	.la-piece, .la-paper { box-shadow: none; border: 0; background: none; padding: 0; }
	.la-printing .la-piece:not(.la-print-me) { display: none; }
	.la-sheet { box-shadow: none; padding: 0; }
	.ph { background: none; box-shadow: none; color: inherit; }
}
.la-fill { color: var(--ink); }
.la-head .la-crumbs a { color: rgba(255, 255, 255, .82); }
.la-hero-demo .la-fill label:nth-of-type(n+4) { display: none; }
.la-hero-demo .la-fill { width: 240px; bottom: -24px; left: -56px; }
.la-hero-demo .la-fill-h { font-size: 1rem; }