Draw the folded half of the letter with CSS

Users might wonder why they can’t see the whole letter. We should make
it obvious that it’s because the letter is folded. We can use CSS to
draw the bottom half of the page behind the top half. With some
transforms this makes it look like the letter is actually folded.

It’s a bit skeumorphic but:
- I think it achives the desired effect
- the way we show emails and text messages is also mildly skeuomorphic

app/assets/stylesheets/components/letter.scss

@@ -1,26 +1,61 @@
-$outline-width: 5px;
+$iso-paper-ratio: 70.7%;
 
 .letter {
 
   font-family: Helvetica, Arial, sans-serif;
-  box-shadow:
-  1px 1px 0 0 $panel-colour,
-  2px 2px 0 0 rgba($panel-colour, 0.5),
-  -1px 1px 0 0 $panel-colour,
-  -2px 2px 0 0 rgba($panel-colour, 0.5);
-  outline: $outline-width solid rgba($text-colour, 0.1);
   padding: 0;
-  margin: $outline-width $outline-width $gutter;
-  height: 50%;
-  overflow: hidden;
+  margin: 0 0 $gutter 0;
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    z-index: 10;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    height: 0;
+    padding: $iso-paper-ratio 0 0 0;
+    width: 100%;
+    background: $highlight-colour;
+    transform: skew(-1deg, 0deg) scale(1, 0.99);
+    transform-origin: left bottom;
+    box-shadow: inset 0 0 0 2px $panel-colour;
+
+  }
 
   a {
+
     display: block;
+    overflow: hidden;
+    width: 100%;
+    height: 0;
+    padding: $iso-paper-ratio 0 0 0;
+    position: relative;
+    z-index: 20;
+    transition: all 0.1s ease-out;
+
+    &:focus {
+
+      outline: none;
+      box-shadow: 0 3px 0 0 $yellow;
+
+      img {
+        box-shadow: inset 0 0 0 3px $yellow;
+      }
+
+    }
+
   }
 
   img {
     display: block;
-    max-width: 100%;
+    width: 100%;
+    background: $white;
+    box-shadow: inset 0 0 0 2px $panel-colour;
+    position: absolute;
+    top: 0;
+    left: 0;
   }
 
 }