/* The stylesheet every journal post shares.

   This sat inline, byte for byte identical, on 15 pages — 14204 bytes
   repeated 15 times, 194 KB of it redundant, and cached by the browser
   never, because it was part of the HTML rather than a file.

   Extracted verbatim on 25 Sep 2026. It was the FIRST stylesheet on all 15
   pages and the link replaces it in the same position, so every page-specific
   rule still comes after it and the cascade is unchanged. That ordering was
   checked on each page before extracting, not assumed. */
:root{
    --ink:#1F1D1B; --ink-soft:#4A4540; --ink-faint:#8A8279;
    --paper:#FFFFFF; --paper-2:#F7F5F2; --paper-3:#EFEAE3;
    --char:#1C1B1A; --char-2:#343028;
    --gold:#B08D4A; --gold-deep:#8A6A2E;
    --rule:#E7E2DA;
    --fd:Georgia,'Times New Roman',serif;
    --fs:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--fd);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
  a{color:var(--gold-deep)}
  h1,h2,h3{font-weight:700;line-height:1.14}
  .eyebrow{font-family:var(--fs);letter-spacing:.22em;text-transform:uppercase;
    font-size:.68rem;font-weight:700;color:var(--gold)}
  section{padding:78px 0;position:relative}
  .mast{position:relative;color:#fff;overflow:hidden;background:#1C1B1A}
  .mast::before{content:'';position:absolute;inset:0;
    background:linear-gradient(105deg,rgba(20,19,18,.95) 0%,rgba(22,21,19,.88) 46%,rgba(24,22,19,.56) 100%)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;flex-wrap:wrap;gap:14px}
  .brand{font-size:1.42rem;letter-spacing:.02em;color:#fff;text-decoration:none;font-weight:700}
  .brand span{color:var(--gold)}
  .brand small{display:block;font-family:var(--fs);font-size:.58rem;letter-spacing:.3em;
    text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:5px;font-weight:400}
  .links{font-family:var(--fs);font-size:.86rem;letter-spacing:.06em;text-transform:uppercase}
  .links a{color:rgba(255,255,255,.75);text-decoration:none;margin-left:30px;padding-bottom:5px;
    border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
  .links a:hover{color:#fff}
  .links a.on{color:#fff;border-bottom-color:var(--gold)}
  .phero{padding:56px 0 78px;max-width:720px}
  .phero h1{font-size:2.9rem;color:#fff;margin:18px 0 18px;letter-spacing:-.015em;text-shadow:0 2px 30px rgba(0,0,0,.4)}
  .phero p{font-size:1.12rem;color:rgba(255,255,255,.85)}
  .btn{display:inline-block;font-family:var(--fs);font-weight:700;font-size:.86rem;
    letter-spacing:.1em;text-transform:uppercase;padding:15px 32px;border-radius:2px;
    text-decoration:none;transition:background .15s,border-color .15s;margin-top:28px}
  .btn.solid{background:var(--gold);color:#171512}
  .btn.solid:hover{background:#c49f5d}
  .btn.line{border:1px solid rgba(255,255,255,.5);color:#fff;margin-left:12px}
  .head{max-width:660px;margin-bottom:42px}
  .head h2{font-size:2.1rem;margin:12px 0 14px}
  .head p{color:var(--ink-soft);font-size:1.03rem}
  footer{background:var(--char);color:rgba(255,255,255,.6);padding:46px 0;font-family:var(--fs);font-size:.83rem}
  footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
  footer a{color:rgba(255,255,255,.75);text-decoration:none;margin-right:22px}
  footer a:hover{color:#fff}
  @media(max-width:900px){
    .phero h1{font-size:2.1rem}
    .links a{margin:0 18px 0 0;display:inline-block}
    section{padding:56px 0}
  }


  .lead{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center;
    padding-bottom:46px;border-bottom:1px solid var(--rule);margin-bottom:46px}
  .lead .ph{aspect-ratio:3/2;overflow:hidden}
  .lead .ph img{width:100%;height:100%;object-fit:cover}
  .cat{font-family:var(--fs);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .lead h2{font-size:2rem;margin:10px 0 14px}
  .lead p{color:var(--ink-soft);font-size:1.04rem}
  .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
  .item .ph{aspect-ratio:3/2;overflow:hidden;margin-bottom:16px}
  .item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
  .item:hover .ph img{transform:scale(1.05)}
  .item h3{font-size:1.15rem;margin:9px 0 10px}
  .item p{color:var(--ink-soft);font-size:.94rem}
  .more{font-family:var(--fs);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
    text-decoration:none;display:inline-block;margin-top:12px;border-bottom:1px solid var(--gold);padding-bottom:2px}
  .soon{opacity:.55}
  .soon .ph{background:var(--paper-3)}
  .cats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
  .cats span{font-family:var(--fs);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    border:1px solid var(--rule);padding:8px 15px;color:var(--ink-faint)}
  .cats span.on{background:var(--char);color:#fff;border-color:var(--char)}
  .sub{background:var(--paper-2);padding:38px;text-align:center;margin-top:56px}
  .sub h3{font-size:1.5rem;margin-bottom:10px}
  .sub p{color:var(--ink-soft);max-width:480px;margin:0 auto 20px}
  .sub form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .sub input{font-family:var(--fd);font-size:1rem;padding:13px 15px;border:1px solid var(--rule);min-width:270px}
  .sub button{font-family:var(--fs);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
    padding:13px 26px;border:none;background:var(--char);color:#fff;cursor:pointer}
  @media(max-width:900px){ .lead,.grid{grid-template-columns:minmax(0,1fr)} }

  /* who is signed in, read from one ordinary key — no account code on this page */
  .whoami{display:none;align-items:center;gap:9px;margin-left:30px}
  .whoami.on{display:inline-flex}
  .whoami a{color:#fff;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:5px}
  .whoami .hi{color:rgba(255,255,255,.55);letter-spacing:.06em}
  @media(max-width:900px){ .whoami{margin:8px 0 0;width:100%} }

  /* a single post */
  .article{max-width:720px;margin:0 auto}
  .article .kicker{font-family:var(--fs);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .article h1{font-size:2.5rem;line-height:1.14;margin:14px 0 16px}
  .article .standfirst{font-size:1.18rem;color:var(--ink-soft);line-height:1.6;margin-bottom:26px}
  .article .byline{font-family:var(--fs);font-size:.8rem;color:var(--ink-faint);
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;margin-bottom:34px}
  .article figure{margin:0 0 34px}
  .article figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
  .article figcaption{font-family:var(--fs);font-size:.78rem;color:var(--ink-faint);margin-top:8px}
  .article h2{font-size:1.5rem;margin:38px 0 14px}
  .article p{font-size:1.06rem;line-height:1.75;margin-bottom:18px;color:var(--ink)}
  .article ul,.article ol{margin:0 0 20px 22px}
  .article li{font-size:1.04rem;line-height:1.7;margin-bottom:9px}
  .article table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-family:var(--fs);font-size:.92rem}
  .article th,.article td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule)}
  .article th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
  .article td b{font-weight:700}
  .pull{border-left:3px solid var(--gold);padding:4px 0 4px 20px;margin:26px 0;
    font-size:1.2rem;line-height:1.5;color:var(--char)}
  .tryit{background:var(--paper-2);padding:26px 28px;margin:34px 0}
  .tryit .eyebrow{margin-bottom:8px}
  .tryit p{font-size:1rem;margin-bottom:14px}
  .tryit a{font-family:var(--fs);font-weight:700;font-size:.78rem;letter-spacing:.12em;
    text-transform:uppercase;text-decoration:none;color:var(--char);border-bottom:2px solid var(--gold);padding-bottom:3px}
  .endnote{font-size:.92rem;color:var(--ink-faint);border-top:1px solid var(--rule);padding-top:18px;margin-top:40px}
  .backlink{font-family:var(--fs);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
    text-decoration:none;color:var(--ink-soft);display:inline-block;margin-bottom:8px}
  .backlink:hover{color:var(--char)}
  @media(max-width:900px){ .article h1{font-size:1.9rem} }

  /* ============================================================
     LIFE
     ------------------------------------------------------------
     The page had no motion at all — it arrived complete and sat there. These
     are small: sections rise as you reach them, the figures count themselves
     up the first time you see them, photographs breathe under the cursor.
     Every one of them is switched off entirely for anybody who has asked their
     machine to stop moving things, which is why none of it is decorative CSS
     on a timer — it all waits to be told.
     ============================================================ */
  .rise{opacity:0;transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
  .rise.in{opacity:1;transform:none}
  .rise.d1{transition-delay:.08s} .rise.d2{transition-delay:.16s} .rise.d3{transition-delay:.24s}

  /* a photograph in a frame should move a little slower than the frame */
  .ph, .fig, .shot{overflow:hidden}
  .ph img, .fig img, .shot img{transition:transform .9s cubic-bezier(.2,.7,.3,1)}
  .card:hover .ph img, .post:hover .ph img, .lead:hover .ph img,
  .item:hover .ph img, .fig:hover img{transform:scale(1.045)}

  .card, .item, .post{transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s}
  .card:hover, .item:hover{transform:translateY(-4px);
    box-shadow:0 18px 40px -18px rgba(31,29,27,.28)}

  /* The band of places the materials come from. It is a ten-column grid, so
     nothing can be given more room without moving everything; instead the one
     you are looking at comes forward and the other nine step back. */
  .band figure{position:relative;overflow:hidden}
  .band figure img{transition:transform .8s cubic-bezier(.2,.8,.3,1), filter .45s}
  .band:hover figure img{filter:saturate(.55) brightness(.7)}
  .band figure:hover img{transform:scale(1.12);filter:saturate(1.05) brightness(1)}
  .band figcaption{transition:letter-spacing .45s, color .3s, transform .45s}
  .band figure:hover figcaption{letter-spacing:.22em;color:#fff;transform:translateY(-2px)}

  .btn.solid, .btn.line{transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s,
                                   background .18s, color .18s, border-color .18s}
  .btn.solid:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(176,141,74,.65)}
  .btn.line:hover{transform:translateY(-2px)}

  /* the proof strip was the quietest text on the page; at least let it land straight */
  .strip b, .figures .n{font-variant-numeric:tabular-nums}

  @media(prefers-reduced-motion:reduce){
    .rise{opacity:1;transform:none;transition:none}
    .ph img,.fig img,.shot img,.card,.item,.post,.band figure img,.band figcaption{transition:none}
  }

  /* ============================================================
     Readability and touch — added 21 August after measuring the site
     rather than looking at it. Three findings drove all of it:

       · every footer link was 15 pixels tall on a phone, and every nav
         link 30. Apple and Google both ask for 44. A link you have to
         aim at is a link most people give up on.
       · the small uppercase labels — the eyebrows, the kickers, the
         captions — sat between 3.1 and 3.8 against their background.
         4.5 is the line at which text stops being decoration.
       · nothing showed a focus ring, so the site could not be used
         from a keyboard at all.

     It is deliberately the last block in the file so it wins without
     anybody having to unpick the rules above it.
     ============================================================ */
  :root{
    --ink-faint:#6F675E;      /* was #8A8279 — 3.78:1, below the line */
    --gold-deep:#7E6029;      /* the gold that survives a pale background */
  }
  /* gold is a light-on-dark colour; on paper it needs the deep one */
  main .eyebrow, section .eyebrow, article .eyebrow, .card .eyebrow,
  .kicker, .cat, .lvl, .stamp, .byline{ color:var(--gold-deep) }
  header .eyebrow, footer .eyebrow, .phero .eyebrow, .hero .eyebrow{ color:var(--gold) }

  /* nothing smaller than this, anywhere */
  .eyebrow, .kicker, .cat, .lvl{ font-size:.72rem }

  footer{ color:rgba(255,255,255,.78); font-size:.86rem }
  footer a{ color:rgba(255,255,255,.88) }

  /* a target you can actually hit with a thumb */
  @media(max-width:900px){
    .links a, footer a{
      display:inline-flex; align-items:center; min-height:44px;
      padding:0 4px; margin:0 14px 0 0;
    }
    .links a{ padding-bottom:2px }
    footer .wrap > div{ display:flex; flex-wrap:wrap; align-items:center }
  }

  /* the site could not be driven from a keyboard before this */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:2px;
    border-radius:2px;
  }
  header a:focus-visible, footer a:focus-visible{ outline-color:#fff }

  /* motion is a preference, not a given */
  @media(prefers-reduced-motion:reduce){
    *, *::before, *::after{
      animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important;
    }
  }

  /* These four carry the same job everywhere on the site — a small gold label
     over paper — and several pages reach them through a more specific selector
     than a bare class. This block is the readability floor, so it says so. */
  .kicker, .cat, .lvl, .n, .flab, .stamp, .byline{ color:var(--gold-deep) !important }
  header .eyebrow, footer .eyebrow, .phero .eyebrow, .hero .eyebrow{ color:var(--gold) !important }

  /* A long address or a compound material name has no space to break at, so it
     pushes the whole page sideways on a phone. support@craftedscent.company was
     doing exactly that on the contact page. */
  h1,h2,h3,h4,.libname,.nm,td,th{ overflow-wrap:anywhere }
  /* Wide tables scroll inside themselves rather than dragging the page with them */
  @media(max-width:760px){
    .tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -20px; padding:0 20px }
    .tw table{ min-width:520px }
  }

/* ============================================================
   Arabic, right to left.

   The Arabic posts are separate files at their own addresses, so they can be
   found by someone searching in Arabic. They link to this same stylesheet and
   carry dir="rtl" on <html>, which flips the flex and grid layouts by itself.
   What follows is only the handful of things direction alone does not fix:
   rules that name a physical side.

   Two things deliberately stay left to right inside an Arabic page. Numbers
   and percentages, because a dose written right to left is a different number.
   And material names, CAS numbers and trade names, because those are what you
   order and weigh by - the studio's own dictionary leaves them alone for the
   same reason, and a journal that translated them would teach the wrong word.
   ============================================================ */
[dir="rtl"] body{direction:rtl}

/* the masthead links and the account chip hang off the other side now */
[dir="rtl"] .links a{margin-left:0;margin-right:30px}
[dir="rtl"] .whoami{margin-left:0;margin-right:30px}
[dir="rtl"] .btn.line{margin-left:0;margin-right:12px}
[dir="rtl"] footer a{margin-right:0;margin-left:22px}

/* prose and tables read from the right */
[dir="rtl"] .article,[dir="rtl"] .article p,[dir="rtl"] .article li,
[dir="rtl"] .article h1,[dir="rtl"] .article h2,[dir="rtl"] .article h3{text-align:right}
[dir="rtl"] .article th,[dir="rtl"] .article td{text-align:right}

/* the pull quote's gold rule moves to the right edge with the text */
[dir="rtl"] .pull{border-left:0;border-right:3px solid var(--gold);
  padding:4px 20px 4px 0}

/* the off-screen honeypot must stay off-screen on this side too */
[dir="rtl"] .hp{left:auto;right:-9999px}

/* Numbers, doses, material names and anything Latin keeps its own direction
   inside Arabic prose. unicode-bidi:embed stops a trailing percent sign or a
   bracket from jumping to the wrong end of the run. */
[dir="rtl"] .num,[dir="rtl"] .mono,[dir="rtl"] .material,[dir="rtl"] .cas,
[dir="rtl"] code,[dir="rtl"] time{direction:ltr;unicode-bidi:embed;display:inline-block}

/* Arabic has no capitals, so the uppercase tracking used for English eyebrows
   and labels does nothing but add gaps between letterforms that should join. */
[dir="rtl"] .eyebrow,[dir="rtl"] .kicker,[dir="rtl"] .links,
[dir="rtl"] .btn,[dir="rtl"] footer{text-transform:none;letter-spacing:0}

/* a serif meant for Latin leaves Arabic to a fallback that may not match the
   page; naming the Arabic faces first keeps the body text deliberate */
[dir="rtl"] body,[dir="rtl"] .article{
  font-family:'Noto Naskh Arabic','Amiri','Scheherazade New',
              'Segoe UI',Tahoma,Georgia,serif;
  line-height:1.95}


/* The language switch: one word, naming the language you are NOT reading,
     written in that language. On an English page that is العربية; on an Arabic
     page it is English. Bordered rather than plain, because the first version
     of this sat in the footer and could not be found. */
  .langsw{display:inline-flex;align-items:center;margin-left:30px;
    font-family:var(--fs);font-size:.8rem;letter-spacing:.04em;text-transform:none;
    white-space:nowrap;vertical-align:middle}
  .langsw a{color:#fff;text-decoration:none;padding:4px 12px;border-radius:3px;
    border:1px solid rgba(176,141,74,.85);background:rgba(176,141,74,.16);
    transition:background .15s,border-color .15s,color .15s}
  .langsw a:hover{background:var(--gold,#B08D4A);border-color:var(--gold,#B08D4A);color:#17150F}
  .langsw a[lang="ar"]{font-size:.95rem}
  [dir="rtl"] .langsw{margin-left:0;margin-right:30px}
  @media(max-width:760px){ .langsw{margin-left:0;margin-top:8px} [dir="rtl"] .langsw{margin-right:0} }