/* Fauji Funk v2: the notebook itself. Ruled paper with a red margin and punched holes, faint
   service doodles and paper grain, wavy pencil dividers, and the cover that swings open on the
   first page of a visit (the <head> snippet adds .ff-cover, js/mode.js opens it).
   Shared by the home page (css/v2.css) and every other page (css/sketch.css), which load after it. */

/* the handwriting, self-hosted (v2/fonts, SIL OFL): no render-blocking stylesheet from Google; ₹ lives in latin-ext */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/caveat-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/caveat-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/caveat-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/caveat-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/patrick-hand-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/patrick-hand-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --nb-paper: #fbf8f1;
  --nb-rule: rgba(105, 145, 196, .2);
  --nb-margin: rgba(214, 92, 84, .42);
  --nb-desk: #d6cdbb;                 /* what you see through a punched hole */
  --nb-hole-x: 22px;
  --nb-margin-x: 46px;
  --nb-doodles: url("../img/doodles-ink.svg");
  --nb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .13 0 0 0 0 .12 .5 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --nb-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8'%3E%3Cpath d='M0 4.2 C10 1.4 20 1.8 30 4.4 S50 6.8 60 3.9 S80 1.2 90 4.1 S110 6.6 120 4.2' fill='none' stroke='%2324221f' stroke-opacity='.38' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --nb-paper: #2a2e29;
  --nb-rule: rgba(150, 178, 214, .12);
  --nb-margin: rgba(230, 122, 110, .32);
  --nb-desk: #171a16;
  --nb-doodles: url("../img/doodles-chalk.svg");
  --nb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 .45 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --nb-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8'%3E%3Cpath d='M0 4.2 C10 1.4 20 1.8 30 4.4 S50 6.8 60 3.9 S80 1.2 90 4.1 S110 6.6 120 4.2' fill='none' stroke='%23f3eee2' stroke-opacity='.34' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nb-paper: #2a2e29;
    --nb-rule: rgba(150, 178, 214, .12);
    --nb-margin: rgba(230, 122, 110, .32);
    --nb-desk: #171a16;
    --nb-doodles: url("../img/doodles-chalk.svg");
    --nb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 .45 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --nb-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8'%3E%3Cpath d='M0 4.2 C10 1.4 20 1.8 30 4.4 S50 6.8 60 3.9 S80 1.2 90 4.1 S110 6.6 120 4.2' fill='none' stroke='%23f3eee2' stroke-opacity='.34' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* ---------- the page ---------- */

/* top to bottom: grain, doodles, punched holes, the red margin, the blue rules */
html body {
  background-color: var(--nb-paper);
  background-image:
    var(--nb-grain),
    var(--nb-doodles),
    radial-gradient(circle at var(--nb-hole-x) 64px, var(--nb-desk) 0 7px, rgb(0 0 0 / .1) 8px, transparent 9.5px),
    linear-gradient(to right, transparent var(--nb-margin-x), var(--nb-margin) var(--nb-margin-x), var(--nb-margin) calc(var(--nb-margin-x) + 1.6px), transparent calc(var(--nb-margin-x) + 1.6px)),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--nb-rule) 31px 32px);
  background-size: 240px 240px, 520px 520px, 100% 128px, 100% 12px, 100% 32px;
  background-repeat: repeat, repeat, repeat-y, repeat-y, repeat;
}

/* phones: no room for holes and a margin; the rules and doodles stay */
@media (max-width: 760px) {
  :root { --nb-hole-x: -40px; --nb-margin-x: -12px; }
}

/* a wavy pencil line, for dividers that used to be ruler-straight */
.nb-squiggle { height: 8px; background: var(--nb-squiggle) left center / 120px 8px repeat-x; border: 0; }

/* ---------- the cover: opens once per visit ---------- */

html.ff-cover { overflow: hidden; }
html.ff-cover::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  transform-origin: left center;
  background:
    /* the label sticker */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='190' viewBox='0 0 360 190'%3E%3Cpath d='M14 18 L346 10 L350 176 L10 182 Z' fill='%23fbf6e6' stroke='%2324221f' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M30 64 L330 60' stroke='%23d65c54' stroke-opacity='.5' stroke-width='1.5'/%3E%3Ctext x='180' y='52' text-anchor='middle' font-family='Marker Felt, Chalkboard SE, Comic Sans MS, cursive' font-size='22' fill='%237a7468'%3Efield notebook%3C/text%3E%3Ctext x='180' y='118' text-anchor='middle' font-family='Marker Felt, Chalkboard SE, Comic Sans MS, cursive' font-size='46' fill='%2324221f'%3EFauji Funk%3C/text%3E%3Ctext x='180' y='158' text-anchor='middle' font-family='Marker Felt, Chalkboard SE, Comic Sans MS, cursive' font-size='20' fill='%237a7468'%3Estyling the soldiers · since 2017%3C/text%3E%3C/svg%3E") center 42% / min(360px, 80vw) auto no-repeat,
    /* the elastic band */
    linear-gradient(to right, transparent calc(100% - 92px), #23261e calc(100% - 92px), #23261e calc(100% - 72px), transparent calc(100% - 72px)),
    /* canvas weave on olive cloth */
    repeating-linear-gradient(0deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .05) 0 2px, transparent 2px 5px),
    linear-gradient(135deg, #5d6b34, #47532a 60%, #3c4723);
  box-shadow: inset 18px 0 30px rgb(0 0 0 / .35);
  transition: transform 1s cubic-bezier(.6, .05, .4, 1), opacity .3s .8s;
  /* if js/mode.js never runs, the cover still gets out of the way */
  animation: ff-cover-safety 0s 3.5s forwards;
}
html.ff-cover.ff-open::before {
  transform: perspective(2200px) rotateY(-105deg);
  opacity: 0;
}
@keyframes ff-cover-safety { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  html.ff-cover::before { display: none; }
}