/* Silk tapestry, round 2: what all four prototypes share. Rice paper woven like silk, ink for text, pastel washes,
   amber and gold from Bo's amulet, one red seal. Paintings are ink-wash on white and sink into the silk with multiply. */
:root{
  --paper:#f6f1e6;--paper-2:#efe6d6;--ink:#23232b;--ink-2:#47464f;--sage:#a9b8a0;--sage-d:#4a5b45;--blush:#ecd3cc;
  --lavender:#ddd6e8;--jade:#cfe1d6;--amber:#c98a3a;--gold:#a87a26;--seal:#b5332e;--line:#d9cfbd;
  --display:"Marcellus",serif;--body:"Figtree",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1);--breath:cubic-bezier(.45,0,.25,1);
  --silk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,#fff0 0 2px,#8a7a5a0b 2px 3px),repeating-linear-gradient(90deg,#fff0 0 3px,#8a7a5a08 3px 4px);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;font-family:var(--body);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;background:var(--silk),linear-gradient(180deg,var(--paper),var(--paper-2))}
a{color:inherit}
.paint{mix-blend-mode:multiply;display:block;max-width:none;user-select:none;pointer-events:none}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:22px 40px;pointer-events:none}
.nav > *{pointer-events:auto}
/* a paper backing fades in behind the bar so scrolled text never runs under the logo */
.nav::before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;background:linear-gradient(180deg,#f6f1e6f5 62%,#f6f1e600);pointer-events:none}
.mark{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:21px;letter-spacing:.03em;text-decoration:none}
.lotus{width:34px;height:34px;color:var(--gold)}
.nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:15px;color:var(--ink-2)}
.nav ul a{text-decoration:none}
.menu{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:4px;background:#f6f1e6cc}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0}
h1{font-size:clamp(44px,6vw,88px);line-height:1.03;letter-spacing:-.005em}
h2{font-size:clamp(32px,4vw,52px);line-height:1.1}
.lede{font-size:19px;color:var(--ink-2);max-width:34ch;margin:24px 0 0}
.kicker{font-size:15px;color:var(--sage-d);margin:0 0 18px}
.ph{color:#64553f;background:#ece0c8;border-radius:4px;padding:0 6px;font-size:.9em}

/* the seal and the button */
.seal{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:40px;background:var(--seal);color:var(--paper);
  font-family:"Noto Serif SC",serif;font-weight:700;font-size:15px;line-height:1.02;border-radius:3px;box-shadow:inset 0 0 0 2px #f6f1e640;flex:none}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:7px 26px 7px 7px;border-radius:4px;background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:500;font-size:16px;box-shadow:0 10px 24px -14px #23232b99;transition:transform .6s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.link{font-weight:500;text-decoration:none;border-bottom:1px solid var(--ink-2);padding-bottom:2px}
.ctas{display:flex;align-items:center;gap:26px;margin-top:36px;flex-wrap:wrap}

/* gold key-fret from the amulet */
.fret{color:var(--gold)}

/* the "ways to practise" cards, shared */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.card{padding:30px 28px;border-radius:6px;background:#fbf8f2c4;box-shadow:0 0 0 1px var(--line),0 18px 40px -30px #5a4a2a55}
.card .tag{display:inline-block;font-size:14px;font-weight:500;color:var(--sage-d);margin-bottom:14px}
.card h3{font-size:27px;margin:0 0 8px}
.card p{margin:0;color:var(--ink-2);font-size:16px}
.card .price{margin-top:14px;font-weight:600;color:var(--ink)}
.card .price em{font-style:normal;font-weight:500;font-size:13px;color:#64553f;background:#ece0c8;border-radius:4px;padding:1px 6px;margin-left:6px}

/* the teacher strip: her directory photo is tiny, so it sits small and round in a gold ring */
.teacher{display:flex;gap:26px;align-items:flex-start;max-width:820px;margin:56px auto 0;padding:28px 30px;border-radius:6px;background:#fbf8f2c4;box-shadow:0 0 0 1px var(--line);text-align:left}
.portrait{width:104px;height:104px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 4px #fbf8f2,0 0 0 5.5px var(--gold)}
.teacher .tag{font-size:14px;font-weight:500;color:var(--sage-d)}
.teacher h3{font-size:28px;margin:2px 0 8px}
.teacher p{margin:0;color:var(--ink-2);font-size:16px}
.teacher .contact{margin-top:12px}
@media (max-width:820px){.teacher{flex-direction:column;align-items:center;text-align:center;padding:24px 20px}}
.lab-note{position:fixed;left:12px;bottom:12px;z-index:30;font:500 12px var(--body);color:var(--ink-2);background:#f6f1e6e6;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.shot .lab-note{display:none}

@media (max-width:820px){
  .nav{padding:16px 18px}.nav ul{display:none}.menu{display:inline-grid;place-items:center}
  .mark{font-size:19px}
  .lede{font-size:17px}
  .cards{grid-template-columns:1fr}
}