/* Editorial homepage only. Product explanation pages use site.css.
   Read SITE_GUIDE.md before changing the visual system or page structure. */
html { background: #FAFAFA; }
html[data-theme="dark"] { background: #0E1117; }
body { margin: 0; }
#fff-turned-surface {
  --fff-blue: #245B78; --fff-yellow: #D9A62E; --fff-pale-blue: #F3F8FA;
  --fff-pale-yellow: #FFF9E8; --fff-paper: #FAFAFA; --fff-ink: #292526;
  --fff-soft: #5E5558; --fff-claret: #A4243A; --fff-radius: 10px; --fff-inset: 56px;
  --fff-hero: #245B78; --fff-on-hero: #FAFAFA; --fff-button-ink: #292526;
  --theme-border: #CBDDE5; --theme-ground: #FAFAFA; --theme-text: #245B78;
  --theme-hover: #E7F1F5; --theme-active: #245B78; --theme-active-text: #FFFFFF;
  --theme-focus: #245B78;
  color-scheme: light; color: var(--fff-ink); background: var(--fff-paper);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px; font-weight: 430; line-height: 1.6; isolation: isolate;
  padding-top: 2px;
}
html[data-theme="dark"] #fff-turned-surface {
  --fff-blue: #76B8DA; --fff-yellow: #F0C75E; --fff-pale-blue: #152A35;
  --fff-pale-yellow: #332C17; --fff-paper: #0E1117; --fff-ink: #F5F5F5;
  --fff-soft: #C9BFC2; --fff-claret: #E0708A; --fff-hero: #17445D;
  --fff-on-hero: #FFFFFF; --fff-button-ink: #0E1117;
  --theme-border: #334956; --theme-ground: #0E1117; --theme-text: #76B8DA;
  --theme-hover: #203B49; --theme-active: #76B8DA; --theme-active-text: #0E1117;
  --theme-focus: #76B8DA;
  color-scheme: dark;
}
#fff-turned-surface *, #fff-turned-surface *::before, #fff-turned-surface *::after { box-sizing: border-box; }
#fff-turned-surface a { color: inherit; text-decoration-line: none; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: 1px; text-underline-offset: 5px; }
#fff-turned-surface a:hover { text-decoration-line: underline; text-decoration-thickness: 2px; }
#fff-turned-surface h1, #fff-turned-surface h2, #fff-turned-surface h3, #fff-turned-surface p { margin: 0; }
#fff-turned-surface .fff-wrap { width: min(100% - 128px, 1184px); margin-inline: auto; }
#fff-turned-surface .fff-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 21px; }
#fff-turned-surface .fff-owner { color: var(--fff-blue); font-size: 15px; font-weight: 600; text-decoration: none; }
#fff-turned-surface .fff-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px 24px; }
#fff-turned-surface .fff-header nav { display: flex; gap: 28px; color: var(--fff-blue); font-size: 14px; }
#fff-turned-surface .fff-header a { display: inline-flex; align-items: center; min-height: 44px; }
#fff-turned-surface .fff-header nav a { text-decoration: none; }
#fff-turned-surface .fff-header a:hover { text-decoration: underline; }
#fff-turned-surface .fff-opening { padding-top: 25px; padding-bottom: 57px; }
#fff-turned-surface .fff-title-surface { position: relative; isolation: isolate; padding: 43px calc(var(--fff-inset) - 16px) 50px var(--fff-inset); margin-right: 32px; }
#fff-turned-surface .fff-title-surface::before, #fff-turned-surface .fff-title-surface::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--fff-radius); }
#fff-turned-surface .fff-title-surface::before { bottom: -14px; background: var(--fff-yellow); transform: translate(32px, 18px) rotate(.4deg); transition: transform 450ms cubic-bezier(.2,.7,.2,1); }
#fff-turned-surface .fff-title-surface::after { background: var(--fff-hero); transform: rotate(-1deg); }
#fff-turned-surface .fff-title-surface:hover::before { transform: translate(35px, 20px) rotate(.8deg); }
#fff-turned-surface h1 { font-size: clamp(38px, 6.55vw, 78px); line-height: 1.08; letter-spacing: -.055em; font-weight: 650; color: var(--fff-on-hero); white-space: nowrap; }
#fff-turned-surface .fff-period { color: var(--fff-yellow); }
#fff-turned-surface .fff-tagline { margin-top: 24px; font-size: clamp(14px, 2.15vw, 19px); line-height: 1.5; font-weight: 650; letter-spacing: -.012em; color: var(--fff-on-hero); white-space: nowrap; }
#fff-turned-surface .fff-introduction { margin: 62px 0 0 calc(var(--fff-inset) - 24px); padding: 22px 24px; max-width: calc(65ch + 48px); background: var(--fff-pale-yellow); border-radius: var(--fff-radius); font-size: 18px; line-height: 1.65; }
#fff-turned-surface .fff-section { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 32px; align-items: start; padding-bottom: 72px; scroll-margin-top: 24px; }
#fff-turned-surface .fff-section-number { color: var(--fff-claret); font-size: 13px; font-weight: 650; margin-bottom: 8px; }
#fff-turned-surface h2 { color: var(--fff-blue); font-size: 23px; font-weight: 650; line-height: 1.25; letter-spacing: -.035em; }
#fff-turned-surface .fff-section-content { position: relative; min-width: 0; }
#fff-turned-surface .fff-section-content::before { content: ""; position: absolute; top: 0; bottom: 0; left: -18px; width: 3px; background: var(--fff-yellow); }
#fff-turned-surface .fff-tools .fff-section-content::before { content: none; }
    #fff-turned-surface .fff-writing .fff-section-content, #fff-turned-surface .fff-about-copy { padding-left: 8px; }
#fff-turned-surface .fff-writing-intro { max-width: 70ch; font-size: 17px; line-height: 1.7; }
#fff-turned-surface .fff-writing-intro a { color: var(--fff-blue); font-weight: 650; }
#fff-turned-surface .fff-text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--fff-blue); }
#fff-turned-surface .fff-all-writing { margin-top: 12px; }

#fff-turned-surface .fff-tools-note { margin: 15px 0 0; color: var(--fff-soft); font-size: 14px; }
#fff-turned-surface .fff-tool-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
#fff-turned-surface .fff-tool { position: relative; padding: 29px 28px 24px; isolation: isolate; display: flex; flex-direction: column; }
#fff-turned-surface .fff-tool::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fff-pale-blue); border-top: 6px solid var(--fff-blue); border-radius: var(--fff-radius); }
#fff-turned-surface .fff-tool:nth-child(2)::before { background: var(--fff-pale-yellow); border-top-color: var(--fff-yellow); }
#fff-turned-surface .fff-tool .fff-kind { font-size: 13px; color: var(--fff-soft); line-height: 1.5; margin: 0 0 10px; }
#fff-turned-surface .fff-tool h3 { color: var(--fff-claret); font-size: 29px; line-height: 1.15; letter-spacing: -.04em; font-weight: 650; }
#fff-turned-surface .fff-tool p { margin-top: 15px; font-size: 15px; line-height: 1.65; }
#fff-turned-surface .fff-tool-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 24px; }
#fff-turned-surface .fff-open { display: inline-flex; align-items: center; background: var(--fff-yellow); color: var(--fff-button-ink); border-radius: 6px; min-height: 46px; padding: 9px 14px; font-size: 14px; font-weight: 600; text-decoration: none; }
#fff-turned-surface .fff-open:hover { text-decoration: none; background: color-mix(in srgb, var(--fff-yellow) 88%, var(--fff-ink)); }
#fff-turned-surface .fff-details { font-size: 14px; font-weight: 550; color: var(--fff-claret); display: inline-flex; align-items: center; min-height: 44px; }
#fff-turned-surface .fff-about-copy { position: relative; max-width: 66ch; }
#fff-turned-surface .fff-about-copy p { font-size: 17px; line-height: 1.75; }
#fff-turned-surface .fff-about-copy p + p { margin-top: 16px; }
#fff-turned-surface .fff-about .fff-text-link { margin-top: 14px; margin-right: 22px; }
#fff-turned-surface footer { border-top: 1px solid var(--fff-yellow); padding-block: 20px 24px; font-size: 13px; color: var(--fff-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 900px) {
  #fff-turned-surface { --fff-inset: 36px; }
  #fff-turned-surface .fff-wrap { width: calc(100% - 80px); }
  #fff-turned-surface .fff-header { padding-block: 12px; }
  #fff-turned-surface .fff-title-surface { padding-top: 39px; padding-bottom: 42px; }
  #fff-turned-surface .fff-section { grid-template-columns: 90px minmax(0,1fr); gap: 24px; }
  #fff-turned-surface .fff-section-content::before { left: -14px; }
  #fff-turned-surface .fff-tool { padding: 26px 22px 22px; }
}
@media (max-width: 700px) {
  #fff-turned-surface .fff-tagline { white-space: normal; font-size: 16px; text-wrap: balance; }
  #fff-turned-surface .fff-section { grid-template-columns: 1fr; gap: 23px; }
  #fff-turned-surface .fff-section-heading { display: flex; align-items: baseline; gap: 12px; }
  #fff-turned-surface .fff-section-number { margin-bottom: 0; }
  #fff-turned-surface .fff-section-content { position: relative; margin-left: var(--fff-inset); }
  #fff-turned-surface .fff-section-content::before { left: -12px; }
}
@media (max-width: 600px) {
  #fff-turned-surface { --fff-inset: 18px; }
  #fff-turned-surface .fff-wrap { width: calc(100% - 40px); }
  #fff-turned-surface .fff-header { gap: 6px 16px; flex-wrap: wrap; }
  #fff-turned-surface .fff-header-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  #fff-turned-surface .fff-owner { font-size: 14px; }
  #fff-turned-surface .fff-header nav { gap: 17px; font-size: 13px; }
  #fff-turned-surface .fff-opening { padding-top: 18px; padding-bottom: 42px; }
  #fff-turned-surface .fff-title-surface { padding: 32px 22px 35px; margin-right: 18px; }
  #fff-turned-surface .fff-title-surface::before { transform: translate(18px,16px) rotate(.4deg); }
  #fff-turned-surface .fff-title-surface:hover::before { transform: translate(21px,18px) rotate(.8deg); }
  #fff-turned-surface h1 { font-size: clamp(28px,8.25vw,48px); }
  #fff-turned-surface .fff-tagline { margin-top: 20px; }
  #fff-turned-surface .fff-introduction { font-size: 16px; margin-top: 50px; margin-left: calc(var(--fff-inset) - 16px); padding: 18px 16px; }
  #fff-turned-surface .fff-section { padding-bottom: 43px; }
  #fff-turned-surface h2 { font-size: 23px; }
  #fff-turned-surface .fff-tool-pair { grid-template-columns: 1fr; gap: 29px; }
  #fff-turned-surface .fff-writing-intro { font-size: 16px; }
  #fff-turned-surface .fff-tool { padding: 26px 22px 22px; }
  #fff-turned-surface .fff-tool-actions { gap: 5px 16px; }
  #fff-turned-surface .fff-about-copy p { font-size: 16px; }
  #fff-turned-surface footer { font-size: 12px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  #fff-turned-surface *, #fff-turned-surface *::before, #fff-turned-surface *::after { transition: none !important; }
}
  

#fff-turned-surface a:focus-visible { outline: 2px solid var(--fff-blue); outline-offset: 5px; }
#fff-turned-surface .fff-skip { position: absolute; left: 20px; top: -100px; z-index: 10; padding: 10px 16px; background: var(--fff-paper); color: var(--fff-blue); }
#fff-turned-surface .fff-skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) {
  #fff-turned-surface .fff-title-surface:hover::before { transform: translate(32px, 18px) rotate(.4deg); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  #fff-turned-surface .fff-title-surface:hover::before { transform: translate(18px, 16px) rotate(.4deg); }
}