/* savro.co — /jewelry-foundations and /de/schmuck-grundlagen only.
   A ten-minute primer on metals, settings, diamonds and colored stones, with line drawings.
   Everything is scoped to main.jf so nothing here can touch the rest of the site. */

/* chapter bar: sits under the site header, shows where you are and how far you've read */
.jf-nav{position:sticky;top:68px;z-index:15;background:rgba(255,249,234,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-s)}
.jf-nav .wrap{display:flex;gap:24px;height:46px;align-items:center;overflow-x:auto;scrollbar-width:none;font:500 13px/1 var(--fb);color:var(--t3)}
.jf-nav .wrap::-webkit-scrollbar{display:none}
.jf-nav a{text-decoration:none;white-space:nowrap;height:100%;display:flex;align-items:center;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.jf-nav a:hover{color:var(--t1)}
.jf-nav a.on{color:var(--t1);border-bottom-color:var(--ochre)}
.jf-nav .bar{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--ochre)}

.jf{--jt3:rgba(12,11,9,.6)}
.jf h2,.jf h3,.jf h4{font-family:var(--fd);font-weight:300;margin:0;text-wrap:balance}
.jf h3{font-size:clamp(23px,2.4vw,30px);line-height:1.2}
.jf h4{font-size:21px;line-height:1.25}
.jf p{margin:0;color:var(--t2)}
.jf ul{list-style:none;margin:0;padding:0}
.jf li{padding:12px 0;border-top:1px solid var(--line-s);color:var(--t2)}
.jf li:first-child{border-top:0;padding-top:0}
.jf li strong{font-weight:500;color:var(--t1)}
.jf .small{font-size:15px;line-height:1.5;color:var(--jt3)}

/* page head */
.jf-hero{padding-block:clamp(36px,5vw,64px) clamp(48px,5vw,72px)}
.jf-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,80px);align-items:center}
.jf-hero h1{font-family:var(--fd);font-weight:300;font-size:clamp(42px,5vw,64px);line-height:1.04;letter-spacing:-1.2px;margin:18px 0 0;text-wrap:balance}
.jf-hero h1 em{display:block;font-style:italic;color:var(--t2)}
.jf-hero figure{margin:0}
.jf-hero img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:var(--e-lift)}
.jf-hero .hero-note{margin-top:22px}
@media (max-width:900px){.jf-hero .wrap{grid-template-columns:minmax(0,1fr)}.jf-hero img{aspect-ratio:16/10}}

/* chapters */
.jf-sec{padding-block:clamp(56px,7vw,96px);border-top:1px solid var(--line);scroll-margin-top:114px}
.jf-sec.first{border-top:0;padding-top:clamp(24px,3vw,40px)}
.jf-head{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:baseline;margin-bottom:clamp(36px,4vw,52px)}
.jf-head .k{font:500 13px/1 var(--fb);color:var(--jt3);letter-spacing:.03em}
.jf-head h2{font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.6px}
.jf-head p{margin-top:16px;max-width:34em;font-size:19px;font-weight:300}
.jf-block{margin-top:clamp(56px,6vw,80px)}
.jf-block:first-of-type{margin-top:0}
.jf-block>h3{margin-bottom:10px}
.jf-block>.intro{max-width:38em;margin-bottom:28px}
.jf-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,56px)}
.jf-cols.wide{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.jf-cols>*{min-width:0}
.jf .label{margin-bottom:14px}

/* overview */
.jf-over h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-.4px}

/* line drawings */
.jf svg{display:block;overflow:visible;max-width:100%}
.jf .ln{fill:none;stroke:var(--umber);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.jf .ln.thin{stroke-width:.9;opacity:.55}
.jf .fl{fill:var(--sand);stroke:var(--umber);stroke-width:1.4;stroke-linejoin:round}
.jf .fl.light{fill:#F4EEDF}
.jf .fl.metal{fill:#D8CDB8}
.jf .acc-ln{fill:none;stroke:var(--ochre);stroke-width:2;stroke-linecap:round}
.jf .cap{font:400 12px/1 var(--fb);fill:var(--jt3)}
.jf .cap.b{fill:var(--t1);font-weight:500;font-size:13px}
.jf .cap.d{font-family:var(--fd);font-weight:300;font-size:22px;fill:var(--t1)}
.jf-figs{display:grid;gap:28px 32px}
.jf-figs.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.jf-figs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.jf-fig{border-top:1px solid var(--line);padding-top:14px}
.jf-fig .art{height:96px;display:flex;align-items:center;justify-content:center}
.jf-fig .art svg{height:100%;width:auto}
.jf-figs.settings .jf-fig .art{height:150px;justify-content:flex-start}
.jf-fig h4{margin:12px 0 6px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.jf-fig p{font-size:15px;line-height:1.5}
.jf-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.jf-scroll::-webkit-scrollbar{display:none}
.jf-scroll svg{width:100%;min-width:720px}

/* metals */
.jf-bars{display:grid;grid-template-columns:56px minmax(0,1fr) 64px;column-gap:16px;align-items:center;font-size:16px}
.jf-bars>div{padding:8px 0;border-top:1px solid var(--line-s)}
.jf-bars>div:nth-child(-n+3){border-top:0}
.jf-bars .k{font-family:var(--fd);font-weight:300;font-size:24px;color:var(--t1)}
.jf-bars .k.hi{color:var(--umber)}
.jf-pb{height:12px;background:var(--line-s);border-radius:2px;position:relative}
.jf-pb i{position:absolute;left:0;top:0;bottom:0;background:var(--stone);border-radius:2px}
.jf-pb.hi i{background:var(--ochre)}
.jf-bars .v{color:var(--jt3);font-variant-numeric:tabular-nums;text-align:right;font-size:14px;white-space:nowrap}
.jf-bars .d{grid-column:1/-1;padding:0 0 10px;border-top:0;font-size:15px;color:var(--jt3);margin-top:-6px}
.jf-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.jf-sw.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.jf-sw>div{border-top:1px solid var(--line);padding-top:14px}
.jf-sw i{display:block;width:40px;height:40px;border-radius:50%;margin-bottom:12px;box-shadow:inset -6px -6px 12px rgba(0,0,0,.08),inset 4px 4px 10px rgba(255,255,255,.7)}
.jf-sw h4{margin-bottom:6px}
.jf-sw p{font-size:15px;line-height:1.5}

/* diamonds */
.jf-4c>div{padding:16px 0;border-top:1px solid var(--line-s)}
.jf-4c>div:first-child{border-top:0;padding-top:0}
.jf-4c h4{font-size:24px;margin-bottom:6px}
.jf-4c h4 span{font:500 12px/1 var(--fb);color:var(--umber);background:rgba(217,190,132,.35);border-radius:999px;padding:5px 9px;margin-left:10px;vertical-align:middle;white-space:nowrap}
.jf-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:24px}
.jf-legend.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.jf-legend>div{border-top:1px solid var(--line);padding-top:12px}
.jf-legend h4{margin-bottom:6px}
.jf-legend p{font-size:15px;line-height:1.5}
.jf-cert{background:#FFFDF6;border:1px solid rgba(100,81,56,.3);border-radius:4px;padding:6px}
.jf-cert svg{width:100%}

/* colored stones */
.jf-val .r{display:grid;grid-template-columns:120px minmax(0,1fr) 70px;align-items:center;column-gap:20px;padding:14px 0;border-top:1px solid var(--line-s)}
.jf-val .r:first-child{border-top:0;padding-top:0}
.jf-val h4{font-size:22px}
.jf-val .pct{font-size:14px;color:var(--jt3);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.jf-val .d{grid-column:1/-1;font-size:15px;margin-top:6px}
.jf-photo{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;box-shadow:var(--e-raised);margin-top:32px}
.jf-oneline{font-family:var(--fd);font-weight:300;font-size:clamp(24px,2.6vw,30px);line-height:1.25;color:var(--t1) !important;max-width:18em;margin-top:28px !important}

/* booking prompts: hero buttons, one card at the end of the first two chapters */
.jf-hero .cta-row{margin-top:28px}
.jf-cta{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(56px,6vw,80px);
  padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,40px);background:var(--white);border:1px solid var(--line-s);border-radius:20px;box-shadow:var(--e-raised)}
.jf-cta p{font-size:16px;line-height:1.5;max-width:34em}
.jf-cta p.h{font-family:var(--fd);font-weight:300;font-size:clamp(22px,2.2vw,27px);line-height:1.2;color:var(--t1);margin-bottom:6px;text-wrap:balance}
.jf-cta .btn{flex:none}
.jf-cta{flex-wrap:wrap}
.jf-cta > div{flex:1 1 0;min-width:0}
.jf-cta .cta-ask{flex-basis:100%;margin:-8px 0 0;font-size:15px;text-align:right;max-width:none}   /* under the button: the quiet alternative to booking */
@media (max-width:760px){.jf-cta{flex-direction:column;align-items:stretch}.jf-cta .btn{justify-content:center}.jf-cta .cta-ask{margin:0;text-align:center}}

/* the crash course as a PDF */
.jf-pdf{padding-block:clamp(56px,7vw,88px);border-top:1px solid var(--line)}
.jf-pdf-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center;
  padding:clamp(26px,3.6vw,44px);background:var(--white);border:1px solid var(--line-s);border-radius:20px;box-shadow:var(--e-raised)}
.jf-pdf h2{font-family:var(--fd);font-weight:300;font-size:clamp(28px,3vw,38px);line-height:1.1;margin:12px 0 10px}
.jf-pdf-card > div > p{font-size:16px}
@media (max-width:900px){.jf-pdf-card{grid-template-columns:minmax(0,1fr)}}

/* print / PDF: the reading text only, no site navigation or buttons */
@media print{
  @page{size:A4;margin:14mm 12mm 16mm}
  html,body{background:#fff!important}
  *,*::before,*::after{background-image:none!important}   /* page gradients would be printed as one large image per page */
  .site-h,.jf-nav,.site-f,.mbar,.cb,.cd,.c-orb,.jf-cta,.jf-pdf,.jf-hero .cta-row,.jf-hero .hero-note,.jf-end .cta-row,.jf-end .cta-ask{display:none!important}
  .print-only{display:block!important;font-size:14px!important;color:var(--t2)!important;margin-top:18px!important}
  .rv,.rise{opacity:1!important;transform:none!important;animation:none!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:inherit!important;text-decoration:none!important}
  .jf-hero{padding-top:0}
  .jf-hero img{box-shadow:none}
  .jf-sec{padding-block:30px}
  .jf-sec:not(.first){break-before:page;border-top:0}
  .jf-cols{break-inside:avoid}
  .jf-head{break-after:avoid}
  .jf-block>h3,.jf-block>.intro{break-after:avoid}
  h2,h3,h4,p{break-inside:avoid}
  .jf-oneline{break-before:avoid}
  .jf-figs.settings{break-inside:avoid}
  .jf-fig,.jf-4c>div,.jf-legend>div,.jf-val .r,.jf-sw>div,.jf-bars,.jf-cert,.jf-scroll,.jf-photo,li{break-inside:avoid}
  .jf-scroll{overflow:visible}
  .jf-end{padding-block:36px;border-top:1px solid var(--line)}
}

/* closing */
.jf-end{padding-block:clamp(64px,8vw,112px);border-top:1px solid var(--line)}
.jf-end .wrap{max-width:860px}
.jf-end h2{font-family:var(--fd);font-weight:300;font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.6px;margin:14px 0 0}
.jf-end p{font-weight:300;font-size:19px;color:var(--t2);margin:20px 0 0;max-width:34em}
.jf-end .cta-row{margin-top:32px}
@media (max-width:560px){.jf-end .cta-row{flex-direction:column}.jf-end .cta-row .btn{justify-content:center}}

@media (max-width:900px){
  .jf-cols,.jf-cols.wide{grid-template-columns:minmax(0,1fr)}
  .jf-figs.four,.jf-figs.three,.jf-sw,.jf-legend,.jf-legend.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jf-sw.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jf-head{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media (max-width:560px){
  .jf-figs.three,.jf-legend,.jf-legend.three,.jf-sw.three{grid-template-columns:minmax(0,1fr)}
  .jf-figs.four,.jf-sw{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
  .jf-figs.four .jf-fig .art{height:72px;justify-content:flex-start}
  .jf-figs.settings .jf-fig .art{height:130px}
  .jf-val .r{grid-template-columns:92px minmax(0,1fr) 64px;column-gap:14px}
  .jf-nav{top:64px}
}
@media (max-width:400px){.jf-figs.four .jf-fig h4{font-size:18px}}
@media (prefers-reduced-motion:reduce){.jf-nav a{transition:none}}