/* Skill Cafe: a warm cafe interior, photographic welcome and paper menus. */
:root {
  --cream: #f8f3e9;
  --paper: #fffcf5;
  --ink: #513f34;
  --muted: #746358;
  --rose: #a35968;
  --pink: #efe0dc;
  --gold: #967447;
  --line: #ddd0be;
}
body {
  background-color: var(--cream);
  background-image: radial-gradient(ellipse at 12% 12%, #ffffff80, transparent 42%), radial-gradient(ellipse at 88% 40%, #e8d6bc25, transparent 45%);
  line-height: 2;
}
.section-shell { width: min(1120px, calc(100% - 80px)); }
.section-space { padding-top: 92px; padding-bottom: 92px; }
h1, h2 { letter-spacing: .065em; }
h2 { line-height: 1.75; }
.eyebrow { letter-spacing: .16em; color: var(--gold); }
.announcement { background: #eee3d2; color: #6f5842; border-bottom: 1px solid #e4d6c1; }
.site-header { background: #f8f3e9f5; border-color: #e3d6c3; }
.nav-wrap { width: min(1320px, calc(100% - 60px)); min-height: 84px; }
.brand { width: 180px; }
.desktop-nav { gap: 26px; }
.desktop-nav a { padding: 7px 0; }
.nav-quiz { border-radius: 40px; padding: 8px 20px; background: #fffaf0; }
.button { border-radius: 5px; box-shadow: 0 3px 0 #513f3410; }
.button.primary { background: var(--rose); }
.button.secondary { background: #f5ecdc; color: #715533; border-color: #b2946a; }
.text-link { border-color: #bc9c70; }

/* A photo print on the counter; retain all three women without cropping. */
.hero.section-shell { width: min(1320px, calc(100% - 80px)); }
.hero { grid-template-columns: .9fr 1.2fr; gap: 56px; padding-top: 60px; padding-bottom: 56px; }
.hero-copy { padding-left: 14px; }
.hero h1 { font-size: clamp(35px, 3.55vw, 50px); line-height: 1.75; letter-spacing: .035em; }
.hero-kicker { font-size: 12px; letter-spacing: .055em; margin-bottom: 18px; }
.hero .eyebrow { margin-bottom: 20px; font-size: 11px; }
.hero-description { color: var(--muted); line-height: 2.2; margin-top: 25px; }
.hero-description strong { font-size: 21px; line-height: 1.85; }
.hero-actions { margin-top: 28px; gap: 14px 22px; }
.hero-actions .button { font-size: 12px; gap: 17px; }
.hero-note { font-size: 11px; margin-top: 19px; }
.hero-visual { max-width: none; padding: 4px 8px 0 0; }
.photo-frame {
  border-radius: 5px; padding: 12px 12px 7px; border: 1px solid #ddc7a6;
  background: var(--paper); transform: rotate(-1.1deg);
  box-shadow: 0 16px 38px #5d432312, 4px 5px 0 #e8dac6;
}
.hero-visual .hero-photo {
  background-image: url('assets/cafe-hero-v5.webp'); background-size: cover; background-position: center;
  aspect-ratio: 3 / 2; border-radius: 2px; background-color: #e6d2b6;
}
.photo-caption { background: none; border: 0; padding: 0; margin: 15px auto 5px; font: 500 18px/1.6 var(--serif); color: #856441; letter-spacing: .08em; }
.photo-caption br { display: none; }
.opening-tag {
  margin: 22px auto 0; padding: 16px 27px; min-width: 0; background: #fbf6eb;
  border: 1px solid #d7c2a2; box-shadow: 0 8px 25px #6246220b; transform: rotate(1.5deg);
}
.opening-tag strong { font-size: 18px; line-height: 1.75; }
.opening-tag>span { color: #8e6d44; }
.hero-doodle { color: #b79562; font-size: 47px; right: -4px; top: -14px; }
.quick-join {
  max-width: 1120px; background: #fbf6eb; border: 1px solid #cdb591; border-radius: 4px;
  box-shadow: inset 0 0 0 6px #fffaf1; padding: 28px 36px; margin-bottom: 44px;
}
.quick-join h2 { font-size: 24px; }
.quick-join .eyebrow { margin-bottom: 6px; }
.values-strip { background: #e9dfcf; border-color: #dccbb3; padding: 23px 20px; gap: 49px; font-size: 16px; color: #765a3e; }

/* Give each story room, like pages in the cafe's notebook. */
.about { gap: 72px; }
.about-body { line-height: 2.25; font-size: 14px; }
.about-body .lead { font-size: 27px; }
.about-signature { color: #977549; padding-top: 20px; }
.why-section { background: #efe6d7; border-color: #e0d1bb; }
.why-heading h2 { line-height: 1.85; }
.why-copy { line-height: 2.25; }
.why-pillars article { border-top-style: double; border-top-width: 3px; padding-top: 20px; }
.why-message { color: #94616a; letter-spacing: .055em; }
.journey { background: #fcf8f0; }
.journey-card { border-radius: 3px; background: #eee8dc; padding: 30px 35px; }
.journey-card.after { background: #f4e8e2; border-color: #d7b8ad; }
.journey-card-head { border-color: #d5c4ae; }
.art-before, .art-after { border: 4px solid #fffaf0; box-shadow: 0 5px 14px #5543310c; }
.journey-card h3 { font-size: 24px; }

/* A paper menu, with generous type instead of course tiles. */
.skills-section { background: #f7f1e7; border-color: #e6d9c6; }
.section-heading { margin-bottom: 38px; }
.possibilities-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  background: var(--paper); border: 1px solid #cdb997; padding: 16px 20px;
  box-shadow: 0 10px 28px #684a2309;
}
.possibility { background: transparent; border: 0; border-radius: 0; padding: 26px 29px; }
.possibility:nth-child(odd) { border-right: 1px solid #e1d4bf; }
.possibility:nth-child(-n+2) { border-bottom: 1px solid #e1d4bf; }
.topic-art { max-width: 185px; width: 100%; margin: 0 0 20px; border-radius: 2px; }
.topic-no { letter-spacing: .16em; color: #927043; }
.possibility h3 { font-size: 25px; line-height: 1.8; margin: 10px 0 15px; }
.possibility>p { font-size: 13px; line-height: 2.15; }
.topic-tags { gap: 6px 14px; }
.topic-tags span { background: transparent; padding: 0; font-size: 11px; color: #936d54; border-bottom: 1px dotted #cbb49a; }
.theme-details { border-color: #cfba9a; margin-top: 26px; }
.theme-details summary { font-family: var(--serif); font-size: 17px; padding: 22px 5px; }
.theme-list>span { background: #eee4d2; padding: 10px 13px; }
.future-themes { background: #eee5d6; border-color: #d8c5a8; border-radius: 3px; }
.future-themes h3 { font-size: 25px; }
.future-theme-tags>span { background: #fffaf0; border-color: #cdb493; color: #805e42; }
.beyond-tools { background: #e9dfce; border-left: 3px solid #b09368; border-radius: 0; }
.beyond-tools>p { font-size: 20px; }
.image-note { font-size: 11px; line-height: 2; }
.fit-section { background: #eee7da; }
.fit-portrait { border-color: var(--paper); box-shadow: 0 4px 12px #5941280c; }
.fit-grid article { border-color: #cebea6; }
.fit-grid h3 { line-height: 1.8; }

/* Community and Lounge are two seats at the same table. */
.membership-card {
  background: var(--paper); border: 3px double #cbb18b; border-radius: 3px; padding: 36px;
  box-shadow: 0 10px 24px #63472209;
}
.membership-card.lounge-plan { background: #fbf0e8; border-color: #bd9290; }
.membership-card h3 { font-size: 38px; color: #715235; }
.membership-card h3>span { color: var(--muted); }
.membership-card .plan-label { color: #99764a; }
.membership-card .membership-price { color: #8f5863; }
.membership-card ul { line-height: 2.2; }
.bootcamp-feature { background: #f0e4dd; border-color: #d0b49c; border-radius: 4px; padding: 37px; }
.bootcamp-heading h3 { color: #8d5d5e; font-size: 30px; line-height: 1.85; }
.bootcamp-card { background: #fffaf1; border-color: #d3bc9c; border-radius: 3px; }
.bootcamp-card h4 { color: #624b36; line-height: 1.8; }
.bootcamp-output { border-color: #d8c5a9; }
.schedule-card { background: #f3e9d9; border-color: #cdb695; border-radius: 3px; }
.schedule-card.work-day { background: #f0e3dc; border-color: #d2b2a7; }
.schedule-label { color: #8b683c; }
.practice-note { margin-top: 34px; }

/* The little self-discovery corner in the cafe. */
.quiz-section { background: #fcf8ef; border-color: #e5d5bf; }
.quiz-card { background: #fffaf0; border-color: #c7ac83; box-shadow: 7px 7px 0 #e6d8c0; border-radius: 3px; padding: 35px 37px; }
.quiz-tabs { gap: 6px; }
.quiz-tabs>button { border-radius: 25px; background: #eee3d0; border-color: #ceb38d; font-size: 11px; }
.quiz-tabs>button[aria-selected=true] { background: var(--rose); border-color: var(--rose); }
.quiz-mode-label { color: #956068; border-color: #dbc8ac; }
.quiz-option { background: #fffdf7; border-color: #d7c5a9; border-radius: 4px; }
.quiz-option:hover { background: #f9eee5; }
.quiz-option:has(input:checked) { background: #f2e2db; border-color: var(--rose); }
.quiz-option input { width: 18px; height: 18px; margin-top: 3px; }
.quiz-ornament { color: #b19263; }
.result-recommendation { background: #eae0cf; }

/* The prices are readable like a cafe menu. */
.price-card { background: #fffaf1; border: 3px double #cfb993; border-radius: 3px; padding: 35px 38px 30px; }
.price-card.opening { background: #fcf0e7; border: 3px double #bf9992; }
.opening-ribbon { background: #a96870; border-radius: 0; font-size: 11px; }
.price-card h3 { color: #6b4e36; }
.saving { background: #edd9d7; }
.billing-toggle { background: #e9dcc7; border-color: #c8ad81; }
.billing-toggle button[aria-pressed=true] { background: #fffaf0; }
.comparison-table thead th { background: #e9ddc9; }
.comparison-table td:last-child { background: #f2e2db; }
.comparison-table th, .comparison-table td { border-color: #d7c5aa; }
.join-section { background: #f0e3dc; border-color: #d8c0ae; }
.join-steps>li { border-top-style: double; border-top-width: 3px; border-color: #baa17e; }
.line-entry { background: #fffaf1; border: 1px solid #cbb18a; border-radius: 4px; box-shadow: 0 7px 20px #62462709; }
.line-symbol { background: #7d8268; }
.operator-section { background: #f9f4e9; }
.operator-card { background: #fffaf1; border-color: #d0bb98; border-radius: 3px; }
.operator-card.project-card { background: #ece2d1; border-color: #c6ac83; }
.operator-message { border-color: #d1bc98; }
.faq-list, details { border-color: #d6c2a1; }
.closing { background: #705447; color: #fff8eb; padding: 83px 0; }
.closing .eyebrow { color: #d9bd86; }
.closing h2 { letter-spacing: .07em; }
.closing p:not(.eyebrow) { color: #ede0d0; }
.button.cream { background: #f7ecd7; color: #644a36; }
.footer { padding-top: 37px; padding-bottom: 37px; }
.footer-legal { border-color: #d4bea0; }
.mobile-bottom { background: #fffaf1; border-color: #c6a97d; }
.mobile-bottom a { border-color: #bfa06f; border-radius: 4px; }
.mobile-bottom a:last-child { background: var(--rose); border-color: var(--rose); }
.legal-page { background-color: #f8f3e9; }
.legal-shell { max-width: 940px; }
.policy-nav a { background: #fffaf1; border-color: #d2bc97; }
.policy-body { font-size: 14px; line-height: 2.15; }
.policy-body h3 { color: #614930; border-color: #d5bf9b; }
.policy-section { border-color: #d3bc96; }
.diagnosis-info { background: #fffaf1; border-color: #d2bc95; }

@media(max-width:1100px) {
  .hero { gap: 32px; grid-template-columns: 1fr 1.1fr; }
  .hero h1 { font-size: clamp(32px, 3.6vw, 42px); }
  .hero-copy { padding-left: 0; }
  .hero-description { font-size: 13px; }
  .hero-description strong { font-size: 19px; }
  .hero-note { font-size: 10px; }
  .photo-caption { font-size: 16px; }
  .possibility { padding: 25px; }
}
@media(max-width:850px) {
  .section-shell { width: calc(100% - 60px); }
  .hero.section-shell { width: calc(100% - 60px); }
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 45px; }
  .hero-copy { max-width: 640px; }
  .hero h1 { font-size: 43px; }
  .hero-visual { width: min(620px, 100%); justify-self: center; padding-right: 0; }
  .hero-description { font-size: 14px; }
  .hero-description strong { font-size: 22px; }
  .photo-caption { font-size: 18px; }
  .opening-tag { margin-top: 21px; }
  .quick-join { padding: 27px 30px; }
  .about { gap: 38px; }
  .membership-card { padding: 30px 27px; }
  .bootcamp-feature { padding: 30px; }
  .quiz-card { padding: 30px 27px; }
}
@media(max-width:600px) {
  body { font-size: 14px; }
  .section-shell, .hero.section-shell { width: calc(100% - 36px); }
  .section-space { padding-top: 62px; padding-bottom: 62px; }
  h2 { line-height: 1.8; }
  .nav-wrap { width: calc(100% - 28px); min-height: 68px; gap: 8px; }
  .brand { width: 140px; }
  .nav-quiz { font-size: 10px; padding: 6px 12px; }
  .hero { padding-top: 32px; padding-bottom: 32px; gap: 30px; }
  .hero-copy { padding: 0 3px; }
  .hero h1 { font-size: clamp(29px, 8.2vw, 40px); line-height: 1.75; }
  .hero .eyebrow { font-size: 10px; margin-bottom: 16px; }
  .hero-kicker { font-size: 10px; margin-bottom: 16px; }
  .hero-description { font-size: 13px; margin-top: 18px; }
  .hero-description strong { font-size: 20px; }
  .hero-actions { gap: 12px 20px; margin-top: 23px; }
  .hero-actions .button { font-size: 11px; padding: 13px 18px; gap: 15px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero-note { font-size: 10px; line-height: 1.9; }
  .hero-visual { padding: 0 3px; max-width: none; }
  .photo-frame { border-radius: 4px; padding: 8px 8px 6px; box-shadow: 0 9px 25px #5d432312, 3px 4px 0 #e8dac6; }
  .hero-visual .hero-photo { aspect-ratio: 3 / 2; border-radius: 1px; }
  .photo-caption { font-size: 13px; letter-spacing: .025em; margin: 12px auto 3px; line-height: 1.7; }
  .photo-caption br { display: block; }
  .opening-tag { margin-top: 18px; padding: 13px 22px; }
  .opening-tag strong { font-size: 17px; }
  .hero-doodle { font-size: 35px; top: -12px; right: -2px; }
  .quick-join { padding: 24px; margin-bottom: 30px; }
  .quick-join h2 { font-size: 22px; }
  .quick-join p:not(.eyebrow) { font-size: 12px; }
  .quick-join .quick-join-note { font-size: 11px!important; }
  .values-strip { font-size: 13px; padding: 18px 9px; gap: 16px; letter-spacing: .02em; }
  .about { gap: 24px; }
  .about-body { font-size: 13px; }
  .about-body .lead { font-size: 24px; }
  .why-copy { font-size: 13px; }
  .journey-card { padding: 25px 26px; }
  .possibilities-grid { grid-template-columns: 1fr; padding: 6px 18px; }
  .possibility { padding: 25px 5px; }
  .possibility:nth-child(odd) { border-right: 0; }
  .possibility { border-bottom: 1px solid #e1d4bf; }
  .possibility:last-child { border-bottom: 0; }
  .topic-art { max-width: 210px; margin-bottom: 20px; }
  .possibility h3 { font-size: 25px; }
  .possibility>p { font-size: 13px; }
  .topic-tags span { font-size: 11px; }
  .theme-details summary { font-size: 16px; padding: 19px 3px; }
  .theme-list>span { font-size: 11px; padding: 9px 10px; }
  .future-themes { padding: 25px; }
  .future-themes h3 { font-size: 24px; }
  .future-themes>div>p:not(.eyebrow) { font-size: 13px; }
  .beyond-tools { padding: 22px; }
  .beyond-tools>p { font-size: 21px; }
  .fit-grid h3 { font-size: 22px; }
  .membership-card { padding: 29px 25px; }
  .membership-card h3 { font-size: 36px; }
  .membership-card>p:not(.plan-label):not(.membership-price) { font-size: 13px; }
  .membership-card ul { font-size: 12px; }
  .membership-price { font-size: 19px; }
  .bootcamp-feature { padding: 29px 20px; }
  .bootcamp-heading h3 { font-size: 25px; }
  .bootcamp-card { padding: 25px 22px; }
  .bootcamp-card h4 { font-size: 23px; }
  .schedule-card { padding: 29px; }
  .quiz-card { padding: 27px 23px; }
  .quiz-tabs>button { font-size: 10px; padding: 10px 5px; }
  .quiz-option { font-size: 13px; padding: 14px 12px; }
  .price-card { padding: 30px 26px; }
  .opening-ribbon { font-size: 10px; }
  .price strong { font-size: 45px; }
  .join-steps h3 { font-size: 22px; }
  .line-entry { padding: 25px 22px; }
  .operator-card { padding: 27px; }
  .closing { padding: 64px 0; }
  .closing h2 { font-size: 29px; letter-spacing: .04em; }
  .footer { padding-top: 30px; padding-bottom: 30px; }
  .policy-body { font-size: 13px; line-height: 2.15; }
  .diagnosis-info p { font-size: 13px; }
}
@media(max-width:359px) {
  .section-shell, .hero.section-shell { width: calc(100% - 30px); }
  .hero h1 { font-size: 28px; }
  .hero-kicker { font-size: 9px; }
  .hero-description strong { font-size: 19px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { font-size: 10px; padding: 12px 14px; }
  .hero-actions .text-link { font-size: 10px; }
  .values-strip { font-size: 12px; gap: 10px; }
  .price strong { font-size: 41px; }
  .quiz-card { padding: 24px 19px; }
}